按钮样式CSS
样式预览：
代码调用：
<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-link">链接</button>
说明：这些btn类都可以放入到a标签中进行使用
<a href="#" class="btn btn-default">默认</a>
背景样式CSS
样式预览：
这是成功背景框
这是信息背景框
这是警告背景框
这是危险背景框
代码调用：
<div class="alert alert-success">这是成功背景框</div>
<div class="alert alert-info">这是信息背景框</div>
<div class="alert alert-warning">这是警告背景框</div>
<div class="alert alert-danger">这是危险背景框</div>
说明：如果想要给背景框添加关闭按钮，则要添加一个class以及一个button标签
警告框！这是一个可以关闭的警告框。
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
警告框！这是一个可以关闭的警告框。
</div>
引用文段样式CSS
样式预览：
这是引用文段样式
代码调用：
<blockquote>这是引用文段样式</blockquote>
说明：可以在文章编辑器上的小按钮快速调用该样式
折叠样式CSS
样式预览：
Collapsible Group Item #1 Content
Collapsible Group Item #2 Content
Collapsible Group Item #3 Content
代码调用：
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Collapsible Group Item #1 Content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Group Item #2 Content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Group Item #3 Content
</div>
</div>
</div>
</div>
强调Class
样式预览：
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
代码调用：
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
进度条效果
样式预览：
代码调用：
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
面板
样式预览：
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
代码调用：
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>