1.图标
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
2下拉列表
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" >
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation" >
<a role="menuitem" tabindex="-1" href="#">Java</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="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
3.按钮组
<div class="btn-toolbar" role="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>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 7</button>
<button type="button" class="btn btn-default">按钮 8</button>
<button type="button" class="btn btn-default">按钮 9</button>
</div>
</div>
4.输入框组
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="twitterhandle">
</div>
把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加 .input-group-addon class，您需要使用 class .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">
</div><!-- /input-group -->
5.Bootstrap 导航元素
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
表格导航或标签(nav-tabs)
胶囊式的导航菜单(nav-pills)
垂直的(nav-stacked)
两端对齐的导航
您可以在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。
禁用链接
对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态，
6.导航栏
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">W3Cschool</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav>
响应式：您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。
折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。
第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，
第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。
导航栏中的表单：使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为
固定到顶部：让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。
7.Bootstrap 面包屑导航（Breadcrumbs）
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ol>
8.分页
<ul class="pagination">
<li><a href="#">«</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="#">»</a></li>
</ul>
分页的状态 class .disabled、.active
分页的大小 class .pagination-*
.pager 添加该 class 来获得翻页链接。
.previous, .next 使用 class .previous 把链接向左对齐，使用 .next 把链接向右对齐。
.disabled 添加该 class 来获得一个颜色变淡的外观。
9.Bootstrap 标签 class .label
10.Bootstrap 徽章（Badges）
徽章（Badges）主要用于突出显示新的或未读的项。
如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。
当没有新的或未读的项时，通过 CSS 的 :empty 选择器，徽章会折叠起来，表示里边没有内容。
激活导航状态 <span class="badge"> 来激活链接
11.Bootstrap 超大屏幕（Jumbotron）
.jumbotron class
为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class
12.Bootstrap 页面标题（Page Header）
<div class="page-header">
<h1>页面标题实例
<small>子标题</small>
</h1>
</div>
13.Bootstrap 缩略图
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</a>
</div>
14.Bootstrap 警告（Alerts）
创建一个 <div>，并向其添加一个 .alert class 和
四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
15.进度条
<div class="progress">
<div class="progress-bar" role="progressbar" style=" 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
16.Bootstrap 列表组
<ul class="list-group">
<li class="list-group-item">免费域名注册</li>
<li class="list-group-item">免费 Window 空间托管</li>
</ul>
17.Bootstrap 面板（Panels）
只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可
18.Bootstrap Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>