3.bootstrap-组件

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="#">&laquo;</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="#">&raquo;</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="width: 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>