Skip to main content Skip to docs navigation
View on GitHub

Reboot

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

On this page

方法

Reboot建立在Normalize的基础上，只使用元素选择器为许多HTML元素提供了一些推荐的样式。 附加样式仅通过类完成。 例如，我们重新启动一些＜table＞样式以获得更简单的基线，然后提供.table、.table-bordered等。

以下是我们在重新启动中选择覆盖内容的指导原则和原因：

  • 更新一些浏览器默认值以使用rem而不是em来实现可缩放的组件间距。
  • 避免使用margin-top。垂直边距可能会塌陷，从而产生意想不到的结果。更重要的是，margin的单一方向是一个更简单的心理模型。
  • 为了更容易在设备大小之间进行缩放，块元素应使用rem表示margin。
  • 尽量减少与font``-related的属性的声明，尽可能使用inherit`。

CSS变量

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的所有功能。 ** 这项工作仍在进行中，需要时间才能全面实施。 **

例如，考虑常见＜body＞样式的：rootCSS变量：

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和*::afte，到border-box。 这样可以确保元素的声明宽度永远不会因padding 或 border 而超过。
    • <html>上没有声明基本的font-size，而是假定为16px(浏览器默认值)。 font-size:1rem应用于<body>，通过媒体查询轻松响应类型扩展，同时尊重用户偏好并确保更易于访问的方法。 可以通过修改$font-size-root变量来覆盖此浏览器默认值。 <body>还设置全局font-family、font-weight、line-height和color。 这稍后会被一些表单元素继承，以防止字体不一致。
  • 为了安全起见，＜body＞具有声明的背景色，默认为#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＞，并在整个引导过程中自动全局继承。要切换全局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()和新的-rgbCSS变量设置的，从而可以轻松自定义链接颜色的不透明度。 使用--bs-link-opacityCSS变量更改链接颜色不透明度：

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

为了更简单的样式、清晰的层次结构和更好的间距，描述列表更新了margin。 <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.

内联代码

用＜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>被修改为只能垂直调整大小，因为水平调整大小通常会“breaks”页面布局。
  • ＜button＞和＜input＞按钮元素在:not(:disabled)时具有cursor:pointer。

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

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

100

按钮上的指针

重新启动包括role=button``的增强功能，可将默认光标更改为pointer。 将此属性添加到元素以帮助指示元素是交互式的。 对于＜button＞元素来说，此role不是必需的，因为它们会更改自己的cursor。

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

其他元素

住址

更改＜address＞元素以将浏览器默认的font-style从italic重置为normal。 line-heigh现在也被继承，并添加了margin-bottom:1rem。 ＜address＞用于提供最近父元素（或整个作品）的联系信息。 通过以<br>结束行来保留格式。

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

块引用

块引号上的默认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

summary上的默认cursor是text，因此我们将其重置为cursor，以表示可以通过单击元素与之交互。

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5[hidden]属性

HTML5添加了[名为[hidden]]的新全局属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)，默认情况下其样式为display:none。 参考PureCSS的一个想法，我们对该默认值进行了改进，将[hidden] { display: none !important; } 设置为有助于防止其display被意外覆盖。

<input type="text" hidden>
Since [hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods, we don’t specifically endorse [hidden] over other techniques for managing the display of elements.

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