bootstrap响应式布局的实用类

来源：互联网发布：华为性格测试知乎编辑：程序博客网时间：2024/05/22 00:12

实用类

        <div class="container">        <h1 class="page-header">响应式布局的实用类<small>bootstrap网格系统布局</small></h1>            <div class="row">                <div class="page-header clearfix">                    <div class="span4  visible-phone"><img alt="智能手机" src="img/phon.jpg"/></div>                    <div class="span4"><img alt="平板电脑" src="img/ceDiImbvUjI.jpg"/></div>                    <div class="span4 "><img alt="桌面电脑" src="img/256.png"/></div>                </div>            </div>        </div>

上面代码：在visible-phone这个属性表示在智能手机上显示元素，在其他设备上隐藏元素。按照屏幕的大小来划分是桌面电脑，平板电脑，手机。

visible-desktop:在桌面电脑设备上显示元素，在其他设备上隐藏元素
visible-phone:在智能手机上显示元素，在其他设备上隐藏元素
visible-tablet:在平板电脑上显示元素，在其他设备上隐藏元素

hidden-desktop:在桌面电脑设备上隐藏元素，在其他设备上显示元素
hidden-phone:在智能手机上隐藏元素，在其他设备上显示元素
hidden-tablet:在平板电脑上隐藏元素，在其他设备上显示元素

0 0