重啟

Reboot 是單個文件中元素特定 CSS 更改的集合，kickstart Bootstrap 以提供優雅、一致和簡單的基線來構建。

在本頁面

方法

Reboot 建立在 Normalize 的基礎上，僅使用元素選擇器為許多 HTML 元素提供了一些自以為是的樣式。附加樣式僅通過類完成。例如，我們重新啟動一些<table>樣式以獲得更簡單的基線，然後提供.table、.table-bordered等。

以下是我們在重新啟動中選擇要覆蓋的內容的指南和原因：

更新一些瀏覽器默認值以使用rems 而不是ems 來實現可伸縮組件間距。
避免margin-top。垂直邊距可能會崩潰，從而產生意想不到的結果。更重要的是，一個單一的方向margin是一個更簡單的心智模型。
為了更輕鬆地跨設備大小縮放，塊元素應使用rems 代表margins。
font盡可能減少相關屬性的聲明，inherit盡可能使用。

CSS 變量

在 v5.1.1 中添加

在 v5.1.1 中，我們@import在所有 CSS 包（包括bootstrap.css、bootstrap-reboot.css和bootstrap-grid.cssto include ）中標準化了所需的 s _root.scss。這將:root級別 CSS 變量添加到所有包中，無論該包中使用了多少它們。最終，Bootstrap 5 將繼續查看隨著時間的推移添加的更多 CSS 變量。

頁面默認值

和元素已更新以提供更好的頁面範圍默認值<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。

CSS 變量

隨著 Bootstrap 5 的不斷成熟，越來越多的樣式將使用CSS 變量構建，以提供更多實時自定義，而無需總是重新編譯 Sass。我們的方法是獲取源 Sass 變量並將它們轉換為 CSS 變量。這樣，即使您不使用 CSS 變量，您仍然擁有 Sass 的所有功能。這仍在進行中，需要時間才能完全實施。

例如，考慮常見樣式的這些:rootCSS 變量：<body>

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

在實踐中，這些變量然後在重新啟動中應用，如下所示：

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

這使您可以根據需要進行實時自定義：

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

標題和段落

所有標題元素（例如，）<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>元素。

所有列表的上邊距都被刪除
他們的下邊距標準化
嵌套列表沒有下邊距
- 這樣它們的外觀更均勻
- 特別是當後面有更多列表項時
左側填充也已重置

這是一個有序列表
有幾個列表項
它具有相同的整體外觀
和之前的無序列表一樣

為了更簡單的樣式、清晰的層次結構和更好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>元素接收基本樣式，使其在段落文本中脫穎而出。

HTML縮寫元素。

概括

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類。

重啟

方法

CSS 變量

頁面默認值

本機字體堆棧

CSS 變量

標題和段落

列表

內聯代碼

代碼塊

變量

用戶輸入

樣本輸出

表

形式

日期和顏色輸入支持

按鈕上的指針

雜項元素

地址

塊引用

內聯元素

概括

HTML5[hidden]屬性

jQuery 不兼容

HTML5`[hidden]`屬性