Reboot

Reboot 是单个文件中特定于元素的 CSS 更改的集合，kickstart Bootstrap 可提供优雅、一致且简单的构建基线。

在本页

方法

Reboot 建立在 Normalize 的基础上，仅使用元素选择器就可以提供许多带有一些固执己见的样式的 HTML 元素。附加样式仅通过类完成。例如，我们重新启动一些<table>样式以获得更简单的基线，然后提供.table、.table-bordered等。

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

更新一些浏览器默认值以使用rem 而不是em 作为可缩放组件间距。
避免margin-top。垂直边距可能会折叠，产生意想不到的结果。但更重要的是，单一方向margin是一种更简单的心智模型。
为了更容易地跨设备尺寸缩放，块元素应该使用rem代替margin。
尽可能少地使用 font- 相关属性的声明。尽可能用inherit

CSS 变量

添加于 v5.2.0

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

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

  @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};
  --#{$prefix}body-color: #{$body-color};

  --#{$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)};

  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};
  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

实际上，这些变量随后会像这样在 Reboot 中应用：

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为border-box，包括*::before和*::after。这确保元素的声明宽度不会因填充或边框而超过。
- <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,
  // 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;

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

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

标题

所有标题元素<h1>至<h6>都已移除margin-top，并设置margin-bottom: .5rem和line-height。虽然标题默认继承color，但您也可以通过可选的 CSS 变量覆盖它，--bs-heading-color.

标题	例子
`<h1></h1>`	h1。Bootstrap标题
`<h2></h2>`	h2。Bootstrap标题
`<h3></h3>`	h3。Bootstrap标题
`<h4></h4>`	h4。Bootstrap标题
`<h5></h5>`	h5。Bootstrap标题
`<h6></h6>`	h6。Bootstrap标题

段落

所有<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一起提供。

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> 主要由 Normalize 解决，但 Reboot 也会删除它们的margin和line-height: inherit。
<textarea> 被修改为只能垂直调整大小，因为水平调整大小通常会“破坏”页面布局。
<button> 和<input> button元素有cursor: pointer 当 :not(:disabled)。

这些变化以及更多变化如下所示。

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

日期和颜色输入支持

请记住，并非所有浏览器（即 Safari）都完全支持日期输入。

按钮上的指针

重新启动包括将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>。

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

Full Name
[email protected]

块引用

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>

jQuery 不兼容

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

要仅仅切换元素的可见性，这意味着它display没有被修改并且元素仍然可以影响文档的流，请改用.invisible类。

Reboot

方法

CSS 变量

页面默认值

本机字体堆栈

标题

段落

链接

横线

列表

行内代码

代码块

变量

用户输入

示例输出

表格

表单

日期和颜色输入支持

按钮上的指针

其他元素

地址

块引用

行内元素

概括

HTML5[hidden]属性

jQuery 不兼容

HTML5`[hidden]`属性