重新启动（Reboot）

Reboot是单个文件中特定于元素的CSS更改的集合，启动Bootstrap以提供一个优雅，一致和简单的基线来构建。

当前页

方法

重新启动建立在规范化的基础上，仅使用元素选择器为许多具有某种固执己见样式的 HTML 元素提供了。其他样式仅对类完成。例如，我们重新启动一些<table>样式以获得更简单的基线，然后提供.table、.table-bordered等。

以下是我们在重新启动中选择要覆盖的内容的准则和原因：

更新某些浏览器默认值，以使用rem而不是em来扩展组件间距。
避免margin-top。垂直边距可能会崩溃，从而产生意想不到的结果。更重要的是，margin 的单一方向是一种更简单的模型。
为了更轻松地跨设备大小进行缩放，块元素应使用 rem表示margin。
将font相关属性的声明保持在最低限度，并尽可能使用inherit。

CSS 变量

Added in v5.2.0

在 v5.1.1 中，我们在所有 CSS bundle（包括 bootstrap.css、bootstrap-reboot.css 和 bootstrap-grid.css）中标准化了所需的@import，以包含 _root.scss。这会将:root级别的 CSS 变量添加到所有捆绑包中，无论该捆绑包中使用了多少个。最终，随着时间的推移，Bootstrap 5 将继续看到添加更多的 CSS 变量，以便提供更多的实时自定义，而无需总是重新编译 Sass。我们的方法是获取源 Sass 变量并将它们转换为 CSS 变量。这样，即使你不使用CSS变量，你仍然拥有Sass的所有功能。这仍在进行中，需要时间才能完全实施。

例如，考虑这些用于常见<body>样式的:rootCSS变量：

scss/_root.scss

@if $font-size-root != null {
  --#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{inspect($font-family-base)};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
@if $body-text-align != null {
  --#{$prefix}body-text-align: #{$body-text-align};
}

--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};

--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};

--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};

实际上，这些变量随后在重新启动中应用，如下所示：

scss/_reboot.scss

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

页面默认值

<html>和<body>元素已更新，以提供更好的页面范围默认值。更具体地说：

box-sizing在每个元素上全局设置，包括 *::before和*::after，到border-box。这可确保永远不会因填充或边框而超过元素的声明宽度。
- 在<html>上没有声明基本的font-size，但假定为16px（浏览器默认值）。 font-size: 1rem应用于<body>，以便通过媒体查询轻松响应式字体缩放，同时尊重用户偏好并确保更易于访问的方法。可以通过修改 $font-size-root变量来覆盖此浏览器默认值。
<body>还设置了全局font-family、font-weight、line-height和 color。稍后由某些表单元素继承，以防止字体不一致。
为了安全起见， <body>具有声明的background-color，默认为 #fff。

原生字体堆栈（Native font stack）

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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

请注意，由于字体堆栈包含表情符号字体，因此许多常见的符号/丁巴特 Unicode 字符将呈现为彩色象形文字。它们的外观会有所不同，具体取决于浏览器/平台的原生表情符号字体中使用的样式，并且它们不会受到任何 CSS color样式的影响。

这个font-family应用于<body>，并在整个Bootstrap过程中自动全局继承。要切换全局font-family，请更新$font-family-base并重新编译 Bootstrap。

标题

所有标题元素（<h1>—<h6>）都删除了margin-top，设置了margin-bottom: .5rem，收紧了line-height。虽然标题默认继承其color ，但您也可以通过可选的 CSS 变量 --bs-heading-color覆盖它。

Heading	示例
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

段落

所有<p>元素都删除了其margin-top，并设置了margin-bottom: 1rem，以便于间距。

This is an example paragraph.

html

<p>This is an example paragraph.</p>

链接

链接应用了默认的 color和下划线。虽然链接在 :hover上更改，但它们不会根据某人是否:visited链接而更改。它们也没有特殊的:focus样式。

This is an example link

html

<a href="#">This is an example link</a>

从 v5.3.x 开始，链接 color是使用 rgba() 和新的 -rgb CSS 变量设置的，允许轻松自定义链接颜色不透明度。使用--bs-link-opacity CSS 变量更改链接颜色不透明度：

This is an example link

html

<a href="#" style="--bs-link-opacity: .5">This is an example link</a>

占位符链接（没有href的链接）使用更具体的选择器进行定位，并将其color和text-decoration重置为其默认值。

This is a placeholder link

html

<a>This is a placeholder link</a>

水平线

<hr>元素已简化。与浏览器默认值类似， <hr>的样式通过 border-top设置，具有默认的opacity: .25，并通过color自动继承其 border-color，包括通过父级设置color时。可以使用文本、边框和不透明度实用程序修改它们。

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

列表

所有列表（<ul>、<ol>和<dl>）的margin-top和 margin-bottom: 1rem都被删除。嵌套列表没有margin-bottom。我们还重置了<ul>和<ol>元素上的padding-left。

All lists have their top margin removed
And their bottom margin normalized
Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
The left padding has also been reset

Here’s an ordered list
With a few list items
It has the same overall look
As the previous unordered list

为了更简单的样式、清晰的层次结构和更好的间距，列表更新了 margin。 <dd>将 margin-left重置为0并添加margin-bottom: .5rem。 <dt>设置为粗体。

Description lists: A description list is perfect for defining terms.
Term: Definition for the term.; A second definition for the same term.
Another term: Definition for this other term.

内联代码

用<code>包装内联代码片段。请务必转义 HTML 尖括号。

For example, <section> should be wrapped as inline.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

代码块

对多行代码使用 <pre>。同样，请务必转义代码中的任何尖括号以正确呈现。重置 <pre> 元素以删除其margin-top并使用rem单位作为其margin-bottom。

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

html

<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 = mx + b

html

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

用户输入

使用<kbd>表示通常通过键盘输入的输入。

To switch directories, type cd followed by the name of the directory.
To edit settings, press Ctrl + ,

html

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>标记。

This text is meant to be treated as sample output from a computer program.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

表格

表格略微调整为<caption> ，折叠边框样式，并确保始终一致的text-align。两外，边框、填充等更改跟随 .table 类一起提供。 Tables are slightly adjusted to style <caption>s, collapse borders, and ensure consistent text-align throughout. Additional changes for borders, padding, and more come with the .table class.

This is an example table, and this is its caption to describe the contents.
Table heading	Table heading	Table heading	Table heading
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

表单

各种表单元素已重新启动，以获得更简单的基本样式。以下是一些最值得注意的变化：

<fieldset>没有边框、填充或边距，因此可以轻松地将它们用作单个输入或输入组的包装器。
<legend>与字段集一样，也已重新设置样式以显示为各种标题。
<label>设置为display: inline-block以允许应用margin。
<input>、<select>、 <textarea>和<button>主要由规范化解决，但重新启动会删除它们的margin并设置line-height: inherit。
<textarea>被修改为只能垂直调整大小，因为水平调整大小通常会“破坏”页面布局。
<button> 和 <input>按钮元素在:not(:disabled)时具有cursor: pointer。

下面演示了这些更改以及更多更改。

某些日期输入类型[不完全支持]（https://caniuse.com/input-datetime）被最新版本的Safari和Firefox提供。

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

按钮上的指针

重新启动包括对role="button"的增强功能，可将默认光标更改为pointer。将此属性添加到元素以帮助指示元素是交互式的。对于<button>元素，此角色不是必需的，这些元素会获得自己的cursor更改。

Non-button element button

html

<span role="button" tabindex="0">Non-button element button</span>

杂项元素

地址

更新了<address>元素，将浏览器默认的font-style从italic重置为 normal。line-height现在也被继承，并且添加了margin-bottom: 1rem。 <address>用于呈现最近父类（或整个作品）的联系信息。通过以<br>结尾行来保留格式。

ACME Corporation
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

块引用（blockquotes）

块引用的默认margin是1em 40px，因此我们将其重置为0 0 1rem，以便与其他元素更一致。

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

内联元素

<abbr> 元素接收基本样式，使其在段落文本中脱颖而出。

The HTML abbreviation element.

总结（Summary）

摘要上的默认 cursor是 text，因此我们将其重置为pointer，以传达可以通过单击元素与之交互。

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 `[hidden]` 属性

HTML5 添加了一个名为 [hidden] 的新全局属性，默认情况下其样式为display: none。借用 PureCSS的一个想法，我们通过使 [hidden] { display: none !important; } ，以帮助防止其display被意外覆盖。

<input type="text" hidden>

由于 [hidden] 与jQuery的$(...).hide() 和 $(...).show()方法不兼容，我们并不特别认可[hidden]而不是其他用于管理display元素的技术。

要仅切换元素的可见性，这意味着其 display不会被修改并且该元素仍然可以影响文档的流程，请使用.invisible。

重新启动（Reboot）

方法

CSS 变量

页面默认值

原生字体堆栈（Native font stack）

标题

段落

链接

水平线

列表

内联代码

代码块

变量

用户输入

示例输出

表格

表单

按钮上的指针

杂项元素

地址

块引用（blockquotes）

内联元素

总结（Summary）

HTML5 [hidden] 属性

HTML5 `[hidden]` 属性