重置(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-family
、line-height
和text-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
- Here’s an ordered list
- With a few list items
- It has the same overall look
- 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
类 一起提高。
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
。
这些变化以及更多的变化将在下面进行说明。
按钮上的指针
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>
结束行来保留格式。
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Full Name
first.last@example.com
块引用
在块引用上的默认 margin
是 1em 40px
,因此我们将其重置为 0 0 1rem
,以便与其他元素更加一致。
A well-known quote, contained in a blockquote element.
内联元素
<abbr>
元素接受基本样式,使其在段落文本中脱颖而出。
Summary
在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
。借用 PureCSSS的一个想法,我们改进了这个默认值,使之成为 [hidden] { display: none !important; }
以帮助防止其 display
被意外覆盖。虽然IE10本机不支持 [hidden]
,但是CSS中的显式声明解决了这个问题。
<input type="text" hidden>
jQuery 不兼容
[hidden]
与jQuery的 $(...).hide()
和 $(...).show()
方法不兼容。因此,我们目前并不特别支持 [hidden]
而不是其他管理元素 的display
技术。
要仅切换元素的可见性,即不修改其 display
,并且该元素仍然可以影响文档流,请改用 .invisible
类 代替。