本篇文章學(xué)習(xí)一些bootstrap3的一些基本元素的簡單樣式，這些基本元素為按鈕，文本，表格，表單和背景等，一樣一樣來。

• 按鈕

btn 原始樣式按鈕
btn-default 默認(rèn)樣式按鈕
btn-primary 藍(lán)色（提交）
btn-danger 紅色（表危險(xiǎn)）
btn-success 綠色（表成功）
btn-info 青色（信息）
btn-warning 黃色（警告）
btn-link 表現(xiàn)為鏈接
btn-lg 大一點(diǎn)的按鈕
btn-sm 小一點(diǎn)的按鈕
btn-xs 最小的按鈕
btn-block 寬屏按鈕
btn active 按住的按鈕
btn disable 不能按的按鈕

• 表格

table 普通樣式
table table-striped 斑馬表格
table table-bordered 有邊框的表格
table table-hover 懸浮變樣式按鈕
table table-condensed 緊湊表格

表格內(nèi)某一行

active 被激活的一行，其樣式和懸浮樣式相同
info 表示信息的一行（藍(lán)色）
success 表示成功的一樣（綠色）
warning 表示警告的一行（黃色）
danger 表示危險(xiǎn)的一行（紅色）

• 圖片

img-rounded 圓角
img-thumbnail 略縮圖
img-circle 圓形

• 表單輸入元素

form-control 被選中的輸入框呈淡藍(lán)色，對(duì)樣式進(jìn)行bootstrap式的美化

• 文本

text-muted 變的更淡
text-primary 呈藍(lán)色表示強(qiáng)調(diào)
text-success 呈綠色表示成功
text-info 呈青色表示信息
text-warning 呈黃色表示警告
text-danger 呈紅色表示危險(xiǎn)

• 背景

bg-primary 藍(lán)色表示強(qiáng)調(diào)
bg-success 綠色表示成功
bg-info 淡藍(lán)色表示說明
bg-warning 黃色表示警告
bg-danger 紅色表示危險(xiǎn)

• 其他類

caret 下拉菜單的三角，一般用于<span>標(biāo)簽
pull-right 文字浮動(dòng)到右邊
pull-left 文字浮動(dòng)到左邊
show 顯示元素
hidden 隱藏元素，位置也隱藏
invisible 隱藏元素，位置仍在

• 柵格布局

col-xs-1 對(duì)應(yīng)手機(jī)設(shè)備1/12
col-sm-1 對(duì)應(yīng)平板設(shè)備1/12
col-md-1 對(duì)應(yīng)普通顯示設(shè)備1/12
col-lg-1 對(duì)應(yīng)寬屏設(shè)備1/12

• 字體圖標(biāo)

glyphicon glyphicon-hand-right 可以應(yīng)用于按鈕，鏈接等圖形文字，bootstrap包含幾百種圖形文字，具體可以去文檔查閱。

• 下拉菜單

dropdown 定義在下拉塊div的class里，如果是上拉菜單，這里為dropup
在這個(gè)下拉塊里，需要定義一個(gè)button下拉按鈕和一個(gè)下拉列表ul，下拉按鈕內(nèi)的屬性：
class="btn dropdown-toggle"中的dropdown-toggle為js調(diào)用所需。
id=" " 指向指定id的下拉列表ul
data-toggle="dropdown" 表示切換類型為下拉
下拉塊里另外一個(gè)元素ul：
class="dropdown-menu" 表示這個(gè)ul是下拉列表
aria-lebelledby="<id>" 下拉按鈕的id在此發(fā)揮了作用
在ul里的列表項(xiàng)li里
dropdown-header 表示列表項(xiàng)的標(biāo)題，效果為不可選
divider 表示為列表項(xiàng)分割線
disabled 表示不可選中的列表選項(xiàng)

• 按鈕組

按鈕組就是多個(gè)按鈕放進(jìn)一個(gè)div，該div有一個(gè)屬性class="btn-group"，如果是btn-group-vertical表現(xiàn)為垂直的按鈕組，另外再加上相應(yīng)的類btn-group-lg等示按鈕組的大小
多個(gè)按鈕組放進(jìn)一個(gè)div，這表示一個(gè)按鈕工具欄，該div應(yīng)有屬性class="btn btn-toolbar"

• 輸入框組

輸入框組是對(duì)原生表單元素的擴(kuò)展，通過輸入框組可以很方便的在輸入框前后加入輔助輸入的要素。
首先把輸入部分所有需要的前綴后綴輸入框等按照順序放進(jìn)一個(gè)class為input-group的div里,這里還可以增加相應(yīng)的input-group-lg類來設(shè)置輸入框組的大小
前綴后綴為輔助輸入的信息，在div內(nèi)的<span>元素內(nèi)，其class為input-group-addon，輸入框的class為上文所說的form-control
復(fù)選和單選的功能可以作為輸入輔助元素放在<span>的位置，class同樣為input-group-addon
按鈕也是放在<span>里，但是此時(shí)class為input-group-btn
下拉菜單則需要在<input-group>的<div>里增加一個(gè)包裹，下拉菜單的div里，此div的class為input-group-btn

• 導(dǎo)航元素

標(biāo)簽式導(dǎo)航

標(biāo)簽式導(dǎo)航為一個(gè)class為nav nav-tabs的無序列表ul，其中的li為各導(dǎo)航標(biāo)簽
增加一個(gè)nav-justified會(huì)讓導(dǎo)航欄與父元素等寬

膠囊式導(dǎo)航

膠囊式導(dǎo)航為一個(gè)class為nav nav-pills的無序列表ul，其中li為各導(dǎo)航標(biāo)簽
增加一個(gè)nav-stacked表現(xiàn)為垂直的膠囊式導(dǎo)航欄
增加一個(gè)nav-justified會(huì)讓導(dǎo)航欄與父元素等寬

整合下拉菜單

要使一個(gè)導(dǎo)航有下拉菜單的功能，那么要給這個(gè)li增加一個(gè)class="dropdown"，然后給原導(dǎo)航內(nèi)的文字包裹上標(biāo)簽<a>，其屬性class="dropdown-toggle" data-toggle="dropdown"，繼續(xù)為其添加一個(gè)菜單項(xiàng)ul，其class為dropdown-menu，其中的li元素為下拉菜單的各選項(xiàng)

面包屑導(dǎo)航

因?yàn)檫@個(gè)導(dǎo)航是為了體現(xiàn)頁面的層次性，所以這種導(dǎo)航是class為breadcrumb的有序列表<ol>

其他

各選項(xiàng)li中添加class為disable或者active表示該選項(xiàng)禁用和當(dāng)前選項(xiàng)頁面

• 導(dǎo)航欄

導(dǎo)航欄相對(duì)于導(dǎo)航更加復(fù)雜，功能也更加的多
html5中新加的<nav>特指導(dǎo)航元素，要應(yīng)用Bootstrap的導(dǎo)航欄樣式，在<nav>中添加類navbar navbar-default以及屬性role="navigation"
Bootstrap為有類似標(biāo)題的導(dǎo)航欄提供了一個(gè)標(biāo)題元素，在上面的<nav>中，使用一個(gè)<div>，class為navbar-header，在這個(gè)塊里，用一個(gè)<a class="navbar-brand">把導(dǎo)航標(biāo)題包裹起來
在上述塊之后緊跟著一個(gè)塊，在這個(gè)塊里，包含這上面說過的導(dǎo)航元素，這樣一個(gè)簡單的Bootstrap導(dǎo)航欄就完成了，關(guān)于導(dǎo)航欄的進(jìn)一步學(xué)習(xí)，我會(huì)另寫一篇文章。

• 分頁導(dǎo)航

分頁即頁面底部的第一頁第二頁上一頁下一頁這種東西
分頁組件被包裹在一個(gè)<nav>塊內(nèi)，塊內(nèi)是一個(gè)class為pagination的無序列表<ul>，添加相應(yīng)的pagination-lg等類可以設(shè)置分頁導(dǎo)航的大小。<ul>內(nèi)的<li>為各導(dǎo)航項(xiàng)，設(shè)置<li>的class為disable可以禁用該選項(xiàng)
若頁面只有上一頁下一頁兩項(xiàng)導(dǎo)航，把<ul>的class誰知為pager，里面包含2個(gè)<li>分別表示上一頁下一頁，先后給這2個(gè)<li>添加類previous和next可以讓分頁導(dǎo)航與父元素兩端對(duì)齊

• 標(biāo)簽

標(biāo)簽用<label>包裹，class為label，添加額外相應(yīng)的label-primary等類可以表現(xiàn)為相應(yīng)的樣式。
label-default 默認(rèn)樣式
label-primary 表示強(qiáng)調(diào)
label-info 表示說明信息
label-success 表示成功
label-warning 表示警告
label-danger 表示危險(xiǎn)

• 徽記

徽記一般應(yīng)用在未讀消息之類的，比如未讀信息是5，那么在未讀信息旁邊寫一個(gè)<span>內(nèi)容為5，class為badge

• 超大屏幕

超大屏幕使用一個(gè)class為jumbotron，在這個(gè)塊內(nèi)，字體什么的會(huì)相對(duì)大屏幕進(jìn)行樣式優(yōu)化

• 頁面標(biāo)題

頁面標(biāo)題會(huì)在標(biāo)題的四周添加適當(dāng)?shù)拈g距，頁面標(biāo)題包裹在一個(gè)class為page-header的塊內(nèi)

• 略縮圖

使用Bootstrap創(chuàng)建略縮圖的方式是在<img>外包裹一個(gè)class為thumbnail的<a>元素，這會(huì)添加四個(gè)像素的內(nèi)邊距和一個(gè)灰色的邊框，鼠標(biāo)懸浮在圖像上還會(huì)有圖像的輪廓
若還要添加更多的自定義內(nèi)容，比如圖片標(biāo)題和描述等等，把上述的<a>標(biāo)簽改為<div>標(biāo)簽，然后在該塊內(nèi)可以添加自定義的圖片描述內(nèi)容

• 警告

創(chuàng)建一個(gè)<div>，為其添加alert類表示警告框，繼續(xù)添加相應(yīng)的alert-success類來表示相應(yīng)的警告信息，
通過添加一個(gè)alert-dismissable類，再添加一個(gè)關(guān)閉按鈕<button>，其class為close，則可以關(guān)閉這個(gè)警告信息
警告中可以添加鏈接<a>，之后為<a>添加一個(gè)class="alert-link"可以為鏈接匹配相應(yīng)警告信息的顏色

• 進(jìn)度條

創(chuàng)建一個(gè)class為progress的塊，其中再創(chuàng)建一個(gè)塊，class為progress-bar，設(shè)置相應(yīng)的style可以設(shè)置進(jìn)度條的進(jìn)度情況，要在進(jìn)度條上顯示即時(shí)的進(jìn)度情況只需在div.progress-bar中寫入相應(yīng)的文本內(nèi)容即可
在div.progress-bar中添加相應(yīng)的類progress-bar-info表現(xiàn)為相應(yīng)顏色的進(jìn)度條，添加progress-bar-striped可以為進(jìn)度條添加條紋
在有條紋的情況下，添加類active，會(huì)使進(jìn)度條有動(dòng)畫效果
多個(gè)div.progress-bar被一個(gè)div.progress包裹，表現(xiàn)為這些進(jìn)度條的堆疊

• 媒體對(duì)象

pass

• 列表組

在<ul>元素中添加類list-group即可創(chuàng)建一個(gè)列表組，該<ul>下的<li>需添加list-group-itemk的class，在列表組中添加徽章，徽章會(huì)自動(dòng)定位到右邊
把<ul>改成<div>，<li>改成<a>，并加上相應(yīng)的鏈接，則可以創(chuàng)建一個(gè)鏈接列表組，在此基礎(chǔ)上把<a>改成<button>就是一個(gè)按鈕列表組了（在此要添加屬性type=button）
在列表項(xiàng)的類里添加相應(yīng)的list-group-item-info類會(huì)給列表項(xiàng)添加相應(yīng)的樣式

• 面板

Bootstrap的面板的作用，我的理解就是把<div>的作用給顯式的表現(xiàn)出來了
創(chuàng)建一個(gè)class為panel的<div>即創(chuàng)建了一個(gè)面板，為其添加相應(yīng)的panel-default類，表現(xiàn)為相應(yīng)信息的面板
面板內(nèi)可以創(chuàng)建一個(gè)class為panel-heading的<div>，作用為面板頭部容器，在這里可以創(chuàng)建class為panel-title的面板標(biāo)題<h1-h6>
然后創(chuàng)建一個(gè)class為panel-body的<div>表示面板的內(nèi)容
為面板添加注腳只需再添加一個(gè)class為panel-footer的<div>往里寫注腳內(nèi)容即可

• 凹陷效果

創(chuàng)建一個(gè)class為well的<div>，這個(gè)塊就會(huì)有一種凹陷效果，繼續(xù)添加well-lg對(duì)應(yīng)相應(yīng)的well尺寸大小

• 頂(底)部導(dǎo)航欄不消失

在相應(yīng)的導(dǎo)航欄元素中添加類navbar-fixed-top或者navbar-fixed-botton就可以得到這種效果