Bootstrap 简明教程

Bootstrap - Borders

本章讨论了可以应用于元素的边框。利用边框实用程序,可以快速为元素的边框和边框半径应用样式,使其适用于图像、按钮或任何其他元素。

边框可以添加到元素,也可以从元素中移除。Bootstrap 提供一系列边框样式,可以选择全部或逐个选择。

Add a border

可以将边框添加到自定义元素。我们看一个示例:

Example

你可以编辑并尝试运行此代码,使用 编辑和运行 选项。

<!DOCTYPE html>
<html>
    <head>
      <title>Bootstrap - Borders</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <style>
       span {
          display: inline-block;
          width: 100px;
          height: 100px;
          margin: 10px;
          background-color: #f1f1f1
        }
      </style>
    </head>
    <body>
      <div class="container mt-3">
        <h4>Borders</h4>
        <p>Use the border classes to add borders to an element:</p><br>
        <span class="border border-2"></span>
        <span class="border-top border-2"></span>
        <span class="border-end border-2"></span>
        <span class="border-bottom border-2"></span>
        <span class="border-start border-2"></span>
      </div>
    </body>
</html>

Remove a border

可以从自定义元素中移除边框。我们看一个示例:

Example

你可以编辑并尝试运行此代码,使用 编辑和运行 选项。

<!DOCTYPE html>
<html>
    <head>
      <title>Bootstrap - Borders</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <style>
       span {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: #f1f1f1;
        }
      </style>
    </head>
    <body>
       <div class="container mt-3">
        <h4>Borders</h4>
        <p>Use the border classes to remove borders from an element:</p><br>
        <span class="border border-2"></span>
        <span class="border border-0 border-2"></span>
        <span class="border border-top-0 border-2"></span>
        <span class="border border-end-0 border-2"></span>
        <span class="border border-bottom-0 border-2"></span>
        <span class="border border-start-0 border-2"></span>
       </div>
    </body>
</html>

Border colors

可以使用基于主题颜色的实用程序修改边框颜色。我们看一个示例:

Example

你可以编辑并尝试运行此代码,使用 编辑和运行 选项。

<!DOCTYPE html>
<html>
    <head>
      <title>Bootstrap - Borders</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <style>
       span {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: #faf8f8;
        }
      </style>
    </head>
    <body>
      <div class="container mt-3">
        <h4>Borders color</h4><br>
        <p>Use the .border-* classes to add colors to the borders:</p><br>
        <span class="border border-success"></span>
        <span class="border border-success-subtle"></span>
        <span class="border border-danger"></span>
        <span class="border border-danger-subtle"></span>
        <span class="border border-light"></span>
        <span class="border border-light-subtle"></span>
        <span class="border border-secondary"></span>
        <span class="border border-secondary-subtle"></span>
        <span class="border border-primary"></span>
        <span class="border border-primary-subtle"></span>
        <span class="border border-black"></span>
        <span class="border border-white"></span>
        <span class="border border-info"></span>
        <span class="border border-info-subtle"></span>
        <span class="border border-warning"></span>
        <span class="border border-warning-subtle"></span>
        <span class="border border-dark"></span>
        <span class="border border-dark-subtle"></span>
      </div>
    </body>
</html>

还可以使用 .border- * 类修改元素的默认边框。

Example

你可以编辑并尝试运行此代码,使用 编辑和运行 选项。

<!DOCTYPE html>
<html>
    <head>
      <title>Bootstrap - Borders</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container mt-3">
       <h4>Border colors of elements</h4><br>
       <p>Use the .border-* classes to add colors to the borders of different elements:</p><br>
       <div class="h4 pb-4 mb-2 text-center text-success border border-success">
          Border for success
       </div>
       <div class="p-2 bg-warning bg-opacity-25 border border-warning border-start-0">
          Adding color to a warning text, with warning border.
       </div><br>
        <button class="btn btn-light text-dark border">Click</button>
     </div>
    </body>
</html>

Border opacity

为了更改边框的不透明度,你需要通过自定义样式或内联样式覆盖 --bs-border-opacity

我们看一个示例:

Example

你可以编辑并尝试运行此代码,使用 编辑和运行 选项。

<!DOCTYPE html>
<html>
    <head>
      <title>Bootstrap - Borders</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container mt-3">
      <h4>Border opacity of borders</h4><br>
      <p>Use the .border-* classes to change the opacity of the borders of different elements:</p><br>
      <div class="border border-primary p-2 mb-2">Primary border default</div>
      <div class="border border-danger p-2 mb-2 border-opacity-75">75% opacity of danger border</div>
      <div class="border border-warning p-2 mb-2 border-opacity-50">50% opacity of warning border</div>
      <div class="border border-success p-2 mb-2 border-opacity-25">25% opacity of success border</div>
      <div class="border border-secondary p-2 border-opacity-10">10% opacity of secondary border</div>
    </body>
</html>

Border width

为了更改元素边框的宽度,请使用 .border-1, .border-2, .border-3, .border-4.border-5 等类

我们看一个示例:

Example

你可以编辑并尝试运行此代码,使用 编辑和运行 选项。

<!DOCTYPE html>
<html>
    <head>
      <title>Bootstrap - Borders</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <style>
       span {
          display: inline-block;
          width: 100px;
          height: 100px;
          margin: 10px;
          background-color: #f9f6f6;
        }
      </style>
    </head>
    <body>
      <div class="container mt-3">
        <h4>Borders - width</h4><br>
        <p>Set the border width with .border-* classes:</p><br>
        <span class="border border-5"></span>
        <span class="border border-4"></span>
        <span class="border border-3"></span>
        <span class="border border-2"></span>
        <span class="border border-1"></span>
      </div>
    </body>
</html>

Border radius

为了给任意元素添加圆角,请使用 .rounded- * 类。

我们看一个示例:

Example

你可以编辑并尝试运行此代码,使用 编辑和运行 选项。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap - Borders</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <style>
      span {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: #440d0d;
      }
      </style>
   </head>
   <body>
     <div class="container mt-3">
      <h4>Borders - Radius</h4>
      <p>Set the radius of the border with .rounded-* classes:</p><br>
      <span class="rounded"></span>
      <span class="rounded-top"></span>
      <span class="rounded-bottom"></span>
      <span class="rounded-start"></span>
      <span class="rounded-end"></span>
      <span class="rounded-circle"></span>
      <span class="rounded-pill" style="width:130px"></span>
     </div>
   </body>
</html>

Borders size

使用范围从 05.rounded- * 类来设置圆角的大小。

我们看一个示例:

Example

你可以编辑并尝试运行此代码,使用 编辑和运行 选项。

<!DOCTYPE html>
<html>
   <head>
     <title>Bootstrap - Borders</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     <style>
     span {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #440d0d;
      }
     </style>
   </head>
   <body>
    <div class="container mt-3">
     <h4>Borders - Size</h4>
     <p>Set the size of the rounded corners with .rounded-* classes:</p><br>
     <span class="rounded-5"></span>
     <span class="rounded-4"></span>
     <span class="rounded-3"></span>
     <span class="rounded-2"></span>
     <span class="rounded-1"></span>
     <span class="rounded-0"></span>
    </div>
   </body>
</html>

另一组 .rounded- * 类可用于将元素的一侧设置为圆角。我们来看一个示例:

Example

你可以编辑并尝试运行此代码,使用 编辑和运行 选项。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Borders</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
    span {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #440d0d;
    }
    </style>
  </head>
  <body>
    <div class="container mt-3">
     <h4>Borders - Rounded side</h4><br>
     <p>Set the side to be with rounded corners</p><br>
     <span class="rounded-start-pill"></span>
     <span class="rounded-start-2"></span>
     <span class="rounded-bottom-1"></span>
     <span class="rounded-5 rounded-top-0"></span>
     <span class="rounded-end-circle"></span>
    </div>
  </body>
</html>