一．輔助類

Bootstrap 在布局方面提供了一些細小的輔組樣式，用於文字顏色以及背景色的設置、 顯示關閉圖標等等。

1.情景文本顏色

<p class="text-muted">Bootstrap 視頻教程</p>
<p class="text-primary">Bootstrap 視頻教程</p>
<p class="text-success">Bootstrap 視頻教程</p>
<p class="text-info">Bootstrap 視頻教程</p>
<p class="text-warning"
 
>Bootstrap 視頻教程</p>
<p class="text-danger">Bootstrap 視頻教程</p>

2.情景背景色

3.關閉按鈕

<button type="button" class="close">&times;</button>

4.三角符號

<span class="caret"></span>

5.快速浮動

• 這個浮動其實就是 float，只不過使用了!important 加強了優先級。

  <style>
        .a 
 
{
            height: 50px;
            width: 200px;
            border: 1px solid #ccc;
            background-color: #eee;
        }
    </style>

<div class="pull-left a">左邊</div>
<div class="pull-right a">右邊</div> 

6.塊級居中

 <div class="center-block">居中</div>
 

註：就是 margin:x auto；並且設置了 display:block;

7.清理浮動

<div class="pull-left a">左邊</div>
<div class="clearfix"></div>
<div class="a">右邊</div>

8.顯示和隱藏

<div class="show">show</div> 

<div class="hidden">hidden</div>

二、響應式工具

在媒體查詢時，針對不同的屏幕大小，有時需要顯示和隱藏部分內容。響應式工具類， 就提供了這種解決方案。

註：對於顯示的內容，有三種變體，分別為：block、inline-block、inline

• 超小屏幕激活顯示

<div class="visible-xs-block a">Bootstrap</div>

• 如上圖，只有超小屏幕才能夠顯示div裏的內容，如果是大/中/小屏則不顯示。

• 超小屏幕激活隱藏

<div class="hidden-xs a">Bootstrap</div>

• 如上圖，如果是超小屏則不會顯示div的內容。

（五） 輔組類和響應式工具