一、文字

標題：

<h1>~<h6>/*逐漸字型大小由36px 30px 24px 18px 14px 12px*/

<small></small>/*副標題*/

強調內容:（,.lead）

<p class="lead"></p>

粗體：

<strong></strong>

斜體：

<i></i>
<em></em>

強調類名： .text-muted：提示，淺灰色 .text-primary：主要，藍色 .text-success：成功，淺綠色 .text-info：通知資訊，淺藍色 .text-warning：警告，黃色 .text-danger：危險，褐色

文字對齊方式： .text-left、.text-center、.text-right、 .text-justify

影象的樣式風格 1、img-responsive：響應式圖片，主要針對於響應式設計 2、img-rounded：圓角圖片 3、img-circle：圓形圖片 4、img-thumbnail：縮圖片

Bootstrap有200個icon圖示，通過加字首引入

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"
 
></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

二、列表

ol、ul、dl（有序、無序、定義列表） 去點列表（.list-unstyled）

<ul class="list-unstyled">
    <li>不帶專案符號</li>
    <li>不帶專案符號</li>
</ul>

內聯列表：（.list-inline）

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>    
</ul>

定義列表：（dl）

<dl>
    <dt>大標題</dt>
    <dd>描述</dd>
    <dt>大標題</dt>
    <dd>描述</dd>
</dl>

水平定義列表：（.dl-horizontal）

<dl class="dl-horizontal">
    <dt>標題一</dt>
    <dd>描述內容</dd>
    <dt>標題二</dt>
    <dd>描述內容</dd>    
</dl>

程式碼： 1、使用<code></code>來顯示單行內聯程式碼 2、使用<pre></pre>來顯示多行塊程式碼 3、使用<kbd></kbd>來顯示使用者輸入程式碼 注意：

元素一般用於顯示大塊的程式碼，並保證原有格式不變。但有時候程式碼太多，而且不想讓其佔有太大的頁面篇幅，就想控制程式碼塊的大小。你只需要在pre標籤上新增類名“.pre-scrollable”，就可以控制程式碼塊區域最大高度為340px，一旦超出這個高度，就會在Y軸出現滾動條。

表格 .table：基礎表格

.table-striped：斑馬線表格

.table-bordered：帶邊框的表格

.table-hover：滑鼠懸停高亮的表格

.table-condensed：緊湊型表格

.table-responsive：響應式表格 表格類名： .active、.success、.info、.warning、.danger可以配合表格屬性使用

三、表單

表單水平效果： 在<form>元素使用類名“.form-horizontal”;配合Bootstrap框架的網格系統使用

內聯表單效果： 在<form>元素使用類名“.form-inline”

注意：無論是哪種表單風格，請在表單控制元件的<div>中加屬性.form-control，也是為了樣式不出錯，也是為了讓表單控制元件呈現焦點狀態

下拉選擇框select Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設定multiple屬性的值為multiple

<form role="form">
  <div class="form-group">
      <select multiple class="form-control"> 
        <option>踢足球</option> 
        <option>游泳</option> 
        <option>慢跑</option> 
        <option>跳舞</option>  
    </select>
  </div>  
</form>   

文字域textarea 注意：對於文字域，一般設定rows可定義其高度，設定cols可以設定其寬度，但在bootstrap中無需設定cols屬性

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

表單控制元件(複選框checkbox和單選擇按鈕radio) 在bootstrap中關於單選複選框按照下面格式書寫

<form role="form">
    <div class="checkbox">
        <label>
        <input type="checkbox" value="">
        記住密碼
        </label>
    </div>
    <div class="radio">
        <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
        喜歡
        </label>
    </div>
    <div class="radio">
        <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
        不喜歡
        </label>
    </div>
</form>

複選框和單選按鈕水平排列 注意：如果checkbox和radio需要水平排列，在label標籤上新增類名“checkbox-inline”即可

<form role="form">
    <div class="form-group">
        <lable class="radio-inline">
            <input type="radio" value="option1" name="sex">男性  
        </lable>
         <lable class="radio-inline">
            <input type="radio" value="option2" name="sex">女性  
        </lable>
         <lable class="radio-inline">
            <input type="radio" value="option3" name="sex">保密  
        </lable>      
    </div>
</form>

表單控制元件禁用：disabled直接載入控制元件裡即可

<input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>

表單控制元件大小.input-lg

<input class="form-control input-lg" type="text" placeholder="新增.input-lg，控制元件變大">

表單顏色狀態 注意：若是想同時顯示小icon，則新增類名“has-feedback”，而且必須同時和以下類名配合使用 1、.has-warning:警告狀態（黃色） 2、.has-error：錯誤狀態（紅色） 3、.has-success：成功狀態（綠色）

<form role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功狀態</label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告狀態</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">錯誤狀態</label>
    <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>
</form>

表單提示資訊.help-block

<span class="col-xs-6 help-block">你輸入的資訊是正確的</span>

表單按鈕 注意：一般製作按鈕除了使用<button>標籤元素之外，還可以使用<input type="submit">、<a class="btn btn-default">a標籤按鈕</a>、<span class="btn btn-default">span標籤按鈕</span>、<div class="btn btn-default">div標籤按鈕</div> 以下是定製按鈕的集中型別：

 <button class="btn" type="button">基礎按鈕.btn</button>  
 <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> 

按鈕的大小：我們可以用.btn-lg（大型按鈕）、.btn-sm（小型按鈕）、.btn-xs（超小型按鈕）來控制，不加表示正常按鈕，其中需要按鈕寬度充滿整個父容器（width:100%），可以加屬性類名“btn-block”即塊狀按鈕。

按鈕的狀態：按鈕的活動狀態主要包括按鈕的懸浮狀態(:hover)，點選狀態(:active)和焦點狀態（:focus）幾種。按鈕還有禁用狀態 ： 方法1：在標籤中新增disabled屬性方法2：在元素標籤中新增類名“disabled”

<button class="btn:hover" type="button">基礎按鈕.btn</button>  
<button class="btn:active btn-default" type="button">預設按鈕.btn-default</button> 
<button class="btn:focus btn-primary" type="button">主要按鈕.btn-primary</button> 

四、網格系統

1、工作原理： 資料行(.row)必須包含在容器（.container）中。 在行(.row)中可以新增列(.column)，但列數之和不能超過平分的總列數，比如12。 具體內容應當放置在列容器（column）之內，而且只有列（column）才可以作為行容器(.row)的直接子元素。 當然，在一個列中新增一個或者多個行（row）容器，然後在這個行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時，就是當前外部列的寬度。這就是列的巢狀

<div class="container">
    <div class="row">
        <div class="col-md-8">
        我的裡面嵌套了一個網格
            <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
          </div>
        </div>
    <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">
    我的裡面嵌套了一個網格
        <div class="row">
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
        </div>
    </div>
    </div>
</div>

2、列偏移 只需要在列元素上新增類名“col-md-offset-*”(其中星號代表要偏移的列組合數)，那麼具有這個類名的列就會向右偏移。 使用”col-md-offset-*”對列進行向右偏移時，要保證列與偏移列的總數不超過12。

<div class="container">
    <div class="row">
        <div class="col-md-8">
        我的裡面嵌套了一個網格
            <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
          </div>
        </div>
        <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-8">
        我的裡面嵌套了一個網格
            <div class="row">
              <div class="col-md-4">col-md-4</div>
              <div class="col-md-4">col-md-4</div>
              <div class="col-md-4">col-md-4</div>
            </div>
        </div>
    </div>
</div>

2、列排序 看程式碼即可理解

<div class="container">
  <div class="row">
    <div class="col-md-1 col-md-push-11">.col-md-1</div>
    <div class="col-md-11 col-md-pull-1">.col-md-2</div>
  </div>
</div>