Source

重啟

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, *::afterto border-box。這確保了元素的聲明寬度永遠不會由於填充或邊框而超過。
  • 沒有font-size在 上聲明基礎<html>,而是16px假定為基礎(瀏覽器默認值)。font-size: 1rem應用於<body>通過媒體查詢輕鬆響應類型縮放,同時尊重用戶偏好並確保更易於訪問的方法。
  • 還設置了<body>一個全局font-family,line-heighttext-align. 這是稍後由某些表單元素繼承的,以防止字體不一致。
  • 為了安全起見,<body>有一個聲明的background-color,默認為#fff.

本機字體堆棧

Bootstrap 4 中刪除了默認的 Web 字體(Helvetica Neue、Helvetica 和 Arial),取而代之的是“本機字體堆棧”,以便在每個設備和操作系統上實現最佳文本渲染。在這篇Smashing Magazine文章中閱讀有關本機字體堆棧的更多信息。

$font-family-sans-serif:
  // 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, 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></h1>

h1。引導標題

<h2></h2>

h2。引導標題

<h3></h3>

h3。引導標題

<h4></h4>

h4。引導標題

<h5></h5>

h5。引導標題

<h6></h6>

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
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. 馬薩的整數 molestie lorem
  4. pretium nisl aliquet 的促進作用
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sat amet erat nunc
  8. Eget porttitor lorem

為了更簡單的樣式、清晰的層次結構和更好margin的間距,描述列表已更新。<dd>s 重置margin-left0添加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和 sets line-height: inherit
  • <textarea>s 被修改為只能垂直調整大小,因為水平調整大小經常“破壞”頁面佈局。
  • <button>s 和<input>button 元素有cursor: pointerwhen :not(:disabled)

這些變化以及更多變化如下所示。

示例圖例

100

雜項元素

地址

<address>元素已更新以將瀏覽器默認設置font-style從重置italicnormalline-height現在也是繼承的,並margin-bottom: 1rem已添加。<address>s 用於顯示最近的祖先(或整個工作主體)的聯繫信息。通過以 . 結尾的行來保留格式<br>

Twitter, Inc.
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>元素接收基本樣式,使其在段落文本中脫穎而出。

Nulla attr vitae elit libero,一個 pharetra augue。

概括

cursorsummary的默認值是text,因此我們將其重置pointer為表示可以通過單擊元素進行交互。

一些細節

有關詳細信息的更多信息。

更多細節

這裡有更多關於細節的細節。

HTML5[hidden]屬性

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