Bootstrap5颜色大全

99次阅读
没有评论

Bootstrap 5中有以下颜色:

  1. primary(蓝色)
  2. secondary(灰色)
  3. success(绿色)
  4. danger(红色)
  5. warning(黄色)
  6. info(青色)
  7. light(浅灰色)
  8. dark(深灰色)
  9. white(白色)

Bootstrap 5还有一些辅助颜色,如:

  1. muted(淡化的颜色)
  2. body(body背景色)
  3. black-50(黑色透明度50%)
  4. white-50(白色透明度50%)

以下是一个使用Bootstrap 5颜色的HTML页面示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 5 Colors</title>
    <!-- 引入Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <h1 class="text-primary">Primary</h1>
    <h1 class="text-secondary">Secondary</h1>
    <h1 class="text-success">Success</h1>
    <h1 class="text-danger">Danger</h1>
    <h1 class="text-warning">Warning</h1>
    <h1 class="text-info">Info</h1>
    <h1 class="text-light bg-dark">Light</h1>
    <h1 class="text-dark">Dark</h1>
    <h1 class="text-white bg-dark">White</h1>
    <h1 class="text-muted">Muted</h1>
    <h1 class="bg-body">Body</h1>
    <h1 class="text-black-50">Black 50</h1>
    <h1 class="text-white-50 bg-dark">White 50</h1>
</div>
<!-- 引入Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</body>
</html>

上述示例展示了Bootstrap 5中的不同颜色及其应用方法。其中,使用了text-、bg-、text-和bg-结合来设置不同的颜色。此外,还展示了辅助颜色的应用方法。注意,在使用Bootstrap时需要先引入其CSS和JS文件。

正文完
 
评论(没有评论)