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）

二级导航

导航条

导航和导航条是一样的吗？

导航条是网站中作为导航页头的响应式基础组件。他们在移动设备上可以折叠（并且可开可关），会随着浏览器宽度增加而逐渐变为水平展开模式

常见的导航条应用

基础条航条

导航条中的表单

导航条中的按钮、文本、链接

顶部固定或底部固定

响应式导航条