bootstrap——颜色(文本、背景、边框)

文本颜色

text-muted"柔和的文本
text-primary 重要的文本
text-success执行成功的文本
text-info代表提示信息的文本
text-warning警告文本
text-danger危险操作文本
text-secondary副标题
text-dark深灰色文本
text-light浅灰色文本
text-white白色文本
<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>
    <p class="text-secondary">副标题</p>
    <p class="text-dark">深灰色文本</p>
    <p class="text-light">浅灰色文本</p>
    <p class="text-white">白色文本</p>

背景颜色

    <p class="bg-primary text-white">重要的背景颜色</p>
    <p class="bg-success text-white">执行成功的背景颜色</p>
    <p class="bg-info text-white">信息提示背景颜色</p>
    <p class="bg-warning text-white">警告背景颜色</p>
    <p class="bg-danger text-white">危险背景颜色</p>
    <p class="bg-secondary text-white">副标题背景颜色</p>
    <p class="bg-dark text-white">深灰背景颜色</p>
    <p class="bg-light text-dark">浅灰背景颜色</p>

边框颜色

	<span class="border border-primary"></span>
    <span class="border border-success"></span>
    <span class="border border-info"></span>
    <span class="border border-warning"></span>
    <span class="border border-danger"></span>
    <span class="border border-secondary"></span>
    <span class="border border-dark"></span>
    <span class="border border-light"></span>
    <span class="border border-white"></span>
border-primary 重要的背颜色边框
border-success执行成功的颜色边框
border-info信息提示颜色边框
border-warning警告颜色边框
border-danger危险颜色边框
border-secondary副标题颜色边框
border-dark深灰颜色边框
border-light浅灰色颜色边框
border-white白色边框
————————————————
原文链接:https://blog.csdn.net/admin_djp/article/details/106064721

您可能还喜欢...

发表回复