Reboot 是一组特定于元素的 CSS 更改,集成在单个文件中,它用于启动 Bootstrap,并提供了一个优雅、一致且简单的基线,以便构建网页布局。
一、方法
Reboot 是基于 Normalize 构建的,它使用元素选择器为许多 HTML 元素提供了一些自认为合理的默认样式。这些样式会为一些元素提供基本的样式,而其他样式则主要通过类来完成。举例来说,我们可以通过 Reboot 重新启动一些样式来获得更简洁的基线,然后使用.table.table-bordered类来创建带边框的表格。
以下是我们在 Reboot 中选择要覆盖的内容的指南和原因:
1、更新某些浏览器默认值,以使用rem而不是像素来实现可缩放的组件间距;
2、避免使用像素可能会导致垂直边距折叠,产生意想不到的结果。更重要的是,使用单一单位(如rem)可以提供一个更简单的心智模型;
3、为了更轻松地跨设备大小进行缩放,块级元素应该使用rem代表边距,而不是像素,这样可以确保间距在不同设备上更一致;
4、尽可能将与属性相关的声明保持在最低限度。例如,使用font: inherit;来确保字体继承父元素的字体设置,从而减少不必要的重复声明。
二、页面默认值
<html>和<body>元素已更新,以提供更好的页面范围默认值。更具体地说:
1、在每个元素上全局设置box-sizing: border-box;,包括*::before和*::after。这样做可以确保元素的宽度声明包括填充(padding)和边框(border),从而避免因填充或边框而超出声明的宽度。
2、没有在html上声明基础字体大小,而是假定使用浏览器默认值。这样可以通过媒体查询来轻松地响应不同类型的缩放,并确保更易于访问,同时尊重用户的偏好设置。
3、设置全局的font-size为16px,并且在body上设置font-family、line-height和text-align。这些样式也将稍后被某些表单元素继承,以确保字体一致性。
4、为了安全起见,给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;
由于字体堆栈中包含表情符号字体,因此许多常见的符号和dingbat Unicode字符将呈现为多色象形文字。这些符号的外观会因浏览器或操作系统原生表情符号字体的样式而异,并且它们不会受到任何CSS样式的影响。
四、标题和段落
所有标题元素(例如,<h1><p>margin-topmargin-bottom: .5remmargin-bottom: 1rem)都将被重置以删除它们。添加了标题和段落,以便于间距。
五、列表
所有列表元素(<ul>、<ol>、<dl>)的默认上下边距已经被移除,并且嵌套列表不再具有默认的底部边距。对于这些列表元素,现在设置了margin-top: 0和margin-bottom: 1rem的样式。
为了更简单的样式、清晰的层次结构和更好的间距,描述列表已将 s. s 重置为并添加 .s 以粗体显示。
margin<dd>margin-left0margin-bottom: .5rem<dt>
六、预先格式化文本
.<pre>元素被重置以删除其,并使用其margin-topremmargin-bottom
七、表
表格略微调整为样式 s,折叠边框,并确保整个表格的一致性。边框、填充等的其他更改随 .table 类一起提供。<caption>text-align
八、形式
已重新启动各种表单元素,以实现更简单的基本样式。以下是一些最值得注意的变化:
- <fieldset>s 没有边框、填充或边距,因此它们可以很容易地用作单个输入或输入组的包装器;
- <legend>与字段集一样,S 也被重新设计为显示为某种标题;
- <label>s 设置为 允许应用。display: inline-blockmargin;
- <input>s、s、s 和 s 主要由 Normalize 解决,但 Reboot 也会删除它们的和 sets;
<select><textarea><button>marginline-height: inherit; - <textarea>被修改为只能垂直调整大小,因为水平调整大小通常会“破坏”页面布局;
- <button>s 和 button 元素具有 when .<input>cursor: pointer:not(:disabled)。
下图演示了这些更改以及更多更改:
按钮上的指针
将此属性添加到元素中,以帮助指示元素是交互式的。对于元素来说,这个角色不是必需的,这些元素会自行更改。
九、杂项元素
1、地址
这段代码创建了一个带有联系信息的地址元素。联系信息包括字体样式、大小、行高和底部外边距。通过在行尾添加 . 来保留格式。
<address>font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>
2、区块报价
块引号的默认值是margin1em 40px0 0 1rem,因此我们将其重置为与其他元素更一致的内容。
3、内联元素
<abbr>元素接收基本样式,使其在段落文本中脱颖而出。
4、总结
summary 的默认值是cursortextpointer,因此我们将其重置为表示可以通过单击元素与之交互。
十、HTML5属性
HTML5 添加一个名为 [hidden] 的新全局属性,并为其设置了默认样式。为了帮助防止它被意外覆盖,我们使用了 PureCSS 的一个想法,即通过显式声明来设置 display: none。虽然 IE10 本身不支持这个属性,但在我们的 CSS 中显式声明可以解决这个问题。
display: none[hidden] { display: none !important; } display[hidden] { /* 在这里添加其他样式 */ }
<input type="text" hidden>