word; clear: both; text-indent: 2em; color: rgb(24, 30, 51); font-family: PingFangSC, 微軟雅黑, 黑體, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">

word; clear: both; text-indent: 2em; color: rgb(24, 30, 51); font-family: PingFangSC, 微軟雅黑, 黑體, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">Bootstrap組件

Bootstrap組件是Bootstrap框架的核心之一。可以利用Bootstrap組件構建出絢麗的頁面

常用的組件：Icon圖標（Glyphicon）、下拉菜單（Dropdown）、輸入框（Input group）、導航（Nav）、導航條（Navbar）、縮略圖（Thumbnail）、媒體對象（Media object）、列表組（Listgroup）、分頁導航（Pagination）

9.3.1.下拉菜單組件制作下拉菜單

小圖標組件的使用及應用場景

圖標（icon）是一個優秀網站不可缺少的一組元素，小圖標的點綴可以使網站瞬間提升一個檔次

Bootstrap給我們提供了250種小圖標，這些小圖標可以作用在內聯元素上，給網頁增加更多活力

小圖標應用注意事項

圖標類不能和其他組件直接聯合使用

不能在同一個元素上與其他類同存在

創建一個嵌套的span元素，并將圖標應用到這個span上

只對內容為空的元素起作用

對引入的圖標位置有規定

圖標字體全部位于../fonts/目錄內，相對于預編譯版CSS文件的應該是同級目錄

小圖標應用場景

icon和導航組合

icon和按鈕組合

icon和輸入框組合

下拉菜單組件

在網頁交互的時候經常會需要上下文菜單或者隱藏/展開菜單

下拉菜單的 JavaScript 插件能讓它具有交互性

下拉菜單使用方法

名為.dropdown樣式所在的是大容器

.dropdown-menu是放菜單li的容器

.open可以控制菜單展開與否

9.3.2.輸入框和小圖標組件制作搜索框

輸入框組件是通過在文本輸入框input前面、后面或是兩邊加上文字或按鈕

其實有的時候，我們需要將文本輸入框（Input group）和文字或者小icon組合在一起使用（稱之addon）

使用輸入框須知

請避免在select元素上使用該功能，因為Webkit瀏覽器不完全支持input-group組件的特性

不要直接將.input-group和.form-group混合使用，因為.input-group是一個獨立的組件

不要將表單組件或柵格列類直接和輸入框混合使用，而是將輸入框組件嵌套到表單組件或柵格相關元素的內部

9.3.3.導航和導航條組件制作響應式導航條

導航

導航（Nav）是網站最重要的組成部分，可以便于用戶查找網站所提供的各項功能服

Bootstrap中導航組件都依賴一個.nav類，狀態也是公共的

常見的導航類型

選項卡導航（nav-tabs）

膠囊式選項卡導航（nav-pills）

自適應導航（nav-justified）

二級導航

導航條

導航和導航條是一樣的嗎？

導航條是網站中作為導航頁頭的響應式基礎組件。他們在移動設備上可以折疊（并且可開可關），會隨著瀏覽器寬度增加而逐漸變為水平展開模式

常見的導航條應用

基礎條航條

導航條中的表單

導航條中的按鈕、文本、鏈接

頂部固定或底部固定

響應式導航條