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

水之原發表於2016-04-24

 學習要點：

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。

相關文章