bootstrap入门到实战：bootstrap组件（一）-爱代码爱编程
目录
一、Glyphicons字体图标
BootStrap提供了一系列的 250 多个来自 Glyphicon Halflings 的字体图标
Glyphicon Halflings 字体图标来源：
温馨提示
必须引入fonts字体图标资源到项目中
实例
可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>二、下拉菜单
用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性
1. 基本实例
1.1 示例
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Web学习
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML + CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">BootStrap</a></li>
</ul>
</div>
</div>
</body>运行上述代码，发现点击下拉菜单没有反应，打开控制台，报错原因是需要导入jQuery
温馨提示
下拉菜单的动态效果以来BootStrap的JS文件，同时BootStrap的JS文件依赖于jQuery文件
最终效果如下图展示：
1.2 用jQuery实现
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle">
Web学习
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML + CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">BootStrap</a></li>
</ul>
</div>
</div>
<script>
$('.dropdown-toggle').dropdown()
</script>
</body>用jQuery实现下拉菜单的效果，只能将“下拉菜单”下拉，而不能返回，所以不推荐。
1.3 菜单向上弹出
通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）
<div class="dropup">
...
</div>2. 对齐
默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐
<ul class="dropdown-menu dropdown-menu-right">
...
</ul>效果如下图所示：
为了增强实用性，一般使用菜单右对齐时，会对 button 标签增加 .btn-block 类
<button class="btn btn-primary dropdown-toggle btn-block" data-toggle="dropdown">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
...
</ul>效果如下图所示：
3. 标题
在任何下拉菜单中均可通过添加标题来标明一组动作
<ul class="dropdown-menu">
<li class="dropdown-header">Web前端</li>
...
<li class="dropdown-header">Java</li>
...
</ul>效果如下图所示：
4. 分割线
为下拉菜单添加一条分割线，用于将多个链接分组
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
</ul>效果如下图所示：
5. 禁用的菜单项
为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项
<ul class="dropdown-menu">
<li class="disabled"><a href="#">JavaScript</a></li>
</ul>效果如下图所示：
三、按钮组
通过按钮组容器把一组按钮放在同一行里
1. 基本实例
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>效果如下图所示：
2. 按钮工具栏
把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件
tips：常用于分页操作
<div class="container">
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
<button type="button" class="btn btn-default">5</button>
</div>
</div>
</div>效果如下图所示：
3. 尺寸
只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用
<div class="container">
<div class="btn-toolbar">
<!-- 大号 -->
<div class="btn-group btn-group-lg">
...
</div>
</div>
<div class="btn-toolbar">
<!-- 默认 -->
<div class="btn-group">
...
</div>
</div>
<div class="btn-toolbar">
<!-- 较小号 -->
<div class="btn-group btn-group-sm">
...
</div>
</div>
<div class="btn-toolbar">
<!-- 超小号 -->
<div class="btn-group btn-group-xs">
...
</div>
</div>
</div>效果如下图所示：
4. 嵌套
想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中
<div class="container">
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉选项
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">选择1</a></li>
<li><a href="#">选择2</a></li>
</ul>
</div>
</div>
</div>
</div>效果如下图所示：
5. 垂直排列
让一组按钮垂直堆叠排列显示而不是水平排列
<div class="container">
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>
</div>效果如下图所示：
6. 两端对齐排列的按钮组
让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用
<div class="container">
<div class="btn-toolbar">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">right</button>
</div>
</div>
</div>
</div>效果如下图所示：
四、按钮式下拉菜单
把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了
1. 单按钮下拉菜单
只要改变一些基本的标记，就能把按钮变成下拉菜单的开关
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>效果如下图所示：
2. 分裂式按钮下拉菜单
相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>效果如下图所示：
3. 尺寸
按钮式下拉菜单适用所有尺寸的按钮
<div class="container">
<!-- 超大 -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
</ul>
</div>
<!-- 默认 -->
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
</ul>
</div>
<!-- 较小 -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
</ul>
</div>
<!-- 超小 -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
</ul>
</div>
</div>效果如下图所示：
4. 向上弹出式菜单
给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开
<div class="btn-group dropup">
...
</div>