(五)Bootstrap 輔助組和響應式工具

weixin_34008784發表於2017-12-18

本節知識點

  • 輔助類
  • 響應式工具

(一) 輔助類

Bootstrap提供了一些細小的輔組樣式,用於文字顏色和背景色的設定,顯示關閉圖示等等。

(1) 情景文字顏色

    <p class="text-info">學習Bootstrap</p>
    <p class="text-danger">學習Bootstrap</p>
    <p class="text-warning">學習Bootstrap</p>
    <p class="text-success">學習Bootstrap</p>
    <p class="text-promary">學習Bootstrap</p>
    <p class="text-muted">學習Bootstrap</p>

(2) 背景色也一樣

    <p class="bg-info">學習Bootstrap</p>
    <p class="bg-danger">學習Bootstrap</p>
    <p class="bg-warning">學習Bootstrap</p>
    <p class="bg-success">學習Bootstrap</p>
    <p class="bg-promary">學習Bootstrap</p>

(3)關閉按鈕 close

<button class="close">X</button>

(4) 三角符號 caret

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

(5) 快速浮動

 <div class="pull-left"></div>
 <div class="pull-right"></div>

(6) 清理浮動
這個div可以放在需要清理浮動區塊的前面即可

<div class="clearfix"></div>

(7) 顯示和隱藏

 <div class="show"></div>
  <div class="hidden"></div>

(8) 響應式工具 visible ,hidden

    <div class="col-xs-5 visible-xs a">Bootstrap</div>
    <div class="visible-sm-block a">Bootstrap2</div>
    <div class="hidden-md a">Bootstrap3</div>

相關文章