第6章 輔助類和響應式工具

本節課我們主要學習一下 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。      

轉載于:https://www.cnblogs.com/Xuman0927/p/5829622.html