实现下拉菜单的步骤：

• 创建父类dropdown或dropup
• 在子类<a>或<button>中，添加dropdown-toggle以及辅助jquery实现动作的data-toggle="dropdown"
• 创建无序列表，并添加dropdown-menu

小总结：

• dropdown：指定下拉菜单，下拉菜单都包裹在dropdown里
• dropup：指定上拉菜单
• dropdown-menu：创建下拉菜单
• dropdown-header：在下拉菜单中创建新标题
• disabled：不能点击
• divider：分割线

另外使用btn-group可以形成按钮分割的下拉菜单的效果，同样的其大小可以使用btn-lg，btn-sm，btn-xs

2 导航栏

制作一个导航栏的步骤：

• 向<nav>对象添加navbar类以及navbar-default类
• 若要添加标题则需要创建一个container-fluid类包裹navbar-header其内部包含一个navbar-brand的<a>或<p>元素
• 为导航栏添加链接，则需要添加nav以及navbar-nav的无序列表即可

2.1 响应式导航栏

实现导航栏的响应式，即浏览器的缩小，会导致样式变化，如生成小按钮，具体操作：

• 向<nav>对象添加navbar类以及navbar-default类
• 折叠之后显示的按钮可以内嵌在标题navbar-header类，如下拉菜单一样，不过这次添加的是navbar-toggle类，以及用于告诉脚本要干嘛的data-toggle="collapse"，还有用于指向的data-target="#example-navbar-collapse"（指向id）
• 折叠的内容就放在collapse以及navbar-collapse且拥有对应id的<div>中作为无序列表

2.2 导航栏中的表单，按钮以及文本

• 添加表单：添加navbar-form类的<input>
• 添加按钮：添加不属于form的<button>时，button要添加navbar-btn
• 添加文本：向段落添加navbar-text，确保适当的前导和颜色

2.3 导航栏的位置

• 导航栏的对齐：navbar-left以及navbar-right
• 固定到顶部：在navbar父类中添加类名navbar-fixed-top（为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 标签添加至少 50 像素的内边距）
• 固定到底部：navbar-fixed-bottom
• 固定定位：navbar-static-top

2.4 小总结

• navbar以及navbar-default：定义导航栏
• container-fluid，navbar-header以及navbar-brand定义菜单标题
• nav以及navbar：添加链接
• navbar-toggle：在navbar-headeer内创建<div>，添加navbar-toggle用于定义响应式导航栏
• data-toggle="collapse"：同样添加到navbar-toggle中，作为操控js
• data-target="#id"：指向作用
• collaspe以及navbar-collaspe：用于定义响应式的下拉菜单
• navbar-form：用于导航栏添加输入框
• navbar-text：用于导航栏添加文本
• navbar-btn：用于导航栏添加按钮
• navbar-left：左浮动
• navbar-right：右浮动
• navbar-fixed-top：定位顶部
• navbar-fixed-bottom：定位底部
• navbar-static-top：固定定位顶部

3 导航元素

导航元素常用于网页中的小布局，小板块中的菜单

3.1 标签式导航菜单

制作无序列表添加nav以及nav-tabs，使用nav-justified可以使导航菜单宽度与父类元素等宽，初始化选中的<li>添加active，同样的还有disabled

3.2 胶囊式导航菜单

制作无序列表添加nav以及nav-pills，使用nav-justified可以使导航菜单宽度与父类元素等宽，初始化选中的<li>添加active，同样的还有disabled，另外使用nav-stacked可以使胶囊菜单垂直摆放

注意：添加disabled类改变的只是样式，并不能改变功能

3.3 面包屑导航栏

创建无序列表添加breadcrumb

3.4 带下拉菜单的胶囊式标签页

• 向导航菜单栏中的<a>元素添加data-toggle="tab"或data-toggle="pill"并添加书签指向href="#id"，并设置初始化active
• 创建tab-content父类<div>，用于内嵌tab-pane的<div>，内嵌的<div>注意要设置上对应的id，同样内嵌tab-pane的<div>也可以设置active

3.5 小总结

• nav及nav-tabs：定义标签化导航菜单
• nav及nav-pills：定义胶囊化导航菜单
• nav-stacked：胶囊化导航菜单垂直摆放
• breadcrumb：面包屑导航
• nav-jusetified：定义与父类等宽
• data-toggle="tab"，data-toggle="pill"以及href：定义指向标签页
• tab-content：包裹tab-pane定义标签页
• tab-pane：定义每一项标签页

4 分页

• pagination：创建无序列表添加pagination
• pagination-lg
• pagination-sm
• active
• disalbed
• page：定义一个简单的无序列表
• previous：左浮动
• next：右浮动

5 标签

标签可用于计数、提示或页面上其他的标记显示，使用label类的<span>元素表示标签

• label-default：灰
• label-primary：蓝
• label-success：绿
• label-info：天蓝
• label-warning：黄
• label-danger：红
• Badges：边角更加圆

6 超大屏幕与页面标题

• jumbotron：创建一个带有jumbotron 的容器 <div>常用登录页面，可以增加标题的大小
• page-header：文章标题放置在带有page-header的<div>中

7 缩略图

• 在图像周围添加带有thumbnail的 <a>标签，亦可以为<div>标签用于自定义缩略图已达到想电商网站中具体商品栏的效果，其中添加的内容用caption的<div>包裹起来，已达到外内距适中

8 警告

• alert：固定类定义警告
• alert-success：蓝
• alert-info：天蓝
• alert-warning：淡粉
• alert-danger：紫
• alert-link：警告添加链接，将alert-link添加到<a>标签上

8.1 可取消警告

• 通过创建一个<div>，并向其添加一个 alert和四个上下文类之一，同时添加alert-dismissable
• 添加关闭按钮：添加data-dimissed="alert"

9 进度条

• 创建progress类的<div>，同时添加progress-striped类能形成斜斑马线样式，添加active类可以有动态效果
• 在progress类中创建内嵌的progress-bar类的<div>，并添加style="*%"的属性，用以表示进度，同时添加progress-bar-*，* 可以是 success、info、warning、danger。（添加多个progress-bar可以实现堆叠进度条的效果）

10 多媒体对象

多媒体对象是一个抽象对象，透过它可以实现如同微博评论的组件

• 创建父类media的<div>或者media-list的无序列表，该类允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边
• 创建内嵌的media-body用于包裹主题内容
• 创建media-left或media-right，它们相应的应放置在media-body的左右两侧

11 面板

• 创建并添加panel类以及panel-default（还可以为panel-primary、panel-success、panel-info、panel-warning、panel-danger）类的<div>
• 创建内嵌的panel-heading类以及panel-title用于定义标题
• 创建内嵌的panel-body定义面板内容
• 创建内嵌的panel-footer定义脚注

12 Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>，只需添加well类即可，还可以继续添加well-lg或well-sm用于定义高度大小