bootstrap响应式布局的实用类

实用类

        <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:在平板电脑上隐藏元素，在其他设备上显示元素