Bootstrap
[if !supportLists]一婶博、????? [endif]布局容器
Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個 .container 容器纽匙。我們
提供了兩個作此用處的類。注意，由于padding 等屬性的原因欧啤，這兩種容器
類不能互相嵌套。
<div class="container">
...
</div>
.container類用于固定寬度并支持響應(yīng)式布局的容器状婶；
<div
class="container-fluid">
...
</div>
.container-fluid 類用于 100% 寬度鸭巴，占據(jù)全部視口（viewport）的容器
[if !supportLists]二、????? [endif]柵格網(wǎng)格系統(tǒng)（Grid System）
Bootstrap 提供了一套響應(yīng)式巡通、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)尘执，隨著屏幕
或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多 12 列扁达。
注意: 網(wǎng)格系統(tǒng)必須使用到 css
container正卧、row 、xs (xsmall
phones), sm (small tablets), md
(middle desktops) lg (larger desktops) 即: 超小屏(自動)跪解，小屏
(750px)炉旷，中屏(970px)和大屏(1170px)
數(shù)據(jù)行(.row)必須包含在容器（.container）中签孔，以便為其賦予合適的對
齊方式和內(nèi)距(padding)。
在行(.row)中可以添加列(.column), 只有列（column）才可以作為行容
器(.row)的直接子元素窘行，但列數(shù)之和不能超過平分的總列數(shù)饥追，比如 12。如果大于 12,則自動換到下一行罐盔。
<div
class="container">
<div
class="row">
<div
class="col-md-4">4 列</div>
<div
class="col-md-8">8 列</div>
</div>
</div>
[if !supportLists]三但绕、????? [endif]列組合
列組合簡單理解就是更改數(shù)字來合并列（原則：列總和數(shù)不能超 12，大于
12,則自動換到下一行惶看。）捏顺，有點(diǎn)類似于表格的 colspan 屬性。
<div class="container">
<div class="row">
<div class="col-md-4">4 列</div>
<div class="col-md-8">8 列</div>
</div>
<div class="row">
<div class="col-md-2">2 列</div>
<div class="col-md-10">10 列</div>
</div>
</div>
[if !supportLists]四纬黎、????? [endif]列偏移幅骄、列排序
使用列偏移也非常簡單，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數(shù))本今，那么具有這個類名的列就會向右偏移拆座。例如，你在列元素上添加“col-md-offset-8”冠息，表示該列向右移動 8 個列的寬度(要保證列與偏移列的總數(shù)不超過 12挪凑，不然會致列斷行|換行顯示)。
列排序：通過添加類名”col-md-push-*”和“col-md-pull-*” (其中星號代表移動的列組合數(shù))逛艰。往前 pull躏碳，往后 push。
[if !supportLists]五瓮孙、????? [endif]列嵌套
Bootstrap 框架的網(wǎng)格系統(tǒng)還支持列的嵌套唐断。你可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列.
[if !supportLists]六杭抠、????? [endif]排版
[if !supportLists]1脸甘、????????[endif]標(biāo)題
定義標(biāo)題都是使用標(biāo)簽<h1>到<h6>，只不過Bootstrap覆蓋了其默認(rèn)的樣式偏灿，使其在瀏覽器下顯示的效果一樣丹诀。
后面可以緊跟一行小的副標(biāo)題<small></small>或使用.small
<h1>h1. Bootstrap
heading<small>副標(biāo)題</small></h1>
<div class="h1">Bootstrap 標(biāo)題 1<span class="small">副標(biāo)題</span></div>
[if !supportLists]2、????????[endif]段落
段落是排版中一個重要的元素之一翁垂，通過.lead來突出強(qiáng)調(diào)內(nèi)容铆遭，其作用就是增大文本字號，加粗文本沿猜，而且對行高和 margin 也做相應(yīng)的處理：<small>:小號字
<b><strong>:加粗
<i><em>:斜體枚荣。
<p
class="lead"><small>以后的</small><b>你</b>會<i>感謝</i>現(xiàn)在<em>努力</em>的<strong>你</strong></p>
[if !supportLists]3、????????[endif]引用
<blockquote>：標(biāo)簽定義摘自另一個源的塊引用啼肩，
使用.blockquote-reverse橄妆，實(shí)現(xiàn)右對齊衙伶。
<footer>:腳注
<cite>：表示對某個參考文獻(xiàn)的引用
案例：
<blockquote
class="blockquote-reverse">
好好學(xué)習(xí) Java！
<footer>本文出自大師之手</footer>
<cite>thinking in java</cite>
</blockquote>
[if !supportLists]4害碾、????????[endif]強(qiáng)調(diào)
定義了一套強(qiáng)調(diào)類名矢劲，這些強(qiáng)調(diào)類都是通過顏色來表示強(qiáng)
調(diào)，具本說明如下：
.text-muted：提示慌随，使用淺灰色（#999）
.text-primary：主要芬沉，使用藍(lán)色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息阁猜，使用淺藍(lán)色（#31708f）
.text-warning：警告丸逸，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）
[if !supportLists]5剃袍、????????[endif]文本對齊
為了簡化操作椭员，方便使用，Bootstrap通過定義四個類名來控制文本的對齊風(fēng)格：.text-left：左對齊 .text-center：居中對齊 .text-right：右對齊 .text-justify：兩端對齊笛园。
[if !supportLists]6、????????[endif]列表
在 HTML 文檔中侍芝，列表結(jié)構(gòu)主要有三種：
無序列表(<ul><li>…</li></ul>)研铆、
有序列表(<ol><li>…</li></ol>)、
定義列表(<dl><dt>…</dt><dd>…</dd></dl>)州叠。
bootstrap 根據(jù)平時的使用情形提供了六種形式的列表:( 普通列表棵红、有序列表、去點(diǎn)列表咧栗、內(nèi)聯(lián)列表逆甜、描述列表、水平描述列表）致板。在樣式方面 Bootstrap只是在原有的基礎(chǔ)上做了一些細(xì)微的優(yōu)化(margin 調(diào)整),其他差別不大交煞，加入了一些樣式。
[if !supportLists]1）????????[endif]去點(diǎn)列表:class="list-unstyled"
[if !supportLists]2）????????[endif]內(nèi)聯(lián)列表：class=” list-inline”
[if !supportLists]3）????????[endif]定義列表：在原有的基礎(chǔ)加入了一些樣式斟或，使用樣式 class=“.dl-horizontal”制作水平定義列表 : 當(dāng)標(biāo)題寬度超過160px時素征，將會顯示三個省略號。
[if !supportLists]7萝挤、????????[endif]代碼
一般在個人博客上使用的較為頻繁御毅，用于顯示代碼的風(fēng)格。
[if !supportLists]1）????????[endif]使用<code></code>來顯示單行內(nèi)聯(lián)代碼
[if !supportLists]2）????????[endif]使用<pre></pre>來顯示多行塊代碼怜珍，樣式：pre-scrollable(height,max-height高度固定端蛆，為340px，超過存在滾動條)
[if !supportLists]3）????????[endif]使用<kbd></kbd>來顯示用戶輸入代碼酥泛，如快捷鍵
不管使用哪種代碼風(fēng)格今豆，在代碼中碰到小于號（<）要使用硬編碼“<”來替代嫌拣，大于號(>)使用“>”來替代。
[if !supportLists]8晚凿、????????[endif]表格
Bootstrap為表格提供了1種基礎(chǔ)樣式和4種附加樣式以及1個支持響應(yīng)式的表格亭罪。在使用 Bootstrap 的表格過程中，只需要添加對應(yīng)的類名就可以得到不同的表格風(fēng)格：
1) .table-striped：斑馬線表格
2) .table-bordered：帶邊框的表格
3) .table-hover：鼠標(biāo)懸停高亮的表格
4). table-condensed：緊湊型表格歼秽，單元格沒內(nèi)距或者內(nèi)距較其他表格的內(nèi)距更小
<tr>提供了五種不同的類名应役，每種類名控制了行的不同背景顏色
.active
.success
.info
.warning
.danger
[if !supportLists]七、????? [endif]表單
表單中常見的元素主要包括：文本輸入框燥筷、下拉選擇框箩祥、單選按鈕、復(fù)選按鈕肆氓、文本域和按鈕等袍祖。
[if !supportLists]1、????????[endif]表單控件
.form-control .input-lg（較大） .input-sm（較行痪尽）
[if !supportLists]1)???[endif]輸入框
.form-control
[if !supportLists]2)???[endif]下拉選擇框select
多行選擇設(shè)置：multiple="multiple"
[if !supportLists]3)? [endif]文本域textarea
<textarea
class="form-control" rows="3"></textarea>
5）復(fù)選框checkbox
.checkbox蕉陋，水平顯示：.checkbox-inline
6）單選按鈕
.radio，水平顯示：.radio-inline
7）按鈕
使用button實(shí)現(xiàn)
基礎(chǔ)樣式btn
附加樣式：btn-primary
btn-info btn-success btn-warning
btn-danger btn-link btn-default
?????????? 多標(biāo)簽支持：使用a??? div等制作按鈕
<a href="##" class="btn btn-info">a 標(biāo)簽按鈕</a>
<span class="btn btn-success">span 標(biāo)簽按鈕</span>
<div class="btn btn-warning">div 標(biāo)簽按鈕</div>
按鈕大小
使用 .btn-lg拨扶、.btn-sm 或 .btn-xs 就可以獲得不同尺寸的按鈕
按鈕禁用
方法 1：在標(biāo)簽中添加 disabled 屬性
方法 2：在元素標(biāo)簽中添加類名“disabled”
在 class 屬性中添加 disabled 只是樣式上禁用了凳鬓，并不是真正的禁用
了此按鈕！
[if !supportLists]2患民、????????[endif]表單案例
[if !supportLists]1）????????[endif]水平表單
同一行顯示form-horizontal
配合 Bootstrap 框架的網(wǎng)格系統(tǒng)
[if !supportLists]2）????????[endif]內(nèi)聯(lián)表單：將表單的控件都在一行內(nèi)顯示 form-inline
注意 label 不會顯示缩举，存在的意義: 如果沒有為輸入控件設(shè)置 label 標(biāo)簽，屏幕閱讀器將無法正確識別匹颤。這也是 Bootstrap 框架另一個優(yōu)點(diǎn)之處仅孩，為殘障人員進(jìn)行了一定的考慮。
[if !supportLists]八印蓖、????? [endif]下拉菜單
<!-- 如果要使用 Bootstrap 的 js 插件辽慕，必須先調(diào)入 jQuery
-->
<script
src="js/jquery-2.1.4.min.js"></script>
<!-- 包括所有 bootstrap 的 js 插件或者可以根據(jù)需要使用的 js 插件調(diào)用 -->
<script
src="js/bootstrap.min.js"></script>
要點(diǎn)：
1、使用一個類名為 dropdown 或 btn-group 的 div 包裹整個下拉框:
<div
class="dropdown"></div>
2赦肃、默認(rèn)向下 dropdown鼻百，向上彈起加入 . dropup 即可
3、使用 button 作為父菜單摆尝，使用類名: dropdown-toggle 和自定義 data-toggle 屬性
data-toggle="dropdown">
4温艇、在 button 中使用 font 制作下拉箭頭
<span
class="caret"></span>
5、下拉菜單項(xiàng)使用一個 ul 列表堕汞，并且定義一個類名為“dropdown-menu
6勺爱、分組分割線: <li>添加類名“divider”來實(shí)現(xiàn)添加下拉分隔線的功能
7、分組標(biāo)題: li 添加類名“dropdown-header”來實(shí)現(xiàn)分組的功能
8讯检、對齊方式:
1)琐鲁、dropdown-menu-left 左對齊默認(rèn)樣式
2)卫旱、dropdown-menu-right? 右對齊
8、激活狀態(tài)（.active）和禁用狀態(tài)（.disabled）
[if !supportLists]九围段、????? [endif]按鈕組
同上引入 js顾翼，需要引入 bootstrap 的 fonts 文件夾。
要點(diǎn)：
1奈泪、使用一個類名為 btn-group 的 div 包裹整個按鈕組
2适贸、使用標(biāo)簽 button 、a涝桅、span 制作按鈕拜姿，需要指定類名.btn
3、使用 span 制作圖標(biāo)
4冯遂、大小分類:? btn-group-lgbtn-group btn-group-sm btn-group-xs
5蕊肥、等分按鈕: 自適應(yīng)分組按鈕 btn-group-justified
6、默認(rèn)為水平蛤肌，使用 btn-group-vertical 制作垂直按鈕組
7壁却、按鈕工具欄: 在外層套用 .btn-toolbar 即可
8、注意：btn-group-lg 僅僅是放大按鈕裸准，不能將所有的按鈕作為連接在一起的按鈕組
[if !supportLists]十儒洛、????? [endif]導(dǎo)航
使用下拉與按鈕組合可以制作導(dǎo)航
要點(diǎn)：
1、基本樣式: .nav 與“nav-tabs”狼速、“nav-pills”組合制作導(dǎo)航
2、分類:
1)卦停、標(biāo)簽型 (nav-tabs)導(dǎo)航
2)向胡、膠囊形(nav-pills)導(dǎo)航
3)、堆棧(nav-stacked)導(dǎo)航
4)惊完、自適應(yīng)(nav-justified)導(dǎo)航
5)僵芹、面包屑式(breadcrumb)導(dǎo)航，單獨(dú)使用樣式小槐，不與 nav 一起使用,直接加入到 ol拇派、ul 中即可，一般用于導(dǎo)航凿跳，主要是起的作用是告訴用戶現(xiàn)在所處頁面的位置（當(dāng)前位置）
3件豌、狀態(tài):
1)、選中狀態(tài) active 樣式
2)控嗜、禁用狀態(tài): disable
4茧彤、二級菜單
[if !supportLists]十一、 [endif]分頁導(dǎo)航
分頁隨處可見疆栏，分為頁碼導(dǎo)航和翻頁導(dǎo)航
頁碼導(dǎo)航:ul 標(biāo)簽上加 pagination [pagination-lg | pagination-sm]
翻頁導(dǎo)航: ul 標(biāo)簽上加 pager
[if !supportLists]十二曾掂、 [endif]縮略圖
縮略圖在電商類的網(wǎng)站很常見惫谤，最常用的地方就是產(chǎn)品列表頁面≈橄矗縮略圖的實(shí)現(xiàn)是配合網(wǎng)格系統(tǒng)一起使用溜歪。同時還可以讓縮略圖配合標(biāo)題、描述內(nèi)容许蓖，按鈕等蝴猪。
[if !supportLists]十三、 [endif]面板
縮略圖在電商類的網(wǎng)站很常見蛔糯，最常用的地方就是產(chǎn)品列表頁面拯腮。縮略圖的實(shí)現(xiàn)是配合網(wǎng)格系統(tǒng)一起使用蚁飒。同時還可以讓縮略圖配合標(biāo)題动壤、描述內(nèi)容，按鈕等淮逻。
