View on GitHub

重置 (Reboot)

針對單一檔案內 CSS 的特定元素重置樣式，重置以便 Bootstrap 準確且一致的建立樣式。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

On this page

方法

重置建立在 Normalize 的基礎上，僅使用元素選擇器來為許多 HTML 元素提供自定義的樣式。附加樣式僅能利用 class 建立。例如，我們重置 <table> 的一些樣式讓它更簡化，以利套用 .table 、 .table-bordered 及其他類別。

以下是 Bootstrap 重置元件的規範和原因:

更新部分瀏覽器的預設值，在可變動的元件間距上使用 rem 替代 em。
避開使用 margin-top。垂直邊界的 margins 可能會重疊，進而產生不能預期的結果。更重要的是，使用單向的 margin 是一個更單純的思考模式。
為了在跨裝置時能輕鬆縮放，區塊元素的 margin 應採用 rem。
盡可能使用 inherit ，將 font 相關屬性的宣告保持在最低需求。

CSS 變數

Added in v5.1.1

在 v5.1.1 中，我們標準化了所有 CSS 包 (包括 bootstrap.css、bootstrap-reboot.css 和 bootstrap-grid.css 以包含 _root.scss) 所需的 @import。這將 :root 級別的 CSS 變數添加到所有包，無論該包中使用了多少個。隨著時間的推移，Bootstrap 5 將繼續添加更多的 CSS 變數。

預設頁面

為了提供更好的整體頁面預設值而更新 <html> 和 <body> 元素。具體而言：

在每個元素上設定全域性的 box-sizing，包括 *::before 和 *::after ，將它們設為 border-box。這確保元素不會因為 padding 或 border 超過元素宣告的寬度數值。
- 不在 <html> 上宣告基礎的 font-size，而是假定字體尺寸為 16px (瀏覽器預設)。 font-size: 1rem 被應用在 <body> 上，以利透過 media queries 做響應式縮放，同時尊重使用者的喜好。可以通過修改 $font-size-root 變數來覆蓋此瀏覽器的預設值。
<body> 設定了全域的 font-family 、 font-weight 、 line-height 及 color，讓隨後的元素可以繼承此格式以防止字體不一致。
為了安全起見，<body> 已宣告 background-color，預設為 #fff。

原生字體堆疊

Bootstrap 利用 “native font stack” 或 “system font stack” 在每個設備和作業系統上獲得最佳的閱讀呈現。這些系統字體是特別為現今設備所設計的，具備更好的螢幕渲染、多元的文字支持以及更多。在此 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,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

請注意，由於字體堆疊包含表情符號字體，因此許多常見的符號/印刷符號字元將被呈現為彩色象形文字。它們的外觀會有所不同，具體取決於瀏覽器/平台的本機表情符號字體中使用的樣式，並且它們不會受到任何 CSS color 樣式的影響。

此 font-family 被應用於 <body> ，並在整個 Bootstrap 內自動繼承這個全域設定。若要改變全域的 font-family，請更新 $font-family-base 並重新編譯 Bootstrap。

CSS 變數

隨著 Bootstrap 5 的不斷成熟，越來越多的樣式將使用 CSS 變數構建，作為提供更多實時客製的手段，而無需總是重新編譯 Sass。我們的方法是獲取我們的原始 Sass 變數並將它們轉換為 CSS 變數。這樣，即使您不使用 CSS 變數，您仍然擁有 Sass 的所有功能。這仍在進行中，需要時間才能完全實施。

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

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

在實踐中，這些變數在 Reboot 中應用，如下所示：

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-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>

標題和段落

所有的標題元素，例如 <h1> 和 <p> 都已經移除了 margin-top。標題添加了 margin-bottom: .5rem ，以及段落添加了 margin-bottom: 1rem 以方便區分間隔。

Heading	Example
`<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

列表

移除全部列表 <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.

行內程式碼

使用 <code> 來包覆行內片段的程式碼。請確保是用跳脫字元轉譯 HTML 尖括號。

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

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>

<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

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

用戶輸入

使用 <kbd> 標籤來表示透過鍵盤輸入的指令。

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

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> 標籤來表示由程式輸出的實例。

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

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

表格

微調整表格中的 <caption> 樣式，合併邊框，並確保整體的 text-align 是一致的。針對 borders、padding 以及更多的其他變化將透過 .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

表單

不同的表單元素已被重置為更簡潔的基本樣式。如下式變化最為顯著的部分：

<fieldset> 沒有 borders、padding 或 margin 以便包覆獨立的 input 或 input 群組。
<legend> 如同 fieldset，已被重新定義樣式用來顯示分類的標題。
<label> 被設定為 display: inline-block 以便讓 margin 可以應用。
<input> 、 <select> 、 <textarea> 、和 <button> 主要由 Normalize 處理，不過 Reboot 移除了它們的 margin 並設定 line-height: inherit。
<textarea> 修改為僅可調整垂直尺寸，因為水平調整大小通常會"破壞"頁面佈局。
當 <button> 和 <input> 按鈕元素狀態為 :not(:disabled)，會呈現 cursor: pointer。

更多的變化都在下方進行展示。

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

Date & color input support

Keep in mind date inputs are not fully supported by all browsers, namely Safari.

按鈕上的指示

Reboot 增加 role="button" 將預設游標改為 pointer。此屬性添加到元素上用來輔助指示元素是可以互動的。<button> 原先就具有 cursor 的變化，所以 role 不是必須的。

Non-button element button

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

其他元素

地址

<address> 元素重置瀏覽器的預設 font-style，由 italic 轉為 normal。line-height 現在也可以繼承屬性，另外增加 margin-bottom: 1rem。<address> 用來表示作者（或是產品主體）的聯絡資訊。使用 <br> 保留結束行的格式。

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
[email protected]

引用

blockquote 的預設 margin 為 1em 40px ，我們將它重新設定為 0 0 1rem 以便和其他元素有更多的一致性。

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

Someone famous in Source Title

行內元素

<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]，預設樣式為 display: none。我們從 PureCSS 獲得的想法，改良為 [hidden] { display: none !important; } 以預防 display 被意外覆蓋。

<input type="text" hidden>

jQuery 的不相容性

[hidden] 與 jQuery 的 $(...).hide() 和 $(...).show() 方法不相容。因此，我們現在不特別推崇使用 [hidden] 而非其他技術來處理元素的 display。

僅僅切換元素的 visibility，代表 display 並沒有被修改，元素還是會影響網頁流動，因此可以使用 .invisible 類別取代。

重置 (Reboot)

方法

CSS 變數

預設頁面

原生字體堆疊

CSS 變數

標題和段落

列表

行內程式碼

程式碼區塊

變數

用戶輸入

實例輸出

表格

表單

Date & color input support

按鈕上的指示

其他元素

地址

引用

行內元素

Summary

HTML5 [hidden] 屬性

jQuery 的不相容性

HTML5 `[hidden]` 屬性