重啟
Reboot 是單個文件中元素特定 CSS 更改的集合,kickstart Bootstrap 以提供優雅、一致和簡單的基線來構建。
Reboot 建立在 Normalize 的基礎上,僅使用元素選擇器為許多 HTML 元素提供了一些自以為是的樣式。附加樣式僅通過類完成。例如,我們重新啟動一些<table>
樣式以獲得更簡單的基線,然後提供.table
、.table-bordered
等。
以下是我們在重新啟動中選擇要覆蓋的內容的指南和原因:
- 更新一些瀏覽器默認值以使用
rem
s 而不是em
s 來實現可伸縮組件間距。 - 避免
margin-top
。垂直邊距可能會崩潰,從而產生意想不到的結果。更重要的是,一個單一的方向margin
是一個更簡單的心智模型。 - 為了更輕鬆地跨設備大小縮放,塊元素應使用
rem
s 代表margin
s。 font
盡可能減少相關屬性的聲明,inherit
盡可能使用。
和元素已更新以提供更好的頁面範圍默認值<html>
。<body>
進一步來說:
box-sizing
全局設置在每個元素上——包括and*::before
,*::after
toborder-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
適用於<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]
margin
blockquotes的默認值為1em 40px
,因此我們將其重置0 0 1rem
為與其他元素更一致的內容。
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示賭注。
該<abbr>
元素接收基本樣式,使其在段落文本中脫穎而出。
cursor
summary的默認值是text
,因此我們將其重置pointer
為表示可以通過單擊元素進行交互。
一些細節
有關詳細信息的更多信息。
更多細節
這裡有更多關於細節的細節。
HTML5 添加了一個名為 的新全局屬性[hidden]
,默認樣式為display: none
。借用PureCSS的一個想法,我們改進了這個默認值,[hidden] { display: none !important; }
幫助防止它display
被意外覆蓋。雖然[hidden]
IE10 本身不支持,但我們的 CSS 中的顯式聲明解決了這個問題。
jQuery 不兼容
[hidden]
$(...).hide()
與 jQuery 的和$(...).show()
方法不兼容。因此,我們目前並不特別贊同[hidden]
其他管理display
元素的技術。
要僅僅切換元素的可見性,這意味著它display
沒有被修改並且元素仍然可以影響文檔的流程,請改用.invisible
類。