重启
Reboot 是单个文件中元素特定 CSS 更改的集合,kickstart Bootstrap 以提供优雅、一致和简单的基线来构建。
方法
Reboot 建立在 Normalize 的基础上,仅使用元素选择器为许多 HTML 元素提供了一些自以为是的样式。附加样式仅通过类完成。例如,我们重新启动一些<table>
样式以获得更简单的基线,然后提供.table
、.table-bordered
等。
以下是我们在重新启动中选择要覆盖的内容的指南和原因:
- 更新一些浏览器默认值以使用
rem
s 而不是em
s 来实现可伸缩组件间距。 - 避免
margin-top
。垂直边距可能会崩溃,从而产生意想不到的结果。更重要的是,一个单一的方向margin
是一个更简单的心智模型。 - 为了更轻松地跨设备大小缩放,块元素应使用
rem
s 代表margin
s。 font
尽可能减少相关属性的声明,inherit
尽可能使用。
页面默认值
和元素已更新以提供更好的页面范围默认值<html>
。<body>
进一步来说:
box-sizing
全局设置在每个元素上——包括and*::before
,*::after
toborder-box
。这确保了元素的声明宽度永远不会由于填充或边框而超过。- 没有
font-size
在 上声明基础<html>
,而是16px
假定为基础(浏览器默认值)。font-size: 1rem
应用于<body>
通过媒体查询轻松响应类型缩放,同时尊重用户偏好并确保更易于访问的方法。可以通过修改$font-size-root
变量来覆盖此浏览器默认值。
- 没有
- 还设置了
<body>
一个全局font-family
,font-weight
,line-height
, 和color
. 这是稍后由某些表单元素继承的,以防止字体不一致。 - 为了安全起见,
<body>
有一个声明的background-color
,默认为#fff
.
本机字体堆栈
Bootstrap 利用“本机字体堆栈”或“系统字体堆栈”在每个设备和操作系统上实现最佳文本渲染。这些系统字体专为当今的设备而设计,具有改进的屏幕渲染、可变字体支持等。在这篇Smashing Magazine文章中阅读有关本机字体堆栈的更多信息。
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// 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;
请注意,由于字体堆栈包含表情符号字体,因此许多常见的符号/dingbat unicode 字符将呈现为多色象形文字。它们的外观会有所不同,具体取决于浏览器/平台的原生表情符号字体中使用的样式,并且它们不会受到任何 CSScolor
样式的影响。
这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
. 我们还重置了padding-left
on<ul>
和<ol>
元素。
- 所有列表的上边距都被删除
- 他们的下边距标准化
- 嵌套列表没有下边距
- 这样它们的外观更均匀
- 特别是当后面有更多列表项时
- 左侧填充也已重置
- 这是一个有序列表
- 有几个列表项
- 它具有相同的整体外观
- 和之前的无序列表一样
为了更简单的样式、清晰的层次结构和更好margin
的间距,描述列表已更新。<dd>
s 重置margin-left
并0
添加margin-bottom: .5rem
. <dt>
s加粗。
- 描述列表
- 描述列表非常适合定义术语。
- 学期
- 术语的定义。
- 同一术语的第二个定义。
- 另一个术语
- 这个其他术语的定义。
内联代码
用 .包裹内联代码片段<code>
。请务必转义 HTML 尖括号。
<section>
应包装为内联。
For example, <code><section></code> should be wrapped as inline.
代码块
将<pre>
s 用于多行代码。再次,确保转义代码中的任何尖括号以进行正确渲染。该<pre>
元素被重置以删除其margin-top
并为其使用rem
单位margin-bottom
。
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
变量
对于指示变量,请使用<var>
标签。
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
用户输入
使用<kbd>
表示通常通过键盘输入的输入。
要编辑设置,请按 ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
样本输出
为了指示程序的示例输出,请使用<samp>
标签。
<samp>This text is meant to be treated as sample output from a computer program.</samp>
表
表格略微调整为样式<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
和 setsline-height: inherit
。<textarea>
s 被修改为只能垂直调整大小,因为水平调整大小经常“破坏”页面布局。<button>
s 和<input>
button 元素有cursor: pointer
when:not(:disabled)
。
这些变化以及更多变化如下所示。
日期和颜色输入支持
请记住,并非所有浏览器(即 Safari)都完全支持日期输入。
按钮上的指针
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>
s 用于显示最近的祖先(或整个工作主体)的联系信息。通过以 . 结尾的行来保留格式<br>
。
1355 Market St, Suite 900
San Francisco, CA 94103 电话
: (123) 456-7890 全名
[email protected]
块引用
margin
blockquotes的默认值为1em 40px
,因此我们将其重置0 0 1rem
为与其他元素更一致的内容。
众所周知的引用,包含在 blockquote 元素中。
源标题中著名的人
内联元素
该<abbr>
元素接收基本样式,使其在段落文本中脱颖而出。
概括
cursor
summary的默认值是text
,因此我们将其重置pointer
为表示可以通过单击元素进行交互。
一些细节
有关详细信息的更多信息。
更多细节
这里有更多关于细节的细节。
HTML5[hidden]
属性
HTML5 添加了一个名为 的新全局属性[hidden]
,默认样式为display: none
。借用PureCSS的一个想法,我们改进了这个默认值,[hidden] { display: none !important; }
帮助防止它display
被意外覆盖。
<input type="text" hidden>
jQuery 不兼容
[hidden]
$(...).hide()
与 jQuery 的和$(...).show()
方法不兼容。因此,我们目前并不特别赞同[hidden]
其他管理display
元素的技术。
要仅切换元素的可见性,这意味着它display
没有被修改并且元素仍然可以影响文档的流程,请改用.invisible
类。