Bootstrap/docs/4.5/content/reboot
重启
重新启动,单个文件中特定于元素的CSS更改的集合,使用kickstart Bootstrap提供一个优雅,一致且简单的基准。
进路
重新启动建立在Normalize的基础上,仅使用元素选择器即可为许多HTML元素提供一些自以为是的样式。 其他样式仅对类进行。 例如,我们重新启动一些 <table>
样式以简化基线,并在以后提供 .table
,.table-bordered
, 和更多。
以下是我们的指南以及选择在重新引导中覆盖的内容的原因:
- 更新一些浏览器默认值以使用
rem
而不是em
表示可扩展的组件间距。 - 避免
margin-top
。垂直边距可能会崩溃,从而产生意外结果。 但更重要的是,margin
是一个更简单的心理模型。 - 为了更轻松地扩展设备尺寸,应使用块元素
rem
为margin
s. - 保留声明
font
相关的属性最小化,使用inherit
只要有可能。
页面默认值
The <html>
and <body>
元素已更新以提供更好的页面范围默认值。 进一步来说:
- The
box-sizing
全局设置在每个元素上,包括*::before
and*::after
, toborder-box
。这样可以确保不会由于填充或边框而超出元素声明的宽度。 - 没有基础
font-size
在<html>
但是16px
被假定(浏览器默认)。font-size: 1rem
适用于<body>
通过媒体查询实现轻松响应的类型缩放,同时尊重用户的喜好并确保更易于访问的方法。 - The
<body>
也设定了全球font-family
,line-height
,和text-align
。稍后,某些表单元素会继承此格式,以防止字体不一致。 - 为了安全起见,
<body>
有一个声明background-color
,默认为#fff
.
本机字体堆栈
默认的Web字体(Helvetica Neue,Helvetica和Arial)已删除到Bootstrap 4中,并替换为“本机字体堆栈”,以在每个设备和OS上实现最佳文本呈现。 进一步了解 本机字体堆栈 粉碎杂志 文章 .
This font-family
适用于 <body>
并在整个Bootstrap中自动全局继承。 切换全局 font-family
,更新 $font-family-base
并重新编译Bootstrap。
标题和段落
所有标题元素,例如 <h1>
—and <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
.
- Lorem ipsum dolor坐着
- 保守的精英
- Massa的整数痣
- Facilisis在prenis中的aliquet
- Nulla volutpat aliquam velit
- 豆
- 普氏粉菌
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- 紫红色porta lacus fringilla vel
- Aenean Sit Amet Erat Nunc
- Eget Porttitor lorem
- Lorem ipsum dolor坐着
- 保守的精英
- Massa的整数痣
- Facilisis在prenis中的aliquet
- Nulla volutpat aliquam velit
- 紫红色porta lacus fringilla vel
- Aenean Sit Amet Erat Nunc
- Eget Porttitor lorem
为了简化样式,清晰的层次结构和更好的间距,更新了说明列表 margin
s. <dd>
重置 margin-left
to 0
并添加 margin-bottom: .5rem
.<dt>
是的 粗体 .
- 说明清单
- 描述列表非常适合定义术语。
- Euismod
- Vestibulum id ligula porta felis euismod semper eget拉丁恋物癖。
- Donec id elit non mi porta gravida在eget metus。
- Malesuada门
- Etiam porta sem malesuada magna mollis euismod。
预格式化文字
The <pre>
重置元素以删除其 margin-top
并使用 rem
其单位 margin-bottom
.
}
表
桌子略有调整以适应风格 <caption>
,折叠边框并确保一致 text-align
始终。 边框,填充等的其他更改也随之而来 the .table
类 .
表格标题 | 表格标题 | 表格标题 | 表格标题 |
---|---|---|---|
表格单元格 | 表格单元格 | 表格单元格 | 表格单元格 |
表格单元格 | 表格单元格 | 表格单元格 | 表格单元格 |
表格单元格 | 表格单元格 | 表格单元格 | 表格单元格 |
表格标题
表格标题
表格标题
表格单元格
表格单元格
表格单元格
表格单元格
表格单元格
表格单元格
表格单元格
表格单元格
表格单元格
表格单元格
表格单元格
表格单元格
形式
重新引导了各种表单元素,以简化基本样式。 以下是一些最值得注意的更改:
<fieldset>
s没有边界,填充或边距,因此可以轻松用作单个输入或输入组的包装。<legend>
与字段集一样,s也已重新设置样式以显示为各种标题。<label>
设置为display: inline-block
允许margin
要施加。<input>
s,<select>
s,<textarea>
s和<button>
s通常由Normalize解决,但是Reboot会删除它们margin
和集line-height: inherit
也一样<textarea>
将s修改为只能垂直调整大小,因为水平调整大小通常会“破坏”页面布局。<button>
和<input>
按钮元素有cursor: pointer
when:not(:disabled)
.
这些变化以及更多变化将在下面进行演示。
按钮上的指针
重新启动包括针对 role="button"
将默认光标更改为 pointer
。将此属性添加到元素以帮助指示元素是交互式的。 该角色不是必需的 <button>
拥有自己的元素 cursor
更改。
杂项元素
地址
The <address>
元素已更新以重置浏览器默认值 font-style
from italic
to normal
.line-height
现在也被继承了 margin-bottom: 1rem
已添加。 <address>
用于显示最接近祖先(或整个工作范围)的联系信息。 通过使用以下行结尾保留格式 <br>
.
大段引用
默认值 margin
在blockquotes上是 1em 40px
,因此我们将其重置为 0 0 1rem
为了与其他元素更一致。
文字填充文字填充文字填充文字填充 整数posere删除前注。
内联元素
The <abbr>
元素接受基本样式以使其在段落文本中脱颖而出。
摘要
默认值 cursor
总结是 text
,因此我们将其重置为 pointer
表示可以通过单击来与该元素进行交互。
一些细节
有关详细信息的更多信息。
更多细节
这里有更多关于细节的细节。
HTML5添加 一个名为的新全局属性 [hidden
] ,其样式为 display: none
默认情况下。 借来一个想法 纯CSS ,我们通过 [hidden] { display: none !important; }
帮助防止它 display
避免被意外覆盖。 而 [hidden]
IE10本身不支持它,因此CSS中的显式声明可以解决该问题。
jQuery不兼容
[hidden]
与jQuery的不兼容 $(...).hide()
and $(...).show()
方法。 因此,我们目前不特别认可 [hidden]
超过其他技术来管理 display
元素。
仅切换元素的可见性,即元素的可见性 display
未修改且该元素仍会影响文档的流程,请使用 the .invisible
类 代替。