重置样式（Reboot）

方法

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

以下是我们在 Reboot 中选择覆盖内容的指南和理由：

• 更新一些浏览器默认值以使用rem秒而不是em秒来进行可扩展组件间距。
• 避免使用margin-top。垂直外边距可能会合并，产生意想不到的结果。更重要的是，单方向的margin是一个更简单的思维模型。
• 为了更容易在不同设备尺寸下进行缩放，块级元素应使用rem进行margin。
• 将与font相关的属性声明保持在最低限度，并尽可能使用inherit。

根 CSS 变量

我们添加 :root 将 CSS 变量级别应用到所有 CSS 捆绑包，以提供实时自定义，而无需每次都重新编译 Sass。例如，考虑这些 :root 常用的 CSS 变量 <body> 样式：

--border-width: #{$border-width},
--border-width-keyline: .5px,
--border-style: #{$border-style},
--border-color: light-dark(var(--gray-200), var(--gray-700)),
--border-color-translucent: color-mix(in oklch, var(--fg-body) 15%, transparent),

在实践中，这些变量随后在 Reboot 中这样应用：

body {
  margin: 0; // 1
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--fg-body);
  text-align: var(--body-text-align);
  background-color: var(--bg-body); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: transparent; // 4
}

这允许你随心所欲地进行实时自定义：

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

页面默认值

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

• 这 box-sizing 在每个元素上全局设置——包括 *::before 和 *::after，到 border-box这确保了元素声明的宽度不会因内边距或边框而被超出。
  • 无基地 font-size 在…上声明 <html>，但是 16px 假设为（浏览器默认值）。 font-size: 1rem 应用于 <body> 通过媒体查询轻松实现响应式字体缩放，同时尊重用户偏好并确保更易于访问的方法。可以通过修改此浏览器默认设置来覆盖。 $font-size-root 变量。
• 这 <body> 还设置了一个全局 font-family, font-weight, line-height，和 color这随后被某些表单元素继承，以防止字体不一致。
• 为了安全， <body> 有一个声明 background-color，默认为 #fff.

本地字体堆栈

Bootstrap 使用“本地字体堆栈”或“系统字体堆栈”，以在每个设备和操作系统上实现最佳文本渲染。这些系统字体是专为现代设备设计的，在屏幕上具有改进的渲染效果，支持可变字体等等。阅读更多关于 本地字体堆栈的内容，请参见这篇 Smashing Magazine 文章。

堆栈以 Apple 设备的 -apple-system 和 BlinkMacSystemFont 开始，然后是 Windows 的 Segoe UI，Android 的 Roboto，以及 Linux 的 Noto Sans 或 Liberation Sans。Arial 和 sans-serif 是网页备用字体，四种表情符号字体位于列表末尾。

堆栈省略了 system-ui 关键字。在某些系统上，system-ui 解析为本地化的用户界面字体。该字体可能会用错误的字形显示非拉丁文本——详见 issue #42703。

// The stack omits system-ui. It resolves to the user interface font of the
// locale, which shows non-Latin text incorrectly. See twbs/bootstrap#42703.
--body-font-family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
--body-font-size: 1rem,
--body-font-weight: var(--font-weight-normal),
--body-line-height: 1.5,

请注意，因为字体堆栈包含表情符号字体，许多常见的符号/装饰字符 Unicode 字符将以多彩象形符号显示。它们的外观会有所不同，取决于浏览器/平台本地表情符号字体使用的样式，并且不会受到任何 CSS color 样式的影响。

这个 font-family 被应用于 <body> 并且会在整个 Bootstrap 中自动全局继承。要切换全局 font-family，请更新 --body-font-family。

标题

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

你也可以使用 .h1–.h6 类来为标题设置样式，而无需使用 HTML 元素。

段落

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

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

链接

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

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

使用 .link-{%} 工具类来更改链接颜色的不透明度。

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

使用主题工具类类来更改链接颜色。

<a href="#" class="theme-primary">Primary link</a>
<a href="#" class="theme-accent">Accent link</a>
<a href="#" class="theme-success">Success link</a>
<a href="#" class="theme-danger">Danger link</a>
<a href="#" class="theme-warning">Warning link</a>
<a href="#" class="theme-info">Info link</a>
<a href="#" class="theme-inverse">Inverse link</a>
<a href="#" class="theme-secondary">Secondary link</a>

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

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

水平线

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

<hr>

<div class="fg-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。我们也已重置了 padding-left 开 <ul> 和 <ol> 元素。

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

行内代码

用<code>包裹内联代码片段。确保对 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>

<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> 标签。

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

用户输入

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

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd>Ctrl</kbd> + <kbd>,</kbd>

示例输出

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

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

表格

表格略微调整为样式<caption>、合并边框，并确保整个表格text-align一致。关于边框、内边距等的额外更改，请参见.table 类。

<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>s 没有边框、内边距或外边距，因此它们可以轻松用作单个输入或输入组的容器。
• <legend>s，像字段集一样，也已被重新设计为以某种标题的形式显示。
• <label>被设置为 display: inline-block 允许 margin 适用。
• <input>s, <select>s, <textarea>s，以及 <button>大多数问题由 Normalize 处理，但 Reboot 会移除它们 margin 和集合 line-height: inherit，也一样。
• <textarea>s 被修改为仅可垂直调整大小，因为水平调整大小常常会“破坏”页面布局。
• <button>和 <input> 按钮元素有 cursor: pointer 什么时候 :not(:disabled).

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

按钮上的指针

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

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

杂项元素

地址

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

引用块

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

行内元素

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

摘要

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

HTML5 [hidden] 属性

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

          <input type="text" hidden>
        

仅仅切换元素的可见性，也就是说其display没有被修改，并且元素仍然可以影响文档的布局，请使用.invisible类。

iframe 颜色方案

<iframe> 元素已更新以设置 color-scheme: light dark。当嵌入的文档使用与 iframe 元素不同的配色方案时，浏览器会在 iframe 后面绘制一个不透明的 background: canvas。在暗色页面上，这会显示为白色方框。

嵌入的文档遵循系统偏好。它无法看到你的data-bs-theme属性。因此，我们也将每个iframe固定到系统偏好。这保持了嵌入的透明性，即使你使用data-bs-theme强制主题。

<div class="bg-body fg-body p-3" data-bs-theme="dark">
  <iframe class="w-100" style="color-scheme: unset" src="data:text/html,<!DOCTYPE html><html><meta name='color-scheme' content='light dark'><body style='background-color:transparent;color:gray;'><h4>Default iframe</h4></body></html>"></iframe>
  <iframe class="w-100" src="data:text/html,<!DOCTYPE html><html><meta name='color-scheme' content='light dark'><body style='background-color:transparent;color:gray;'><h4>iframe with color-scheme: light-dark</h4></body></html>"></iframe>
  <iframe class="w-100" src="data:text/html,<!DOCTYPE html><html><body style='background-color:transparent;color:gray;'><h4>Embed that declares no color scheme</h4></body></html>"></iframe>
</div>

前两个嵌入声明了<meta name="color-scheme" content="light dark">，因此它们遵循系统偏好并保持透明。第三个没有声明任何内容，就像大多数第三方嵌入一样。将系统设置为暗模式以查看浏览器在其背后绘制一个白色方框。我们的规则无法防止这种情况——请阅读下一节。

没有暗模式的第三方嵌入

一些第三方嵌入没有暗模式。支付按钮、评论小部件和评价小部件是常见的例子。当系统处于暗模式时，浏览器会在此类嵌入的后面绘制白色背景。这是浏览器的一个安全措施。它可以保持嵌入内容的亮色部分可读。Bootstrap 无法为你移除它。

将 .color-scheme-light 配色方案工具类 添加到那个 iframe。背景再次变为透明。

          <iframe class="color-scheme-light" src="..."></iframe>