之前學(xué)了一點(diǎn)bootstrap框架的基本知識，學(xué)習(xí)之余做了一點(diǎn)筆記，以防忘記~

1）加載順序
1. 加載Bootstrap層疊樣式表：bootstrap.min.css
2. jQuery庫，同時(shí)加載該庫必須在加載bootstrap.min.js之前: jquery.min.js
3. 加載bootstrap的核心js庫 bootstrap.min.js

2. 字體圖標(biāo)
   使用<span>標(biāo)簽 在里面添加class="字體圖片對應(yīng)的類名" 即可

3） 按鈕
一般按鈕類寫法 <button type="button" class="btn btn-default">按鈕</button>
其中有幾種類型的按鈕 分別顯示不同的顏色或樣式：
① class="btn btn-default" 默認(rèn)按鈕
② class="btn btn-primary" 藍(lán)色按鈕
③ class="btn btn-success"綠色成功按鈕
④class="btn btn-danger" 紅色危險(xiǎn)按鈕
⑤ class="btn btn-warning" 橙色警告按鈕
⑥ class="btn btn-info" 淺藍(lán)信息按鈕
⑦ class="btn btn-link" 鏈接按鈕

按鈕大小：大 btn-lg 正常按鈕 btn-default 小 btn-sm 特小 btn-xs

4）下拉菜單
定義dropdown類

<div class="dropdown">
    <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <!-- 下拉選項(xiàng)標(biāo)題 -->
      <li class="dropdown-header">Dropdown header</li>
      <!-- 下拉選項(xiàng) -->
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <!-- 設(shè)置禁用點(diǎn)擊 -->
      <li class="disabled"><a href="#">Something else here</a></li>
      <!-- 分割線 -->
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
 </div>

5）下拉菜單
使用方法：
在使用Bootstrap框架中的下拉菜單組件時(shí)，其結(jié)構(gòu)運(yùn)用的正確與否非常的重要，如果結(jié)構(gòu)和類名未使用正確，直接影響組件是否能正常運(yùn)用。我們來簡單的看看：
1、使用一個(gè)名為"dropdown"的容器包裹了整個(gè)下拉菜單元素，示例中為:

     <div class="dropdown"></div>

2、使用了一個(gè)<button>按鈕做為父菜單，并且定義類名“dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類名一致，此示例為:

data-toggle="dropdown"

3、下拉菜單項(xiàng)使用一個(gè)ul列表，并且定義一個(gè)類名為“dropdown-menu”，此示例為:

     <ul class="dropdown-menu">

6） A. 內(nèi)聯(lián)表單
這個(gè)能使表單在一行排列，外層form 用 class="form-inline" 包裹 內(nèi)層各個(gè)部件用 div class="form-group"建立一個(gè)表單組
①【一定要添加label標(biāo)簽否則瀏覽器無法識別 】
② input標(biāo)簽 class="form-control"

B. 水平排列的表單
通過為表單添加 .form-horizontal 類，并聯(lián)合使用 Bootstrap 預(yù)置的柵格類，可以將 label 標(biāo)簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無需再額外添加.row了。
內(nèi)層各個(gè)部件用div class="form-group"
① label class="control-label col-sm-2" 運(yùn)用到了柵欄系統(tǒng)后面會(huì)講解
② 輸入框 div class="col-sm-10" input class="form-control"

7）圖片
①圓角圖片：img-rounded 圓形圖片：img-circle 外層有白邊：img-thumbnail
②清除浮動(dòng)

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

③塊元素居中：

class="center-block