Skip to main content Skip to docs navigation
View on GitHub

Reboot重启动

Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.Reboot是单个文件中特定于元素的CSS更改的集合，kickstart Bootstrap提供了一个优雅、一致且简单的基线来构建。

On this page本页内容

Approach实现方法

Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Reboot建立在Normalize的基础上，它只使用元素选择器提供了许多带有某种固执己见风格的HTML元素。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.例如，我们重新启动一些<table>用于更简单基线和更高版本的样式提供了.table、.table-bordered等。

Here are our guidelines and reasons for choosing what to override in Reboot:以下是我们选择在重新启动时覆盖哪些内容的指导原则和理由：

  • Update some browser default values to use rems instead of ems for scalable component spacing.更新一些浏览器默认值，以使用rem而不是em实现可缩放的组件间距。
  • Avoid margin-top. 避免margin-top。Vertical margins can collapse, yielding unexpected results. 垂直边距可能会折叠，从而产生意外的结果。More importantly though, a single direction of margin is a simpler mental model.但更重要的是，单一方向的margin是一种更简单的思维模式。
  • For easier scaling across device sizes, block elements should use rems for margins.为便于跨设备大小进行缩放，块元素应使用rem作为margin。
  • Keep declarations of font-related properties to a minimum, using inherit whenever possible.尽可能使用inherit将font相关属性的声明减至最少。

Page defaults页面默认值

The <html> and <body> elements are updated to provide better page-wide defaults. <html>及<body>元素被更新以提供更好的页面范围默认值。More specifically:更具体地说：

  • The box-sizing is globally set on every element—including *::before and *::after, to border-box. box-sizing在每个元素（包括*::before和*::after）上全局设置为border-box。This ensures that the declared width of element is never exceeded due to padding or border.这确保了元素的声明宽度不会因填充或边框而超过。
    • No base font-size is declared on the <html>, but 16px is assumed (the browser default). 没有在<html>上声明基本font-size，但假定为16px（浏览器默认值）。font-size: 1rem is applied on the <body> for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. 应用于<body>通过媒体查询轻松响应类型扩展，同时尊重用户偏好并确保更易访问的方法。This browser default can be overridden by modifying the $font-size-root variable.可以通过修改$font-size-root变量来覆盖此浏览器默认值。
  • The <body> also sets a global font-family, font-weight, line-height, and color. <body>还可以设置全局font-family、font-weight、line-height和color。This is inherited later by some form elements to prevent font inconsistencies.稍后，某些表单元素会继承这一点，以防止字体不一致。
  • For safety, the <body> has a declared background-color, defaulting to #fff.为安全起见，<body>具有声明的background-color，默认为#fff。

Native font stack原生字体堆栈

Bootstrap utilizes a “native font stack” or “system font stack” for optimum text rendering on every device and OS. Bootstrap利用“本机字体堆栈”或“系统字体堆栈”在每个设备和操作系统上实现最佳文本呈现。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,
// 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;

Note that because the font stack includes emoji fonts, many common symbol/dingbat unicode characters will be rendered as multi-colored pictographs. 请注意，由于字体堆栈包括表情符号字体，许多常见的符号/unicode字符将呈现为多色象形文字。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.它们的外观会有所不同，这取决于浏览器/平台的原生表情字体中使用的样式，并且它们不会受到任何CSS颜色样式的影响。

This font-family is applied to the <body> and automatically inherited globally throughout Bootstrap. 此font-family应用于<body>并在整个Bootstrap过程中自动全局继承。To switch the global font-family, update $font-family-base and recompile Bootstrap.要切换全局font-family，请更新$font-family-base并重新编译Bootstrap。

CSS variablesCSS变量

As Bootstrap 5 continues to mature, more and more styles will be built with CSS variables as a means to provide more real-time customization without the need to always recompile Sass. 随着Bootstrap5的不断成熟，越来越多的样式将使用CSS变量构建，以提供更多的实时定制，而无需始终重新编译Sass。Our approach is to take our source Sass variables and transform them into CSS variables. 我们的方法是将源Sass变量转换为CSS变量。That way, even if you don’t use CSS variables, you still have all the power of Sass. 这样，即使您不使用CSS变量，您仍然拥有Sass的所有功能。This is still in-progress and will take time to fully implement.这项工作仍在进行中，需要时间才能充分实施。

For example, consider these :root CSS variables for common <body> styles:例如，考虑这些:root CSS变量的共同的<body>样式：

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

In practice, those variables are then applied in Reboot like so:实际上，这些变量会在重新启动中应用，如下所示：

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
}

Which allows you to make real-time customizations however you like:允许您根据自己的喜好进行实时定制：

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

Headings and paragraphs标题和段落

All heading elements—e.g., <h1>—and <p> are reset to have their margin-top removed. 所有标题元素，如<h1>-及<p>重新设置以删除其页边距顶部。Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.标题添加了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

Lists列表

All lists—<ul>, <ol>, and <dl>—have their margin-top removed and a margin-bottom: 1rem. 所有列表-<ul>、<ol>和<dl>-删除其margin-top并设置margin-bottom: 1rem。Nested lists have no margin-bottom. 嵌套列表没有margin-bottom。We’ve also reset the padding-left on <ul> and <ol> elements.我们还在<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左侧填充也已重置
  1. Here’s an ordered list这是一份有序的清单
  2. With a few list items有几个列表项
  3. It has the same overall look它有相同的整体外观
  4. As the previous unordered list与前面的无序列表相同

For simpler styling, clear hierarchy, and better spacing, description lists have updated margins. 为了更简单的样式、清晰的层次结构和更好的间距，描述列表具有更新的margin。<dd>s reset margin-left to 0 and add margin-bottom: .5rem. <dd>将margin-left重置为0，并添加margin-bottom: .5rem。<dt>s are bolded.<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>. 使用<code>包装内联代码片段。Be sure to escape HTML angle brackets.确保转义HTML尖括号。

For example, <section> should be wrapped as inline.例如，<section>应包装为内联。 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Code blocks代码块

Use <pre>s for multiple lines of code. 使用<pre>表示多行代码。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.这个<pre>元素被重置以移除其页margin-top，并使用rem单位作为其页边距底部。

<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.对于指示变量，请使用<var>标签。

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.使用<kbd>指示通常通过键盘输入的输入。

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.要指示程序的样本输出，请使用<samp>标签。

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. 表格根据样式稍微调整<caption>、 折叠边框，并确保整个text-align一致。Additional changes for borders, padding, and more come with the .table class..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

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.被设置为display: inline-block以允许应用margin。
  • <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.<input>、<select>、<textarea>以及<button>主要通过Normalize来解决，但重启动会删除它们的margin并设置line-height: inherit。
  • <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).<button>和<input>按钮元素在:not(:disabled)时具有cursor: pointer。

These changes, and more, are demonstrated below.这些变化以及更多的变化如下所示。

Example legend

100

Date & color input support日期和颜色输入支持

Keep in mind date inputs are not fully supported by all browsers, namely Safari.请记住，并非所有浏览器（即Safari）都完全支持日期输入。

Pointers on buttons按钮上的指针

Reboot includes an enhancement for role="button" to change the default cursor to pointer. 重新启动包括role="button"的增强功能，以将默认光标更改为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.此角色对于<button>元素不是必需的，它们自己的光标会发生变化。

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. <address>元素被更新，以将浏览器默认font-style从italic重置为normal。line-height is also now inherited, and margin-bottom: 1rem has been added. 现在还继承了line-height，并添加了margin-bottom: 1rem。<address>s are for presenting contact information for the nearest ancestor (or an entire body of work). <address>用于显示最近祖先（或整个作品）的联系信息。Preserve formatting by ending lines with <br>.通过以<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.<blockquote>上的默认margin是1em 40px，我们将它重置为0 0 1rem，从而与其它元素更相称。

A well-known quote, contained in a blockquote element.一个众所周知的引号，包含在blockquote元素中。

Someone famous in Source Title

Inline elements内联元素

The <abbr> element receives basic styling to make it stand out amongst paragraph text.这个<abbr>元素接受基本样式，使其在段落文本中脱颖而出。

Nulla attr vitae elit libero, a pharetra augue.

<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.<summary>上的默认光标是text，我们将它重置为pointer以传达元素可以通过点击来互动的蕴意。

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. HTML5添加了一个新的全局属性，名为[hidden]，它默认被样式化为display: none;。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.借用PureCSS的一个想法，我们通过使用[hidden] { display: none !important; }以防止其display被意外覆盖。

<input type="text" hidden>
jQuery incompatibilityjQuery不兼容

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. [hidden]与jQuery的$(...).hide()方法和$(...).show()方法不兼容。Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.因此，我们目前并不特别支持[hidden]管理元素display的其他技术。

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.若要仅切换元素的可见性，这意味着它的display不会被修改，并且该元素仍然会影响文档流，请改用.invisible类。