Bootstrap框架的三大核心之二：組件。 組件也是最核心的地方，因為絕大部分的網頁都必須利用組件才能構建出絢麗的頁面。
組件包括：Icon圖標（Glyphicon）、 下拉菜單（Dropdown）、按鈕組（Button group）、按鈕下拉菜單（Button dropdown）、輸入框組（Input group）、導航 （Nav）、導航條（Navbar）、面包屑導航（Breadcrumb）、分 頁導航（Pagination）、標簽（Label）、徽章（Badge）、大屏幕 展播（Jumbotron）、頁面標題（Pageheader）、縮略圖 （Thumbnail）、警告框（Alert）、進度條（Progress bar）、媒 體對象（Media object）、列表組（Listgroup）、面板（Panel） 和窪地（Well），總計20種。
本節目錄
小圖標
小圖標（icon）是一個優秀網站不可缺少的一組元素，小圖標的點綴可以使網站瞬間提升一個檔次。bs提供了 200個小圖標。
使用的時候必須同時使用兩個樣式，即.glyphicon和以.glyphicon-*開頭的樣式。
新版icon就是利用@font-face特性，並結合一定的字體， 來制作Web頁面中的icon圖標。
優點
這種形式不僅可以讓字體無損失放大，還可以簡單地通過color: #ff0的形式設置圖標的顏色。
2種使用方式
<span class="glyphicon glyphicon-glass text-danger" style="font-size: 50px;"></span> <i class="glyphicon glyphicon-glass text-success"></i>
3種場景使用場景
button、li、input-group
擴展
圖標是利用字體和content屬性來實現的，所以下面這2個是等效的
<span class="glyphicon glyphicon-glass"></span> <span class="glyphicon"></span>
下拉菜單
使用
.dropdown樣式是大容器，.dropdown-menu是菜單li元素的容器，而.divider樣式在li元素上的顯示效果是分隔符。
由於menu樣式中設置display:none，通過設置open樣式，可以打開菜單。
菜單標題，通過設置.dropdown-header樣式可以設置標題。
支持active和disabled
多級菜單
在bs3.x版本默認是沒有多級菜單的，在bs2.x中有，如果要使用，先添加擴展樣式
.dropdown-submenu { position: relative; /* 相對定位 */ } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; /* 右側開始對齊 */ margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropup .dropdown-submenu > .dropdown-menu { top: auto; bottom: 0; /* 向上方向 */ margin-top: 0; margin-bottom: -2px; -webkit-border-radius: 5px 5px 5px 0; -moz-border-radius: 5px 5px 5px 0; border-radius: 5px 5px 5px 0; } .dropdown-submenu > a:after { display: block; float: right; width: 0; height: 0; margin-top: 5px; margin-right: -10px; border-color: transparent; border-left-color: #cccccc; /* 三角符號設置*/ border-style: solid; border-width: 5px 0 5px 5px; content: " "; } .dropdown-submenu:hover > a:after { border-left-color: #cccccc; /* 鼠標移動時的三角符號設置*/ } .dropdown-submenu.pull-left { float: none; /* 取消子菜單的向右浮動 */ } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; /* 向右浮動的時候，子菜單應該從最左側開始對齊計算 */ margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }
然后在菜單項上添加dropdown-submenu樣式。
一個簡單的多級菜單
<div class="dropdown open"> <ul class="dropdown-menu"> <li><a>我的積分</a></li> <li><a>我的流量</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a>個人中心</a> <ul class="dropdown-menu"> <li><a>我的積分</a></li> <li><a>我的流量</a></li> <li class="divider"></li> <li><a>個人中心</a></li> </ul> </li> </ul> </div>
按鈕組
只需要在多個 按鈕外部使用一個容器元素（比如div），然后在容器元素上應用.btn-group樣式即可.
按鈕工具欄主要是將多個按鈕組排列在一起，工具欄是一個容器，在容器元素上應用.btn-toolbar樣式。
支持lg、sm尺寸樣式
垂直分組.btn-group-vertical
.btn-group-justified樣式提供了一個特殊的功能，就是在一個.btn-group容器上，如果使用了該樣式，則所有的按鈕都會 100%充滿容器元素。
按鈕下拉菜單
下拉菜單需要滿足一個特殊的需求，那就是必須有position: relative.(而.dropdown、btn-group樣式正好都有該屬性)
組合下拉菜單
分離下拉菜單(實際上就是加一個單獨按鈕。)
向上彈起的
只需要在容器上加上dropup樣式即可
<div class="btn-group dropup"> <a href="#" class="btn btn-default"> 向上彈起 </a> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">1111111</a></li> <li><a href="#">2222222</a></li> </ul> </div>
輸入框組
只需要在容器上應用.input-group樣式，然后對需要在input前后顯示的個性元素上應用.input-group-addon樣式。
在.input-group-addon樣式里，不僅可以放置label和icon，也可以放置復選框（checkbox）和單選框（radio）。
支持lg，sm尺寸樣式。
按鈕作為addon，由於btn樣式本身就有大小顏色內外邊距樣式。.btn樣式又單獨設置了一 個.input-group-btn樣式
擴展:
- 請盡量避免在select元素上使用該功能，因為WebKit瀏覽器 不完全支持input-group組件的特性。
- 不要直接將.input-group和.form-group混合使用，因 為.input-group是一個獨立的組件。
- 如果讓icon融為一體，記得第3節中的feedback功能
導航
設置容器樣式，即可實現不同的導航效果
選項卡導航是最常用的一種導航方式，尤其是在多內容編輯的時候，需要通過選項卡進行分組顯示
選項卡導航：nav nav-tabs
膠囊式導航：nav nav-pills
垂直導航： nav nav-pills nav-stacked (nav-tabs垂直導航效果老版本v2.x系列可以，3.x新版本不可以)
自適應導航：nav nav-pills nav-justified nav nav-tabs nav-justified
導航條
基礎導航條是在普通導航的基礎上進行改進實現的，但實現原理復雜得多
首先在普通導航的 ul元素上應用.navbar-nav樣式，然后在外部父元素容器上應用.navbar樣式以及.navbar-default樣式即可實現。
navbar-brand樣式的鏈接，表示該元素是導航條的名稱，起到提醒的目的
基礎導航條
<nav class="navbar navbar-default"> <div class="navbar-header"> <a href="#" class="navbar-brand">Never、C</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li> <a href="#" data-toggle="dropdown">Center<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a>11111111</a></li> <li><a>22222222</a></li> <li class="divider"></li> <li><a>11111111</a></li> </ul> </li> <li><a href="#">About</a></li> </ul> </nav>
導航條中的表單navbar-form
<nav class="navbar navbar-default"> <div class="navbar-header"> <a href="#" class="navbar-brand">Never、C</a> </div> <form class="navbar-form pull-left"> <div class="form-group"> <input type="text" class="form-control" name="name" value="" placeholder="Search" /> </div> <a href="#" class="btn btn-default">Submit</a> </form> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav>
本質navbar-form設置為inline-block效果，pull-left左浮動效果。
固定
提供了兩個強有力的樣式支持這一特性，分別是：.navbar-fixed-top支持最頂部固定，.navbar-fixedbottom支持最底部固定。
響應式導航條
屏幕大小的分界點是768像素， 在小於768像素的時候，所有的菜單默認會隱藏，單擊右邊的icon圖標，所有默認的菜單就會展示出來
使用
右上角的button圖標（icon）必須包含在.navbar-toggle樣式 里
默認隱藏收縮的代碼都 在一個樣式為.navbar-responsive-collapse的div里，並且該div應用了navbar-collapse和collapse兩個樣式。
<nav class="navbar navbar-default"> <div class="navbar-header"> <!-- .navbar-toggle樣式用於toggle收縮的內容,即：collapse樣式所在的元素--> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!--確保無論是寬屏還是窄屏，navbar-brand都會顯示 --> <a class="navbar-brand" href="#">Brand</a> </div> <!-- 屏幕寬度小於768像素時，該div內的內容默認都會隱藏（通過單擊icon-bar所在的圖標，可以再展開）；大於768像素時默認顯示 --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">主頁</a></li> <li><a href="#">作品</a></li> <li><a href="#">圖書</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜單 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> <!--省略菜單 --> </ul> </li> </ul> </div> </nav>
面包屑導航
面包屑（Breadcrumb）一般用於導航，表示當前頁面所在的位置（或功能插件）。
在容器上（一般為ul）添加breadcrumb類即可。
分頁導航
一個用戶體驗良好的分頁組件會得到訪問用戶的良好評價。bs為大家提供了兩種分頁組件，一種是帶多個頁碼的組件（pagination），一種是只有上一頁、下一頁的翻頁組件 （pager）。
實際上pager加了居中效果，pagination實現類似btn-group效果
標簽
在網頁排版的時候，我們經常要高亮一些標題里的特殊字符或者整個字符， bs供了一個.label樣式用於實現高亮的功能。
label支持5種基本顏色和1個默認灰。
<span class="label label-info">info</span>
徽標
在開發交互式系統或者信息系統時，經常要顯示一些最新收到的消息、需要有多少審批的消息等。Bootstrap的.badge樣式提 供了很好的效果，只需要在span或者label上應用該樣式即可
.badge樣式有個遺憾就是，它沒有定義多風格顏色的設定。
使用以下擴展樣式，即可實現4種基本顏色
.badge-danger { background-color: #d9534f; } .badge-success { background-color: #5cb85c; } .badge-warning { background-color: #f0ad4e; } .badge-info { background-color: #5bc0de; }
大屏
在設計網頁布局的時候，經常會有一些大屏（或大塊頭）內容的顯示，.jumbotron樣式提供的展示效果正是我們所需要的。
在.jumbotron內部應用h1和p元素時，這兩種元素也會進行相應的調整。
如果jumbotron放在container樣式內，則顯示圓角；如果不放在里面，就不會顯示圓角。而一般我們會在大屏里面套一個容器。
<div class="jumbotron">
<div class="container">
<h1>Hello World</h1>
<p>.Net ......</p>
<p><a href="#" class="btn btn-primary">Learn</a> </p>
</div>
</div>
縮略圖
結合12柵格系統，並使用.thumbnail樣式，可以將圖像、視頻、文本展示得更加漂亮。
縮略圖有兩種使用方式，一種 用於僅顯示圖片，另外一種利用容器將圖片和標題顯示在一起。
可以在.caption樣式的元素容器內，添加任意風格的元素，比如按鈕、鏈接等。本質加了個padding和color。
將以下內容放置一個row中，則會在大屏下一行顯示3個，中屏顯示2個，小屏顯示1個
<div class="col-md-6 col-lg-4">
<div class="thumbnail">
<img src="url" alt="Alternate Text" />
<div class="caption">
<h4>MicroSoft</h4>
<p>MicroSoft ....</p>
<p>
<a class="btn btn-primary">Up</a>
<a class="btn btn-default">Down</a>
</p>
</div>
</div>
</div>
警告框
在交互式網頁中，經常要根據用戶操作的上下文為用戶提供 靈活的提示消息，比如操作成功、警告提示、錯誤信息。
默認的警告框是用帶有alert樣式的div元素容器包含的（p元 素也可以），內部可選地添加一個關閉按鈕button元素，關閉按鈕要確保設置button元素的屬性值data-dismiss="alert"， 原因是警告框的關閉功能是通過JavaScript檢測該屬性實現的.
alert-danger（危險紅）、alert-success（成功綠）、alert-info（信息藍）、alert-warning（警告黃）
在警告框中，還對h4、hr、a標簽做了處理。組合起來非常酷。
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">x</a>
<h4>Warning</h4>
<hr />
<p>Check your write,or look <a href="#">help</a></p>
</div>
進度條
進度條（Progress bar）是一個比較常見的網頁效果，一般用於表示加載、跳轉或動作正在執行中的狀態
progress用於設置進度條的容器樣式，而 progress-bar用於限制進度條的進度（顏色進度）。
progress樣式主要是設置進度條容器的背景色、容器高度、 間距等，progress-bar樣式在設置進度方面，重要的是設置了進度條的 顏色（即樣式的背景色）和過渡效果
除了progress-primary（重點藍）外，其他4種基本顏色。
bs還為進度條提供 了一種條紋樣式，並且不同的顏色可以顯示不同的條紋。只是在容器元素上附加 了一個新的progress-striped樣式，該樣式的實現是利用CSS3的線 性漸變特性linear-gradient來實現的。
bs還提供了一個更炫的動畫 樣式，即：讓條紋動起來。active
堆疊，只要在progress容器內放置多個progress-bar即可實現。
<div class="progress progress-striped">
<div class="progress-bar active" style="width: 35%">35</div>
<div class="progress-bar progress-bar-success" style="width: 15%"></div>
</div>
媒體對象
媒體對象（Media object）這是一個抽象的樣式，用以構建不同類型的組件。
一組媒體的默認使用方式通常包括如下幾個樣式：media、 media-object、media-body、media-heading 4個樣式，和一個用於控制左右浮動的pull-left（或pull-right）樣式。
如果需要將多個媒體進行列表展示的話，則可以利用在ul上應用media-list樣式、li上應用media樣式來實現。
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
列表
大部分的列表組都是由無標記的列表（ul/li）來實現
列表組有2個基本的樣式：listgroup和list-group-item。
導航箭頭
.list-group-item > .glyphicon-chevron-right {
float: right; /* 設置小圖標 右浮動 */
margin-right: 5px; /* 小圖標在span、label、i元素上設置-15像素的右間距 */
}
.list-group-item > .glyphicon + .badge {
margin-right: 5px; /* 如果兩個圖標放在一起顯示，則保留5像素的右間距 */
}
bs又提供了list-groupitem-heading和list-group-item-text這兩個樣式，用於開發人員自 定義列表項里的具體內容，其表示的意思分別是：列表項條目的 頭部（heading）和主要內容（text）。
<div class="list-group">
<a href="#" class="list-group-item active">
<span class="badge">11</span>
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-danger">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
面板
基礎的面板很簡單，就是簡單在div上應用panel，產生一個具 有邊框的文本顯示框
又為其定義 了面板頭（panel-heading）和面板尾（panel-footer）樣式，
除了progress-primary（重點藍）外，其他4種基本顏色。
一般在使用面板的時候，往往可能會在主區域（panel-body）內放很多內容，比如圖片、表格等
帶表格的面板
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
窪地
窪地（Well）樣式的效果和大屏幕展播Jumbotron樣式類似， 不同點是well樣式有了邊框設置，並且默認高度是自適應文本的高度。主要用來實現嵌入在網頁中。
well樣式也提供了不同大小的樣式（主要是panding和圓角大小），分別是：well-lg和well-sm
內容太長會超出邊界！
3.x版本中還新增了一個bootstraptheme.css文件，該文件並沒有提供什么新的功能，僅是針對一些常用的CSS組件進行了增強。
但是theme默認並沒有對所有的CSS組件都進行增強，而是針對9個方面的組件進行了增強：btn按鈕、縮略圖、 下拉菜單、導航條、警告框、進度條、列表組、面板和well
theme文件不是必須要引用的，如果喜歡這種風格才引用它；
如果要定制自己的風格，則可以引用自己的theme名 稱，比如bootstrao-theme-flatui.css。
但是一定要注意，該文件一定要在bootstarp.min.css文件之后才能引用，否則會覆蓋默認的效果。
本節地址：http://neverc.cnblogs.com/p/4782635.html