本篇文章學(xué)習(xí)一些bootstrap3的一些基本元素的簡(jiǎn)單樣式涵叮，這些基本元素為按鈕勾效，文本惦积，表格胁住，表單和背景等，一樣一樣來痘儡。

• 按鈕

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è)簡(jiǎn)單的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就可以得到這種效果