Bootstrap 組件

Bootstrap是一個HTML/CSS/JS框架，簡化移動設備優先的響應式頁面開發，主要涉及：

 HTML:爲已有的標籤添加了一些新屬性 data-*

 CSS:重設了HTML標籤的屬性、聲明瞭很多class

 JS:添加了jQuery插件

主要分爲四個部分：

  (1)全局CSS樣式

容器、按鈕、圖片、文本、背景、浮動、排版、柵格系統、表格、表單

  (2)組件

  (3)jQuery插件

  (4)定製

 

 

Bootlint：由Bootstrap官方提供的，一個用於檢測Bootstrap使用方式是否正確的小工具，可以用於項目開發階段。

 

1. 全局CSS樣式——表格

     .table

    .table-bordered         表格帶外框

    .table-condensed              表格中的單元格變緊湊

    .table-striped            表格中的數據行隔行變色

     .table-hover               表格中的數據行懸停變色

    .table-responsive              用於<table>的父元素！當表格一行中的內容顯示不下時，會顯示橫向的滾動條。

    -------------------------------

     .active         用於tr/td，背景色變爲“激活色”(淺灰色)

     .success      用於tr/td，背景色變爲“成功色”(色)

     .danger              用於tr/td，背景色變爲“危險色”(色)

     .warning      用於tr/td，背景色變爲“警告色”(色)

     .info            用於tr/td，背景色變爲“提示色”(色)

    

    

2. 全局CSS樣式——表單

    .form-group    用於input和label的共同父元素  margin-bottom: 15px;

    .form-group-lg 大號的輸入框

    .form-group-sm   小號的輸入框

    .checkbox            用於<input type="checkbox">的父容器(div)上！對其中的label文字作了設定

    .checkbox-inline

    .radio                  用於<input type="radio">的父容器(div)上！對其

   中的label文字作了設定

    .radio-inline

    .form-inline          用於form元素，實現輸入域處於一行內

   -----------------------------------------------------

   ----表單相關class小結--------

   <form class="[] |form-horizontal | form-inline">

     <divclass="form-group has-error|has-success|has-warning">

   <labelclass="control-label col-*-*"for=""></label>

   <inputclass="form-control">

   <pclass="help-block">用戶名已被佔用</p>

     </div>

   </form>

    

   午間練習：

    

3. Bootstrap組件(Component)——字體圖標

     提示：Bootstrap官方借用了Glyphicon Halflings提供的字體圖標文件，無需使用圖片就可以文字的形式顯示出260+圖標——可以任意的放大縮小、或者字體顏色。

    

4. Bootstrap組件——下拉菜單

     注意！下拉菜單必需至少三級結構：

     <div id="父級容器">

   <button>觸發元素</button>

   <div>目標元素</div>

     </div>

   目標元素的隱藏和顯示必需要通過JavaScript來實現。

   <div class="dropdown">

   <buttondata-toggle="dropdown"></button>

   <ulclass="dropdown-menu">

   <li><a href="#"></a></li>

   <li class="dropdown-header">北京市</li>

   <li class="divider"></li>

   </ul>

   </div>

    

    

5. Bootstrap組件——按鈕組

     有兩種按鈕組：

   .btn-group                   水平放置的多個按鈕

   .btn-group-vertical       豎直放置的多個按鈕

     每一種按鈕組又可以聲明大小號：

   .btn-group-lg

   .btn-group-sm

   .btn-group-xs

    ---------------------------------------

       .btn-group.btn-group-justified  對於使用a實現的按鈕組可以實現佔滿一整行的效果。

    

6. Bootstrap組件——輸入框組

     <divclass="input-group">

   <spanclass="input-group-addon">請輸入：</span>

   <inputclass="form-control">

   <spanclass="input-group-btn">

   <button class="btn btn-default">搜索</button>

   </span>

     </div>