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

类。