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

  • 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>

在这里插入图片描述

你可能感兴趣的:(Bootstrap,bootstrap,前端,html)