AdminLTE 背景色小结

文本	背景色	box	btn	modal	label	alert	callout
.text-blue	.bg-light-blue	.box-primary	.btn-primary	.modal-primary	.label-primary
.text-aqua	.bg-aqua	.box-info	.btn-info	.modal-info	.label-info	.alert-info	.callout-info
.text-green	.bg-green	.box-success	.btn-success	.modal-success	.label-success	.alert-success	.callout-success
.text-yellow	.bg-yellow	.box-warning	.btn-warning	.modal-warning	.label-warning	.alert-warning	.callout-warning
.text-red	.bg-red	.box-danger	.btn-danger	.modal-danger	.label-danger	.alert-danger, .alert-error	.callout-danger
.text-navy	.bg-navy
.text-teal	.bg-teal
.text-purple	.bg-purple
.text-orange	.bg-orange
.text-maroon	.bg-maroon
.text-black	.bg-black

1. 背景色相关类用于设置的div,span,small,p等元素的背景色。

2. 背景色应用于特定的标签时，会有一个更加具体的类名，这个类名有更明确的语意。如

<button class="btn btn-primary">按钮1</button>
<button class="btn bg-light-blue">按钮2</button>

“按钮1”和“按钮2”效果基本相同。

3. 尽量使用更具体的类名，因为bg-*的效果要比具体类名更宽泛。

<div class="box box-success box-solid">
    //box1
</div>
<div class="box bg-green box-solid">
    //box2
</div>

“box1”和”box2” 的效果不同，主要体现在box-header中。

4. 文本相关类可用于设置文本颜色，也可用于设置小图标。如

<p class="text-green text-center">绿色文本</p>
<i class="fa fa-circle-o text-red"></i>//红色图标

5. 背景色还添加.disabled类，得到颜色更浅的背景色，相应的有.bg-*-active，是颜色更深的背景色。

<div class="bg-red disabled color-palette"><span>Disabled</span></div>
<div class="bg-red color-palette"><span>#f56954</span></div>
<div class="bg-red-active color-palette"><span>Active</span></div>