View on GitHub

重置(Reboot)

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

方法

Reboot建立在Normalize的基础上,它只使用元素选择器提供了许多具有某种固执己见风格的HTML元素。附加样式仅在类中完成。例如,我们重新启动一些 <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>上 ,通过媒体查询轻松响应类型缩放,同时尊重用户偏好并确保更易访问的方法。
  • <body> 还设置全局 font-familyline-heighttext-align。稍后,某些表单元素会继承该属性,以防止字体不一致。
  • 为了安全起见, <body> 为了安全起见, background-color,默认为 #fff

本机字体堆栈

默认的web字体(Helvetica Neue、Helvetica和Arial)已在Bootstrap 4中删除,并替换为“本机字体堆栈”,以便在每个设备和操作系统上实现最佳的文本呈现。阅读更多 关于本机字体堆栈在这个 扣人心弦的杂志 文章.

$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字体中使用的样式,并且它们不会受到任何CSScolor 样式的影响。

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

  • All lists have their top margin removed
  • And their bottom margin normalized
  • Nested lists have no bottom margin
    • This way they have a more even appearance
    • Particularly when followed by more list items
  • The left padding has also been reset
  1. Here’s an ordered list
  2. With a few list items
  3. It has the same overall look
  4. As the previous unordered list

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

Description lists
A description list is perfect for defining terms.
Term
Definition for the term.
A second definition for the same term.
Another term
Definition for this other term.

预格式化文本

The <pre> 元素被重置以移除其 margin-top ,并使用 rem 单位作为其 margin-bottom

.example-element {
  margin-bottom: 1rem;
}

表格

表格稍微调整了样式 <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

按钮上的指针

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

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

杂项要素

地址

<address> 元素将更新,以将浏览器默认 font-styleitalic 重置为 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

块引用

在块引用上的默认 margin1em 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

在Summary上的默认 cursortext,因此我们将其重置为 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 。借用 PureCSSS的一个想法,我们改进了这个默认值,使之成为 [hidden] { display: none !important; } 以帮助防止其 display 被意外覆盖。虽然IE10本机不支持 [hidden] ,但是CSS中的显式声明解决了这个问题。

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

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

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