重启
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>
通过媒体查询轻松响应类型缩放,同时尊重用户偏好并确保更易于访问的方法。
- 没有
- 还设置了
<body>
一个全局font-family
,line-height
和text-align
. 这是稍后由某些表单元素继承的,以防止字体不一致。 - 为了安全起见,
<body>
有一个声明的background-color
,默认为#fff
.
本机字体堆栈
Bootstrap 4 中删除了默认的 Web 字体(Helvetica Neue、Helvetica 和 Arial),取而代之的是“本机字体堆栈”,以便在每个设备和操作系统上实现最佳文本渲染。在这篇Smashing Magazine文章中阅读有关本机字体堆栈的更多信息。
这font-family
适用于<body>
并在整个 Bootstrap 中全局自动继承。要切换全局font-family
,更新$font-family-base
并重新编译 Bootstrap。
标题和段落
所有标题元素(例如,)<h1>
都<p>
被重置以将其margin-top
删除。添加了标题margin-bottom: .5rem
和段落margin-bottom: 1rem
以便于间距。
标题 | 例子 |
---|---|
|
h1。引导标题 |
|
h2。引导标题 |
|
h3。引导标题 |
|
h4。引导标题 |
|
h5。引导标题 |
|
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
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- 马萨的整数 molestie lorem
- pretium nisl aliquet 的促进作用
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sat amet erat nunc
- Eget porttitor lorem
为了更简单的样式、清晰的层次结构和更好margin
的间距,描述列表已更新。<dd>
s 重置margin-left
并0
添加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
和 setsline-height: inherit
。<textarea>
s 被修改为只能垂直调整大小,因为水平调整大小经常“破坏”页面布局。
这些变化以及更多变化如下所示。
杂项元素
地址
该<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
为与其他元素更一致的内容。
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。
内联元素
该<abbr>
元素接收基本样式,使其在段落文本中脱颖而出。
概括
cursor
summary的默认值是text
,因此我们将其重置pointer
为表示可以通过单击元素进行交互。
一些细节
有关详细信息的更多信息。
更多细节
这里有更多关于细节的细节。
HTML5[hidden]
属性
HTML5 添加了一个名为 的新全局属性[hidden]
,默认样式为display: none
。借用PureCSS的一个想法,我们改进了这个默认值,[hidden] { display: none !important; }
帮助防止它display
被意外覆盖。虽然[hidden]
IE10 本身不支持,但我们的 CSS 中的显式声明解决了这个问题。
jQuery 不兼容
[hidden]
$(...).hide()
与 jQuery 的和$(...).show()
方法不兼容。因此,我们目前并不特别赞同[hidden]
其他管理display
元素的技术。
要仅切换元素的可见性,这意味着它display
没有被修改并且元素仍然可以影响文档的流程,请改用.invisible
类。