重新啟動

Reboot 是將特定元素的 CSS 變更收集在單一檔案中的集合，它啟動 Bootstrap，提供優雅、一致且簡單的基礎供後續建置。

在此頁面

方法

Reboot 建立在 Normalize 之上，使用僅限元素選擇器的有點主觀的樣式提供許多 HTML 元素。其他樣式僅使用類別完成。例如，我們重新啟動一些 <table> 樣式以取得更簡單的基準線，並在稍後提供 .table、.table-bordered 等。

以下是我們在 Reboot 中選擇覆寫內容的準則和原因

更新一些瀏覽器預設值，改用 rem 而非 em，以獲得可擴充元件間距。
避免使用 margin-top。垂直邊距可能會合併，造成意外結果。更重要的是，單一方向的 margin 是較為簡單的心智模型。
為了在不同裝置尺寸間更輕鬆地擴充，區塊元素應使用 rem 作為 margin。
將 font 相關屬性的宣告降至最低，盡可能使用 inherit。

CSS 變數

在 v5.2.0 中新增

在 v5.1.1 中，我們標準化了所有 CSS 捆綁包（包括 bootstrap.css、bootstrap-reboot.css 和 bootstrap-grid.css）中所需的 @import，以包含 _root.scss。這會將 :root 層級 CSS 變數新增至所有捆綁包，不論該捆綁包中使用了多少個變數。最終，Bootstrap 5 將持續新增更多 CSS 變數，以提供更多即時自訂功能，而無需總是重新編譯 Sass。我們的做法是採用我們的 Sass 來源變數，並將它們轉換為 CSS 變數。這樣，即使您不使用 CSS 變數，您仍然擁有 Sass 的所有功能。這仍在進行中，需要時間才能完全實作。

例如，考慮這些用於常見 <body> 樣式的 :root CSS 變數

scss/_root.scss

@if $font-size-root != null {
  --#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{inspect($font-family-base)};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
@if $body-text-align != null {
  --#{$prefix}body-text-align: #{$body-text-align};
}

--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};

--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};

--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};

實際上，這些變數會在 Reboot 中套用如下所示

scss/_reboot.scss

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

這允許您隨意進行即時自訂

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

頁面預設

<html> 和 <body> 元素已更新，以提供更好的頁面預設。更具體來說

box-sizing 全域設定在每個元素上，包括 *::before 和 *::after，設定為 border-box。這可確保元素的宣告寬度絕不會因為內距或邊框而超出。
- 在 <html> 上未宣告基本 font-size，但假設為 16px（瀏覽器預設）。font-size: 1rem 套用在 <body> 上，以便透過媒體查詢輕鬆調整字型大小，同時尊重使用者的偏好並確保更易於存取。這個瀏覽器預設可透過修改 $font-size-root 變數來覆寫。
<body> 也設定了全域 font-family、font-weight、line-height 和 color。這會在稍後由某些表單元素繼承，以防止字型不一致。
為了安全，<body> 已宣告 background-color，預設為 #fff。

原生字型堆疊

Bootstrap 利用「原生字型堆疊」或「系統字型堆疊」，以便在每個裝置和作業系統上最佳呈現文字。這些系統字型特別針對現今的裝置而設計，並改善螢幕顯示效果、可變字型支援等。在這篇Smashing Magazine 文章中，進一步了解原生字型堆疊。

$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;

請注意，由於字型堆疊包含表情符號字型，許多常見的符號/裝飾 Unicode 字元將會呈現為多色象形文字。它們的外觀會有所不同，具體取決於瀏覽器/平台原生表情符號字型中使用的樣式，而且不會受到任何 CSS color 樣式影響。

這個 font-family 套用在 <body> 上，並在 Bootstrap 中自動全域繼承。若要切換全域 font-family，請更新 $font-family-base 並重新編譯 Bootstrap。

標題

所有標題元素（<h1> 到 <h6>）都移除了 margin-top，設定 margin-bottom: .5rem，並縮小 line-height。雖然標題預設會繼承其 color，但您也可以透過選用的 CSS 變數 --bs-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 標題

段落

所有 <p> 元素都移除了其 margin-top，並設定 margin-bottom: 1rem 以便於間距。

這是一個範例段落。

html

<p>This is an example paragraph.</p>

連結

連結預設套用 color 和底線。雖然連結會在 :hover 時變更，但不會根據某人是否 :visited 連結而變更。它們也不會收到任何特殊 :focus 樣式。

這是範例連結

html

<a href="#">This is an example link</a>

從 v5.3.x 開始，連結 color 會使用 rgba() 和新的 -rgb CSS 變數設定，讓您能輕鬆自訂連結顏色不透明度。使用 --bs-link-opacity CSS 變數變更連結顏色不透明度

這是範例連結

html

<a href="#" style="--bs-link-opacity: .5">This is an example link</a>

沒有 href 的佔位符連結會使用更特定的選擇器，並將其 color 和 text-decoration 重設為預設值。

這是佔位符連結

html

<a>This is a placeholder link</a>

水平線

<hr> 元素已簡化。與瀏覽器預設值類似，<hr> 會透過 border-top 設定樣式，預設 opacity: .25，並會自動透過 color 繼承其 border-color，包括透過父層設定 color 的情況。它們可以使用文字、邊框和不透明度工具進行修改。

html

<hr>

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

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

清單

所有清單—<ul>、<ol> 和 <dl>—都移除了其 margin-top，並新增 margin-bottom: 1rem。巢狀清單沒有 margin-bottom。我們也重設了 <ul> 和 <ol> 元素的 padding-left。

所有清單都移除了其頂端邊界
並將其底端邊界標準化
巢狀清單沒有底端邊界
- 這樣它們的外觀會更均勻
- 特別是在後接更多清單項目時
左邊距也已重設

以下是順序清單
包含幾個清單項目
它具有相同的整體外觀
與前一個未排序清單相同

為了更簡單的樣式、更清晰的階層和更好的間距，說明清單已更新 margin。<dd> 重設 margin-left 為 0，並新增 margin-bottom: .5rem。<dt> 會加粗。

說明清單: 說明清單非常適合定義術語。
術語: 術語的定義。; 同一個術語的第二個定義。
另一個術語: 此另一個術語的定義。

內嵌程式碼

使用 <code> 包裹程式碼的內嵌片段。務必跳脫 HTML 尖括號。

例如，<section> 應當以內嵌方式包裹。

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

程式碼區塊

對於多行程式碼，請使用 <pre>。再次強調，務必跳脫程式碼中的任何尖括號，以正確呈現。<pre> 元素已重設，以移除其 margin-top，並使用 rem 單位作為其 margin-bottom。

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

變數

對於表示變數，請使用 <var> 標籤。

y = mx + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

使用者輸入

使用 <kbd> 標示通常透過鍵盤輸入的輸入內容。

若要切換目錄，請輸入 cd，後接目錄名稱。
若要編輯設定，請按 Ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>Ctrl</kbd> + <kbd>,</kbd></kbd>

範例輸出

若要標示程式範例輸出，請使用 <samp> 標籤。

此文字應視為電腦程式範例輸出。

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

表格

表格略微調整為 <caption> 樣式，摺疊邊框，並確保整個 text-align 一致。邊框、填補等其他變更會套用 .table 類別。

這是範例表格，這是說明內容的標題。
表格標題	表格標題	表格標題	表格標題
表格儲存格	表格儲存格	表格儲存格	表格儲存格
表格儲存格	表格儲存格	表格儲存格	表格儲存格
表格儲存格	表格儲存格	表格儲存格	表格儲存格

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

表單

各種表單元素已重新啟動，以簡化基本樣式。以下是部分最顯著的變更

<fieldset> 沒有邊框、填補或外框，因此可輕鬆用作個別輸入或輸入群組的包裝器。
<legend> 和欄位集一樣，也已重新設定樣式，以顯示為標題類型。
<label> 設定為 display: inline-block，以套用 margin。
<input>、<select>、<textarea> 和 <button> 大多由正規化處理，但重新啟動會移除其 margin，並設定 line-height: inherit。
<textarea> 修改為僅能垂直調整大小，因為水平調整大小常常會「中斷」頁面配置。
<button> 和 <input> 按鈕元素在 :not(:disabled) 時有 cursor: pointer。

這些變更，以及更多變更，如下所示。

某些日期輸入類型由最新版本的 Safari 和 Firefox 不完全支援。

範例圖例

範例輸入

範例電子郵件

範例電話

範例網址

範例數字

範例搜尋

範例範圍

範例檔案輸入

範例選取

勾選此核取方塊

選項一為此和彼選項二是其他事物，也相當長，用來展示這些精緻表單控制項的換行。選項三已停用

範例文字區域

範例日期

範例時間

範例密碼

範例日期時間

範例週

範例月份

範例顏色

範例輸出 100

按鈕指標

Reboot 包含對 role="button" 的加強，將預設游標變更為 pointer。將此屬性新增至元素，以幫助指出元素具有互動性。<button> 元素不需要此角色，因為它們會取得自己的 cursor 變更。

非按鈕元素按鈕

html

<span role="button" tabindex="0">Non-button element button</span>

雜項元素

地址

<address> 元素已更新，將瀏覽器預設 font-style 從 italic 重設為 normal。line-height 現在也已繼承，且已新增 margin-bottom: 1rem。<address> 用於呈現最近祖先（或整個作品）的聯絡資訊。透過以 <br> 結束列來保留格式。

ACME 公司
虛構街 1123 號
加州舊金山 94103
電話 (123) 456-7890

全名
first.last@example.com

區塊引用

區塊引用的預設 margin 為 1em 40px，因此我們將其重設為 0 0 1rem，以與其他元素更一致。

包含在區塊引用元素中的知名引言。

某位名人在來源標題中說過

內嵌元素

<abbr> 元素接收基本樣式，使其在段落文字中脫穎而出。

HTML 縮寫元素 HTML。

摘要

摘要的預設 cursor 為 text，因此我們將其重設為 pointer，以傳達可透過按一下元素與之互動。

一些詳細資訊

關於詳細資訊的更多資訊。

更多詳細資訊

以下是關於詳細資訊的更多詳細資訊。

HTML5 `[hidden]` 屬性

HTML5 新增一個名為 [hidden] 的新全域屬性，預設樣式為 display: none。借用 PureCSS 的一個想法，我們透過將 [hidden] { display: none !important; } 改善此預設，以協助防止其 display 意外被覆寫。

<input type="text" hidden>

由於 [hidden] 與 jQuery 的 $(...).hide() 和 $(...).show() 方法不相容，因此我們不會特別推薦 [hidden] 優於其他用於管理元素 display 的技術。

若要僅切換元素的可見性，表示其 display 未修改，且元素仍可影響文件流程，請改用 .invisible 類別。

重新啟動

方法

CSS 變數

頁面預設

原生字型堆疊

標題

段落

連結

水平線

清單

內嵌程式碼

程式碼區塊

變數

使用者輸入

範例輸出

表格

表單

按鈕指標

雜項元素

地址

區塊引用

內嵌元素

摘要

HTML5 [hidden] 屬性

HTML5 `[hidden]` 屬性