重置(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 类 代替。