初始化

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

在本页

方式

Reboot构建在Normalize的基础上，仅使用元素选择器就提供了许多带有独有风格的HTML元素。额外的样式只通过类来完成。例如，我们重新启动一些 <table> 以获得更简单的基线，稍后提供 .table、 .table-bordered等等。

以下是在初始化时选择覆盖的指导原则和理由：

更新一些浏览器默认值，使用 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;

请注意，由于字体属性包含表情符号字体，许多常见的symbol/dingbat unicode字符将呈现为多色象形文字。它们的外观会有所不同，这取决于浏览器/平台的本机表情符号字体所使用的样式，而且它们不会受到任何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。还重置了padding-left， <ul> 和 <ol> 元素上的填充。

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
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>示例文本在这里…</p>
<p>和另一行示例文本在这里…</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> 表示通常通过键盘输入的输入。

要切换目录，输入 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 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

Forms表单

各种表单元素已重新启动，以简化基本样式。以下是一些最显著的变化：

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

这些变化以及更多变化将在下面进行演示。

日期和颜色输入支持

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

更改按钮上的指针

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>结尾的行可以保留格式。

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

块引用

blockquotes的默认 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.

总结

summary上的默认 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类。

初始化

方式