一．文本
1）對齊方式
text-left 文本左對齊 =======> text-align：left
text-center 文本居中對齊
text-right 文本右對齊
text-justify 文本兩端對齊
text-nowrap 不換行
text-lowercase 小寫
text-uppercase 大寫
text-capitalize 首字母大寫

2）文本顏色
text-muted 灰色
text-primary 主要藍
text-success 成功綠
text-info 信息藍
text-warning 警告黃
text-danger 危險紅

3）背景顏色
bg-muted 灰色
bg-primary 主要藍
bg-success 成功綠
bg-info 信息藍
bg-warning 警告黃
bg-danger 危險紅

二．頁面排版
1）列表排版
ul的類
list-unstyled 移除默認樣式
list-inline 設置成內(nèi)聯(lián)

dl類
dl-horizontal 水平排列描述列表 定義列表

2）table表格
table 基本的表格樣式
table-striped 條紋狀表格（前提必須現(xiàn)有table類）
table-bordered 給表格增加邊框（前提必須現(xiàn)有table類）
table-hover 讓<tbody>下的表格懸停鼠標實現(xiàn)背景效果（前提必須現(xiàn)有table類）

可以給tr加上以下任意一種類實現(xiàn)每一行的顏色不一樣
<tr class=”success”></tr>
狀態(tài)類
樣式 說明
active 鼠標懸停在行或單元格上
success 標識成功或積極的動作
info 標識普通的提示信息或動作
warning 標識警告或需要用戶注意
danger 表示危險或潛在的帶來負面影響的動作

<tr class="sr-only"> 隱藏行

3）form表單
內(nèi)聯(lián)表單
form類
form-inline 讓表單左對齊浮動

水平排列
form類
form-horizontal 讓表單內(nèi)的元素保持水平排列

form-group 表單成組顯示 成組里的表單也可以用柵格系統(tǒng)
form-control 可以給表單里的任何標簽加
<div class="form-group">
<label>電子郵件</label>
<input type="email" class="form-control" placeholder="請輸入您的電子郵件">
</div>

表單合組
input-group input-group-addon
前后增加片段
<div class="input-group">
<div class="input-group-addon">￥</div>
<input type="text" class="form-control">
<div class="input-group-addon">.00</div>
</div>

disabled 禁用

表單校驗狀態(tài)
<div class=“form-group has-error”>

樣式 說明
has-error 錯誤狀態(tài)
has-success 成功狀態(tài)
has-warning 警告狀態(tài)

可以在表單后加上校驗狀態(tài)小圖標 例如：校驗成功 后面顯示一個對勾
form-control-feedback
<div class="form-group has-feedback">
<label>電子郵件</label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

span的類
樣式 說明
glyphicon-ok 成功狀態(tài)
glyphicon-warning-sign 警告狀態(tài)
glyphicon-remove 錯誤狀態(tài)

Input的大小可以通過類來控制
input-lg 大的input
Input-sm 小的input
也可以設置父元素 form-group-lg、form-group-sm來調(diào)整

4）圖片
img-rounded 方形
img-circle 圓形（圖片長寬不等時是橢圓形）
img-thumbnail 有邊框
img-responsive 響應式圖片

5）按鈕/超鏈接
button/a
樣式 說明
btn-default 默認樣式
btn-success 成功樣式
btn-info 一般信息樣式
btn-warning 警告樣式
btn-danger 危險樣式
btn-primary 首選項樣式
btn-link 鏈接樣式

btn-block 塊級按鈕
active 激活按鈕

按鈕大小
btn-lg 大按鈕
btn-md 適中按鈕
btn-sm 小按鈕
btn-xs 超小按鈕

多個按鈕可以成組
把按鈕用一個div包著 div類為btn-group
<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中</button>
<button type="button" class="btn btn-default">右</button>
</div>

按鈕組大小
btn-group-lg
btn-group-md
btn-group-sm
btn-group-xs

按鈕組垂直排列
btn-group-vertical
按鈕組兩端對齊
btn-group-justified

關閉按鈕
<button type="button" class="close">×</button>

塊居中
center-block ========>margin:0 auto

clearfix 清理浮動

三．柵格系統(tǒng)
container
超小屏幕 手機 (<768px) xs 100% col-xs-數(shù)字(份數(shù))
小屏幕 平板 (≥768px) sm 750px col-sm-數(shù)字
中等屏幕 桌面顯示器 (≥992px) md 970px col-md-數(shù)字
大屏幕 大桌面顯示器 (≥1200px） lg 1170px col-lg-數(shù)字
一行最多可以12份

Container-fluid 100%

如果不指定 手機上每一列占一行
列偏移
col-md-offset-2
向右推
col-md-push-2
向左拉
col-md-pull-2

如果指定了 md 沒有指定 lg
那么在lg的屏幕下 就會用 md指定的列寬百分比

如果指定了 lg 沒有指定 md
那么在 md下面 每個列寬度是100%

左浮動
pull-left ===> float:left!important
右浮動
pull-right

響應式工具
hidden-xs 在超小屏幕隱藏 其他屏幕可見
hidden-sm 在小屏幕隱藏 其他屏幕可見
hidden-md 在中屏幕隱藏 其他屏幕可見
hidden-lg 在大屏幕隱藏 其他屏幕可見

visible-xs 在超小屏幕顯示 其他屏幕隱藏
visible-sm 在小屏幕可見 其他屏幕隱藏
visible-md 在小屏幕可見 其他屏幕隱藏
visible-lg 在小屏幕可見 其他屏幕隱藏

四．組件
1）導航組件：
1基本導航
<ul class="nav nav-tabs">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">資訊</a></li>
<li><a href="#">產(chǎn)品</a></a></li>
<li><a href="#">關于</a></li>
</ul>

2膠囊式導航
<ul class="nav nav-pills">

3垂直膠囊式導航
<ul class="nav nav-pills nav-stacked">

4面包屑導航
<ol class="breadcrumb">
<li><a href="#">首頁</a></li>
<li><a href="#">產(chǎn)品列表</a></li>
<li class="active">韓版 2015 年羊絨毛衣</li>
</ol>

5帶下拉菜單的導航
<ul class="nav nav-tabs">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">資訊</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜單
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
</ul>
</li>
</ul>

2）分頁組件：
1默認分頁
<ul class="pagination">
<li><a href="#">?</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">?</a></li>
</ul>

2翻頁效果
<ul class="pager">
<li><a href="#">上一頁</a></li>
<li><a href="#">下一頁</a></li>
</ul>

3對齊翻頁鏈接
<ul class="pager">
<li class="previous"><a href="#">上一頁</a></li>
<li class="next"><a href="#">下一頁</a></li>
</ul>

3）徽章
未讀信息數(shù)量徽章
<a href="#">信息 <span class="badge">10</span></a>

設置尺寸，四種 lg、默認、sm 和 xs
<ul class="pagination pagination-lg">

4）下拉菜單
1基本格式
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">首頁</a></li>
<li><a href="#">資訊</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">關于</a></li>
</ul>
</div>
按鈕和菜單需要包裹在.dropdown 的容器里，而作為被點擊的元素按鈕需要設置
data-toggle="dropdown"才能有效。對于菜單部分，設置 class="dropdown-menu"才能自動隱藏并添加固定樣式。設置 class="caret"表示箭頭，可上可下。
//設置向上觸發(fā)
<div class="dropup">
//菜單項居右對齊，默認值是 dropdown-menu-left
<ul class="dropdown-menu dropdown-menu-right">

2按鈕式下拉菜單
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜單<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">首頁</a></li>
<li><a href="#">資訊</a></li>
</ul>
</div>

3分裂式按鈕下拉菜單
<div class="btn-group">
<button type="button" class="btn btn-default">下拉菜單</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">首頁</a></li>
<li><a href="#">資訊</a></li>
</ul>
</div>
向上彈出式
<div class="btn-group dropup">

5）警告框組件
1基本警告框
<div class="alert alert-success">Bootstrap</div>
<div class="alert alert-info">Bootstrap</div>
<div class="alert alert-warning">Bootstrap</div>
<div class="alert alert-danger">Bootstrap</div>

2帶關閉的警告框
<div class="alert alert-success">
Bootstrap
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>

自動適配的超鏈接
<div class="alert alert-success">
Bootstrap，請到官網(wǎng) <a href="#" class="alert-link">下載</a>
</div>

6）巨幕組件
巨幕組件主要是展示網(wǎng)站的關鍵性區(qū)域。
jumbotron
在固定的范圍內(nèi)，有圓角
<div class="container">
<div class="jumbotron">
<h2>網(wǎng)站標題</h2>
<p>這是一個學習性的網(wǎng)站！</p>
<p><a href="#" class="btn btn-default">更多內(nèi)容</a></p>
</div>
</div>

100%全屏，沒有圓角
<div class="jumbotron">
<div class="container">
<h2>網(wǎng)站標題</h2>
<p>這是一個學習性的網(wǎng)站！</p>
<p><a href="#" class="btn btn-default">更多內(nèi)容</a></p>
</div>
</div>

7）進度條組件
進度條組件為當前工作流程或動作提供時時反饋
基本進度條
<div class="progress">
<div class="progress-bar" style="width: 60%;">60%</div>
</div>
最低值進度條
<div class="progress">
<div class="progress-bar" style="min-width:20px">0%</div>
</div>

條紋狀，IE10+支持
<div class="progress">
<div class="progress-bar progress-bar-success
progress-bar-striped" style="min-width:20px;width:60%">60%</div>
</div>
動畫效果
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped
active" style="min-width:20px;width:60%">60%</div>
</div>

8）媒體對象組件
媒體對象可以包含圖片、視頻或音頻等媒體，以達到對象和文本組合顯示的樣式效果。
基本實例
<div class="media">
<div class="media-left">

</div>
<div class="media-body">
<h4 class="media-heading">標題</h4>
<p>企鵝（學名：Spheniscidae）：有“海洋之舟”美稱的企鵝是一種最古老
的游禽，它們很可能在地球穿上冰甲之前，就已經(jīng)在南極安家落戶。全世界的企鵝共有 17
種，大多數(shù)都分布在南半球。主要生活在南半球，屬于企鵝目，企鵝科。特征為不能飛翔；
腳生于身體最下部，故呈直立姿勢；趾間有蹼；跖行性（其他鳥類以趾著地）；前肢成鰭狀；
羽毛短，以減少摩擦和湍流；羽毛間存留一層空氣，用以保溫。背部黑色，腹部白色。各個
種的主要區(qū)別在于頭部色型和個體大小。</p>
</div>
</div>

媒體對象在右邊
<div class="media">
<div class="media-body">
<h4 class="media-heading">標題</h4>
<p>企鵝（學名：Spheniscidae）：有“海洋之舟”美稱的企鵝是一種最古老
的游禽，它們很可能在地球穿上冰甲之前，就已經(jīng)在南極安家落戶。全世界的企鵝共有 17
種，大多數(shù)都分布在南半球。主要生活在南半球，屬于企鵝目，企鵝科。特征為不能飛翔；
腳生于身體最下部，故呈直立姿勢；趾間有蹼；跖行性（其他鳥類以趾著地）；前肢成鰭狀；
羽毛短，以減少摩擦和湍流；羽毛間存留一層空氣，用以保溫。背部黑色，腹部白色。各個
種的主要區(qū)別在于頭部色型和個體大小。</p>
</div>
<div class="media-right">

</div>
</div>

五．插件

1）滾動監(jiān)聽

<body data-spy="scroll" data-target="#mynav">
// mynav 就要監(jiān)聽的元素

<div id="mynav">
<ul class="nav"> class必須要有nav
<li><a href="#對應滾動區(qū)域的id">
<li><a href="#section2">

bootstrap 會自動個當前 li加上一個active 的class

可以根據(jù)active 設置不同的樣式

2）彈出框
<a href="" data-target="#myM" data-toggle="modal">打開</a>

<div class="modal" id="myM">
<div class="modal-dialog">
<div class="modal-header">彈出標題 <a href="" class="pull-right" data-target="#myM" data-toggle="modal">×</a></div>
<div class="modal-body">彈出內(nèi)容</div>
</div>

    </div>

3）輪播圖

<div class="carousel slide" id="banner">
<div class="carousel-inner">

            <ol class="carousel-indicators">
            <li href="#banner" data-slide-to="0" class="active" ></li>
            <li href="#banner" data-slide-to="1"></li>
            </ol>
            
                <a href="#banner" data-slide="prev" class="left carousel-control">上一張</a>
                <a href="#banner" data-slide="next" class="right carousel-control">下一張</a>
            
          </div>

注意事項：
1,不要記下class樣式名
2，不用bootstrap解決所有的問題 （還是自己要寫部分css）
3，如果是不規(guī)則的網(wǎng)站不要使用bootstrap
4，不要嘗試 同時解決手機端 和電腦端兩個網(wǎng)頁（熟了后可以）