Bootstrap - 關閉按鈕

本章將討論 Bootstrap 關閉按鈕。關閉按鈕用於關閉內容，例如模態框、警報和氣泡提示。

基本示例

使用 .btn-close 建立關閉按鈕。預設樣式是可自定義的。
更改 Sass 變數以更改 background-image，並使用 aria-label 新增螢幕閱讀器文字。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Close Button</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-2">
        Close Notification
        <button type="button" class="btn-close" aria-label="Close"></button>
      </div>
    </body>
    </html>

停用狀態

使用 disabled 屬性停用關閉按鈕。Bootstrap 還應用 pointer-events: none; 和 user-select: none; 以防止觸發懸停和啟用狀態。
停用關閉按鈕的 opacity 會發生變化。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Close Button</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-2">
        Close Notification
        <button type="button" class="btn-close" disabled aria-label="Close"></button>
      </div>
    </body>
    </html>

深色變體

注意！從 v5.3.0 開始，.btn-close-white 類已棄用。對於關閉按鈕的顏色模式，請使用 data-bs-theme="dark"。

要反轉關閉按鈕，請將 data-bs-theme="dark" 新增到 .btn-close 類或其父元素中。filter 屬性用於反轉 background-image。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Close Button</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>
        Close Notification
        <button type="button" class="btn-close" data-bs-theme="dark" aria-label="Close"></button>
        <button type="button" class="btn-close" data-bs-theme="dark" disabled aria-label="Close"></button>
    </body>
    </html>

列印頁面