重置(Reboot)

重置(Reboot) 是在单个文件中将元素的特定 CSS 更改，使 Bootstrap 为我们提供优雅、一致和简单的基线。

内容提要

方法

Reboot 建立在 Normalize 的基础上，仅使用元素选择器为许多 HTML 元素提供了一些自用的样式。附加样式仅通过类完成。例如，我们重置一些 <table> 样式以获得更简单的基线，在此基础上提供 .table、.table-bordered 等样式。

以下是我们在重置中选择要覆盖的内容的指南和原因：

更新一些浏览器默认值以使用 rem 而不是 em 来实现可伸缩组件。
避免 margin-top。垂直边距可能会合并，从而产生意想不到的结果。
为了更轻松地跨设备进行大小缩放，块元素的 margin 应使用 rem 。
尽量减少 font 相关属性的声明，尽可能使用 inherit。

CSS 变量

在 v5.1.1 中添加

在 v5.1.1 中，我们需要在所有的 CSS 包(包括 bootstrap.css, bootstrap-reboot.css, 和 bootstrap-grid.css)需要使用 @import 引入 _root.scss 。这会将 :root 级别的 CSS 变量添加到所有包中，而不管该包中使用了多少。最终，随着时间的推移，Bootstrap 5 将继续添加更多的 CSS 变量。

页面默认值

<html> 和 <body> 元素已更新，以提供更好的页面范围默认值。进一步来说：

全局将每个元素——包括 *::before 和 *::after 的 box-sizing 设置为 border-box 。这确保了元素的实际宽度永远不会由于padding或margin而超过声明宽度。
- <html> 上没有声明基本 font-size，但假定为 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 字符将呈现为多色象形文字。它们的外观会有所不同，具体取决于浏览器/平台的原生表情符号字体中使用的样式，并且它们不会受到任何 CSS color 样式的影响。

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

CSS 变量

随着 Bootstrap 5 的不断成熟，越来越多的样式将使用 CSS 变量作为提供更多实时自定义的手段，而无需总是需要重新编译 Sass。我们的方法是获取源 Sass 变量并将它们转换为 CSS 变量。这样，即使你不使用 CSS 变量，你仍然拥有 Sass 的所有能力。 这仍在进行中，需要时间才能完全实施。

例如，考虑常见 <body> 样式的这些 :root CSS 变量：

  @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 以便于保持间距。

Heading	Example
`<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

列表

所有列表——<ul>、<ol> 和 <dl>——它们的 margin-top 都被移除，并且设置了 margin-bottom: 1rem。嵌套列表没有 margin-bottom。我们还重置了 <ul> 和 <ol> 元素上的 padding-left。

所有列表的上边距都被删除
他们的下边距标准化
嵌套列表没有下边距
- 这样它们的外观更均匀
- 特别是当后面还有其它列表项时
左侧内边距也已重置

这是一个有序列表
有几个列表项
它具有相同的整体外观
和之前的无序列表一样

为了更简单的样式、清晰的层次结构和更好的间距，描述列表(dl)更新了 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.

Inline code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

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

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

Code blocks

Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The <pre> element is reset to remove its margin-top and use rem units for its 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>

Variables

For indicating variables use the <var> tag.

y = mx + b

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

User input

Use the <kbd> to indicate input that is typically entered via keyboard.

To switch directories, type cd followed by the name of the directory.
To edit settings, press 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>

Sample output

For indicating sample output from a program use the <samp> tag.

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

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

Tables

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

Forms

Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:

<fieldset>s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
<legend>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
<label>s are set to display: inline-block to allow margin to be applied.
<input>s, <select>s, <textarea>s, and <button>s are mostly addressed by Normalize, but Reboot removes their margin and sets line-height: inherit, too.
<textarea>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.
<button>s and <input> button elements have cursor: pointer when :not(:disabled).

These changes, and more, are demonstrated below.

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

Date & color input support

Keep in mind date inputs are not fully supported by all browsers, namely Safari.

Pointers on buttons

Reboot includes an enhancement for role="button" to change the default cursor to pointer. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <button> elements, which get their own cursor change.

Non-button element button

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

Misc elements

Address

The <address> element is updated to reset the browser default font-style from italic to normal. line-height is also now inherited, and margin-bottom: 1rem has been added. <address>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

Blockquote

The default margin on blockquotes is 1em 40px, so we reset that to 0 0 1rem for something more consistent with other elements.

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

Someone famous in Source Title

Inline elements

The <abbr> element receives basic styling to make it stand out amongst paragraph text.

The HTML abbreviation element.

Summary

The default cursor on summary is text, so we reset that to pointer to convey that the element can be interacted with by clicking on it.

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 `[hidden]` attribute

HTML5 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden.

<input type="text" hidden>

jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.

重置(Reboot)

方法

CSS 变量

页面默认值

本机字体堆栈

CSS 变量

标题和段落

列表

Inline code

Code blocks

Variables

User input

Sample output

Tables

Forms

Date & color input support

Pointers on buttons

Misc elements

Address

Blockquote

Inline elements

Summary

HTML5 [hidden] attribute

jQuery incompatibility

HTML5 `[hidden]` attribute