一. 导航条
- 代码
- 效果展示
二.栅格系统、列表组
- 代码
<a href="#" class="list-group-item">微博热度</a>
<a href="#" class="list-group-item">热门博文</a>
<a href="#" class="list-group-item">同城服务</a>
<a href="#" class="list-group-item">同城服务</a>
</div>
</div>
</div>
</div>
<div class="col-md-7 bg-success">左</div>
<div class="col-md-3 bg-info">右</div>
</div>
<div class="row">
<div class="col-md-5 bg-info">中</div>
<div class="col-md-5 bg-success">中</div>
<div class="col-md-2 bg-info">中</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-1 bg-warning">md-1</div>
<div class="col-md-1 bg-warning">md-1</div>
<div class="col-md-1 bg-warning">md-1</div>
<div class="col-md-1 bg-warning">md-1</div>
<div class="col-md-1 bg-warning">md-1</div>
<div class="col-md-1 bg-warning">md-1</div>
<div class="col-md-1 bg-warning">md-1</div>
<div class="col-md-1 bg-warning">md-1</div>
<div class="col-md-1 bg-warning">md-1</div>
<div class="col-md-1 bg-warning">md-1</div>
<div class="col-md-1 bg-warning">md-1</div>
<div class="col-md-1 bg-warning">md-1</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-1 bg-info">1</div>
<div class="col-md-1 bg-warning">2</div>
<div class="col-md-1 bg-info">3</div>
<div class="col-md-1 bg-warning">4</div>
<div class="col-md-1 bg-info">5</div>
<div class="col-md-1 bg-warning">6</div>
<div class="col-md-1 bg-info">7</div>
<div class="col-md-1 bg-warning">8</div>
<div class="col-md-1 bg-info">9</div>
<div class="col-md-1 bg-warning">10</div>
<div class="col-md-1 bg-info">11</div>
<div class="col-md-1 bg-warning">12</div>
</div>
</div>
- 效果展示