Bootstrap - 按鈕

上一頁
下一頁

本章將討論 Bootstrap 按鈕。您可以使用 Bootstrap 的自定義按鈕樣式在表單、對話方塊等多種場景中新增操作。這支援多種尺寸、狀態……等等。Bootstrap 包含類.btn，它設定基本樣式，如填充和內容對齊。

基本按鈕

新增.btn類以實現基本樣式，如填充和內容對齊。.btn類提供透明邊框、背景顏色，以及沒有顯式的焦點和懸停樣式。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html>
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
      <button type="button" class="btn btn-primary">Base Button </button>
</body>
</html>

變體

Bootstrap 包含不同樣式的按鈕，每個按鈕都有其自身的語義用途，還有一些額外的類用於進一步控制。為了實現按鈕樣式，Bootstrap 提供了以下類

  • .btn

  • .btn-default

  • .btn-primary

  • .btn-success

  • .btn-info

  • .btn-warning

  • .btn-danger

  • .btn-link

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>
</body>
</html>

停用文字換行

要停用按鈕文字的文字換行，請向按鈕新增.text-nowrap類。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <button type="button" class="btn btn-primary text-nowrap">this button's text has disabled text wrapping. Here we see the test in a single line</button><br><br><br>
    <button type="button" class="btn btn-primary">this button's text does not have text wrapping enabled. Here we see the text being wrapped to next line</button>
</body>
</html>

按鈕標籤

.btn類可用於<a>和<input>元素。

當您在<a>元素上使用按鈕類時，這些連結用於觸發頁面內功能，而不是連結到新頁面或當前頁面內的部分，這些連結具有元素role="button"，以便適當地向輔助技術（如螢幕閱讀器）傳達其用途。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <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>
        <title>Bootstrap - Buttons</title>
    </head>
    <body>
        <a href="#"role="button"  class="btn btn-info">Download Link</a>
        <button type="button" class="btn btn-primary">Button</button>
        <input type="submit" class="btn btn-secondary" value="Submit">
        <input type="button" class="btn btn-danger" value="Login">
        <input type="reset" class="btn btn-light" value="Reset">
    </body>
    </html>

輪廓按鈕

要獲得沒有厚重背景顏色的按鈕，請使用.btn-outline-*類，它允許您從任何按鈕中刪除所有背景影像和顏色。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
 <body>
    <button type="button" class="btn btn-outline-primary">Primary Button</button>
    <button type="submit" class="btn btn-outline-secondary">Secondary Button</button>
    <button type="button" class="btn btn-outline-warning">Warning Button</button>
    <button type="button" class="btn btn-outline-success">Sucess Button</button>
    <button type="button" class="btn btn-outline-light">Light Button</button>
    <button type="button" class="btn btn-outline-danger">Danger Button</button>
    <button type="button" class="btn btn-outline-dark">Dark Button</button>
    <button type="button" class="btn btn-outline-info">Info Button</button>
    <button type="button" class="btn btn-outline-link">Link</button>
</button>
</body>
</html>

按鈕尺寸

要獲得任何更大或更小的按鈕，請向.btn新增類.btn-lg、.btn-sm。您可以使用 CSS 變數建立自己的自定義尺寸按鈕。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-info btn-sm">Small Button</button>
    <button type="button" class="btn btn-warning"
        style="--bs-btn-padding-y: .24rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .75rem;">
    Custom Button
</button>
</body>
</html>

停用狀態

Bootstrap 提供類.disabled。此功能停用點選事件的懸停和啟用狀態。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <button type="button" class="btn btn-primary disabled">Primary Disabled Button</button>
    <button type="button" class="btn btn-secondary" disabled>Secondary Disabled Button</button>
    <button type="button" class="btn btn-outline-primary" disabled>Outline Primary Disabled button</button>
    <button type="button" class="btn btn-outline-secondary" disabled>Outline Secondary Disabled Button</button>
</button>
</body>
</html>

使用<a>元素停用按鈕的行為略有不同

  • 元素<a>不支援disabled屬性。您必須新增.disabled類才能使其在視覺上看起來處於停用狀態。

  • 為了在錨按鈕上停用所有pointer-events，包含了一些面向未來的樣式。

  • 為了在使用<a>停用的按鈕中向輔助技術顯示元素的狀態，應包含aria-disabled="true"屬性。

  • 在使用<a>停用的按鈕中不應包含href屬性。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary Disabled</a>
    <a class="btn btn-secondary disabled" role="button" aria-disabled="true">Secondary Disabled</a>
    <a class="btn btn-outline-danger disabled" role="button" aria-disabled="true">Outline Primary Disabled Button</a>
    <a class="btn btn-outline-warning disabled" role="button" aria-disabled="true">Outline Secondary Disabled Button</a>
</button>
</body>
</html>

連結功能注意事項

  • 當您必須在停用的連結上儲存href屬性時，.disabled類利用pointer-events: none來嘗試停用元素<a>的連結功能。

  • 鍵盤使用者和輔助技術使用者始終能夠啟用這些連結。

  • 您可以在這些連結上包含aria-disabled="true"和tabindex="-1"屬性以控制它們接收鍵盤焦點，並利用自定義 JavaScript 完全停用其功能。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Disables Primary Link</a>
    <a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Disabled Secondary Link</a>
    </button>
</body>
</html>

塊級按鈕

  • 我們可以使用顯示和間距實用工具的組合建立類似於 Bootstrap 4 中的響應式全寬“塊級按鈕”堆疊。

  • 使用按鈕特定的類而不是實用工具，我們可以對間距、對齊和響應行為進行更有效的控制。

要調整塊級按鈕的寬度，您可以使用網格列寬度類。要獲得半寬的塊級按鈕，請使用.col-6類。.mx-auto類將按鈕水平居中。

以下示例演示了基本塊級按鈕和使用類.col-6的半寬塊級按鈕。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
        <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>
        <title>Bootstrap - Buttons</title>
</head>
<body>
    <div class="d-grid gap-2 mt-1">
        <button class="btn btn-primary" type="button">Primary Block Button</button>
        <button class="btn btn-secondary" type="button">Secondary Block Button</button>
    </div>

    <div class="d-grid gap-2 col-6 mx-auto mt-4">
        <button class="btn btn-primary" type="button">Primary Button Using Grid Column Width Classes</button>
        <button class="btn btn-secondary" type="button">Secondary Button Using Grid Column Width Classes</button>
    </div>
</button>
</body>
</html>

按鈕外掛

按鈕外掛允許您製作簡單的開關按鈕。

切換狀態

透過新增類.data-bs-toggle="button"切換按鈕的啟用狀態。類.aria-pressed="true"確保它與輔助技術進行適當的通訊。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <button type="button" class="btn btn-primary" data-bs-toggle="button">Primary Toggle Button</button>
    <button type="button" class="btn btn-secondary active" data-bs-toggle="button" aria-pressed="true">Secondary Active Toggle Button</button>
    <button type="button" class="btn btn-info" disabled data-bs-toggle="button">Info Disabled Toggle Button</button>
</button>
</body>
</html>

您可以使用元素<a>建立切換狀態連結。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Primary Toggle link</a>
    <a href="#" class="btn btn-secondary active" role="button" data-bs-toggle="button" aria-pressed="true">SecondaryActive toggle link</a>
    <a class="btn btn-info disabled" aria-disabled="true" role="button" data-bs-toggle="button">Info Disabled togglelink</a>
    </button>
</body>
</html>
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.