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>
列印頁面
上一頁
下一頁
廣告