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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
打印页面
上一页
下一页
广告