下拉菜单

除了bootstrap.min.css，还要引入jquery和bootstrap.min.js（基于jquery）

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

对齐

B默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

分割线

为下拉菜单添加一条分割线，用于将多个链接分组。

禁用的菜单项

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。

<div class="container"><div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true">选择<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li role="presentation" class="dropdown-header">选择1项</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">智慧</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">力量</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">美貌</a></li><li role="presentation" class="divider"></li><li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">火狐看不见分割线</a></li><li class="disabled"><a href="#">IE兼容模式不兼容</a></li></ul></div></div>

按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。

基本

btn-group

按钮工具栏
把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。

尺寸
只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。

嵌套
想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。

垂直排列
让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。

<div class="btn-toolbar"><div class="btn-group btn-group-lg" role="group"><button type="button" class="btn btn-primary">左</button><button type="button" class="btn btn-primary">右</button><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-left"></span></button></div><div class="btn-group" role="group"><button type="button" class="btn btn-primary">左</button><button type="button" class="btn btn-primary">右</button><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-left"></span></button><div class="btn-group" role="group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li></ul></div></div><div class="btn-group  btn-group-sm " role="group"><button type="button" class="btn btn-primary">左</button><button type="button" class="btn btn-primary">右</button><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-left"></span></button></div><div class="btn-group btn-group-xs" role="group"><button type="button" class="btn btn-primary">左</button><button type="button" class="btn btn-primary">右</button><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-left"></span></button></div></div><hr><div class="btn-group-vertical" role="group"><button type="button" class="btn btn-primary">左</button><button type="button" class="btn btn-primary">右</button><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-left"></span></button><div class="btn-group" role="group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li></ul></div></div>

两端对齐排列的按钮组
让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。

关于 <a> 元素
只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。

关于 <button> 元素
为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中you must wrap each button in a button group。

 两端对齐排列的按钮组---IE可以这样：<div class="btn-group btn-group-justified" role="group"><button type="button" class="btn btn-primary">左</button><button type="button" class="btn btn-primary">右</button><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-left"></span></button><div class="btn-group" role="group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li></ul></div></div>
标准：<div class="btn-group btn-group-justified" role="group"><div class="btn-group" role="group"><button type="button" class="btn btn-default">Left</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default">Middle</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default">Right</button></div></div>
</div>

火狐显示不正常的地方，IE正常

按钮式下拉菜单

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。

分裂式按钮下拉菜单
相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。

尺寸
按钮式下拉菜单适用所有尺寸的按钮。

向上弹出式菜单
给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。

 <div class="container"><div class="btn-group"><button type="button" class="btn btn-primary">分裂式按钮下拉菜单</button><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">1</a></li><li><a href="#">2</a></li></ul></div><hr><div class="btn-group"><button type="button" class="btn btn-primary btn-lg">大按钮</button><button type="button" class="btn btn-primary dropdown-toggle btn-lg" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">1</a></li><li><a href="#">2</a></li></ul></div><div class="btn-group"><button type="button" class="btn btn-primary">中等按钮</button><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">1</a></li><li><a href="#">2</a></li></ul></div><div class="btn-group"><button type="button" class="btn btn-primary btn-xs">小按钮</button><button type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">1</a></li><li><a href="#">2</a></li></ul></div><hr><div class="btn-group dropup"><button type="button" class="btn btn-primary">向上弹出式菜单</button><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">1</a></li><li><a href="#">2</a></li></ul></div></div>

输入框组
通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。
只支持文本输入框 <input>
这里请避免使用 <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式。
避免使用 <textarea> 元素，由于它们的 rows 属性在某些情况下不被支持。

不支持在输入框的单独一侧添加多个额外元素。
不支持在单个输入框组中添加多个表单控件。

尺寸
为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。
作为额外元素的多选框和单选框
可以将多选框或单选框作为额外元素添加到输入框组中。

作为额外元素的按钮
为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素。

<div class="container"><div class="input-group"><span class="input-group-addon">加在前面</span><input type="text" class="form-control" placeholder="输入内容"><span class="input-group-addon">加在后面</span></div><hr><div class="input-group input-group-lg"><span class="input-group-addon">大尺寸</span><input type="text" class="form-control" placeholder="输入内容"></div><br><div class="input-group"><span class="input-group-addon">中尺寸</span><input type="text" class="form-control" placeholder="输入内容"></div><br><div class="input-group input-group-sm"><span class="input-group-addon">小尺寸</span><input type="text" class="form-control" placeholder="输入内容"></div><hr><div class="row"><div class="col-lg-6"><div class="input-group"><span class="input-group-addon"><input type="checkbox"></span><input type="text" placeholder="添加单选框" class="form-control"></div></div><div class="col-lg-6"><div class="input-group"><span class="input-group-addon"><input type="radio"></span><input type="text" placeholder="添加多选框" class="form-control"></div></div><hr><div class="col-lg-4"><div class="input-group"><span class="input-group-btn"><button class="btn btn-primary" type="button">按钮</button></span><input type="text" placeholder="添加按钮" class="form-control"></div></div><div class="col-lg-4"><div class="input-group"><input type="text" placeholder="按钮在右边" class="form-control"><div class="input-group-btn"><button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"aria-expanded="false">添加下拉菜单<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">1</a></li><li><a href="#">2</a></li></ul></div></div></div><div class="col-lg-4"><div class="input-group"><input type="text" placeholder="按钮在右边" class="form-control"><div class="input-group-btn"><button class="btn btn-warning">分裂式按钮</button><button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"aria-expanded="false"><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">1</a></li><li><a href="#">2</a></li></ul></div></div></div></div>
</div><img src="https://img-blog.csdn.net/20150322221820241" alt="" />

导航

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

标签页
注意 .nav-tabs 类依赖 .nav 基类。

胶囊式标签页
HTML 标记相同，但使用 .nav-pills 类

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。

两端对齐的标签页
在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。

禁用的链接
对任何导航组件（标签页、胶囊是标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。

链接功能不受到影响
这个类只改变 <a> 的外观，不改变功能。

整个html，注意手写的js代码，没这些无法运行

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><meta name="viewort" content="width=device-width,initial-scale=1"><link href="../CSS/bootstrap.min.css" rel="stylesheet"><script src="../jquery-2.1.3.min.js"></script><script src="../bootstrap.min.js"></script><title>导航</title><strong> <script>$(document).ready(function () {$("a").on("click", function () {$(this).tab("show");})})</script></strong>
</head>
<body>
<div class="container"><ul class="nav nav-tabs"><li role="presentation" class="active"><a href="#">菜单1(默认选中)</a></li><li role="presentation"><a href="#">菜单2</a></li><li role="presentation"><a href="#">菜单3</a></li></ul><hr><ul class="nav nav-pills"><li role="presentation" class="active"><a href="#">胶囊式标签页</a></li><li role="presentation"><a href="#">菜单2</a></li><li role="presentation"><a href="#">菜单3</a></li></ul><hr><ul class="nav nav-pills nav-stacked"><li role="presentation" class="active"><a href="#">垂直方向堆叠排列</a></li><li role="presentation"><a href="#">nav-tabs也可以</a></li><li role="presentation"><a href="#">菜单3</a></li></ul><hr><ul class="nav nav-tabs nav-justified"><li role="presentation" class="active"><a href="#">两端对齐的标签页</a></li><li role="presentation" class="disabled"><a href="#">禁用的链接</a></li><li role="presentation" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">下拉菜单<span class="caret"></span><ul class="dropdown-menu" role="menu"><li><a href="#">1</a></li><li><a href="#">2</a></li></ul></a></li></ul></div>
</body>
</html>