bootstrap學習筆記

1.使用：
    <!-- 若是要使用Bootstrap的js插件，必須先調入jQuery -->
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
    <!-- 包括全部bootstrap的js插件或者能夠根據須要使用的js插件調用　-->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    寬度=設備寬，初始化縮放爲1，即不縮放
    <meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap框架在這一部分作了必定的變動，再也不一味追求歸零，而是更注重重置可能產生問題的樣式
        移除body的margin聲明
        設置body的背景色爲白色
        爲排版設置了基本的字體、字號和行高
        設置全局連接顏色，且當連接處於懸浮「:hover」狀態時纔會顯示下劃線樣式

2.控件
    使用了<small>標籤來製做副標題
    <h1>孤兒院無私奉獻30年
    <small>一曲人性的讚歌</small></h1>

    <p>我是一個段落，你猜我在Bootstrap是以什麼樣的風格顯示。</p>
    <p class="lead">這部份內容須要特別的強調，我和別人長得不同</p>
    <b>「強調」</b>一詞將會加粗顯示
    <strong>「強調」</strong>
    斜體<i>Bootstrap</i>

3.簡化類：
    .text-muted：提示，使用淺灰色（#999）
    .text-primary：主要，使用藍色（#428bca）
    .text-success：成功，使用淺綠色(#3c763d)
    .text-info：通知信息，使用淺藍色（#31708f）
    .text-warning：警告，使用黃色（#8a6d3b）
    .text-danger：危險，使用褐色（#a94442）

    爲了簡化操做，方便使用，Bootstrap經過定義四個類名來控制文本的對齊風格：
     .text-left：左對齊
     .text-center：居中對齊
     .text-right：右對齊
     .text-justify：兩端對齊


4.列表
    無序列表
        <ul>
            <li>…</li>
        </ul>
    有序列表
        <ol>
            <li>…</li>
        </ol>
    定義列表
        <dl>
            <dt>…</dt>
            <dd>…</dd>
        </dl>

    例：
        <ol>
            <li>有序項目列表一</li>
            <li>有序項目列表二</li>
                <ol class="list-unstyled">
                    <li>有序二級項目列表一</li>
                    <li>有序二級項目列表二</li>
                        <ul>
                            <li>無序三級項目列表一</li>
                            <li>無序三級項目列表二</li>
                                <ul class="list-unstyled">
                                    <li>無序四級項目列表一</li>
                                    <li>無序四級項目列表二</li>
                                </ul>
                            <li>無序三級項目列表三</li>
                        </ul>
                    <li>有序二級項目列表三</li>
                </ol>
            <li>有序項目列表三</li>
        </ol>

    總結：
        有序帶編號：ol>li
        有序無編號：ol.list-unstyled>li
        無序帶編號：ul>li
        無序無編號：ul.list-unstyled>li

    內嵌樣式：即平鋪
        <ul class="list-inline">

    列表--定義列表
        <dl>
            <dt>W3cplus</dt>
            <dd>一個致力於推廣國內前端行業的技術博客</dd>
            <dt>慕課網</dt>
            <dd>一個真心在作教育的網站</dd>
        </dl>

    列表--水平定義列表
        <dl class="dl-horizontal">

        一、使用<code></code>來顯示單行內聯代碼
        二、使用<pre></pre>來顯示多行塊代碼
        三、使用<kbd></kbd>來顯示用戶輸入代碼
        無論使用哪一種代碼風格，在代碼中碰到小於號（<）要使用硬編碼「&lt;」來替代，大於號(>)使用「&gt;」來替代。並且對於<pre>代碼塊風格，標籤前面留多少個空格，在顯示效果中就會留多少個空格。

    Y軸出現滾動條
        只須要在pre標籤上添加類名「.pre-scrollable」，就能夠控制代碼塊區域最大高度爲340px，一旦超出這個高度，就會在Y軸出現滾動條


5.表格：
    表格是Bootstrap的一個基礎組件之一，Bootstrap爲表格提供了1種基礎樣式和4種附加樣式以及1個支持響應式的表格
        .table：基礎表格
        .table-striped：斑馬線表格
        .table-bordered：帶邊框的表格
        .table-hover：鼠標懸停高亮的表格
        .table-condensed：緊湊型表格
        .table-responsive：響應式表格

    表格--表格行的類
        <tr class="active">
            <td>…</td>
        </tr>

    類名 描述
        .active 表示當前活動的信息
        .success 表示成功或者正確的行爲
        .info 表示中立的信息或行爲
        .warning 表示警告，須要特別注意

    基礎表格
        <table class="table">
    帶邊框的表格
        <table  class="table table-bordered">
          …
        </table>


6.表單：
    使用了類名「form-control」，將會實現一些設計上的定製效果。
        一、寬度變成了100%
        二、設置了一個淺灰色（#ccc）的邊框
        三、具備4px的圓角
        四、設置陰影效果，而且元素獲得焦點之時，陰影和邊框效果會有所變化
        五、設置了placeholder的顏色爲#999
    固然表單除了這幾個元素以外，還有input、select、textarea等元素，在Bootstrap框架中，經過定製了一個類名`form-control`，也就是說，若是這幾個元素使用了類名「form-control」，將會實現一些設計上的定製效果。

    自動隨着瀏覽頁面大小而垂直、水平
        一、在<form>元素是使用類名「form-horizontal」。
        二、配合Bootstrap框架的網格系統。

    內聯表單
        在<form>元素中添加類名「form-inline"
        若是你要在input前面添加一個label標籤時，會致使input換行顯示。若是你必須添加這樣的一個label標籤，而且不想讓input換行，你須要將label標籤也放在容器「form-group」中

    表單控件
        (輸入框input)
            爲了讓控件在各類表單風格中樣式不出錯，須要添加類名「form-control」
        (下拉選擇框select)
            多行選擇設置multiple屬性的值爲multiple
        (文本域textarea)
            <textarea class="form-control" rows="3">
        (複選框checkbox和單選擇按鈕radio)
            主要藉助「.checkbox」和「.radio」樣式
            一、不論是checkbox仍是radio都使用label包起來了
            二、checkbox連同label標籤放置在一個名爲「.checkbox」的容器內
            三、radio連同label標籤放置在一個名爲「.radio」的容器內
            在Bootstrap框架中，主要藉助「.checkbox」和「.radio」樣式，來處理複選框、單選按鈕與標籤的對齊方式。
        (複選框和單選按鈕水平排列)
            一、若是checkbox須要水平排列，只須要在label標籤上添加類名「checkbox-inline」
            二、若是radio須要水平排列，只須要在label標籤上添加類名「radio-inline」
        (按鈕)
            input[type=「submit」]
            input[type=「button」]
            input[type=「reset」]
            <button>

    表單控件大小
        用來控制表單控件的高度。這兩個類名是：
            一、input-sm:讓控件比正常大小更小
            二、input-lg:讓控件比正常大小更大


    表單控件狀態
        (焦點狀態)
            要讓控件在焦點狀態下有上面樣式效果，須要給控件添加類名「form-control」
        (禁用狀態)
            只須要在須要禁用的表單控件上加上「disabled」便可
        (驗證狀態)
            一、.has-warning:警告狀態（黃色）
            二、.has-error：錯誤狀態（紅色）
            三、.has-success：成功狀態（綠色）
            使用的時候只須要在form-group容器上對應添加狀態類名

    表單提示信息
        使用了一個"help-block"樣式，將提示信息以塊狀顯示，而且顯示在控件底部。


7.按鈕
    <button class="btn btn-default" type="button">默認按鈕.btn-default</button>
    <button class="btn btn-primary" type="button">主要按鈕.btn-primary</button>
    <button class="btn btn-success" type="button">成功按鈕.btn-success</button>
    <button class="btn btn-info" type="button">信息按鈕.btn-info</button> 
    <button class="btn btn-warning" type="button">警告按鈕.btn-warning</button>
    <button class="btn btn-danger" type="button">危險按鈕.btn-danger</button> 
    <button class="btn btn-link" type="button">連接按鈕.btn-link</button>
    <button class="btn btn-primary btn-lg" type="button">大型按鈕.btn-lg</button>
    <button class="btn btn-primary" type="button">正常按鈕</button>
    <button class="btn btn-primary btn-sm" type="button">小型按鈕.btn-sm</button>
    <button class="btn btn-primary btn-xs" type="button">超小型按鈕.btn-xs</button>

塊狀按鈕
    只須要在原按鈕類名上添加「.btn-block」類名，固然「.btn」類名是不可或缺的
    <button class="btnbtn-primary btn-xs btn-block" type="button">超小型按鈕.btn-xs</button> 

按鈕狀態——禁用狀態
    要禁用按鈕有兩種實現方式：
        方法1：在標籤中添加disabled屬性
        方法2：在元素標籤中添加類名「disabled」



8.圖像
    一、img-responsive：響應式圖片，主要針對於響應式設計
    二、img-rounded：圓角圖片
    三、img-circle：圓形圖片
    四、img-thumbnail：縮略圖片

圖標（一）
    <span class="glyphicon glyphicon-cloud"></span>

    經過設置內間距（padding）從而建立列與列之間的間距，而後經過爲第一列和最後一列設置負的外間距（margin）來抵消內間距（padding）的影響

列偏移
    須要在列元素上添加類名「col-md-offset-*」(其中星號表明要偏移的列組合數)，那麼具備這個類名的列就會向右偏移。例如，你在列元素上添加「col-md-offset-4」，表示該列向右移動4個列的寬度

列排序
    列排序其實就是改變列的方向，就是改變左右浮動，而且設置浮動的距離。在Bootstrap框架的網格系統中是經過添加類名「col-md-push-*」和「col-md-pull-*」 (其中星號表明移動的列組合數)。
        <div class="col-md-4  col-md-push-8">.col-md-4</div>
        <div class="col-md-8 col-md-pull-4">.col-md-8</div>

列的嵌套
    能夠在一個列中添加一個或者多個行（row）容器，而後在這個行容器中插入列（像前面介紹的同樣使用列）。但在列容器中的行容器（row），寬度爲100%時，就是當前外部列的寬度。


9.下拉菜單
    （基本用法）
        由於Bootstrap的組件交互效果都是依賴於jQuery庫寫的插件，因此在使用bootstrap.min.js以前必定要先加載jquery.min.js纔會生效果
            一、使用一個名爲「dropdown」的容器包裹了整個下拉菜單元素，示例中爲:
                <div class="dropdown"></div>
            二、使用了一個<button>按鈕作爲父菜單，而且定義類名「dropdown-toggle」和自定義「data-toggle」屬性，且值必須和最外容器類名一致，此示例爲:
                data-toggle="dropdown"
            三、下拉菜單項使用一個ul列表，而且定義一個類名爲「dropdown-menu」，此示例爲:
                <ul class="dropdown-menu">
                
    （原理分析）
        經過js技術手段，給父容器「div.dropdown」添加或移除類名「open」來控制下拉菜單顯示或隱藏。也就是說，默認狀況，「div.dropdown」沒有類名「open」，當用戶第一次點擊時，「div.dropdown」會添加類名「open」；當用戶再次點擊時，「div.dropdown」容器中的類名「open」又會被移除

    （下拉分隔線）
        添加一個空的<li>，而且給這個<li>添加類名「divider」來實現添加下拉分隔線的功能

    （菜單標題）
        <li role="presentation" class="dropdown-header">第一部分菜單頭部</li>

    （對齊方式）
        若是你想讓下拉菜單相對於父容器右對齊時，能夠在「dropdown-menu」上添加一個「pull-right」或者「dropdown-menu-right」類名