警告框
<div class="container">
<div class="alert alert-success" role="alert">
你好，喵星人！
</div>
<div class="alert alert-danger" role="alert">
你好，喵星人！
</div>
<div class="alert alert-info" role="alert">
你好，喵星人！
</div>
<div class="alert alert-warning" role="alert">
你好，喵星人！
</div>
</div>
可关闭警告框
<div class="container">
<div class="alert alert-warning" role="alert">
<button type="button" class="close" data-dismiss="alert">
<span aria-disabled="true">×</span>
</button>
<strong>你好!</strong>
</div>
</div>
<script src="js/jquery.mini.js"></script>
<script src="js/bootstrap.min.js"></script>
进度条
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width: 50%">
<span class="sr-only">60%</span>
</div>
</div>
带有提示框的进度条
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width: 50%">
60%
</div>
</div>
带斜纹的进度条
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width: 50%">
60%
</div>
</div>
动画效果
.active
堆叠效果
<div class="progress">
<div class="progress-bar" style="width: 30%">30%</div>
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" style="width: 50%">
50%
</div>
</div>
列表组
基本的列表组，徽章，链接，被警用的条目，全景类，定制内容
<ul class="list-group">
<li class="list-group-item">喵星人1<span class="badge">10</span></li>
<li class="list-group-item">喵星人2</li>
<li class="list-group-item">喵星人3<span class="badge">20</span></li>
<li class="list-group-item">喵星人4<span class="badge">30</span></li>
</ul>
<div class="list-group">
<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 class="list-group">
<a href="" class="list-group-item list-group-item-danger">喵星人</a>
<a href="" class="list-group-item list-group-item-success">喵星人</a>
<a href="" class="list-group-item list-group-item-info">喵星人</a>
<a href="" class="list-group-item list-group-item-warning">喵星人</a>
</div>
<!--定制-->
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">你好，喵星人</h4>
<p class="list-group-item-text">
喵星人很有依稀，你好，喵星人你好，喵星人你好，喵星人你好，喵星人
</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">你好，喵星人</h4>
<p class="list-group-item-text">
喵星人很有依稀，你好，喵星人你好，喵星人你好，喵星人你好，喵星人
</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">你好，喵星人</h4>
<p class="list-group-item-text">
喵星人很有依稀，你好，喵星人你好，喵星人你好，喵星人你好，喵星人
</p>
</a>
</div>