跳到主要內容 跳到文檔導航
in English

重啟

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>通過媒體查詢輕鬆響應類型縮放，同時尊重用戶偏好並確保更易於訪問的方法。可以通過修改$font-size-root變量來覆蓋此瀏覽器默認值。
  • 還設置了<body>一個全局font-family, font-weight, line-height, 和color. 這是稍後由某些表單元素繼承的，以防止字體不一致。
  • 為了安全起見，<body>有一個聲明的background-color，默認為#fff.

本機字體堆棧

Bootstrap 利用“本機字體堆棧”或“系統字體堆棧”在每個設備和操作系統上實現最佳文本渲染。這些系統字體專為當今的設備而設計，具有改進的屏幕渲染、可變字體支持等。在這篇Smashing Magazine文章中閱讀有關本機字體堆棧的更多信息。

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // 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;

請注意，由於字體堆棧包含表情符號字體，因此許多常見的符號/dingbat unicode 字符將呈現為多色象形文字。它們的外觀會有所不同，具體取決於瀏覽器/平台的原生表情符號字體中使用的樣式，並且它們不會受到任何 CSScolor樣式的影響。

這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. 我們還重置了padding-lefton<ul>和<ol>元素。

  • 所有列表的上邊距都被刪除
  • 他們的下邊距標準化
  • 嵌套列表沒有下邊距
    • 這樣它們的外觀更均勻
    • 特別是當後面有更多列表項時
  • 左側填充也已重置
  1. 這是一個有序列表
  2. 有幾個列表項
  3. 它具有相同的整體外觀
  4. 和之前的無序列表一樣

為了更簡單的樣式、清晰的層次結構和更好margin的間距，描述列表已更新。<dd>s 重置margin-left並0添加margin-bottom: .5rem. <dt>s加粗。

描述列表
描述列表非常適合定義術語。
學期
術語的定義。
同一術語的第二個定義。
另一個術語
這個其他術語的定義。

內聯代碼

用 .包裹內聯代碼片段<code>。請務必轉義 HTML 尖括號。

例如， <section>應包裝為內聯。 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

代碼塊

將<pre>s 用於多行代碼。再次，確保轉義代碼中的任何尖括號以進行正確渲染。該<pre>元素被重置以刪除其margin-top並為其使用rem單位margin-bottom。

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

變量

對於指示變量，請使用<var>標籤。

y = m x + b 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

用戶輸入

使用<kbd>表示通常通過鍵盤輸入的輸入。

要切換目錄，請鍵入 cd後跟目錄的名稱。
要編輯設置，請按 ctrl + , 
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

樣本輸出

為了指示程序的示例輸出，請使用<samp>標籤。

此文本應被視為計算機程序的示例輸出。 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

表

表格略微調整為樣式<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

日期和顏色輸入支持

請記住，並非所有瀏覽器（即 Safari）都完全支持日期輸入。

按鈕上的指針

role="button"重新啟動包括將默認光標更改為的增強功能pointer。將此屬性添加到元素以幫助指示元素是交互式的。這個角色對於元素來說不是必需的<button>，它們會發生自己的cursor變化。

非按鈕元素按鈕 
<span role="button" tabindex="0">Non-button element button</span>

雜項元素

地址

該<address>元素已更新以將瀏覽器默認設置font-style從重置italic為normal。line-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為與其他元素更一致的內容。

眾所周知的引用，包含在 blockquote 元素中。

源標題中著名的人

內聯元素

該<abbr>元素接收基本樣式，使其在段落文本中脫穎而出。

Nulla attr vitae elit libero，一個 pharetra augue。

概括

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

一些細節

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

更多細節

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

HTML5[hidden]屬性

HTML5 添加了一個名為 的新全局屬性[hidden]，默認樣式為display: none。借用PureCSS的一個想法，我們改進了這個默認值，[hidden] { display: none !important; }幫助防止它display被意外覆蓋。

<input type="text" hidden>
jQuery 不兼容

[hidden]$(...).hide()與 jQuery 的和$(...).show()方法不兼容。因此，我們目前並不特別贊同[hidden]其他管理display元素的技術。

要僅僅切換元素的可見性，這意味著它display沒有被修改並且元素仍然可以影響文檔的流程，請改用.invisible類。