跳到主题内容 跳到文档导航栏

重置（Reboot）

重置（Reboot），是单个文件中特定于元素的CSS更改的集合，kickstart Bootstrap提供了一个优雅、一致和简单的基线来构建。

在本页面

方法

Reboot建立在Normalize的基础上， 仅使用元素选择器即可为许多HTML元素提供一些固定风格的样式。 附加样式只在类中完成。例如，我们reboot一些 <table>样式以获得更简单的基线，然后提供.table, .table-bordered等等。

以下是我们选择在Reboot时覆盖哪些内容的指导原则和理由：

  • 更新一些浏览器默认值以使用rem而不是em来实现可伸缩的组件间距。
  • 避免 margin-top空白。垂直边距可能会折叠，产生意外的结果。但更重要的是，单一方向的margin是一个更简单的心理模型。
  • 为便于跨设备大小进行缩放，块元素应使用rem作为margin。
  • 尽量减少font相关属性的声明，尽可能使用 inherit 。

页面默认值

在<html> 和 <body>更新元素，以提供更好的页面宽度的默认值。更具体地说：

  • 在全局的每个元素上设置 box-sizing，包括 *::before 和 *::after, 到 border-box。这样可以确保不会由于填充或边框而超出元素声明的宽度。
    • 在<html>上没有声明基本font-size，但假定为 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:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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;

请注意，由于字体堆栈包含emoji字体，因此许多常见的symbol/dingbat unicode字符将呈现为多色象形文字。它们的外观会有所不同，这取决于浏览器/平台本机emoji字体中使用的样式，并且它们不会受到任何CSS color 样式的影响。

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

标题和段落

所有标题元素（例如， <h1>—和 <p> ）都被重置为删除其margin-top。标题有 margin-bottom: .5rem 的增加，而段落有 margin-bottom: 1rem以方便分隔。

标题 例子
<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

列表

所有列表—<ul>, <ol>, 和 <dl>—都删除了它们的margin-top 和margin-bottom: 1rem。嵌套列表没有 margin-bottom。我们在<ul> and <ol>元素上还重置了 padding-left。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

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

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

内联代码

用<code>包装内联代码段 。确保转义HTML尖括号。

例如， <section>应包装为内联。 
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>标记指示变量。

y = mx + b 
<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 + , 
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. 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

表格

T表格已针对<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

表单

各种表单元素已经重置，以获得更简单的基本样式。以下是一些最显著的变化：

  • <fieldset>没有边框、填充或边距，因此它们可以很容易地用作单个输入或输入组的包装器。
  • <legend>与字段集一样，也已重新设置样式以显示为各种标题。
  • <label>设置为display: inline-block 允许应用margin。
  • <input>, <select>, <textarea>, 和 <button>主要由Normalize处理，但是Reboot会删除它们的 margin并设置line-height: inherit。
  • <textarea>被修改为只能垂直调整大小 ，因为水平调整大小通常会“破坏”页面布局。
  • 当 :not(:disabled)时，<button>和<input> button元素具 cursor: pointer。

这些变化以及更多的变化将在下面进行说明。

Example legend

100

日期和颜色输入支持

请记住，并非所有浏览器都完全支持日期输入 ，如 Safari.

按钮上的指针

Reboot包括一项 role="button"的增强功能，，可以将默认光标更改为pointer。 将此属性添加到元素以帮助指示元素是交互式的。 <button>元素不需要这个角色，，因为它们有自己的 cursor 更改。

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

杂项要素

地址

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

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

块引用

在块引用 上默认margin 是 1em 40px，因此我们将其重置为0 0 1rem ，以便与其他元素更加一致。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

内联元素

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

Nulla attr vitae elit libero, a pharetra augue.

概要

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

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 [hidden] 属性

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

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

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

要仅切换元素的可见性，即不修改其 display ，并且该元素仍然可以影响文档流，请改用 .invisible 类 代替。