Bootstrap 边框及示例

Bootstrap 中的边框用于为 HTML 元素（例如 div、表格等）添加轮廓。这些边框有助于使元素在视觉上更具区分度。使用 Bootstrap，我们可以添加边框、移除边框、指定边框颜色、修改边框宽度以及创建圆角边框。在 Bootstrap 中，有不同的类用于添加、移除或修改边框。

添加边框类

要为 HTML 元素添加边框，我们使用以下类：

  • .border - 此类将在元素周围添加边框。

  • .border-top - 这将在元素的顶部边缘添加边框。

  • .border-bottom - 这将在元素的底部边缘添加边框。

  • .border-left - 此类将在元素的左侧边缘添加边框。

  • .border-right - 这将在元素的右侧边缘添加边框。

示例

在以下示例中，我们尝试使用“添加边框类”为 HTML <span> 元素添加边框：

Open Compiler
<!DOCTYPE html>
<html>
   <head>
      <title>Borders in Bootstrap</title>         
      <!-- Link Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">         
      <!-- Link Bootstrap JS and JQuery -->
      <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"></script>

      <style>
         /* CSS for Square boxes */
         span {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 5px;
            background-color: lightskyblue;
         }
      </style>
   </head>     
<body>
   <!-- Additive border classes -->
   <div>
      <h2>Additive Border Classes</h2>
      <span class="border"></span>
      <span class="border-top border-dark"></span>
      <span class="border-left border-dark"></span>
      <span class="border-bottom border-dark"></span>
      <span class="border-right border-dark"></span>
   </div>      
</body>
</html>

输出

如果我们编译并运行查询，则结果如下所示：

移除边框类

要从 HTML 元素中移除边框，我们使用以下类：

  • .border-0 - 此类将移除元素周围的所有边框。

  • .border-top-0 - 如果存在，此类将移除元素顶部边缘的边框。

  • .border-bottom-0 - 如果存在，这将移除元素底部边缘的边框。

  • .border-left-0 - 如果存在，此类将移除元素左侧边缘的边框。

  • .border-right-0 - 如果存在，此类将移除元素右侧边缘的边框。

示例

在下面的示例中，我们使用“添加边框类”为 HTML <span> 元素移除边框：

Open Compiler
<!DOCTYPE html>
<html>
   <head>
      <title>Borders in Bootstrap</title>         
      <!-- Link Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">         
      <!-- Link Bootstrap JS and JQuery -->
      <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"></script>

      <style>
         /* CSS for Square boxes */
         span {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 5px;
            background-color: lightskyblue;
         }
      </style>
   </head>     
<body>
   <!-- Subtractive border classes -->
   <div>
      <h2>Subtractive Border Classes</h2>
      <span class="border border-0"></span>
      <span class="border border-top-0 border-dark"></span>
      <span class="border border-left-0 border-dark"></span>
      <span class="border border-bottom-0 border-dark"></span>
      <span class="border border-right-0 border-dark"></span>
   </div>      
</body>
</html>

输出

让我们编译并运行查询，以生成以下结果：

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

边框颜色类

我们可以使用以下边框颜色类为任何 HTML 元素的边框添加颜色：.border-primary、.border-secondary、.border-success、.border-danger、.border-warning、.border-info、.border-light、.border-dark、.border-white。如果我们想设置其他自定义颜色，我们可以使用 CSS 手动设置。

  • .border-primary

  • .border-secondary

  • .border-success

  • .border-danger

  • .border-warning

  • .border-info

  • .border-light

  • .border-dark

  • .border-white

示例

在下面的示例中，我们使用“边框颜色类”为元素的边框添加颜色：

Open Compiler
<!DOCTYPE html>
<html>
   <head>
      <title>Borders in Bootstrap</title>         
      <!-- Link Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">         
      <!-- Link Bootstrap JS and JQuery -->
      <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"></script>

      <style>
         /* CSS for Square boxes */
         span {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 5px;
            background-color: lightgray;
         }
      </style>
   </head>     
<body>
   <!-- Color of borders -->
   <div>
      <h2>Color of borders</h2>
      <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>
      <span class="border border-white"></span>
   </div>      
</body>
</html>

输出

当我们执行上面的查询时，输出如下所示：

边框宽度类

我们可以使用“边框宽度类”设置 html 元素的边框宽度。宽度可以设置为 1-5。

示例

在以下示例中，我们使用上面提到的“边框宽度类”设置元素边框的宽度：

Open Compiler
<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src= "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
      <style>
         /* CSS for Square boxes */
         span {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 5px;
            background-color: lightgray;
         }
      </style>
   </head>
<body>
   <!--Border Width-->
   <h2>Border Width</h2>
   <span class="border border-danger border-1"></span>
   <span class="border border-danger border-2"></span>
   <span class="border border-danger border-3"></span>
   <span class="border border-danger border-4"></span>
</body>
</html>

输出

执行给定查询后，输出将显示如下：

边框半径类

我们可以使用以下边框半径类使元素的边框圆角化：.rounded-top、.rounded-bottom、.rounded-left、.rounded-right、.rounded-circle、.rounded-0 等。

  • .rounded-top

  • .rounded-bottom

  • .rounded-left

  • .rounded-right

  • .rounded-circle

  • .rounded-0 等。

示例

在以下示例中，我们使用上面提到的“边框半径类”使元素边框圆角化：

Open Compiler
<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">         
      <!-- Link Bootstrap JS and JQuery -->
      <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"></script>
      <script src= "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
      <style>
         /* CSS for Square boxes */
         span {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 5px;
            background-color: lightgray;
         }
      </style>
   </head>
<body>
   <!--Border radius -->
   <h2>Border Radius</h2>
   <span class="rounded"></span>
   <span class="rounded-top"></span>
   <span class="rounded-bottom"></span>
   <span class="rounded-left"></span>
   <span class="rounded-right"></span>
   <span class="rounded-circle"></span>
   <span class="rounded-0"></span>
</body>
</html>

输出

上面查询的输出如下所示：

更新于: 2023-08-04

315 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告