Bootstrap 中的边框示例

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

附加边框类

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

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

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

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

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

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

示例

在下面的示例中，我们尝试使用"附加边框类"向 HTML <span> 元素添加边框 −

<!DOCTYPE html>
<html>
   <head>
      <title>Borders in Bootstrap</title>         
      <!-- Link Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">         
      <!-- Link Bootstrap JS and JQuery -->
      <script src="https://ajax.googleapis.com/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.bootstrapcdn.com/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> 元素的边框 -

<!DOCTYPE html>
<html>
   <head>
      <title>Borders in Bootstrap</title>         
      <!-- Link Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">         
      <!-- Link Bootstrap JS and JQuery -->
      <script src="https://ajax.googleapis.com/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.bootstrapcdn.com/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>

输出

编译并运行查询，得到以下结果:

边框颜色类

我们可以使用以下边框颜色类为任何 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

示例

在下面的示例中，我们使用"Border-color classes"为元素的边框添加颜色 -

<!DOCTYPE html>
<html>
   <head>
      <title>Borders in Bootstrap</title>         
      <!-- Link Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">         
      <!-- Link Bootstrap JS and JQuery -->
      <script src="https://ajax.googleapis.com/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.bootstrapcdn.com/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。

示例

在下面的示例中，我们使用上述"边框宽度类"来设置元素边框的宽度:-

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src= "https://cdn.jsdelivr.net/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>

输出

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

Border-Radius 类

我们可以使用以下 Border-Radius 类来圆化元素的边框; .rounded-top、.rounded-bottom、.rounded-left、.rounded-right、.rounded-circle、.rounded-0 等。

• .rounded-top

• .rounded-bottom

• .rounded-left

• .rounded-right

• .rounded-circle

• .rounded-0 等。

示例

在下面的示例中，我们使用上面提到的"border-radius 类"对元素边框进行圆角处理 -

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">         
      <!-- Link Bootstrap JS and JQuery -->
      <script src="https://ajax.googleapis.com/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.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
      <script src= "https://cdn.jsdelivr.net/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>

输出

上述查询的输出如下所示 -

相关文章

• 如何使用 Bootstrap 4 创建响应式网站?
• 解释 Bootstrap 中的基本表格
• Bootstrap 中的 Display 属性示例
• 使用 Bootstrap 创建类似链接的按钮
• Bootstrap 小型网格