重置（Reboot）

针对单一文件内CSS的特定元素重置样式，重置以便Bootstrap准确且一致的建立样式。

On this page

方法

重置建立在Normalize的基础上，仅使用元素选择器来为许多HTML元素提供自定义的样式。附加样式仅能利用class建立。例如，我们重置<table>的一些样式让它更简化，以利套用.table、.table-bordered及其他类别。

以下是Bootstrap重置元件的规范和原因：

  • 更新部分浏览器的预设值，在可变动的元件间距上使用rem替代em。
  • 避开使用margin-top。垂直边界的margins可能会重叠，进而产生不能预期的结果。更重要的是，使用单向的margin是一个更单纯的思考模式。
  • 为便于跨设备大小进行缩放，块元素应使用rems作为边距。
  • 尽量减少字体相关属性的声明，尽可能使用inherit。

页面默认值

为了提供更好的整体页面预设值而更新和元素。具体而言：

  • 在每个元素上设定全局性的box-sizing，包括*：：before和*：：after，将它们设为border-box。这确保元素不会因为padding或border超过元素声明的宽度数值。
    • 不在<html>上声明基础的font-size，而是假定字体尺寸为16px（浏览器预设）。font-size: 1rem被应用在上，以利透过media queries做响应式缩放，同时尊重使用者的喜好。可以通过修改$font-size-root变量来覆盖此浏览器的预设值。
  • <body>设定了全局的font-family、font-weight、line-height及color，让随后的元素可以继承此格式以防止字体不一致。
  • 为了安全起见， <body>已声明background-color，预设为#fff。

原生字体堆栈

Bootstrap利用“native font stack”或“system font stack”在每个设备和操作系统上获得最佳的阅读呈现。这些系统字体是特别为现今设备所设计的，具备更好的屏幕渲染、多元的文字支持以及更多。在此Smashing Magazine文章中了解更多有关原生字体堆叠的信息。 native font stacks in this.

$font-family-sans-serif:
        // Cross-platform generic font family (default user interface font)
        system-ui,
        // 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颜色样式的影响。

此字体系列应用于 <body>并在整个Bootstrap中自动全局继承。要切换全局字体系列，请更新$font family base并重新编译Bootstrap程序。

标题和段落

所有标题元素（例如， <h1>—and <p>）都被重置为删除其边距顶部。标题有 margin-bottom: .5rem，段落margin-bottom: 1rem以便于间距。

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

列表

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

  • 所有列表的上边距都已删除
  • 他们的底边正常化了
  • 嵌套列表没有下边距
    • 这样他们的外表就更匀称了
    • 尤其是后面有更多的列表项时
  • 左侧填充也已重置
  1. 这是一份有序的清单
  2. 有几个列表项
  3. 它有相同的整体外观
  4. 与前一个无序列表相同

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

描述列表
描述列表非常适合定义术语。
术语
术语的定义。
同一术语的第二个定义。
其他术语
其他术语的定义。

内联代码

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets. 用<code>包装内联代码段。确保转义HTML尖括号。

例如, <section> 应包装为内联代码。 
例如, <code>&lt;section&gt;</code> 应包装为内联代码。

代码块

<pre>用于多行的代码。再提醒一次，确保在代码中转义任何尖括号，以便正确渲染。<pre>移除margin-top以及使用rem作为margin-bottom的单位。 

<p>此处为示例文本...</p>
        <p>这里还有一行示例文本...</p>
        
<pre><code>&lt;p&gt;此处为示例文本...&lt;/p&gt;
        &lt;p&gt;这里还有一行示例文本...&lt;/p&gt;
        </code></pre>

变量

使用<var>标签来指定变量。

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

用户输入

使用<kbd>标签来表示通过键盘输入的指令。

要切换目录，请键入cd，后跟目录名。
要编辑设置，请按 ctrl + , 
要切换目录，请键入 <kbd>cd</kbd> ，后跟目录名。<br>
                要编辑设置，请按 <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>

表格

微调整表格中的<caption>样式，合并边框，并确保整体的text-align是一致的。针对borders、padding以及更多的其他变化将通过.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>没有borders、padding或margin以便包覆独立的input或input群组。
  • <legend>如同fieldset，已被重新定义样式用来显示分类的标题。
  • <label>被设定为display: inline-block以便让margin可以应用。
  • <input>s, <select>s, <textarea>s, and <button>s 主要由Normalize处理，不过Reboot移除了它们的margin并设定line-height: inherit。
  • <textarea>s修改为仅可调整垂直尺寸，因为水平调整大小通常会“破坏”页面布局。
  • 当<button>和 <input>按钮元素状态为：not（：disabled），会呈现 cursor: pointer。

更多的变化都在下方进行展示。

Example legend

100

Date & color input support

Keep in mind date inputs are not fully supported by all browsers, namely Safari.

按钮上的指针

重置增加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

引用

blockquotes上的默认边距是1em 40px，因此我们将其重置为0 0 1rem，以便与其他元素更加一致。

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

内联元素

<abbr>元素的基本样式让它与段落文字之间有明显突出。

Nulla attr vitae elit libero, a pharetra augue.

摘要

summary的预设cursor是text，所以我们将其重置为pointer，元素可以透过点击产生互动性。

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5隐藏属性

HTML5新增一个新的全局属性[hidden]，预设样式为display: none。我们从PureCSS获得的想法，改良为[hidden] { display: none !important; }以预防display被意外覆盖。 

<input type="text" hidden>
jQuery 的不相容性

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements. [hidden]与jQuery的$(...).hide() and $(...).show()方法不兼容。因此，我们现在不特别推崇使用[hidden]技术来处理元素的display。

仅仅切换元素的visibility，代表display并没有被修改，元素还是会影响网页流动，因此可以使用.invisible类取代。

返回顶部