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。