Bootstrap - 重置樣式

本章將討論 Bootstrap 的重置樣式。重置樣式用於重置特定元素的所有樣式。

方法

重置樣式使用僅包含元素選擇器的特定樣式來設定 HTML 元素的樣式。額外的樣式僅透過類來完成。例如，重置一些<table>樣式，然後包含類.table、.table-bordered等等。

將預設的ems替換為rems，以便在瀏覽器中進行可縮放的元件間距。
跳過margin-top。垂直邊距會意外地發生摺疊。但是，單方向的margin是一個更簡單的概念。
塊級元素應使用rems作為邊距，以便更容易地在不同裝置尺寸之間進行縮放。
儘可能使用inherit並限制font相關屬性的宣告。

這使您能夠根據需要即時自定義。

  <body style="--bs-body-color: #333;">
  <!-- ... -->
    </body>

頁面預設值

重置樣式用於<HTML>和<body>元素，以提供更好的頁面級預設值。更多細節如下。

所有元素都具有全域性box-sizing，包括*::before、*::after，設定為border-box。由於這一點，填充和邊框不會超過元素宣告的寬度。

如果在<HTML>上沒有設定font-size，則假定16px為瀏覽器預設值。考慮到使用者的偏好，在<body>上使用font-size: 1rem以實現可訪問的、響應式的字型縮放。修改$font-size-root變數以覆蓋瀏覽器預設設定。

<body>的全域性樣式包括font-family、font-weight、line-height和color。為了避免字型差異，某些表單元素稍後將繼承此樣式。
出於安全原因，<body>的background-color預設為#fff。

原生字型族

Bootstrap 使用原生字型族或系統字型族來在每個裝置和作業系統上實現最佳文字渲染。
這些系統字型專為現代裝置設計，具有改進的螢幕渲染、可更改的字型支援等。
瞭解更多關於原生字型族。

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

備註

字型族包含表情符號字型，因此常見的符號、dingbat Unicode 字元將顯示為彩色的象形圖。它們的外觀因瀏覽器的原生表情符號字型或平臺而異，並且不受 CSS 顏色樣式的影響。
font-family應用於<body>並在 Bootstrap 中全域性自動繼承。更新$font-family-base並重新編譯 Bootstrap 以更改全域性font-family。

標題

Bootstrap 重置樣式的標題用於移除 HTML 標題標籤提供的預設邊距，即margin-bottom: .5rem，並調整line-height。

--bs-heading-color CSS 變數允許您更改預設的heading-color。

標題	示例
<h1></h1>	h1. Bootstrap 標題
<h2></h2>	h2. Bootstrap 標題
<h3></h3>	h3. Bootstrap 標題
<h4></h4>	h4. Bootstrap 標題
<h5></h5>	h5. Bootstrap 標題
<h6></h6>	h6. Bootstrap 標題

段落

Bootstrap 5 重置樣式的段落用於移除 HTML <p>標籤提供的預設margin-top，並設定段落margin-bottom: 1rem。

示例

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Reboot</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>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
</body>
</html>

連結

重置樣式提供的連結具有預設顏色和下劃線，並在:hover時更改，但在使用者:visited時不會更改。沒有提供特殊的:focus樣式。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</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>
      <p><a href="#">Visit Tutorialspoint..</a></p>
    </body>
    </html>

作為 Bootstrap v5.3.x，連結顏色使用rgba()和新的-rgb CSS 變數設定。這允許輕鬆自定義連結顏色的不透明度。可以使用 CSS 變數--bs-link-opacity更改連結顏色的不透明度，如下例所示。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</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>
       <p><a href="#" style="--bs-link-opacity: .7">Visit Tutorialspoint</a></p>
    </body>
    </html>

Bootstrap 重置樣式使用更具體的選擇器來定位佔位符連結（沒有 href 的連結）。它們的color和text-decoration重置為預設值。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</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>
       <p><a>Visit Tutorialspoint</a></p>
    </body>
    </html>

水平線

重置樣式簡化了<hr>元素。<hr>元素預設情況下使用border-top和opacity: .25進行樣式設定，並自動從父元素顏色繼承其border-color。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</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>
      <h2 class="text-center">Horizontal rules</h2>
      <div class="container">
        <hr>

        <div class="text-primary">
          <hr>
        </div>

        <hr class="border border-warning border-3 opacity-75">
        <hr class="border border-info border-4 opacity-100">
      </div>
    </body>
    </html>

列表

Bootstrap 重置樣式移除了列表的margin-top，並設定了margin-bottom: 1rem。
列表元素<ul>、<ol>和<dl>已移除margin-top，並設定margin-bottom: 1rem。

描述列表的margins得到改進，以便更容易進行樣式設定，清晰的層次結構和間距。<dd>的margin-left重置為0，並新增margin-bottom: .5rem。<dt>設定為粗體。

內聯程式碼

使用<code>包含內聯程式碼片段。根據需要轉義 HTML 角括號。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Reboot</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">
      The <code>&lt;section&gt;</code> element should be enclosed within an inline container.
    </div>
  </body>
  </html>

程式碼塊

Bootstrap 5 重置樣式的程式碼塊用於將程式碼放在<pre>標籤內。建議轉義程式碼中的角括號以確保正確渲染。<pre>元素已重置，以移除其margin-top。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</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>
        <pre><code>Tutorialspoint
        This is an example of code block.
        </code></pre>
      </body>
    </html>

變數

重置樣式變數用於重置<var>標籤元素的樣式。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</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>
      <var>a</var><var>x</var> + <var>b</var><var>y</var> = <var>c</var>
    </body>
    </html>

使用者輸入

重置樣式的使用者輸入<kbd>用於指示通常透過鍵盤輸入的輸入。

包含在<kbd>標籤內的文字通常以瀏覽器的預設等寬字型顯示。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</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">
        To save the changes, press <kbd><kbd>Ctrl</kbd> + <kbd>s</kbd></kbd><br>
        To paste the selected item, press <kbd><kbd>Ctrl</kbd> + <kbd>v</kbd></kbd>
      </div>
    </body>
    </html>

示例輸出

<samp>標籤應用於指示程式的示例輸出。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</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">
        <samp>This text should be considered as an example output generated by a computer program.</samp>
      </div>
    </body>
    </html>

表格

表格已修改為樣式<caption>、邊框摺疊和一致的text-align。.table類提供了對邊框和填充的進一步修改。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</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>
        <table>
          <caption>
            This is a caption of table to describe the contents.
          </caption>
          <thead>
            <tr>
              <th>Employee Id</th>
              <th>Employee Name</th>
              <th>Employee Role</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>10</td>
              <td>Jhon</td>
              <td>Software Devloper</td>
            </tr>
            <tr>
              <td>20</td>
              <td>Mayra</td>
              <td>Tester</td>
            </tr>
            <tr>
              <td>30</td>
              <td>Rocky</td>
              <td>Data Analyst</td>
            </tr>
          </tbody>
        </table>
        </body>
    </html>

表單

表單元素已簡化為新的基本樣式。最重要的更改列在下面

<fieldset>可以輕鬆用作單個輸入或輸入組的包裝器，因為它們沒有邊框、填充或邊距。
<legend>的樣式已重置為顯示為標題。
為了允許邊距，<label>設定為display: inline-block。
規範化主要處理<input>、<select>、<textarea>和<button>的樣式，而重置樣式還移除它們的邊距並設定line-height: inherit。
<textarea>僅垂直可調整大小，以防止頁面佈局“中斷”。
<button>和<input>按鈕在未停用時具有cursor: pointer。

最新版本的 Safari 和 Firefox 不支援某些日期輸入。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</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>
      <form class="bd-example">
        <fieldset>
          <legend>Form</legend>
          <p>
            <label for="input">Name</label>
            <input type="text" id="inputName" placeholder="Enter your name...">
          </p>
          <p>
            <label for="email">Email id</label>
            <input type="email" id="emailId" placeholder="Tutorialspoint@example.com">
          </p>
          <p>
            <label for="tel">Mobile No:</label>
            <input type="tel" id="Mob">
          </p>
          <p>
            <label for="url">Age</label>
            <input type="number" id="age">
          </p>
          <p>
            <label for="number">Number</label>
            <input type="number" id="number">
          </p>
          <p>
            <label for="search">Search Here</label>
            <input type="search" id="searchHere">
          </p>
          <p>
            <label for="range">Range</label>
            <input type="range" id="rangeExample" min="0" max="10">
          </p>
          <p>
            <label for="file">Upload file</label>
            <input type="file" id="fileinput">
          </p>
          <p>
            <label for="select">Languages</label>
            <select id="select">
              <option value="">select...</option>
              <optgroup label="Group 1">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">Bootstrap</option>
              </optgroup>
              <optgroup label="Group 2">
                <option value="">C</option>
                <option value="">C++</option>
                <option value="">Java</option>
              </optgroup>
            </select>
          </p>
          <p>
            <h6>Selects the languages</h6>
            <label>
              <input type="checkbox" value="">
                HTML
            </label>
            <br>
            <label>
              <input type="checkbox" value="">
                CSS
            </label>
            <br>
            <label>
              <input type="checkbox" value="">
                Javascript
            </label>
          </p>
          <p>
            <h6>Select your gender</h6>
            <label>
              <input type="radio" name="firstOption" id="radios1" value="option1" checked>
              Female
            </label>
            <br>
            <label>
              <input type="radio" name="secondOption" id="radios2" value="option2">
              Male
            </label>
            <br>
            <label>
              <input type="radio" name="thirdOption" id="radios3" value="option3" disabled>
                Others
            </label>
          </p>
          <p>
            <label for="textarea">Feedback</label>
            <textarea id="feedbackTextarea" rows="4"></textarea>
          </p>

          <p>
            <label for="date">Birth date</label>
            <input type="date" id="birthDate">
          </p>

          <p>
            <label for="time">Time</label>
            <input type="time" id="timeInput">
          </p>
          <p>
            <label for="password">Enter Password</label>
            <input type="password" id="password">
          </p>
          <p>
            <label for="datetime-local">Local Datetime</label>
            <input type="datetime-local" id="localDatetime">
          </p>
          <p>
            <label for="week">Select week</label>
            <input type="week" id="weekInput">
          </p>
          <p>
            <label for="month">Select month</label>
            <input type="month" id="monthInput">
          </p>
          <p>
            <label for="color">Selet color</label>
            <input type="color" id="selectColor">
          </p>
          <p>
            <label for="output">Output: </label>
            <output name="result" id="output">Tutorialspoint</output>
          </p>
          <p>
            <label>Buttons</label>
            <button type="submit">Submit</button>
            <input type="reset" value="Reset">
            <input type="button" value="Button">
          </p>
          <p>
            <label>Disabled Buttons</label>
            <button type="submit" disabled>Submit</button>
            <input type="reset" value="Reset" disabled>
            <input type="button" value="Button" disabled>
          </p>
        </fieldset>
      </form>
    </body>
    </html>

按鈕上的指標

重置樣式提供了一個role="button"，它將游標更改為指標。使用此屬性指示互動式元素。
對於<button>元素而言並非必要，因為它們具有自己的游標更改。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</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">
        <span role="button" tabindex="0">Non-button element</span>
      </div>
    </body>
    </html>

其他元素

地址

重置樣式的地址元素<address>用於將字型樣式從斜體更改為普通文字。
它繼承行高，並且margin-bottom設定為 1rem。
透過在行尾使用<br>來保留格式。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</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">
        <address>
            <strong>ABC Corporation</strong><br>
            505 sansui street,<br>
            Eillis, CA 0178<br>
            <abbr title="Phone">P:</abbr> (212) 357-0194
          </address>
          <address>
            <a href="mailto:tutorialspoint@example.com">tutorialspoint@example.com</a>
        </address>
      </div>
    </body>
    </html>

塊引用

塊引用的預設邊距為1em 40px，已更改為0 0 1rem，以與其他元素保持一致。當我們想要引用其他來源的內容時，可以使用這些。

示例

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Reboot</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">
    <blockquote class="blockquote">
      <p>Blockquote removes default margin of HTML blockquote tag element.</p>
    </blockquote>
    <p>Someone well-known in <cite title="Source Title">Source Title</cite>.</p>
  </div>
</body>
</html>

內聯元素

重置樣式的內聯元素用於放置某些元素，即元素的縮寫或簡寫形式，這些元素會接收基本樣式以使其與其他文字有所不同。

將基本樣式應用於<abbr>元素，使其在段落文字中脫穎而出。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Reboot</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>
      The <abbr title="Cascading Style Sheet">CSS</abbr> is a style sheet language.
  </body>
  </html>

摘要

文字元素可以設定為互動式以顯示摘要。其上的游標預設值為文字。因此，將其重置為指標以指示該特定元素是互動式的，使用者可以單擊它。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Reboot</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">
      <details>
        <summary>Bootstrap Colors</summary>
        <p>Bootstrap colors used to give the colors to the text or the background.</p>
      </details>
      <details open>
        <summary>Bootstrap Dropdown</summary>
        <p>Dropdown menus are toggleable, contextual menus that can be enabled to show links in a list format.</p>
      </details>
    </div>
  </body>
  </html>

HTML5 [hidden] 屬性

HTML5 中的全域性屬性[hidden]具有display: none的預設樣式。
為了改進此預設值 (display:none)，重置樣式有助於防止其顯示意外被覆蓋，方法是設定[hidden] {display: none !important;}。

    <input type="text" hidden>

要僅切換元素的可見性（意思是其顯示方式不改變，並且元素仍然會影響文件的流向），請使用.invisible 類。

列印頁面

Bootstrap - 重置樣式

方法

頁面預設值

原生字型族

備註

標題

h1. Bootstrap 標題

h2. Bootstrap 標題

h3. Bootstrap 標題

h4. Bootstrap 標題

h5. Bootstrap 標題

h6. Bootstrap 標題

段落

示例

連結

示例

示例

示例

水平線

示例

列表

內聯程式碼

示例

程式碼塊

示例

變數

示例

使用者輸入

示例

示例輸出

示例

表格

示例

表單

示例

按鈕上的指標

示例

其他元素

地址

示例

塊引用

示例

內聯元素

示例

摘要

示例

HTML5 [hidden] 屬性