Bootstrap - 边框

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

可以在元素中添加或删除边框。Bootstrap 提供了一系列边框样式，可以一次全部选择或逐个选择。

添加边框

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

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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

删除边框

可以从自定义元素中删除边框。让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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

边框颜色

边框实用程序（例如从原始$theme-colors Sass 映射生成的.border-*）当前不适应颜色模式。但是，任何.border-*-subtle实用程序都会做出相应的响应。此问题将在版本 6 中得到解决。

可以使用基于主题颜色构建的实用程序来修改边框颜色。让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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-*类进行修改。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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

边框不透明度

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

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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-1、.border-2、.border-3、.border-4和.border-5等类

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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

边界半径

为了向任何元素添加圆角，请使用.rounded-*类。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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

边框尺寸

使用.rounded-*类的范围设置圆角的大小，从0到5。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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-*类可用于将元素的一侧设置为圆形。让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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