Source

重启

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

方法

Reboot 建立在 Normalize 的基础上,仅使用元素选择器为许多 HTML 元素提供了一些自以为是的样式。附加样式仅通过类完成。例如,我们重新启动一些<table>样式以获得更简单的基线,然后提供.table.table-bordered等。

以下是我们在重新启动中选择要覆盖的内容的指南和原因:

  • 更新一些浏览器默认值以使用rems 而不是ems 来实现可伸缩组件间距。
  • 避免margin-top。垂直边距可能会崩溃,从而产生意想不到的结果。更重要的是,一个单一的方向margin是一个更简单的心智模型。
  • 为了更轻松地跨设备大小缩放,块元素应使用rems 代表margins。
  • font尽可能减少相关属性的声明,inherit尽可能使用。

页面默认值

和元素已更新以提供更好的页面范围默认值<html><body>进一步来说:

  • box-sizing全局设置在每个元素上——包括and *::before, *::afterto border-box。这确保了元素的声明宽度永远不会由于填充或边框而超过。
  • 没有font-size在 上声明基础<html>,而是16px假定为基础(浏览器默认值)。font-size: 1rem应用于<body>通过媒体查询轻松响应类型缩放,同时尊重用户偏好并确保更易于访问的方法。
  • 还设置了<body>一个全局font-family,line-heighttext-align. 这是稍后由某些表单元素继承的,以防止字体不一致。
  • 为了安全起见,<body>有一个声明的background-color,默认为#fff.

本机字体堆栈

Bootstrap 4 中删除了默认的 Web 字体(Helvetica Neue、Helvetica 和 Arial),取而代之的是“本机字体堆栈”,以便在每个设备和操作系统上实现最佳文本渲染。在这篇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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

标题和段落

所有标题元素(例如,)<h1><p>被重置以将其margin-top删除。添加了标题margin-bottom: .5rem和段落margin-bottom: 1rem以便于间距。

标题 例子

<h1></h1>

h1。引导标题

<h2></h2>

h2。引导标题

<h3></h3>

h3。引导标题

<h4></h4>

h4。引导标题

<h5></h5>

h5。引导标题

<h6></h6>

h6. 引导标题

列表

所有列表— <ul><ol><dl>—都已margin-top删除和margin-bottom: 1rem. 嵌套列表没有margin-bottom.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • 马萨的整数 molestie lorem
  • pretium nisl aliquet 的促进作用
  • Nulla volutpat aliquam velit
    • 菜豆
    • Purus sodales ultricies
    • 前庭前庭端口扫描仪
    • Ac tristique libero volutpat 在
  • Faucibus porta lacus fringilla vel
  • Aenean sat amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. 马萨的整数 molestie lorem
  4. pretium nisl aliquet 的促进作用
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sat amet erat nunc
  8. Eget porttitor lorem

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

描述列表
描述列表非常适合定义术语。
欧伊斯莫德
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem。
Donec id elit non mi porta gravida 在 eget metus。
马勒苏达门
Etiam porta sem malesuada magna mollis euismod。

预格式化文本

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

.example-元素{
  边距底部:1rem;
}

表格略微调整为样式<caption>,折叠边框,并确保始终保持一致text-align。对边框、填充等的其他更改随.table一起提供。

这是一个示例表,这是描述内容的标题。
表格标题 表格标题 表格标题 表格标题
表格单元格 表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格 表格单元格

形式

已重新启动各种表单元素以实现更简单的基本样式。以下是一些最显着的变化:

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

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

示例图例

100

杂项元素

地址

<address>元素已更新以将浏览器默认设置font-style从重置italicnormalline-height现在也是继承的,并margin-bottom: 1rem已添加。<address>s 用于显示最近的祖先(或整个工作主体)的联系信息。通过以 . 结尾的行来保留格式<br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103 电话
(123) 456-7890
全名
[email protected]

块引用

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

源标题 中著名的人

内联元素

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

Nulla attr vitae elit libero,一个 pharetra augue。

概括

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

一些细节

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

更多细节

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

HTML5[hidden]属性

HTML5 添加了一个名为 的新全局属性[hidden],默认样式为display: none。借用PureCSS的一个想法,我们改进了这个默认值,[hidden] { display: none !important; }帮助防止它display被意外覆盖。虽然[hidden]IE10 本身不支持,但我们的 CSS 中的显式声明解决了这个问题。

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

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

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