Bootstrap中将颜色与事件进行关联的颜色名称

昊虹AI笔记

于 2023-10-16 10:16:48 发布

阅读量151

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/wenhao_ir/article/details/133852746

版权

Bootstrap 专栏收录该内容

50 篇文章 4 订阅

订阅专栏

primary：重要，通过醒目的彩色设计，比如深蓝色，提示浏览者注意阅读。
secondary：次要，通过灰色的视觉变化进行提示。
success：成功，能过积极的亮绿色表示成功或积极的动作。
danger：危险，通过红色提醒危险操作信息。
warning：警告，通过黄色提醒应该谨慎操作。
info：信息，通过浅蓝色提示相关信息。
light：明亮，明亮的白色。
dark：深深的黑色。

以徽章的颜色为例，给一个例子。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置徽章的颜色</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">设置徽章的颜色</h3>
<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危险</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-light">明亮</span>
<span class="badge badge-dark">深色</span>
</body>
</html>