重啟
Reboot 是單個文件中元素特定 CSS 更改的集合,kickstart Bootstrap 以提供優雅、一致和簡單的基線來構建。
Reboot 建立在 Normalize 的基礎上,僅使用元素選擇器為許多 HTML 元素提供了一些自以為是的樣式。附加樣式僅通過類完成。例如,我們重新啟動一些<table>樣式以獲得更簡單的基線,然後提供.table、.table-bordered等。
以下是我們在重新啟動中選擇要覆蓋的內容的指南和原因:
- 更新一些瀏覽器默認值以使用
rems 而不是ems 來實現可伸縮組件間距。 - 避免
margin-top。垂直邊距可能會崩潰,從而產生意想不到的結果。更重要的是,一個單一的方向margin是一個更簡單的心智模型。 - 為了更輕鬆地跨設備大小縮放,塊元素應使用
rems 代表margins。 font盡可能減少相關屬性的聲明,inherit盡可能使用。
和元素已更新以提供更好的頁面範圍默認值<html>。<body>進一步來說:
box-sizing全局設置在每個元素上——包括and*::before,*::aftertoborder-box。這確保了元素的聲明寬度永遠不會由於填充或邊框而超過。- 沒有
font-size在 上聲明基礎<html>,而是16px假定為基礎(瀏覽器默認值)。font-size: 1rem應用於<body>通過媒體查詢輕鬆響應類型縮放,同時尊重用戶偏好並確保更易於訪問的方法。
- 沒有
- 還設置了
<body>一個全局font-family,line-height和text-align. 這是稍後由某些表單元素繼承的,以防止字體不一致。 - 為了安全起見,
<body>有一個聲明的background-color,默認為#fff.
Bootstrap 4 中刪除了默認的 Web 字體(Helvetica Neue、Helvetica 和 Arial),取而代之的是“本機字體堆棧”,以便在每個設備和操作系統上實現最佳文本渲染。在這篇Smashing Magazine文章中閱讀有關本機字體堆棧的更多信息。
$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>並在整個 Bootstrap 中全局自動繼承。要切換全局font-family,更新$font-family-base並重新編譯 Bootstrap。
所有標題元素(例如,)<h1>都<p>被重置以將其margin-top刪除。添加了標題margin-bottom: .5rem和段落margin-bottom: 1rem以便於間距。
| 標題 | 例子 |
|---|---|
|
|
h1。引導標題 |
|
|
h2。引導標題 |
|
|
h3。引導標題 |
|
|
h4。引導標題 |
|
|
h5。引導標題 |
|
|
h6. 引導標題 |
所有列表— <ul>、<ol>和<dl>—都已margin-top刪除和margin-bottom: 1rem. 嵌套列表沒有margin-bottom.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- 馬薩的整數 molestie lorem
- pretium nisl aliquet 的促進作用
- Nulla volutpat aliquam velit
- 菜豆
- Purus sodales ultricies
- 前庭前庭端口掃描儀
- Ac tristique libero volutpat 在
- Faucibus porta lacus fringilla vel
- Aenean sat amet erat nunc
- Eget porttitor lorem
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- 馬薩的整數 molestie lorem
- pretium nisl aliquet 的促進作用
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sat amet erat nunc
- Eget porttitor lorem
為了更簡單的樣式、清晰的層次結構和更好margin的間距,描述列表已更新。<dd>s 重置margin-left並0添加margin-bottom: .5rem. <dt>s加粗。
- 描述列表
- 描述列表非常適合定義術語。
- 歐伊斯莫德
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem。
- Donec id elit non mi porta gravida 在 eget metus。
- 馬勒蘇達門
- Etiam porta sem malesuada magna mollis euismod。
該<pre>元素被重置以刪除其margin-top並為其使用rem單位margin-bottom。
.example-元素{
邊距底部:1rem;
}
表格略微調整為樣式<caption>,折疊邊框,並確保始終保持一致text-align。對邊框、填充等的其他更改隨類.table一起提供。
| 表格標題 | 表格標題 | 表格標題 | 表格標題 |
|---|---|---|---|
| 表格單元格 | 表格單元格 | 表格單元格 | 表格單元格 |
| 表格單元格 | 表格單元格 | 表格單元格 | 表格單元格 |
| 表格單元格 | 表格單元格 | 表格單元格 | 表格單元格 |
已重新啟動各種表單元素以實現更簡單的基本樣式。以下是一些最顯著的變化:
<fieldset>s 沒有邊框、填充或邊距,因此它們可以很容易地用作單個輸入或輸入組的包裝器。<legend>s 和字段集一樣,也被重新設置樣式以顯示為各種標題。<label>s 設置為display: inline-block允許margin應用。<input>s、<select>s、<textarea>s 和<button>s 主要由 Normalize 解決,但 Reboot 也會刪除它們的margin和 setsline-height: inherit。<textarea>s 被修改為只能垂直調整大小,因為水平調整大小經常“破壞”頁面佈局。
這些變化以及更多變化如下所示。
該<address>元素已更新以將瀏覽器默認設置font-style從重置italic為normal。line-height現在也是繼承的,並margin-bottom: 1rem已添加。<address>s 用於顯示最近的祖先(或整個工作主體)的聯繫信息。通過以 . 結尾的行來保留格式<br>。
1355 Market St, Suite 900
San Francisco, CA 94103 電話
: (123) 456-7890 全名
[email protected]
marginblockquotes的默認值為1em 40px,因此我們將其重置0 0 1rem為與其他元素更一致的內容。
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示賭注。
該<abbr>元素接收基本樣式,使其在段落文本中脫穎而出。
cursorsummary的默認值是text,因此我們將其重置pointer為表示可以通過單擊元素進行交互。
一些細節
有關詳細信息的更多信息。
更多細節
這裡有更多關於細節的細節。
HTML5 添加了一個名為 的新全局屬性[hidden],默認樣式為display: none。借用PureCSS的一個想法,我們改進了這個默認值,[hidden] { display: none !important; }幫助防止它display被意外覆蓋。雖然[hidden]IE10 本身不支持,但我們的 CSS 中的顯式聲明解決了這個問題。
<input type="text" hidden>
jQuery 不兼容
[hidden]$(...).hide()與 jQuery 的和$(...).show()方法不兼容。因此,我們目前並不特別贊同[hidden]其他管理display元素的技術。
要僅僅切換元素的可見性,這意味著它display沒有被修改並且元素仍然可以影響文檔的流程,請改用.invisible類。