Skip to main content Skip to docs navigation
View on GitHub

重置（Reboot）

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

On this page

方法

Reboot 建立在 Normalize 的基础上，只使用元素选择器就能为许多 HTML 元素提供某种特定的样式。其他样式只通过类来实现。例如，我们重置了一些 <table> 样式，使基线更简单，随后又提供了 .table、.table-bordered 等样式。

以下是我们选择覆盖 Reboot 中哪些内容的指导原则和原因：

  • 更新某些浏览器的默认值，使用 rems 代替 ems 以实现可扩展的组件间距。
  • 避免使用 margin-top。垂直边距可能会折叠，从而产生意想不到的结果。但更重要的是，单一方向的 margin 是一种更简单的心理模型。
  • 为便于在不同尺寸的设备上缩放，块元素应使用 rems 代替 margins。
  • 尽量少声明与字体相关的属性，尽可能使用 inherit。

CSS 变量

Added in v5.2.0

在 v5.1.1 中，我们对所有 CSS 捆绑包（包括 bootstrap.css、bootstrap-reboot.css 和 bootstrap-grid.css）中所需的 @import进行了标准化，以包含 _root.scss。这将在所有捆绑包中添加 :root 级别的 CSS 变量，无论该捆绑包中使用了多少个 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)};

实际上，这些变量在重置中的应用是这样的：

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> 元素，以提供更好的全页面默认值。更具体地说：

  • 每个元素（包括 *::before 和 *::after）的 box-sizing 全局设置为 border-box。这样可以确保元素的声明宽度不会因为 padding 或 border 而超出。
    • 在 <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:
  // 跨平台通用字体系列（默认用户界面字体）
  system-ui,
  // 适用于 macOS 和 iOS 的 Safari 浏览器（旧金山）
  -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,
  // 表情符号字体
  "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 来覆盖它。

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

段落

所有 <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。

  • 删除所有列表的上边距
  • 下边距正常化
  • 嵌套列表没有下边距
    • 这样它们看起来更均匀
    • 特别是当后面有更多列表项时
  • 左侧填充也已重置
  1. 下面是一个有序列表
  2. 有几个列表项
  3. 整体外观相同
  4. 与之前的无序列表相同

为了更简单的样式、清晰的层次结构和更好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>没没有borders、padding或margin以便包覆独立的input或input群组。
  • <legend>如同fieldset，已被重新定义样式用来显示分类的标题。
  • <label>被设定为display: inline-block以便让margin可以应用。
  • <input>s, <select>s, <textarea>s, and <button>s 主要由Normalize处理，不过Reboot移除了它们的margin并设定line-height: inherit。
  • <textarea>修改为仅可调整垂直尺寸，因为水平调整大小通常会“破坏”页面布局。
  • 当<button>和<input>按钮元素状态为： not（:disabled），会呈现 cursor: pointer。

下面将展示这些变化以及更多变化。

Some date inputs types are not fully supported by the latest versions of Safari and Firefox.
Example legend

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.

内容摘要

摘要的默认cursor是 text，因此我们将其重置为 pointer，以传达点击该元素即可与之交互的信息。

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 [hidden] 属性

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.

HTML5 添加了一个名为[hidden]的新全局属性，其默认样式为display: none。借鉴 PureCSS 的想法，我们改进了这一默认设置，改为 [hidden] { display: none !important; } 以防止其 display 被意外覆盖。

<input type="text" hidden>
由于[hidden]与jQuery的$(...).hide()和$(...).show()方法不兼容，与其他管理元素 display 的技术相比，我们并不特别赞同[hidden]。

如果只想切换元素的可见性，即不修改元素的 “显示”，元素仍可影响文档流程，请使用.invisible 类。