?
This document uses PHP Chinese website manual Release
重新啟動(dòng)，單個(gè)文件中特定于元素的CSS更改集合，kickstart Bootstrap提供優(yōu)雅、一致且簡(jiǎn)單的基礎(chǔ)來(lái)構(gòu)建環(huán)境。
Approach
重新啟動(dòng)基于Normalize構(gòu)建，僅使用元素選擇器提供許多有些自以為是風(fēng)格的HTML元素。額外的樣式只能通過(guò)類來(lái)完成。例如，我們重新啟動(dòng)一些<table>樣式以獲得更簡(jiǎn)單的基準(zhǔn)，然后再提供.table，.table-bordered等等。
以下是我們的指南和選擇重新啟動(dòng)時(shí)要重寫(xiě)的內(nèi)容的原因：
更新一些瀏覽器默認(rèn)值以使用
rems而不是ems來(lái)表示可伸縮組件間距。避免
margin-top。垂直邊距可能會(huì)崩潰，產(chǎn)生意想不到的結(jié)果。更重要的是，單一的方向margin是一個(gè)更簡(jiǎn)單的心理模型。為了便于跨設(shè)備大小縮放，塊元素應(yīng)該使用
rems來(lái)表示margins。盡可能保持與
font相關(guān)屬性的聲明最小化inherit。
Page defaults
在<html>和<body>元素更新，以提供更好的頁(yè)面寬度默認(rèn)值。進(jìn)一步來(lái)說(shuō)：
將
box-sizing在全球范圍內(nèi)設(shè)定的每一個(gè)元素，包括*::before和*::after，來(lái)border-box。這確保了由于填充或邊框而永遠(yuǎn)不會(huì)超出聲明的元素寬度。沒(méi)有
font-size聲明基地<html>，但16px假定（瀏覽器默認(rèn)）。通過(guò)媒體查詢font-size: 1rem應(yīng)用于<body>易于響應(yīng)的類型縮放，同時(shí)尊重用戶偏好并確保更易于訪問(wèn)的方法。該
<body>還設(shè)置一個(gè)全球性的font-family，line-height和text-align。稍后會(huì)被某些表單元素繼承以防止字體不一致。為了安全起見(jiàn)，它
<body>有一個(gè)聲明background-color，默認(rèn)為#fff。
Native font stack
默認(rèn)的Web字體（Helvetica Neue，Helvetica和Arial）已被放入Bootstrap 4中，并替換為“原生字體堆?！?，以在每個(gè)設(shè)備和操作系統(tǒng)上實(shí)現(xiàn)最佳文本呈現(xiàn)。閱讀本Smashing雜志文章中有關(guān)原生字體堆棧的更多信息。
$font-family-sans-serif: // Safari for OS X and iOS (San Francisco) -apple-system, // Chrome < 56 for OS X (San Francisco) BlinkMacSystemFont, // Windows "Segoe UI", // Android "Roboto", // Basic web fallback "Helvetica Neue", Arial, sans-serif, // Emoji fonts "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
這font-family適用于<body>整個(gè)Bootstrap并在全局自動(dòng)繼承。要切換全局font-family，請(qǐng)更新$font-family-base并重新編譯Bootstrap。
Headings and paragraphs
所有標(biāo)題元素 - 例如<h1>- <p>重置為margin-top刪除。標(biāo)題margin-bottom: .5rem添加了段落margin-bottom: 1rem，并且可以輕松排列。
標(biāo)題 | 例 |
|---|---|
<H1> </ H1> | H1。Bootstrap標(biāo)題 |
<H2> </ H2> | H2。Bootstrap標(biāo)題 |
<H3> </ H3> | H3。Bootstrap標(biāo)題 |
<H4> </ H4> | H4。Bootstrap標(biāo)題 |
<H5> </ H5> | H5。Bootstrap標(biāo)題 |
<H6> </ H6> | H6。Bootstrap標(biāo)題 |
Lists
所有l(wèi)ists- <ul>，<ol>和<dl>-具備其margin-top刪除和margin-bottom: 1rem。嵌套列表沒(méi)有margin-bottom。
為了更簡(jiǎn)單的樣式，清晰的層次結(jié)構(gòu)和更好的間距，說(shuō)明列表已更新margin。<dd>重設(shè)margin-left到0并添加margin-bottom: .5rem。其中<dt>s是粗體的。
Preformatted text
該<pre>元素被重置為刪除它margin-top并為其使用rem單位margin-bottom。
Tables
表格略微調(diào)整為樣式<caption>，折疊邊界，并確保始終一致text-align。對(duì).table班級(jí)附加更改，邊框，填充等。
Forms
各種表單元素已被重新引導(dǎo)，以實(shí)現(xiàn)更簡(jiǎn)單的基本樣式。以下是一些最顯著的變化：
<fieldset>s沒(méi)有邊框，填充或邊距，因此它們可以很容易地用作單個(gè)輸入或輸入組的包裝。<legend>與字段集一樣，它也被重新設(shè)置為顯示為各種標(biāo)題。<label>s被設(shè)置為display: inline-block允許margin應(yīng)用。<input>s，<select>s，<textarea>s和<button>s主要通過(guò)Normalize處理，但Reboot 也會(huì)刪除它們margin并設(shè)置line-height: inherit。<textarea>s被修改為只能在垂直方向調(diào)整大小，因?yàn)樗秸{(diào)整大小通常會(huì)“破壞”頁(yè)面布局。
下面將演示這些更改以及更多內(nèi)容。
Misc elements
Address
該<address>元素被更新重置瀏覽器默認(rèn)font-style的italic到normal。line-height現(xiàn)在也被繼承了，并且margin-bottom: 1rem已被添加。<address>s是為了提供最近的祖先（或整個(gè)工作機(jī)構(gòu)）的聯(lián)系信息。通過(guò)結(jié)束行來(lái)保留格式<br>。
Blockquote
marginblockquotes上的默認(rèn)值是1em 40px，所以我們重置它以0 0 1rem使其與其他元素更加一致。
Inline elements
該<abbr>元件接收基本樣式以使它在段落文本之間脫穎而出。
HTML5 [hidden] attribute
HTML5添加了一個(gè)名為的新的全局屬性[hidden]，display: none默認(rèn)情況下它的樣式是。從PureCSS借鑒一個(gè)想法，我們通過(guò)改進(jìn)默認(rèn)設(shè)置[hidden] { display: none !important; }來(lái)幫助防止它display被意外覆蓋。盡管[hidden]IE10本身并不支持，但CSS中的顯式聲明解決了這個(gè)問(wèn)題。
<input type="text" hidden>
jQuery incompatibility
[hidden]與jQuery $(...).hide()和$(...).show()方法不兼容。因此，我們目前并不特別贊同[hidden]用于管理display元素的其他技術(shù)。
要僅僅切換元素的可見(jiàn)性，意味著它display沒(méi)有被修改，并且元素仍然可以影響文檔的流動(dòng)，請(qǐng).invisible改為使用該類。
Click delay optimization for touch
傳統(tǒng)上，觸摸屏設(shè)備上的瀏覽器在“輕敲”（即手指/觸筆從屏幕上抬起）和click事件被觸發(fā)的時(shí)刻之間延遲約300ms 。這種延遲對(duì)于這些瀏覽器正確處理“雙擊縮放”手勢(shì)是必要的，而不會(huì)在第一次“輕敲”后過(guò)早觸發(fā)操作或鏈接，但它可能會(huì)使您的站點(diǎn)感覺(jué)稍微緩慢且無(wú)響應(yīng)。
大多數(shù)移動(dòng)瀏覽器會(huì)自動(dòng)優(yōu)化此站點(diǎn)的300毫秒延遲，以便將該width=device-width媒體資源用作其響應(yīng)元標(biāo)記的一部分（也適用于禁用縮放功能的網(wǎng)站，例如user-scalable=no，盡管出于可訪問(wèn)性和可用性的原因，強(qiáng)烈建議您不要這樣做）。這里最大的例外是Windows Phone 8.1上的IE11，以及iOS 9.3之前的 iOS Safari（以及任何其他基于iOS WebView的瀏覽器）。
在支持觸摸的筆記本電腦/臺(tái)式機(jī)設(shè)備上，IE11和Microsoft Edge目前是唯一具有“雙擊縮放”功能的瀏覽器。由于所有桌面瀏覽器width=device-width都會(huì)忽略響應(yīng)式元標(biāo)記，因此使用此功能對(duì)延遲300毫秒不起作用。
為了在桌面上的IE11和Microsoft Edge以及Windows Phone 8.1上的IE11中解決這個(gè)問(wèn)題，Bootstrap明確地在所有交互元素（例如按鈕和鏈接）上使用touch-action:manipulationCSS屬性。該屬性實(shí)質(zhì)上禁用了這些元素的雙擊功能，消除了300ms的延遲。
對(duì)于舊的iOS版本（9.3之前版本），建議的方法是使用其他腳本（如FastClick）明確解決延遲問(wèn)題。
有關(guān)更多詳細(xì)信息，請(qǐng)參閱兼容性表以抑制觸摸屏交互的300毫秒延遲。
? 2011–2017 Twitter, Inc.
? 2011–2017 The Bootstrap Authors
根據(jù)MIT許可證授權(quán)的代碼。
根據(jù)知識(shí)共享署名許可證v3.0獲得許可的文檔。