重启

Reboot 是一个单文件中收集的特定元素 CSS 更改，它启动了 Bootstrap，提供了一个优雅、一致且简单的基础供构建。

在此页面上

方法

Reboot 建立在 Normalize 的基础上，使用仅限元素选择器的有点主观的样式为许多 HTML 元素提供样式。其他样式仅使用类来完成。例如，我们重新启动了一些 <table> 样式以获得更简单的基线，然后提供 .table、.table-bordered 等。

以下是我们在 Reboot 中选择覆盖内容的准则和原因

更新某些浏览器默认值，使用 rem 而不是 em 来实现可扩展组件间距。
避免使用 margin-top。垂直边距可能会折叠，产生意外结果。但更重要的是，单向 margin 是一个更简单的思维模型。
为了更轻松地在不同设备尺寸上进行缩放，块元素应使用 rem 作为 margin。
尽可能使用 inherit 将 font 相关属性的声明保持在最低限度。

CSS 变量

在 v5.2.0 中添加

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

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

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)};

在实践中，这些变量随后在 Reboot 中应用如下

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。

本机字体堆栈

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 字符将被渲染为多色象形图。它们的外观将根据浏览器/平台的本机表情符号字体中使用的样式而有所不同，并且不会受到任何 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 覆盖它。

标题	示例
`<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 以便于间距。

这是一个示例段落。

html

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

链接

链接应用了默认的 color 和下划线。虽然链接在 :hover 时会发生变化，但它们不会根据某人是否 :visited 链接而改变。它们也不会接收任何特殊的 :focus 样式。

这是一个示例链接

html

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

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

这是一个示例链接

html

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

占位符链接（那些没有 href 的链接）被更具体的选取器定位，并且它们的 color 和 text-decoration 重置为其默认值。

这是一个占位符链接

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。

所有列表都删除了其顶部边距
并且它们的底部边距已标准化
嵌套列表没有底部边距
- 这样它们的外观更加均匀
- 尤其是在后面还有更多列表项时
左填充也已重置

这是一个有序列表
包含一些列表项
它具有相同的整体外观
作为之前的无序列表

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

描述列表: 描述列表非常适合定义术语。
术语: 术语的定义。; 同一术语的第二个定义。
另一个术语: 此另一个术语的定义。

内联代码

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

例如，<section> 应作为内联代码包装。

html

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

代码块

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

<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> 表示通常通过键盘输入的内容。

要切换目录，请键入 cd，后跟目录名称。
要编辑设置，请按 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> 标记表示程序的示例输出。

此文本应视为计算机程序的示例输出。

html

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

表格

表格略微调整以设置 <caption> 的样式、折叠边框并确保始终如一的 text-align。有关边框、填充等的其他更改，请参阅 .table 类。

这是一个示例表格，这是其标题，用于描述内容。
表格标题	表格标题	表格标题	表格标题
表格单元格	表格单元格	表格单元格	表格单元格
表格单元格	表格单元格	表格单元格	表格单元格
表格单元格	表格单元格	表格单元格	表格单元格

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> 与 fieldset 一样，也已重新设置样式，以显示为一种标题。
<label> 设置为 display: inline-block，以便应用 margin。
<input>、<select>、<textarea> 和 <button> 主要由 Normalize 处理，但 Reboot 会移除其 margin，并设置 line-height: inherit。
<textarea> 已修改为仅可垂直调整大小，因为水平调整大小通常会“破坏”页面布局。
当 :not(:disabled) 时，<button> 和 <input> 按钮元素具有 cursor: pointer。

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

某些日期输入类型不受最新版本的 Safari 和 Firefox 完全支持。

示例图例

示例输入

示例电子邮件

示例电话

示例网址

示例数字

示例搜索

示例范围

示例文件输入

示例选择

选中此复选框

选项一是这个和那个选项二是其他一些东西，也很长，用来演示这些花哨的表单控件的换行。选项三已禁用

示例文本区域

示例日期

示例时间

示例密码

示例日期时间本地

示例周

示例月

示例颜色

示例输出 100

按钮指针

Reboot 包含对 role="button" 的增强，以将默认光标更改为 pointer。将此属性添加到元素中，以帮助指示元素是交互式的。对于 <button> 元素来说，此角色不是必需的，因为它们会获得自己的 cursor 更改。

非按钮元素按钮

html

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

杂项元素

地址

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

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

全名
[email protected]

引用块

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

一个众所周知的引用，包含在引用块元素中。

某位名人，在来源标题中

内联元素

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

HTML 缩写元素。

摘要

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

一些详细信息

有关详细信息的更多信息。

更多详细信息

以下是有关详细信息的更多详细信息。

HTML5 `[hidden]` 属性

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

<input type="text" hidden>

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

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

重启

方法

CSS 变量

页面默认值

本机字体堆栈

标题

段落

链接

水平线

列表

内联代码

代码块

变量

用户输入

示例输出

表格

表单

按钮指针

杂项元素

地址

引用块

内联元素

摘要

HTML5 [hidden] 属性

HTML5 `[hidden]` 属性