Bootstrap V5.3 : Reboot 统一的基准样式中文翻译版

Reboot 是单个文件中特定于元素的 CSS 更改的集合，它启动了 Bootstrap，以提供一个优雅、一致且简单的基准来构建。

方法

Reboot 建立在 Normalize 的基础上，仅使用元素选择器提供许多具有有些固执己见的样式的 HTML 元素。其他样式仅通过类完成。例如，我们重新启动一些样式以获得更简单的基线，然后提供、、等。<table>.table.table-bordered

以下是我们在 Reboot 中选择要覆盖的内容的指南和原因：

更新一些浏览器默认值，以使用 s 而不是 s 来实现可缩放的组件间距。remem
避免。垂直边距可能会崩溃，从而产生意想不到的结果。但更重要的是，单一方向是一个更简单的心智模型。margin-topmargin
为了更轻松地跨设备大小缩放，块元素应使用 s 表示 s。remmargin
尽可能使用，将相关属性的声明保持在最低限度。fontinherit

CSS 变量

在 v5.2.0 中添加

在 v5.1.1 中，我们在所有 CSS 捆绑包（包括、和）中标准化了所需的 s，以包含 .这会将级别 CSS 变量添加到所有捆绑包中，无论该捆绑包中使用了多少个变量。最终，随着时间的推移，Bootstrap 5 将继续看到更多的 CSS 变量添加，以便提供更多的实时自定义，而无需始终重新编译 Sass。我们的方法是获取源 Sass 变量并将它们转换为 CSS 变量。这样，即使您不使用 CSS 变量，您仍然拥有 Sass 的所有功能。这仍在进行中，需要时间才能完全实施。@importbootstrap.cssbootstrap-reboot.cssbootstrap-grid.css_root.scss:root

例如，考虑以下常见样式的 CSS 变量：:root<body>

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*::afterborder-box
- 没有在上声明任何基数，而是假定的（浏览器默认值）。应用于，以便通过媒体查询轻松响应式类型缩放，同时尊重用户偏好并确保更易于访问的方法。可以通过修改变量来覆盖此浏览器默认值。font-size<html>16pxfont-size: 1rem<body>$font-size-root
还设置了一个全局、、和。这稍后会被某些表单元素继承，以防止字体不一致。<body>font-familyfont-weightline-heightcolor
为了安全起见，该声明的，默认为。<body>background-color#fff

原生字体堆栈

Bootstrap 利用“本机字体堆栈”或“系统字体堆栈”在每个设备和作系统上实现最佳文本渲染。这些系统字体是专门为当今的设备设计的，改进了屏幕上的渲染、可变字体支持等。在这篇 Smashing 杂志文章中阅读有关本机字体堆栈的更多信息。

$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 字符将呈现为多色象形文字。它们的外观会有所不同，具体取决于浏览器/平台的原生表情符号字体中使用的样式，并且它们不会受到任何 CSS 样式的影响。color

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

标题

所有标题元素——都已移除、设置和拧紧。虽然标题默认继承它们，但你也可以通过可选的 CSS 变量覆盖它。<h1><h6>margin-topmargin-bottom: .5remline-heightcolor--bs-heading-color

标题	例
`<h1></h1>`	h1.Bootstrap 标题
`<h2></h2>`	h2.Bootstrap 标题
`<h3></h3>`	h3.Bootstrap 标题
`<h4></h4>`	h4.Bootstrap 标题
`<h5></h5>`	h5.Bootstrap 标题
`<h6></h6>`	h6.Bootstrap 标题

段落

所有元素都已删除并设置，以便于间距。<p>margin-topmargin-bottom: 1rem

这是一个示例段落。

[HTML全文]

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

链接

链接应用了默认值和下划线。虽然链接会发生变化，但它们不会根据某人是否链接而改变。他们也没有收到任何特殊款式。color:hover:visited:focus

这是一个示例链接

[HTML全文]

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

从 v5.3.x 开始，链接是使用新的 CSS 变量设置的，允许轻松自定义链接颜色不透明度。使用 CSS 变量更改链接颜色不透明度：colorrgba()-rgb--bs-link-opacity

这是一个示例链接

[HTML全文]

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

占位符链接（没有的占位符链接）以更具体的选择器为目标，并将其和重置为默认值。hrefcolortext-decoration

这是一个占位符链接

[HTML全文]

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

水平规则

该元素已简化。与浏览器默认值类似，s 的样式为，具有默认值，并自动继承其 via ，包括通过父级设置的。可以使用文本、边框和不透明度实用程序对其进行修改。<hr><hr>border-topopacity: .25border-colorcolorcolor

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

列表

所有列表—, , 和 — 都已删除，并且 .嵌套列表没有 .我们还重置了 on 和 elements。<ul><ol><dl>margin-topmargin-bottom: 1remmargin-bottompadding-left<ul><ol>

所有列表的上边距都被删除
并且他们的底部边缘正常化
嵌套列表没有底边距
- 这样它们的外观更加均匀
- 特别是当后面跟着更多列表项时
左边距也已重置

这是一个有序列表
使用一些列表项
整体外观相同
与前面的无序列表

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

描述列表: 描述列表非常适合定义术语。
术语: 术语的定义。; 同一术语的第二个定义。
另一个术语: 另一个术语的定义。

内联代码

用包装内联代码片段。请务必转义 HTML 尖括号。<code>

例如，应该包装为内联。<section>

[HTML全文]

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

代码块

使用 s 表示多行代码。同样，请务必转义代码中的任何尖括号，以便正确呈现。该元素被重置以删除其并使用其单位。<pre><pre>margin-topremmargin-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>

变量

要指示变量，请使用 tag。<var>

y = mx + b

[HTML全文]

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

用户输入

使用指示通常通过键盘输入的输入。<kbd>

要切换目录，请键入，然后键入目录名称。
要编辑设置，请按cdCtrl + ,

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

表

表格略有调整以调整样式、折叠边框并确保整个过程的一致性。边框、填充等的其他更改随 .table 类一起提供。<caption>text-align

这是一个示例表，这是描述内容的标题。
表格标题	表格标题	表格标题	表格标题
表格单元格	表格单元格	表格单元格	表格单元格
表格单元格	表格单元格	表格单元格	表格单元格
表格单元格	表格单元格	表格单元格	表格单元格

[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>s 与 Fieldsets 一样，也已重新设计为显示为某种标题。
<label>s 设置为允许应用。display: inline-blockmargin
<input>s、s、s 和 s 主要由 Normalize 解决，但 Reboot 也删除了它们的和集。<select><textarea><button>marginline-height: inherit
<textarea>s 被修改为只能垂直调整大小，因为水平调整大小通常会“中断”页面布局。
<button>s 和 button 元素具有 when .<input>cursor: pointer:not(:disabled)

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

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

示例图例

输入示例

示例电子邮件

电话示例

示例网址

示例编号

示例搜索

示例范围

示例文件输入

示例选择

选中此复选框

选项一是这个和那个选项二是另一个东西，它也超长，以演示这些花哨的表单控件的包装。选项三被禁用

示例文本区域

示例日期

示例时间

示例密码

示例 datetime-local

示例周

示例月份

示例颜色

示例输出 100

按钮上的指针

重新引导包括将默认光标更改为的增强功能。将此属性添加到元素中，以帮助指示元素是交互式的。对于获得自己更改的元素来说，此角色不是必需的。role="button"pointer<button>cursor

非按钮元素按钮

[HTML全文]

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

其他元素

地址

该元素将更新以将浏览器默认值从重置为。现在也继承了，并且已经添加了。s 用于显示最近祖先（或整个作品）的联系信息。通过以结束行来保留格式。<address>font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

ACME Corporation
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

块报价

块引号的默认值是，因此我们将其重置为，以便与其他元素更一致。margin1em 40px0 0 1rem

众所周知的引用，包含在 blockquote 元素中。

来源标题中著名的人

内联元素

该元素获得基本样式，使其在段落文本中脱颖而出。<abbr>

HTML 缩写元素。

总结

summary 的默认值是，因此我们将其重置为，以传达可以通过单击元素与该元素进行交互。cursortextpointer

一些细节

有关详细信息的更多信息。

更多细节

以下是有关详细信息的更多详细信息。

HTML5 属性`[hidden]`

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

<input type="text" hidden>

由于与 jQuery 和方法不兼容，因此我们不特别认可其他管理元素的技术。[hidden]$(...).hide()$(...).show()[hidden]display

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

Bootstrap V5.3 中文手册

入门指南 Getting started

定制化 Customize

布局方式 Layout

内容样式 Content

表单控件 Forms

组件集合 Components

辅助工具 Helpers

工具类库 Utilities

功能扩展 Extend

关于Bootstrap

Reboot 统一的基准样式

方法

CSS 变量

页面默认值

原生字体堆栈

标题

段落

链接

水平规则

列表

内联代码

代码块

变量

用户输入

示例输出

表

形式

按钮上的指针

其他元素

地址

块报价

内联元素

总结

HTML5 属性`[hidden]`

Reboot 统一的基准样式

方法

CSS 变量

页面默认值

原生字体堆栈

标题

段落

链接

水平规则

列表

内联代码

代码块

变量

用户输入

示例输出

表

形式

按钮上的指针

其他元素

地址

块报价

内联元素

总结

HTML5 属性[hidden]

HTML5 属性`[hidden]`