重置（Reboot）

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

On this page

方法

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

以下是Bootstrap重置元件的規范和原因：

更新部分瀏覽器的預設值，在可變動的元件間距上使用rem替代em。
避開使用margin-top。垂直邊界的margins可能會重疊，進而產生不能預期的結果。更重要的是，使用單向的margin是一個更單純的思考模式。
為便于跨設備大小進行縮放，塊元素應使用rems作為邊距。
盡量減少字體相關屬性的聲明，盡可能使用inherit。

頁面默認值

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

在每個元素上設定全局性的box-sizing，包括*：：before和*：：after，將它們設為border-box。這確保元素不會因為padding或border超過元素聲明的寬度數值。
- 不在<html>上聲明基礎的font-size，而是假定字體尺寸為16px（瀏覽器預設）。font-size: 1rem被應用在上，以利透過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文章中了解更多有關原生字體堆疊的信息。 native font stacks in this.

$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// 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;

請注意，由于字體堆棧包含emoji字體，因此許多常見的symbol/dingbat unicode字符將呈現為多色象形文字。它們的外觀會有所不同，這取決于瀏覽器/平臺本機emoji字體中使用的樣式，并且它們不會受到任何CSS顏色樣式的影響。

此字體系列應用于 <body>并在整個Bootstrap中自動全局繼承。要切換全局字體系列，請更新$font family base并重新編譯Bootstrap程序。

標題和段落

所有標題元素（例如， <h1>—and <p>）都被重置為刪除其邊距頂部。標題有 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>, and <dl>-都刪除了它們的margin-top和 margin-bottom: 1rem 。嵌套列表沒有頁邊距底部。我們還重置了<ul> and <ol> 元素的padding-left。

所有列表的上邊距都已刪除
他們的底邊正常化了
嵌套列表沒有下邊距
- 這樣他們的外表就更勻稱了
- 尤其是后面有更多的列表項時
左側填充也已重置

這是一份有序的清單
有幾個列表項
它有相同的整體外觀
與前一個無序列表相同

為了更簡單的樣式、清晰的層次結構和更好的間距，描述列表更新了邊距，<dd>將左邊邊距重置為0，并在底部添加邊距margin-bottom: .5rem，<dt>以粗體顯示。

描述列表: 描述列表非常適合定義術語。
術語: 術語的定義。; 同一術語的第二個定義。
其他術語: 其他術語的定義。

內聯代碼

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets. 用<code>包裝內聯代碼段。確保轉義HTML尖括號。

例如, <section> 應包裝為內聯代碼。

例如, <code>&lt;section&gt;</code> 應包裝為內聯代碼。

代碼塊

<pre>用于多行的代碼。再提醒一次，確保在代碼中轉義任何尖括號，以便正確渲染。<pre>移除margin-top以及使用rem作為margin-bottom的單位。

<p>此處為示例文本...</p>
<p>這里還有一行示例文本...</p>

<pre><code>&lt;p&gt;此處為示例文本...&lt;/p&gt;
&lt;p&gt;這里還有一行示例文本...&lt;/p&gt;
</code></pre>

變量

使用<var>標簽來指定變量。

y = mx + b

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

用戶輸入

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

要切換目錄，請鍵入cd，后跟目錄名。
要編輯設置，請按 ctrl + ,

要切換目錄，請鍵入 <kbd>cd</kbd> ，后跟目錄名。<br>
        要編輯設置，請按 <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>s, <select>s, <textarea>s, and <button>s 主要由Normalize處理，不過Reboot移除了它們的margin并設定line-height: inherit。
<textarea>s修改為僅可調整垂直尺寸，因為水平調整大小通常會“破壞”頁面布局。
當<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.

按鈕上的指針

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

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
first.last@example.com

引用

blockquotes上的默認邊距是1em 40px，因此我們將其重置為0 0 1rem，以便與其他元素更加一致。

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

Someone famous in Source Title

內聯元素

<abbr>元素的基本樣式讓它與段落文字之間有明顯突出。

Nulla attr vitae elit libero, a pharetra augue.

摘要

summary的預設cursor是text，所以我們將其重置為pointer，元素可以透過點擊產生互動性。

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5隱藏屬性

HTML5新增一個新的全局屬性[hidden]，預設樣式為display: none。我們從PureCSS獲得的想法，改良為[hidden] { display: none !important; }以預防display被意外覆蓋。

<input type="text" hidden>

jQuery 的不相容性

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements. [hidden]與jQuery的$(...).hide() and $(...).show()方法不兼容。因此，我們現在不特別推崇使用[hidden]技術來處理元素的display。

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