重置（Reboot）
針對單一文件內(nèi)CSS的特定元素重置樣式，重置以便Bootstrap準(zhǔn)確且一致的建立樣式。
方法
重置建立在Normalize的基礎(chǔ)上，僅使用元素選擇器來為許多HTML元素提供自定義的樣式。附加樣式僅能利用class建立。例如，我們重置<table>的一些樣式讓它更簡化，以利套用.table、.table-bordered及其他類別。
以下是Bootstrap重置元件的規(guī)范和原因：
- 更新部分瀏覽器的預(yù)設(shè)值，在可變動的元件間距上使用rem替代em。
- 避開使用margin-top。垂直邊界的margins可能會重疊，進(jìn)而產(chǎn)生不能預(yù)期的結(jié)果。更重要的是，使用單向的margin是一個更單純的思考模式。
- 為便于跨設(shè)備大小進(jìn)行縮放，塊元素應(yīng)使用rems作為邊距。
- 盡量減少字體相關(guān)屬性的聲明，盡可能使用inherit。
頁面默認(rèn)值
為了提供更好的整體頁面預(yù)設(shè)值而更新和
元素。具體而言：- 在每個元素上設(shè)定全局性的box-sizing，包括*：：before和*：：after，將它們設(shè)為border-box。這確保元素不會因為padding或border超過元素聲明的寬度數(shù)值。
-
不在
<html>上聲明基礎(chǔ)的font-size，而是假定字體尺寸為16px（瀏覽器預(yù)設(shè)）。font-size: 1rem被應(yīng)用在上，以利透過media queries做響應(yīng)式縮放，同時尊重使用者的喜好。可以通過修改$font-size-root變量來覆蓋此瀏覽器的預(yù)設(shè)值。
-
不在
-
<body>設(shè)定了全局的font-family、font-weight、line-height及color，讓隨后的元素可以繼承此格式以防止字體不一致。 - 為了安全起見，
<body>已聲明background-color，預(yù)設(shè)為#fff。
原生字體堆棧
Bootstrap利用“native font stack”或“system font stack”在每個設(shè)備和操作系統(tǒng)上獲得最佳的閱讀呈現(xiàn)。這些系統(tǒng)字體是特別為現(xiàn)今設(shè)備所設(shè)計的，具備更好的屏幕渲染、多元的文字支持以及更多。在此Smashing Magazine文章中了解更多有關(guān)原生字體堆疊的信息。 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字符將呈現(xiàn)為多色象形文字。它們的外觀會有所不同，這取決于瀏覽器/平臺本機emoji字體中使用的樣式，并且它們不會受到任何CSS顏色樣式的影響。
此字體系列應(yīng)用于 <body>并在整個Bootstrap中自動全局繼承。要切換全局字體系列，請更新$font family base并重新編譯Bootstrap程序。
標(biāo)題和段落
所有標(biāo)題元素（例如， <h1>—and <p>）都被重置為刪除其邊距頂部。標(biāo)題有 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。
- 所有列表的上邊距都已刪除
- 他們的底邊正常化了
- 嵌套列表沒有下邊距
- 這樣他們的外表就更勻稱了
- 尤其是后面有更多的列表項時
- 左側(cè)填充也已重置
- 這是一份有序的清單
- 有幾個列表項
- 它有相同的整體外觀
- 與前一個無序列表相同
為了更簡單的樣式、清晰的層次結(jié)構(gòu)和更好的間距，描述列表更新了邊距，<dd>將左邊邊距重置為0，并在底部添加邊距margin-bottom: .5rem，<dt>以粗體顯示。
- 描述列表
- 描述列表非常適合定義術(shù)語。
- 術(shù)語
- 術(shù)語的定義。
- 同一術(shù)語的第二個定義。
- 其他術(shù)語
- 其他術(shù)語的定義。
內(nèi)聯(lián)代碼
Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.
用<code>包裝內(nèi)聯(lián)代碼段。確保轉(zhuǎn)義HTML尖括號。
<section> 應(yīng)包裝為內(nèi)聯(lián)代碼。
例如, <code><section></code> 應(yīng)包裝為內(nèi)聯(lián)代碼。代碼塊
<pre>用于多行的代碼。再提醒一次，確保在代碼中轉(zhuǎn)義任何尖括號，以便正確渲染。<pre>移除margin-top以及使用rem作為margin-bottom的單位。
<p>此處為示例文本...</p>
<p>這里還有一行示例文本...</p>
<pre><code><p>此處為示例文本...</p>
<p>這里還有一行示例文本...</p>
</code></pre>變量
使用<var>標(biāo)簽來指定變量。
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>用戶輸入
使用<kbd>標(biāo)簽來表示通過鍵盤輸入的指令。
要編輯設(shè)置，請按 ctrl + ,
要切換目錄，請鍵入 <kbd>cd</kbd> ，后跟目錄名。<br>
要編輯設(shè)置，請按 <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>實例輸出
使用 <samp>標(biāo)簽來表示由程序輸出的實例。
<samp>This text is meant to be treated as sample output from a computer program.</samp>表格
微調(diào)整表格中的<caption>樣式，合并邊框，并確保整體的text-align是一致的。針對borders、padding以及更多的其他變化將通過.table類別達(dá)成。
| 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，已被重新定義樣式用來顯示分類的標(biāo)題。<label>被設(shè)定為display: inline-block以便讓margin可以應(yīng)用。<input>s,<select>s,<textarea>s, and<button>s 主要由Normalize處理，不過Reboot移除了它們的margin并設(shè)定line-height: inherit。<textarea>s修改為僅可調(diào)整垂直尺寸，因為水平調(diào)整大小通常會“破壞”頁面布局。- 當(dāng)
<button>和<input>按鈕元素狀態(tài)為：not（：disabled），會呈現(xiàn)cursor: pointer。
更多的變化都在下方進(jìn)行展示。
Date & color input support
Keep in mind date inputs are not fully supported by all browsers, namely Safari.
按鈕上的指針
重置增加role="button"將預(yù)設(shè)光標(biāo)改為pointer。此屬性添加到元素上用來輔助指示元素是可以互動的。button原先就具有cursor的變化，所以這個不是必須的。
<span role="button" tabindex="0">Non-button element button</span>其他元素
地址
<address>元素重置瀏覽器的預(yù)設(shè)font-style，由italic轉(zhuǎn)為normal。line-height現(xiàn)在也可以繼承屬性，另外增加margin-bottom: 1rem。<address>用來表示作者（或是產(chǎn)品主體）的聯(lián)絡(luò)信息。使用<br>保留結(jié)束行的格式。
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Full Name
first.last@example.com
引用
blockquotes上的默認(rèn)邊距是1em 40px，因此我們將其重置為0 0 1rem，以便與其他元素更加一致。
A well-known quote, contained in a blockquote element.
Someone famous in Source Title
內(nèi)聯(lián)元素
<abbr>元素的基本樣式讓它與段落文字之間有明顯突出。
摘要
summary的預(yù)設(shè)cursor是text，所以我們將其重置為pointer，元素可以透過點擊產(chǎn)生互動性。
Some details
More info about the details.
Even more details
Here are even more details about the details.
HTML5隱藏屬性
HTML5新增一個新的全局屬性[hidden]，預(yù)設(shè)樣式為display: none。我們從PureCSS獲得的想法，改良為[hidden] { display: none !important; }以預(yù)防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()方法不兼容。因此，我們現(xiàn)在不特別推崇使用[hidden]技術(shù)來處理元素的display。
僅僅切換元素的visibility，代表display并沒有被修改，元素還是會影響網(wǎng)頁流動，因此可以使用.invisible類取代。