bootstrap的辅助类

1、.hidden-lg、.hidden-md、.hidden-sm、.hidden-xs

.hidden-lg:大屏幕（>=1200px时）隐藏

.hidden-md:中等屏幕（>=992px时）隐藏

.hidden-sm:小屏幕（>=768px时）隐藏

.hidden-xs:超小屏幕（<768px时）隐藏

需要让哪一部分隐藏，只需给相应的标签添加对应的类即可

如：

<div class="item active">
            <a href="#" class="large_screen hidden-sm hidden-xs"></a>
            <a href="#" class="mobile_a hidden-lg hidden-md"><img src="images/slide_01_640x340.jpg" alt=""></a>

 </div>

第一个a标签将在超小屏幕和小屏幕上隐藏，而在中等屏幕和大屏幕上会显示出来；

第二个a标签将在大屏幕和中等屏幕上隐藏，而在小屏幕和超小屏幕上会显示出来。

2、快速浮动

可以使用class .pull-left和.pull-right让元素快速浮动（其中pull-left是让元素左浮动，pull-right是让元素右浮动）

如：

<div class="box">
    <div class="pull-left">
        向左浮动
    </div>
    <div class="pull-right">
        向右浮动
    </div>
</div>

 3、元素居中

给相应元素添加类center-block来让元素快速居中

如：

<div class="center-block" style="background-color: red;width:200px;height:30px;margin-top:30px;text-align: center;line-height: 30px">
    这是center-block实例
</div>

4、清除浮动

给元素添加类 clearfix来清除浮动

<div class="box clearfix">
    <div class="pull-left">
        向左浮动
    </div>
    <div class="pull-right">
        向右浮动
    </div>
</div>

 

转载于:https://www.cnblogs.com/qingqing-0919/p/8043438.html