重启(Reboot)

重新启动(Reboot),单个文件中特定于元素的CSS更改的集合,kickstart Bootstrap提供了一个优雅,一致且简单的基准。

方法论

重新启动建立在Normalize的基础上,仅使用元素选择器即可为许多HTML元素提供一些自以为是的样式。 其他样式仅对类进行。 例如,我们重新启动了一些<table>样式以简化基线,然后提供了.table,.table-bordered等。

以下是我们的指南以及选择在重新引导中覆盖的内容的原因:

-更新一些浏览器默认值,以使用rem而不是em来扩展组件间距。 -避免使用“ margin-top”。 垂直边距可能会崩溃,从而产生意外结果。 不过,更重要的是,“margin”的单一方向是一个更简单的理想模型。 -为了更容易地缩放设备尺寸,块元素应将rems用作margins。 -尽量减少与字体相关的属性的声明,尽可能使用inherit。

页面默认值

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

  • 将“ box-sizing”全局设置在每个元素上,包括“ * :: before”和“ * :: after”以及“ border-box”。 这样可以确保不会因填充或边框而超出元素声明的宽度。
  • 在<html>上没有声明基本的font-size,但是假定为16px(浏览器默认)。 在<body>上应用font-size:1rem以便通过媒体查询轻松响应类型缩放,同时尊重用户首选项并确保更易于访问的方法。
  • 还设置了全局的font-family,line-height和text-align。 稍后,某些表单元素会继承此格式,以防止字体不一致。
  • 为了安全起见,<body>具有声明的background-color',默认为#fff`。

自然字体堆栈

默认的Web字体(Helvetica Neue,Helvetica和Arial)已删除到Bootstrap 4中,并替换为“本机字体堆栈”,以在每个设备和OS上实现最佳文本呈现。Read more about native font stacks in this Smashing Magazine article.

$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”段落以简化间距。

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

列表(Lists)

所有列表-<ul>,<ol>和<dl>`都删除了它们的“ margin-top”和“ margin-bottom:1rem”。 嵌套列表没有“ margin-bottom”。

  • 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>s被固定

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.

预格式化文字

重置<pre>元素以删除其margin-top元素,并将rem单位用于其margin-bottom元素。

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

表格(Tables)

表格会略微调整以适应样式<caption>,折叠边框并确保整个文本一致。 the .table class对边框,填充等进行了其他更改。

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>s与字段集一样,也已重新设置样式以显示为各种标题。
  • <input>s,<select>s,<textarea>s和<button>s主要由Normalize寻址,但是Reboot删除了它们的margin并设置line-height:Inherit 也一样。
  • :not(:disabled)时,<button>s和<input>按钮元素具有cursor:pointer

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

Example legend

100

杂项元素

地址

更新了<address>元素,以将浏览器的默认字体样式从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.

摘要

摘要上的默认cursortext,因此我们将其重置为pointer以表示可以通过单击来与该元素进行交互。

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5[hidden]属性

HTML5添加了a new global attribute named [hidden],其样式为“ display:none” 默认。 借用 PureCSS的想法,我们通过使[hidden] { display: none !important; } ,以防止其“显示”被意外覆盖。 尽管IE10本身不支持[hidden],但CSS中的显式声明可以解决该问题。

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

[hidden]与jQuery的$(...).hide()$(...).show()方法不兼容。 因此,相对于用于管理元素的“显示”的其他技术,我们目前尤其不赞成“隐藏”。

要仅切换元素的可见性(表示未修改其“显示”,并且元素仍然可以影响文档的流程),请使用the .invisible class 来替代.