预定义样式风格
按钮的常用
<input type="button" value="首选项" class="btn btn-primary">
btn btn-primary success info warning danger
--->
<input type="button" value="默认样式">
<input type="button" value="首选项" class="btn btn-primary">
<input type="button" value="成功" class="btn btn-success">
<input type="button" value="一般信息" class="btn btn-info">
<input type="button" value="警告" class="btn btn-warning">
<input type="button" value="危险" class="btn btn-danger">
--->
image.png
背景类的
<p class="bg-primary">首选项</p>
bg-primary success info warning danger
--->
<p>默认段落</p>
<p class="bg-primary">首选项</p>
<p class="bg-success">成功</p>
<p class="bg-info">一般信息</p>
<p class="bg-warning">警告</p>
<p class="bg-danger">危险</p>
--->
image.png
默认文字类的
<span class="text-primary">首选项</span>
text-primary success info warning danger
--->
<span>默认文字</span>
<span class="text-primary">首选项</span>
<span class="text-success">首选项</span>
<span class="text-info">首选项</span>
<span class="text-warning">首选项</span>
<span class="text-danger">首选项</span>
--->
image.png
警告框的
<div class="alert alert-warning">我是警告框</div>
alert-warning danger 也是多种的
--->
<div class="alert alert-warning">我是警告框</div>
<div class="alert alert-danger">我是危险信息</div>
--->
image.png
面板类的
<div class="panel panel-primary">
<div class="panel-heading">
<h4>我是面板的标题</h4>
</div>
<div class="panel-body">
我是面板的主体内容！
</div>
</div>
panel panel-primary success info warning danger
image.png