bootstrap复习：组件
一、下拉菜单
1.实例：将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。为下拉菜单的父元素添加 .dropup 类还可以让菜单向上弹出（默认是向下弹出）。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
</div>
2.对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
...
</ul>
3.分割线：为下拉菜单添加一条分割线，用于将多个链接分组。
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
...
<li role="presentation" class="divider"></li>
...
</ul>
二、按钮组
1.实例：通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
<div class="btn-group" role="group" aria-label="...">
<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>
2.嵌套：想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。
<div class="btn-group" role="group" aria-label="...">
<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" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
3.垂直排列：.btn-group-vertical可以让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。
4.两端对齐排列的按钮组：.btn-group-justified可以让一组按钮两端对齐排列。为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中。
三、输入框组
1.通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为.input-group赋予.input-group-addon 类，可以给.form-group的前面或后面添加额外的元素。
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
2.可以将多选框或单选框作为额外元素添加到输入框组中。
<div class="input-group"> <span class="input-group-addon"> <input type="checkbox" aria-label="..."> </span> <input type="text" class="form-control" aria-label="...">
</div>
3.为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn来包裹按钮元素。
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">GO!</button>
</span>
<input type="text"class="form-control" placeholder="Search for...">
</div>
四、导航
Bootstrap 中的导航组件都依赖同一个.nav类，状态类也是共用的。
1.标签页:使用.nav-tabs类可以创建一个普通标签页。
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
2.胶囊式标签页：使用使用.nav-pills类可以创建要给胶囊式标签页。
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
3.胶囊是标签页也是可以垂直方向堆叠排列的。只需添加.nav-stacked 类。
五、导航条
1.品牌图标：添加.nav-brand类。
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
2.表单：将表单放置于.navbar-form之内可以呈现很好的垂直对齐。
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
3.按钮：对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。
4.固定在顶部：添加.navbar-fixed-top可以让导航条固定在顶部。
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
5.固定在底部：添加.navbar-fixed-bottom类可以让导航条固定在底部。
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
6.通过添加.nab-bar-inverse类可以改变导航条的外观。
<nav class="navbar navbar-inverse">
...
</nav>
六、分页
1.默认分页：
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
2.尺寸：.pagination-lg或.pagination-sm提供了额外可供选择的尺寸。
3.翻页：默认翻页中，链接居中对齐。
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
4.对齐链接：也可以通过.previous与.next将链接向两端对齐。
<nav>
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
七、标签
1.实例：
<h3>Example heading <span class="label label-default">New</span></h3>
八、徽章
1.给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
九、巨幕
这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。
<div class="jumbotron">
<div class="container">
...
</div>
</div>
十、页头
1.实例：
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
十一、缩略图
1.添加.thumbnail类可以创建缩略图。
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
十二、进度条
1.默认样式：
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
2.带有提示的进度条：
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
3.通过添加.progress-bar-striped可以创建进度条动画效果。
4.把多个进度条放进.progress中可以堆叠进度条。
十三、媒体对象
1.这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
2.图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
十四、列表组
1.实例：
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
2.徽章：给列表组加入徽章组件，它会自动被放在右边。
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
十五、面板
1.基本实例：
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
2.带标题的面板：通过添加.panel-heading可以很简单的为面板加入一个标题容器。
3.带脚注的面板：通过添加.panel-footer类，可以为面板加入注脚。
4.带表格的面板：为面板中不需要边框的表格添加.table类。
十六、具有响应式特性的嵌入内容
1.根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。
