AdminLTE 背景色小结

全栈程序员-用户IM • 2022年7月27日上午9:00 • 未分类

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

文本	背景色	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>