Skip to main content Skip to docs navigation
在GitHub查看

初始化

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

在此页

方法

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

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

  • 更新一些浏览器默认值以使用rems 而不是ems 作为可缩放组件间距。
  • 避免margin-top。垂直边距可能会折叠，产生意想不到的结果。但更重要的是，单一方向margin是一种更简单的心智模型。
  • 为了更容易地跨设备尺寸缩放，块元素应该使用rems 代替margins。
  • 尽可能font少地使用 - 相关属性的声明。inherit

CSS 变量

添加于 v5.2.0

在 v5.1.1 中，我们@import将所有 CSS 包（包括bootstrap.css、bootstrap-reboot.css和bootstrap-grid.css）中的 required 标准化为包括_root.scss。这会将:rootlevel CSS 变量添加到所有包中，而不管该包中使用了多少变量。最终，Bootstrap 5 将继续看到随着时间的推移添加更多的CSS 变量，以提供更多的实时定制，而无需总是重新编译 Sass。我们的方法是获取我们的源 Sass 变量并将它们转换为 CSS 变量。这样，即使您不使用 CSS 变量，您仍然拥有 Sass 的所有功能。这仍在进行中，需要时间才能完全实施。

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

  @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};
  --#{$prefix}body-color: #{$body-color};

  --#{$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)};

  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};
  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

实际上，这些变量随后会像这样在 Reboot 中应用：

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和*::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文章中阅读有关本机字体堆栈的更多信息。

$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>并在整个 Bootstrap 中自动全局继承。要切换全局font-family，请更新$font-family-base并重新编译 Bootstrap。

标题

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

标题 例子
<h1></h1> h1。引导程序标题
<h2></h2> h2。引导程序标题
<h3></h3> h3。引导程序标题
<h4></h4> h4。引导程序标题
<h5></h5> h5。引导程序标题
<h6></h6> h6。引导程序标题

段落

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

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

这是一个示例链接
网页格式 
<a href="#" style="--bs-link-opacity: .5">This is an example link</a>

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

这是占位符链接
网页格式 
<a>This is a placeholder link</a>

横线

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

网页格式 
<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. 我们还重置了padding-lefton<ul>和<ol>元素。

  • 所有列表的上边距都被移除
  • 他们的底边距正常化
  • 嵌套列表没有底边距
    • 这样它们的外观更均匀
    • 特别是当后面有更多列表项时
  • 左侧填充也已重置
  1. 这是一个有序列表
  2. 有几个列表项
  3. 它具有相同的整体外观
  4. 如之前的无序列表

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

说明列表
描述列表非常适合定义术语。
学期
术语的定义。
同一术语的第二个定义。
另一个术语
这个其他术语的定义。

行内代码

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

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

代码块

将<pre>s 用于多行代码。再一次，一定要转义代码中的任何尖括号以正确呈现。该<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>标签。

y =米x +乙
网页格式 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

用户输入

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

要切换目录，cd请键入后跟目录名称。
要编辑设置，请按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>

示例输出

要指示程序的样本输出，请使用<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>s 设置为display: inline-block允许margin应用。
  • <input>s、<select>s、<textarea>s 和<button>s 主要由 Normalize 解决，但 Reboot 也会删除它们的marginand 集line-height: inherit。
  • <textarea>s 被修改为只能垂直调整大小，因为水平调整大小通常会“破坏”页面布局。
  • <button>s 和<input>button 元素有cursor: pointerwhen :not(:disabled)。

这些变化以及更多变化如下所示。

示例图例

100

日期和颜色输入支持

请记住，并非所有浏览器（即 Safari） 都完全支持日期输入。

按钮上的指针

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>s 用于显示最近祖先（或整个作品）的联系信息。通过以 . 结尾的行来保留格式<br>。

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103 电话
： (123) 456-7890
全名
first.last@example.com

块引用

marginblockquotes的默认值是1em 40px，因此我们将其重置0 0 1rem为与其他元素更一致的内容。

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

来源标题中的名人

行内元素

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

HTML缩写元素 。

概括

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

一些细节

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

更多细节

这里有更多关于细节的细节。

HTML5[hidden]属性

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

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

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

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