網址：
bootstrap中文網
 菜鳥教程

css部分

默認容器

container/container-fluid

網格系統

col：列；row：行
* 超小屏幕：.col-xs-
* 小型屏幕：.col-sm-
* 中型屏幕：.col-md-
* 大型屏幕：.col-lg-

列偏移

.col-md-offset-

標題

bootstrap重新定義了標題標籤，small作爲內聯子標籤

列表

// 內聯列表
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

表格

.table使用boostrap表格樣式
.table-striped：表格條紋
.table-bordered：添加邊框
.table-hover：劃過顏色
.table-condensed：行內邊距更加緊湊
.table-responsive：響應式表格

tr上添加類名可以改變顏色：active、success、 warning、danger

表單

向父元素添加 role=”form”。
把標籤和控件放在一個帶有 class .form-group 的 *
中。這是獲取最佳間距所必需的。
向所有的文本元素、和添加 class =”form-control” 。

//基礎表單入門
<form role="form">
  <div class="form-group">
    <label for="name">名稱</label>
    <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
  </div>
  <div class="form-group">
    <label for="inputfile">文件輸入</label>
    <input type="file" id="inputfile">
    <p class="help-block">這裏是塊級幫助文本的實例。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">請打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

內聯表單：標籤添加 class .form-inline
水平表單：
1. 向父元素添加class.form-horizontal
  2.把標籤和控件放在一個帶有class.form-group的
  中。
  3.向標籤添加 class .control-label。

// 水平表格
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="請輸入名字">
    </div>
  </div>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">姓</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="lastname" placeholder="請輸入姓">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox">請記住我
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">登錄</button>
    </div>
  </div>
</form>

按鈕

.btn 爲按鈕添加基本樣式
.btn-default 默認/標準按鈕
.btn-primary 原始按鈕樣式（未被操作）
.btn-success 表示成功的動作
.btn-info 該樣式可用於要彈出信息的按鈕
.btn-warning 表示需要謹慎操作的按鈕
.btn-danger 表示一個危險動作的按鈕操作
.btn-link 讓按鈕看起來像個鏈接 (仍然保留按鈕行爲
.btn-lg 製作一個大按鈕
.btn-sm 製作一個小按鈕

<!-- 標準的按鈕 -->
<button type="button" class="btn btn-default">默認按鈕</button>
<!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表示一個成功的或積極的動作 -->
<button type="button" class="btn btn-success">成功按鈕</button>
<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>
<!-- 表示應謹慎採取的動作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個危險的或潛在的負面動作 -->
<button type="button" class="btn btn-danger">危險按鈕</button>
<!-- 並不強調是一個按鈕，看起來像一個鏈接，但同時保持按鈕的行爲 -->
<button type="button" class="btn btn-link">鏈接按鈕</button>

圖片

.img-rounded：添加 border-radius:6px 來獲得圖片圓角。
.img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
.img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。
.img-responsive：響應式

輔助類

文本

text-muted “text-muted” 類的文本樣式
.text-primary “text-primary” 類的文本樣式
.text-success “text-success” 類的文本樣式
.text-info “text-info” 類的文本樣式
.text-warning “text-warning” 類的文本樣式
.text-danger “text-danger” 類的文本樣式

背景

.bg-primary 表格單元格使用了 “bg-primary” 類
.bg-success 表格單元格使用了 “bg-success” 類
.bg-info 表格單元格使用了 “bg-info” 類
.bg-warning 表格單元格使用了 “bg-warning” 類
.bg-danger 表格單元格使用了 “bg-danger” 類

響應式

.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

下拉菜單

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主題
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">數據挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">數據通信/網絡</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分離的鏈接</a>
        </li>
    </ul>
</div>

按鈕組

// 基礎按鈕組
<div class="btn-group">
    <button type="button" class="btn btn-default">按鈕 1</button>
    <button type="button" class="btn btn-default">按鈕 2</button>
    <button type="button" class="btn btn-default">按鈕 3</button>
</div>

垂直按鈕組：class .btn-group-vertical

輸入框組

。。。

導航元素

以一個帶有 class .nav 的無序列表開始
表格導航：class .nav-tabs

<p>標籤式的導航菜單</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

膠囊導航：class .nav-pills
垂直導航：class .nav-stacked
兩端對齊：class .nav-justified
禁用連接：.disabled class

導航欄

向
標籤添加 class .navbar、.navbar-default。
向上面的元素添加 role=”navigation”，有助於增加可訪問性。
向
元素添加一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的元素。這會讓文本看起來更大一號。
爲了嚮導航欄添加鏈接，只需要簡單地添加帶有 class .nav、.navbar-nav 的無序列表即可。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">標題</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的鏈接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一個分離的鏈接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

分頁

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

徽章

<span class="badge">50</span>

超大屏幕

<div class="container">
   <div class="jumbotron">
        <h1>歡迎登陸頁面！</h1>
        <p>這是一個超大屏幕（Jumbotron）的實例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
        學習更多</a>
      </p>
   </div>
</div>

頁面標題

給標題添加適當間隙

<div class="page-header">
    <h1>頁面標題實例
        <small>子標題</small>
    </h1>
</div>

進度條

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

多媒體對象

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
             alt="媒體對象">
    </a>
    <div class="media-body">
        <h4 class="media-heading">媒體標題</h4>
        這是一些示例文本。這是一些示例文本。
        這是一些示例文本。這是一些示例文本。
        這是一些示例文本。這是一些示例文本。
        這是一些示例文本。這是一些示例文本。
        這是一些示例文本。這是一些示例文本。
    </div>
</div>

面板

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            帶有 title 的面板標題
        </h3>
    </div>
    <div class="panel-body">
        面板內容
    </div>
</div>

js插件

模態框

<h2>創建模態框（Modal）</h2>
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4>
            </div>
            <div class="modal-body">在這裏添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>