Bootstrap 4 - 按鈕

上一頁
下一頁

描述

Bootstrap 提供可點選的按鈕來放置內容，例如文字和影像。您可以使用 <input> 標籤將文字包含到按鈕中。

您可以使用 .btn 類後跟所需的樣式（例如 btn-success）來建立按鈕。Bootstrap 提供了一些樣式化按鈕的選項，如下所示：

  • btn-primary

  • btn-secondary

  • btn-success

  • btn-danger

  • btn-warning

  • btn-info

  • btn-light

  • btn-dark

  • btn-link

以下示例演示了以上所有按鈕類：

示例

即時演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class="container">
         <h2>Button Styles</h2>
         <button type = "button" class = "btn btn-primary">Primary Button</button>
         <button type = "button" class = "btn btn-secondary">Secondary Button</button>
         <button type = "button" class = "btn btn-success">Success Button</button>
         <button type = "button" class = "btn btn-danger">Danger Button</button>
         <button type = "button" class = "btn btn-warning">Warning Button</button>
         <button type = "button" class = "btn btn-info">Info Button</button>
         <button type = "button" class = "btn btn-light">Light Button</button><br><br>
         <button type = "button" class = "btn btn-dark">Dark Button</button>
         <button type = "button" class = "btn btn-link">Link Button</button>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果：

輸出

輪廓按鈕

Bootstrap 4 透過使用 .btn-outline 類後跟所需的樣式（例如 btn-outline-success）為按鈕的輪廓提供語義顏色。

以下示例演示了輪廓按鈕的顯示：

示例

即時演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Button Outlines</h2>
         <button type = "button" class = "btn btn-outline-primary">Primary Button</button>
         <button type = "button" class = "btn btn-outline-secondary">Secondary Button</button>
         <button type = "button" class = "btn btn-outline-success">Success Button</button>
         <button type = "button" class = "btn btn-outline-danger">Danger Button</button>
         <button type = "button" class = "btn btn-outline-light">Light Button</button>
         <button type = "button" class = "btn btn-outline-warning">Warning Button</button>
         <button type = "button" class = "btn btn-outline-info">Info Button</button>
         <button type = "button" class = "btn btn-outline-dark">Dark Button</button>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果：

輸出

按鈕尺寸和塊級按鈕

Bootstrap 4 透過使用 .btn-sm 和 .btn-lg 類提供更小和更大的按鈕，並且 .btn-block 類建立塊級按鈕，該按鈕跨越父級的整個寬度，如下面的示例所示：

示例

即時演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Button Sizes</h2>
         <button type = "button" class = "btn btn-info btn-sm">Small button</button>
         <button type = "button" class = "btn btn-info">Default button</button>
         <button type = "button" class = "btn btn-info btn-lg">Large button</button>
         </br>
         </br>
         
         <h2>Block Level Button</h2>
         <button type = "button" class = "btn btn-info btn-lg btn-block">
            Block Level Info Button
         </button>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果：

輸出

活動和停用狀態

Bootstrap 允許您將按鈕的狀態更改為 活動 和 停用。當按鈕處於活動狀態時，按鈕將顯示為按下狀態，並且按鈕的顏色將失去漸變並淡入 50%，然後我們說它處於停用狀態。

使用 .active 類顯示啟用的按鈕，並新增 disabled 屬性以使按鈕無效。以下示例演示了按鈕的狀態：

示例

即時演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
  
   <body>
      <div class = "container">
         <h2>Active State</h2>
         <button type = "button" class = "btn btn-lg btn-primary" >
            Active button
         </button>
         <br>
         <br>
         
         <h2>Disabled State</h2>
         <button type = "button" class = "btn btn-primary btn-lg" disabled>
            Disabled Button
         </button>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果：

輸出

切換複選框和單選按鈕

Bootstrap 4 允許將按鈕樣式應用於單選按鈕和複選框以利用切換功能。您可以透過在 .btn-group 元素內新增 data-toggle="buttons"，在 <label> 元素內提供複選框和單選按鈕的切換。

以下示例演示了複選框和單選按鈕的切換：

示例

即時演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   <body>
      <div class = "container">
         <h2>Checkbox</h2>
         <div class = "btn-group btn-group-toggle" data-toggle = "buttons">
            <label class = "btn btn-info active">
               <input type = "checkbox" name = "options" id = "option1" autocomplete = "off" checked> 
               HTML-5
            </label>
            <label class = "btn btn-info">
               <input type = "checkbox" name = "options" id = "option2" autocomplete = "off"> 
               CSS-3
            </label>
            <label class = "btn btn-info">
               <input type = "checkbox" name = "options" id = "option3" autocomplete = "off"> 
               Bootstrap-4
            </label>
         </div>
         <br>
         <br>
         
         <h2>Radio Buttons</h2>
         <div class = "btn-group btn-group-toggle" data-toggle = "buttons">
            <label class = "btn btn-primary active">
               <input type = "radio" name = "options" id = "option1" autocomplete = "off" checked> 
               HTML-5
            </label>
            <label class = "btn btn-primary">
               <input type = "radio" name = "options" id = "option2" autocomplete = "off"> 
               CSS-3
            </label>
            <label class = "btn btn-primary">
               <input type = "radio" name = "options" id = "option3" autocomplete = "off"> 
               Bootstrap-4
            </label>
         </div>
      </div>
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果：

輸出

bootstrap4_components.htm
列印頁面
上一頁
下一頁
廣告