Reboot

Reboot 是一個針對特定元素的 CSS 變更集合，存放於單一檔案中，為 Bootstrap 提供一個優雅、一致且簡潔的基準樣式。

本頁內容

方法（Approach）

Reboot 建立在 Normalize 之上，僅使用元素選擇器為許多 HTML 元素提供有自己見解的樣式。額外的樣式僅透過類別完成。例如，我們重設了一些 <table> 樣式以獲得更簡單的基準，之後再提供 .table、.table-bordered 等類別。

以下是我們選擇在 Reboot 中覆寫內容的指導方針和原因：

更新某些瀏覽器預設值，使用 rem 而非 em 以獲得可縮放的元件間距。
避免使用 margin-top。垂直外距可能會發生摺疊，產生意外的結果。更重要的是，單一方向的 margin 是更簡單的思維模型。
為了更容易在不同裝置尺寸間縮放，區塊元素應該使用 rem 作為 margin。
將 font 相關屬性的宣告保持在最少，盡可能使用 inherit。

CSS 變數（CSS variables）

Added in 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>

頁面預設值（Page defaults）

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

box-sizing 在每個元素上全域設定——包括 *::before 和 *::after，設為 border-box。這確保了元素的宣告寬度永遠不會因為 padding 或 border 而被超出。
- <html> 上沒有宣告基本 font-size，但假設為 16px（瀏覽器預設值）。<body> 上套用了 font-size: 1rem，以便透過 Media queries 輕鬆進行響應式字型縮放，同時尊重使用者偏好並確保更易於存取的方法。這個瀏覽器預設值可以透過修改 $font-size-root 變數來覆寫。
<body> 也設定了全域的 font-family、font-weight、line-height 和 color。這些稍後會被某些表單元素繼承，以防止字型不一致。
為了安全起見，<body> 有一個宣告的 background-color，預設為 #fff。

原生字型堆疊（Native font stack）

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;

請注意，由於字型堆疊包含 emoji 字型，許多常見的符號/裝飾符號 Unicode 字元將被渲染為多彩的象形圖。它們的外觀會根據瀏覽器/平台原生 emoji 字型中使用的樣式而有所不同，且不會受到任何 CSS color 樣式的影響。

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

標題（Headings）

所有標題元素——<h1> 至 <h6> 都移除了 margin-top，設定了 margin-bottom: .5rem，並收緊了 line-height。雖然標題預設會繼承其 color，但您也可以透過可選的 CSS 變數 --bs-heading-color 來覆寫它。

標題	範例
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

段落（Paragraphs）

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

This is an example paragraph.

html

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

連結（Links）

連結套用了預設的 color 和底線。雖然連結在 :hover 時會改變，但不會根據是否有人 :visited 過該連結而改變。它們也沒有特殊的 :focus 樣式。

This is an example link

html

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

從 v5.3.x 開始，連結 color 使用 rgba() 和新的 -rgb CSS 變數設定，允許輕鬆自訂連結顏色的透明度。使用 --bs-link-opacity CSS 變數來改變連結顏色的透明度：

This is an example link

html

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

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

This is a placeholder link

html

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

水平分隔線（Horizontal rules）

<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">

列表（Lists）

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

All lists have their top margin removed
And their bottom margin normalized
Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
The left padding has also been reset

Here's an ordered list
With a few list items
It has the same overall look
As the previous unordered list

為了更簡單的樣式、清晰的層次結構和更好的間距，描述列表更新了 margin。<dd> 將 margin-left 重設為 0 並新增了 margin-bottom: .5rem。<dt> 設為粗體。

Description lists: A description list is perfect for defining terms.
Term: Definition for the term.; A second definition for the same term.
Another term: Definition for this other term.

行內程式碼（Inline code）

使用 <code> 包裝行內程式碼片段。請確保轉義 HTML 角括號。

For example, <section> should be wrapped as inline.

html

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

程式碼區塊（Code blocks）

使用 <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>

變數（Variables）

使用 <var> 標籤來表示變數。

y = mx + b

html

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

使用者輸入（User input）

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

To switch directories, type cd followed by the name of the directory.
To edit settings, press 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>

輸出範例（Sample output）

使用 <samp> 標籤來表示程式的輸出範例。

This text is meant to be treated as sample output from a computer program.

html

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

表格（Tables）

表格經過輕微調整以設定 <caption> 的樣式、摺疊邊框，並確保整體一致的 text-align。邊框、內距等的額外變更請參閱 .table 類別。

This is an example table, and this is its caption to describe the contents.
Table heading	Table heading	Table heading	Table heading
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell

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>

表單（Forms）

各種表單元素已重新啟動以獲得更簡單的基本樣式。以下是一些最顯著的變更：

<fieldset> 沒有邊框、內距或外距，因此可以輕鬆用作單個輸入或輸入群組的包裝器。
<legend> 與 fieldset 一樣，也已重新設定樣式，以某種標題的形式顯示。
<label> 設定為 display: inline-block 以允許套用 margin。
<input>、<select>、<textarea> 和 <button> 主要由 Normalize 處理，但 Reboot 移除了它們的 margin 並設定了 line-height: inherit。
<textarea> 被修改為只能垂直調整大小，因為水平調整大小通常會「破壞」頁面版面配置。
<button> 和 <input> 按鈕元素在 :not(:disabled) 時具有 cursor: pointer。

這些變更以及更多內容在下方展示。

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

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

按鈕的指標（Pointers on buttons）

Reboot 包含一個針對 role="button" 的增強功能，將預設游標改為 pointer。將此屬性新增到元素以幫助表示元素是可互動的。對於 <button> 元素來說，這個 role 不是必需的，因為它們有自己的 cursor 變更。

Non-button element button

html

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

其他元素（Misc elements）

地址（Address）

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

ACME Corporation
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890

Full Name
[email protected]

引用區塊（Blockquote）

blockquote 上的預設 margin 是 1em 40px，因此我們將其重設為 0 0 1rem 以與其他元素更加一致。

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

行內元素（Inline elements）

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

The HTML abbreviation element.

摘要（Summary）

summary 上的預設 cursor 是 text，因此我們將其重設為 pointer 以傳達該元素可以透過點擊進行互動。

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 `[hidden]` 屬性（HTML5 `[hidden]` attribute）

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

<input type="text" hidden>

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

要僅切換元素的可見性，意味著其 display 不會被修改且元素仍然可以影響文件流程，請改用 .invisible 類別。

Reboot

方法（Approach）

CSS 變數（CSS variables）

頁面預設值（Page defaults）

原生字型堆疊（Native font stack）

標題（Headings）

段落（Paragraphs）

連結（Links）

水平分隔線（Horizontal rules）

列表（Lists）

行內程式碼（Inline code）

程式碼區塊（Code blocks）

變數（Variables）

使用者輸入（User input）

輸出範例（Sample output）

表格（Tables）

表單（Forms）

按鈕的指標（Pointers on buttons）

其他元素（Misc elements）

地址（Address）

引用區塊（Blockquote）

行內元素（Inline elements）

摘要（Summary）

HTML5 [hidden] 屬性（HTML5 [hidden] attribute）

HTML5 `[hidden]` 屬性（HTML5 `[hidden]` attribute）