# 第 6 章 輔組類和響應式工具 ?**學習要點：** 1.輔組類 2.響應式工具 主講教師：李炎恢 本節課我們主要學習一下 Bootstrap 的輔組類和響應式工具， 輔助類提供了一組類來輔組頁面設計，而響應式工具則利用媒體查詢顯示或隱藏某些內容。 **一．輔助類** Bootstrap 在布局方面提供了一些細小的輔組樣式，用于文字顏色以及背景色的設置、顯示關閉圖標等等。 **1.情景文本顏色** ``` 樣式列表 樣式名 描述 text-muted 柔和灰 text-primary 主要藍 text-success 成功綠 text-info 信息藍 text-warning 警告黃 text-danger 危險紅 ``` //各種色調的字體 ``` <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.情景背景色** ``` 樣式列表 樣式名 描述 bg-primary 主要藍 bg-success 成功綠 bg-info 信息藍 bg-warning 警告黃 bg-danger 危險紅 ``` //各種色調的背景 ``` <p class="bg-primary">Bootstrap 視頻教程</p> <p class="bg-success">Bootstrap 視頻教程</p> <p class="bg-info">Bootstrap 視頻教程</p> <p class="bg-warning">Bootstrap 視頻教程</p> <p class="bg-danger">Bootstrap 視頻教程</p> ``` **3.關閉按鈕** ``` <button type="button" class="close">&times;</button> ``` **4.三角符號** ``` <span class="caret"></span> ``` **5.快速浮動** ``` <div class="pull-left">左邊</div> <div class="pull-right">右邊</div> ``` 注：這個浮動其實就是 float，只不過使用了!important 加強了優先級。 **6.塊級居中** ``` <div class="center-block">居中</div> ``` 注：就是 margin:x auto；并且設置了 display:block;。 **7.清理浮動** ``` <div class="clearfix"></div> ``` 注：這個 div 可以放在需要清理浮動區塊的前面即可。 **8.顯示和隱藏** ``` <div class="show">show</div> <div class="hidden">hidden</div> ``` **二．響應式工具** 在媒體查詢時，針對不同的屏幕大小，有時需要顯示和隱藏部分內容。響應式工具類，就提供了這種解決方案。  //超小屏幕激活顯示 ``` <div class="visible-xs-block a">Bootstrap</div> ``` //超小屏幕激活隱藏 ``` <div class="hidden-xs a">Bootstrap</div> ``` 注：對于顯示的內容，有三種變體，分別為：block、inline-block、inline。