Bootstrap 5边框颜色

Bootstrap 5边框工具是用来设置边框元素的样式。边框样式可以是border-color、border-width、border-radius等。

边框颜色用来设置边框元素的颜色，使用建立在我们主题颜色上的实用程序。

边框颜色使用类：

border-primary: 该类用于设置边框的主色调。
border-secary: 该类用于设置边框的辅助颜色。
border-success。这个类是用来设置边框的成功颜色的。
border-danger。该类用于设置边框的危险颜色。
border-warning。该类用于设置边框的警告颜色。
border-info。该类用于设置边框的信息颜色。
border-light。这个类是用来设置边框的浅色。
border-dark：该类用于设置边框的深色。
border-white。该类用于设置边框的白色。

语法:

<div class="class="border border-*">
    Content
</div>

例子1：在这个例子中，我们将在span元素上添加不同颜色的边框。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Border color</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
      </script>
  
    <style>
        /* CSS style for Boxes */
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 6px;
            background-color: #DCDCDC;
        }
    </style>
</head>
  
<body>
    <div class="container" style="text-align: center;">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h3>Bootstrap 5 Border color</h3>
        <div class="box">
            <span class="border border-primary"></span>
            <span class="border border-secondary"></span>
            <span class="border border-success"></span>
            <span class="border border-danger"></span>
            <span class="border border-warning"></span>
            <span class="border border-info"></span>
            <span class="border border-light"></span>
            <span class="border border-dark"></span>
        </div>
    </div>
</body>
  
</html>

输出:

Bootstrap 5边框颜色

例子2：在这个例子中，我们将为span元素添加不同颜色的边框，边框宽度不同。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Border color</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
      </script>
  
    <style>
        /* CSS style for Boxes */
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 6px;
            background-color: #df7c7c;
        }
    </style>
</head>
  
<body>
    <div class="container" style="text-align: center;">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h3>Bootstrap 5 Border color</h3>
        <div class="box">
            <span class="border border-3 border-primary"></span>
            <span class="border border-3 border-secondary"></span>
            <span class="border border-5 border-success"></span>
            <span class="border border-5 border-danger"></span>
            <span class="border border-2 border-warning"></span>
            <span class="border border-2 border-info"></span>
            <span class="border border-4 border-light"></span>
            <span class="border border-4 border-dark"></span>
        </div>
    </div>
</body>
  
</html>

输出:

Bootstrap 5边框颜色