Bootstrap(6)輔組類和響應式工具

一．輔助類

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

1.情景文本顔色

各種色調的字型

<p class="text-muted">柔和灰</p>
    <p class="text-primary">主要藍</p>
    <p class="text-success">成功綠</p>
    <p class="text-info">資訊藍</p>
    <p class="text-warning">警告黃</p>
    <p class="text-danger">危險紅</p>      

情景背景色

各種色調的背景

<p class="bg-primary">主要藍</p>
<p class="bg-success">成功綠</p>
<p class="bg-info">資訊藍</p>
<p class="bg-warning">警告黃</p>
<p class="bg-danger">危險紅</p>      

關閉按鈕，一般都是在右邊

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

.三角符号

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

快速浮動

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

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

塊級居中

<div class="center-block" style="500px;height:50px;border: 1px solid #ccc;text-align: center;">
居中
</div>      

注：就是 margin:x auto；并且設定了 display:block;。它是整個div居中，如果要div的内容居中則設定text-align: center;

顯示和隐藏

<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。