Skip to main content Skip to docs navigation

重启

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

目录

方法

🌐 Approach

Reboot 建立在 Normalize 的基础上，使用仅元素选择器为许多 HTML 元素提供一些有一定偏见的样式。额外的样式仅通过类来完成。例如，我们重置一些 <table> 样式以获得更简单的基线，随后提供 .table、.table-bordered 等更多样式。

🌐 Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <table> styles for a simpler baseline and later provide .table, .table-bordered, and more.

以下是我们选择在重新启动时覆盖哪些内容的指南和原因：

🌐 Here are our guidelines and reasons for choosing what to override in Reboot:

  • 更新一些浏览器默认值，以使用 rem 而不是 em 来实现可扩展的组件间距。
  • 避免 margin-top。垂直边距可能会塌陷，导致意外结果。不过，更重要的是，单向的 margin 是一个更简单的思维模型。
  • 为了更容易在不同设备尺寸上进行缩放，块级元素应该为margin使用rem。
  • 将与 font 相关的属性声明保持在最小范围内，并尽可能使用 inherit。

CSS 变量

🌐 CSS variables

Added in 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 的全部功能。这仍在进行中，并且需要时间来完全实现。

🌐 With v5.1.1, we standardized our required @imports across all our CSS bundles (including bootstrap.css, bootstrap-reboot.css, and bootstrap-grid.css) to include _root.scss. This adds :root level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more CSS variables added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don’t use CSS variables, you still have all the power of Sass. This is still in-progress and will take time to fully implement.

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

🌐 For example, consider these :root CSS variables for common <body> styles:

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

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

🌐 In practice, those variables are then applied in Reboot like so:

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
}

它允许你根据自己的喜好进行实时定制：

🌐 Which allows you to make real-time customizations however you like:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

页面默认值

🌐 Page defaults

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

🌐 The <html> and <body> elements are updated to provide better page-wide defaults. More specifically:

  • 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 文章。

🌐 Bootstrap utilizes a “native font stack” or “system font stack” for optimum text rendering on every device and OS. These system fonts have been designed specifically with today’s devices in mind, with improved rendering on screens, variable font support, and more. Read more about native font stacks in this Smashing Magazine article.

$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 样式的影响。

🌐 Note that because the font stack includes emoji fonts, many common symbol/dingbat Unicode characters will be rendered as multicolored pictographs. Their appearance will vary, depending on the style used in the browser/platform’s native emoji font, and they won’t be affected by any CSS color styles.

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

🌐 This font-family is applied to the <body> and automatically inherited globally throughout Bootstrap. To switch the global font-family, update $font-family-base and recompile Bootstrap.

标题

🌐 Headings

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

🌐 All heading elements—<h1>—<h6> have their margin-top removed, margin-bottom: .5rem set, and line-height tightened. While headings inherit their color by default, you can also override it via optional CSS variable, --bs-heading-color.

HeadingExample
<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

段落

🌐 Paragraphs

所有 <p> 元素都已移除它们的 margin-top 并设置了 margin-bottom: 1rem 以便于间距。

🌐 All <p> elements have their margin-top removed and margin-bottom: 1rem set for easy spacing.

This is an example paragraph.

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

链接

🌐 Links

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

🌐 Links have a default color and underline applied. While links change on :hover, they don’t change based on whether someone :visited the link. They also receive no special :focus styles.

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 变量更改链接颜色的不透明度：

🌐 As of v5.3.x, link color is set using rgba() and new -rgb CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the --bs-link-opacity CSS variable:

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

占位符链接——那些没有 href 的——会用更具体的选择器进行定位，并将它们的 color 和 text-decoration 重置为默认值。

🌐 Placeholder links—those without an href—are targeted with a more specific selector and have their color and text-decoration reset to their default values.

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

水平规则

🌐 Horizontal rules

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

🌐 The <hr> element has been simplified. Similar to browser defaults, <hr>s are styled via border-top, have a default opacity: .25, and automatically inherit their border-color via color, including when color is set via the parent. They can be modified with text, border, and opacity utilities.

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">

列表

🌐 Lists

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

🌐 All lists—<ul>, <ol>, and <dl>—have their margin-top removed and a margin-bottom: 1rem. Nested lists have no margin-bottom. We’ve also reset the padding-left on <ul> and <ol> elements.

  • 所有列表的顶部边距已被移除
  • 并且它们的底部边距已归一化
  • 嵌套列表没有底部边距
    • 这样它们看起来更均匀
    • 尤其是在后面跟着更多列表项时
  • 左侧内边距也已重置
  1. 这是一个有序列表
  2. 带有几个列表项
  3. 它看起来整体相同
  4. 作为之前的无序列表

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

🌐 For simpler styling, clear hierarchy, and better spacing, description lists have updated margins. <dd>s reset margin-left to 0 and add margin-bottom: .5rem. <dt>s are bolded.

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

用 <code> 封装内联代码片段。确保转义 HTML 尖括号。

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

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

代码块

🌐 Code blocks

使用 <pre> 来表示多行代码。再次确保对代码中的任何尖括号进行转义，以便正确渲染。<pre> 元素被重置以移除其 margin-top 并使用 rem 单位设置其 margin-bottom。

🌐 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>
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>

变量

🌐 Variables

用于指示变量，请使用 <var> 标签。

🌐 For indicating variables use the <var> tag.

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

用户输入

🌐 User input

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

🌐 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 + ,
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>

样本输出

🌐 Sample output

要表示程序的示例输出，请使用 <samp> 标签。

🌐 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.
html 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

表格

🌐 Tables

表格略微调整为样式 <caption>，折叠边框，并确保整个 text-align 的一致性。边框、填充等其他变更请参见 the .table class。

🌐 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>

表单

🌐 Forms

各种表单元素已经重新设计，以实现更简单的基础样式。以下是一些最显著的变化：

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

  • <fieldset>没有边框、内边距或外边距，因此它们可以很容易地用作单个输入或输入组的封装器。
  • <legend>，像字段集一样，也已被重新设计为以某种标题的形式显示。
  • <label> 被设置为 display: inline-block 以允许应用 margin。
  • <input>s、<select>s、<textarea>s 和 <button>s 大多由 Normalize 处理，但 Reboot 会移除它们的 margin 并设置 line-height: inherit。
  • <textarea>被修改为只能垂直调整大小，因为水平调整大小经常会“破坏”页面布局。
  • <button>和<input>按钮元素在:not(:disabled)时具有cursor: pointer。

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

🌐 These changes, and more, are demonstrated below.

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

Example legend

100

按钮上的指针

🌐 Pointers on buttons

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

🌐 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
html 
<span role="button" tabindex="0">Non-button element button</span>

杂项元素

🌐 Misc elements

地址

🌐 Address

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

🌐 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>.

ACME Corporation
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

块引用

🌐 Blockquote

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

🌐 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

<abbr> 元素接受基本样式，以使其在段落文本中突出。

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

The HTML abbreviation element.

概括

🌐 Summary

摘要上的默认 cursor 是 text，所以我们将其重置为 pointer，以表示该元素可以通过点击进行交互。

🌐 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] 属性

🌐 HTML5 [hidden] attribute

HTML5 添加了一个名为 [hidden] 的新全局属性（链接），默认情况下其样式为 display: none。借鉴 PureCSS 的一个想法，我们改进了这个默认值，使 [hidden] { display: none !important; } 帮助防止其 display 被意外覆盖。

🌐 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>

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

如果只是切换元素的可见性，也就是说其 display 未被修改且元素仍然可以影响文档的布局，请使用 the .invisible class 。

🌐 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.