1、下拉菜单（基本用法）
在使用 Bootstrap 框架的下拉菜单时，必须调用 Bootstrap 框架提供的 bootstrap.js 文件。当然，如果你使用的是未编译版本，在 js 文件夹下你能找到一个名为 dropdown.js 的文件。你也可以调用这个 js 文件。在使用 Bootstrap 框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用。
2、下拉菜单（原理分析）
Bootstrap 框架中的下拉菜单组件，其下拉菜单项默认是隐藏的，因为 dropdown-menu 默认样式设置了 display:none，当用户点击父菜单项时，下拉菜单将会被显示出来，当用户再次点击时，下拉菜单将继续隐藏。现在我们来分析一下实现原理，非常简单，通过 js 技术手段，给父容器 div.dropdown 添加或移除类名 open 来控制下拉菜单显示或隐藏。也就是说，默认情况，div.dropdown 没有类名 open，当用户第一次点击时，div.dropdown 会添加类名 open；当用户再次点击时，div.dropdown 容器中的类名 open 又会被移除。
3、下拉菜单（下拉分隔线）
在 Bootstrap 框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的 ，并且给这个 添加类名 divider 来实现添加下拉分隔线的功能。
4、下拉菜单（菜单标题）
通过添加 divider 可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题）。
5、下拉菜单（对齐方式）
Bootstrap 框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在 dropdown-menu 上添加一个 pull-right 或者 dropdown-menu-right 类名。同时一定要为 .dropdown 添加 float:left css 样式。
.dropdown{
float: left;
}
6、下拉菜单（菜单项状态）
下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus），下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。
7、按钮（按钮组）
按钮组和下拉菜单组件一样，需要依赖于 button.js 插件才能正常运行。不过我们同样可以直接只调用 bootstrap.js 文件。因为这个文件已集成了 button.js 插件功能。对于结构方面，非常的简单。使用一个名为 btn-group 的容器，把多个按钮放到这个容器中。除了可以使用 元素之外，还可以使用其他标签元素，比如 标签。唯一要保证的是：不管使用什么标签，.btn-group 容器里的标签元素需要带有类名 .btn。
…
glyphicon glyphicon-search
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-download
glyphicon glyphicon-upload
8、按钮（按钮工具栏）
那么 Bootstrap 框架按钮工具栏也提供了这样的制作方法，你只需要将按钮组 btn-group 按组放在一个大的容器 btn-toolbar 中，实现原理主要是让容器的多个分组 btn-group 元素进行浮动，并且组与组之前保持 5px 的左外距。在介绍按钮一节中，我们知道按钮是通过 btn-lg、btn-sm 和 btn-xs 三个类名来调整 padding、font-size、line-height 和 border-radius 属性值来改变按钮大小。那么按钮组的大小，我们也可以通过类似的方法。
9、按钮（嵌套分组）
很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用的时候，只需要把当初制作下拉菜单的 dropdown 的容器换成 btn-group，并且和普通的按钮放在同一级。
10、按钮（垂直分组）
实际运用当中，总会碰到垂直显示的效果。在 Bootstrap 框架中也提供了这样的风格。我们只需要把水平分组的 btn-group 类名换成 btn-group-vertical 即可。
11、按钮（等分按钮）
等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的 100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是 20% 的宽度，如果有四个按钮，那么每个按钮是 25% 宽度，以此类推。等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组 btn-group 上追加一个 btn-group-justified 类名，实现原理非常简单，把 btn-group-justified 模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）。在制作等分按钮组时，请尽量使用 标签元素来制作按钮，因为使用 标签元素时，使用 display:table 在部分浏览器下支持并不友好。
12、按钮下拉菜单
按钮下拉菜单其实就是普通的下拉菜单，只不过把 标签元素换成了 标签元素。唯一不同的是外部容器 div.dropdown 换成了 div.btn-group。
13、按钮的向下向上三角形
按钮的向下三角形，我们是通过在 标签中添加一个 标签元素，并且命名为 caret，有的时候我们的下拉菜单会向上弹起（接下来一个小节会介绍），这个时候我们的三角方向需要朝上显示，实现方法：需要在 .btn-group 类上追加 dropup 类名（这也是做向上弹起下拉菜单要用的类名）。
14、向上弹起的下拉菜单
有些菜单是需要向上弹出的，比如说你的菜单在页面最底部，而这个菜单正好有一个下拉菜单，为了让用户有更好的体验，不得不让下拉菜单向上弹出。在 Bootstrap 框架中专门为这种效果提代了一个类名 dropup。使用方法正如前面所示，只需要在 btn-group 上添加这个类名（当然，如果是普通向上弹出下拉菜单，你只需要在 dropdown 类名基础上追加 dropup 类名即可）。
15、导航（基础样式）
Bootstrap 框架中制作导航条主要通过 .nav 样式。默认的 .nav 样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如 nav-tabs、nav-pills 之类。
16、导航（标签形 tab 导航）
标签形导航，也称为选项卡导航。特别是在很多内容分块显示的时，使用这种选项卡来分组十分适合。标签形导航是通过 nav-tabs 样式来实现。在制作标签形导航时需要在原导航 nav 上追加此类名，其实上例的效果和我们平时看到的选项卡效果并不一致。一般情况之下，选项卡教会有一个当前选中项。其实在 Bootstrap 框架也相应提供了。假设我们想让 Home 项为当前选中项，只需要在其标签上添加类名 class="active" 即可。除了当前项之外，有的选项卡还带有禁用状态，实现这样的效果，只需要在标签项上添加 class="disabled" 即可。
17、导航（胶囊形 pills 导航）
胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和 nav-tabs 类似，同样的结构，只需要把类名 nav-tabs 换成 nav-pills 即可。
18、导航（垂直堆叠的导航）
在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在 nav-pills 的基础上添加一个 nav-stacked 类名即可。
19、自适应导航（使用）
自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用 btn-group-justified 制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名 nav-justified。当然他需要和 nav-tabs 或者 nav-pills 配合在一起使用。
20、自适应导航（实现原理）
实现原理并不难，列表（）设置了 display:table-cell，让列表项以模拟表格单元格的形式显示。
21、导航加下拉菜单（二级导航）
前面介绍的都是使用 Bootstrap 框架制作一级导航，但很多时候，在 Web 页面中是离不开二级导航的效果。那么在 Bootstrap 框架中制作二级导航就更容易了。只需要将 li 当作父容器，使用类名 dropdown，同时在 li 中嵌套另一个列表 ul，使用前面介绍下拉菜单的方法就可以。
22、面包屑式导航
面包屑（Breadcrumb）一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。
附录
阅读原文：https://blog.mazey.net/1962.html