Bootstrap 基本用法（续）

在bootstrap中有很多的组件，这些组件可以帮组我们更快的写出一些好看的样式，下面就是一些样式：

[b]导航框：[/b]

<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>

　　样式：

　　　　　　　　　　

禁用&激活链接：

<ul class="nav nav-pills">
...
<li class="disabled"><a href="#">Disabled link</a></li><!-class="disabled" 便可以禁用链接->
　<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li><!-class="active"便可以链接->

...
</ul>

下拉菜单

<div class="dropdown">
<button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>

默认分页：

　　

<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>

　　样式：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　


[b]进度条：[/b]

　　

<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete</span>
</div>
</div>

　　样式：

　　　　　　　　　　　　　　　　　　　


　　

定制内容

在里面可以加几乎任何HTML，甚至是像下面的带链接的列表组。

　　

<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>

　　样式：

　　　　　　　　


这些为在bootstrap中较为常用的，还有更多的css样式这里就没一一列举了；要这些样式只需要直接复制这些代码就可以了，要改变其中的一些细节样式可以改变其中的class;