• 前端
• UI组件

导读

本文以 v4.4.1 官方文档中的 Reboot 章节 为主线，深入剖析 BOOTSTRA.386 在 Bootstrap 4.4 之上对全站元素基线的改造。你将看到 Reboot 的通用设计原则（border-box、rem间距、单方向 margin、原生字体栈）、页面级默认值，以及 BOOTSTRA.386 如何通过覆盖$body-bg、$font-family-base、$headings-margin-bottom等变量，把一套现代前端框架重铸成带A:\>提示符气质的 1980 年代 DOS 界面。读完本文，你将能结合源码解释每一个"为什么长这样"的复古样式，并能按同样思路定制自己的主题基线。

什么是 Reboot

Reboot 是 Bootstrap 4 中负责"元素级样式归一化"的单个 SCSS 文件（BOOTSTRA.386 的实现位于 _reboot.scss），它构建在 Normalize.css 之上：Normalize 负责跨浏览器统一默认样式，Reboot 则进一步用"带观点"（opinionated）的规则覆盖具体 HTML 元素——并且只用元素选择器，不引入任何类名；更细的样式全部交给.table、.table-bordered这类工具类去完成。

官方文档用一个 DOS 目录列表来隐喻这种"从零起步"的姿态：

A>dir A: ASM86 A: ASSIGN A: ED A: HELP A>_

就像 DOS 启动后只有一个干净的提示符，Reboot 为 Bootstrap 提供一个"干净、一致、简单"的基线（baseline），页面正是在这个基线上组装起来的。它可独立使用：仓库中的 bootstrap-reboot.scss 只导入functions、variables、mixins和reboot，因此你可以单独编译出一份只含基线的bootstrap-reboot.css，package.json 的 css-minify-main 脚本 也单独产出bootstrap-reboot.css/bootstrap-reboot.min.css。

Reboot 之所以要覆盖这么多默认值，遵循四条核心准则：

• 把部分浏览器默认值从em改为rem，让组件间距可以随根字号等比缩放；
• 避免margin-top：垂直 margin 会折叠、产生不可预期的结果，且单向 margin 是更简单的心理模型；
• 块级元素的margin尽量使用rem，方便跨设备尺寸缩放；
• 与font相关的声明保持最少，能inherit就inherit。

页面级默认值：从<html>到<body>

文档明确指出<html>与<body>会被统一调整，提供更好的全页面默认值：

• box-sizing: border-box被全局设置到每个元素——包括*::before和*::after——保证声明宽度不会因 padding 或 border 被撑破；
• <html>上不声明基础font-size，按浏览器默认16px处理；<body>使用font-size: 1rem，便于通过媒体查询做响应式字号缩放，同时尊重用户偏好、更易访问；
• <body>同时设置全局font-family、line-height、text-align，后续被部分表单元素继承，避免字体不一致；
• 出于安全，<body>显式声明background-color。

在 BOOTSTRA.386 中，这些约定在 _reboot.scss 里落地为：

*, *::before, *::after { box-sizing: border-box; // 1 } html { font-family: 'DOS', monospace; // 2 line-height: $line-height-base; // 3 -webkit-text-size-adjust: 100%; // 4 -webkit-tap-highlight-color: rgba($black, 0); // 5 line-height-step: $line-height-base; } body { margin: 0; // 1 font-family: $font-family-base; font-weight: $font-weight-base; line-height: $line-height-base; font-size: $font-size-base; color: $body-color; text-align: left; // 3 background-color: $body-bg; // 2 font-kerning: none; text-rendering: geometricPrecision; }

注意两个复古定制的关键点：html上把font-family直接指向'DOS'字体；body上关闭font-kerning并开启text-rendering: geometricPrecision，这能让等宽字符严格对齐到 DOS 的像素网格，而不是被渲染引擎的"美化"打乱。

原生字体栈：从现代字体到 DOS 点阵

原版 Bootstrap 4 放弃 Helvetica Neue / Helvetica / Arial，改用"原生字体栈"（native font stack）以在不同设备与 OS 上获得最优渲染，其 SASS 定义为：

$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, sans-serif, // Emoji fonts "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

这个font-family施加到<body>后全站自动继承；要切换全局字体，就更新$font-family-base并重新编译。

BOOTSTRA.386 的反向操作极具辨识度：在 _variables.scss 中，三个字体变量全部被改为 DOS 等宽栈：

$font-family-sans-serif: DOS, Monaco, Menlo, Consolas, "Courier New", monospace !default; $font-family-monospace: DOS, Monaco, Menlo, Consolas, "Courier New", monospace !default; $font-family-base: DOS, Monaco, Menlo, Consolas, "Courier New", monospace !default;

配合 _reboot.scss 里用@font-face注册的'DOS'字体族（指向Px437_IBM_EGA8.otf，并关闭font-kerning、font-synthesis、连字与比例数字，强制 tabular-nums 对齐）：

@font-face { font-family: 'DOS'; src: url("#{$fp}Px437_IBM_EGA8.otf") format('opentype'); font-weight: normal; font-style: normal; font-kerning: none; font-synthesis: none; font-variant-ligatures: none; font-variant-numeric: tabular-nums; }

$fp变量在 _variables.scss 中定义为'../fonts/'。字体文件本身位于仓库根目录 fonts/Px437_IBM_EGA8.otf。这样一来，$font-family-sans-serif、$font-family-monospace、$font-family-base三者统一，全站文字都走同一个 DOS 点阵栈——这正是"全身 DOS"质感的第一层保障。

标题与段落：压平层级、统一节奏

Reboot 将全部标题元素（<h1>~<h6>）和<p>的margin-top移除，标题增加margin-bottom: .5rem，段落增加margin-bottom: 1rem，以便间距可控。

在 BOOTSTRA.386 的 _reboot.scss 中，标题不仅去掉了顶部 margin，还被统一压成同一字号的"正文级"标题：

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: $headings-margin-bottom; font-weight: normal; font-size: $font-size-base; } p { margin-top: 0; margin-bottom: $paragraph-margin-bottom; }

对应的变量（_variables.scss）：

• $font-size-base: 16px；
• $line-height-base: 14px，$line-height: $line-height-base（注意：16px 字号配合 14px 行高，是刻意为之的"像素对齐"）；
• $headings-margin-bottom: $line-height；
• 六个$h1-font-size~$h6-font-size全部等于$font-size-base，因此标题没有大小阶梯；
• $headings-font-weight: 400、$headings-color: $black。

真正的"DOS 标题样式"由紧随 Reboot 之后的 _type.scss 承担——h1, h2获得青色（$cyan: #00aaaa）背景块、缩进与 padding：

h1, h2, .h1, .h2 { margin-bottom: 0; margin-top: $line-height; font-family: $headings-font-family; font-weight: $headings-font-weight; line-height: $headings-line-height; text-indent: $space-width; background: $cyan; padding: $line-height-base $space-width; color: $headings-color; }

而 mixins/_dos.scss 中的 plain-headers() 提供了一键还原标题的"反制"mixin，供需要朴素标题的场景使用。文档中标题示例（h1. Bootstrap heading等六档）在 BOOTSTRA.386 下显示为同字号的青底黑字块，完全符合 DOS 应用里"菜单项反白"的观感。

列表：去掉顶部 margin、对齐像素网格

Reboot 对列表的规则：<ul>、<ol>、<dl>全部移除margin-top并加margin-bottom: 1rem；嵌套列表无margin-bottom。为简化样式、保持清晰层级与更好间距，描述列表也被重置：<dd>的margin-left归零并加margin-bottom: .5rem，<dt>加粗。

BOOTSTRA.386 源码中，这段规则（_reboot.scss）加入了复古主题特有的像素对齐逻辑，源码注释直言这是"为了让项目符号对齐到假 DOS 网格"：

ol, ul, dl { margin-top: 0; margin-left: 2px; // $space-width / 2; padding-left: $space-width / 2; margin-bottom: $line-height-base; } ol { li { padding-left: 0; } margin-left: $font-size-base; } li { padding-left: 0; margin-left: 6px; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: $dt-font-weight; } dd { margin-bottom: $line-height-base; margin-left: 0; // Undo browser default }

其中$space-width: $font-size-base / 2（即 8px，见 _variables.scss），列表缩进与间距全部围绕这个 8px 网格展开，保证每个字符位都对在像素格上。

预格式化文本：<pre>的间距重置

Reboot 将<pre>的margin-top移除，margin-bottom改用rem单位。BOOTSTRA.386 的实现（_reboot.scss）同样基于$line-height，并补上overflow: auto防止内容溢出：

pre, code, kbd, samp { font-family: $font-family-monospace; @include font-size(1em); // Correct the odd `em` font sizing in all browsers. } pre { margin-top: 0; margin-bottom: $line-height; overflow: auto; }

由于$font-family-monospace就是 DOS 栈，<pre>、<code>天然以点阵字体呈现，非常适合展示 DOS 风格的命令输出与配置文本。

表格：折叠边框、统一对齐

Reboot 对表格做了小幅调整：美化<caption>、折叠边框（border-collapse: collapse）、全表text-align一致。边框、内边距等更多细节交给.table类（见 tables.md）。

BOOTSTRA.386 的 _reboot.scss 进一步把表头做成反白样式：

table { border-collapse: collapse; // Prevent double borders border-spacing: 0; } caption { padding-top: $table-cell-padding; padding-bottom: $table-cell-padding; color: $table-caption-color; text-align: left; caption-side: bottom; } th { // Matches default `<td>` alignment by inheriting from the `<body>`, or the // closest parent with a set `text-align`. text-align: inherit; font-weight: normal; color: $white; }

表格相关变量在 _variables.scss 中也被复古化：$table-cell-padding: 0、$table-accent-bg: $black、$table-hover-bg: $black、$table-color: $body-color。效果是：表头白字、无内边距、奇偶行与悬停用纯黑区分——像极了 DOS 时代数据库报表的打印样式。

表单：去掉"现代感"的装饰

Reboot 对表单元素的基线改动，文档列得很清楚：

• <fieldset>无边框、无 padding、无 margin，方便直接当作输入控件的包装器；
• <legend>被重排为类似标题的展示；
• <label>设为display: inline-block，允许施加 margin；
• <input>、<select>、<textarea>、<button>大多由 Normalize 处理，Reboot 额外移除它们的 margin 并设置line-height: inherit；
• <textarea>只允许垂直 resize（水平拉伸会破坏页面布局）；
• <button>与<input>按钮在:not(:disabled)时使用cursor: pointer。

BOOTSTRA.386 在 _reboot.scss 中对表单做了更彻底的"去 GUI 化"：

• label：display: inline-block; margin-bottom: 0；
• button：去掉背景、边框、圆角与 padding（background: none; border: none; border-radius: 0; padding: 0），直接消除 macOS Chrome 的默认圆角与 Windows 按钮浮雕感；
• input, button, select, optgroup, textarea：margin: 0且font: 400 $font-size-base 'DOS' !important，用!important强行接管所有表单控件字体——这是复古等宽风格得以贯彻的关键一行；
• button, select：text-transform: none；
• textarea：overflow: auto; resize: vertical；
• fieldset：min-width: 0; padding: 0; margin: 0; border: 0；
• legend：display: block; width: 100%，带margin-bottom: $line-height-base；
• 指针光标受开关控制：@if $enable-pointer-cursor-for-buttons（_reboot.scss）——关闭该变量即可还原普通箭头光标。

配套的表单控件颜色变量（_variables.scss）也是 DOS 配色：$input-bg: $blue（#000084）、$input-color: $white。文档示例中完整的<fieldset>表单（文本输入、select、checkbox、radio、textarea、date、time、output 以及禁用按钮组）在编译后的主题下，呈现为蓝底白字的命令行表单。

杂项元素：address、blockquote、abbr、summary

Address

<address>的默认font-style: italic被重置为normal，line-height改为继承，并补上margin-bottom: 1rem。BOOTSTRA.386 实现于 _reboot.scss，margin-bottom采用$line-height-base（14px，贴合网格）。联系信息可以用<br>强制换行保持格式。

Blockquote

浏览器默认的margin: 1em 40px被重置为0 0 1rem，与其他元素保持一致（_reboot.scss）。文档示例使用.blockquote类，实际排版（等宽引用、无衬线装饰）由主题的 type 样式完成。

Inline 元素

<abbr>获得基础样式以在段落中突出。BOOTSTRA.386 在 _reboot.scss 中处理得更"DOS"：去掉下划线装饰（text-decoration: none），cursor: help，并关闭text-decoration-skip-ink。

此外，主题对<b>/<strong>和<em>做了标志性的字符替换——_reboot.scss 用伪元素给加粗文本两侧加上*、给斜体文本两侧加上/，因为点阵字体没有粗斜体，用 ASCII 字符模拟是最忠实的 DOS 做法：

b, strong { font-weight: normal; &::before, &::after { content: '*'; } } em { font-style: normal; &::before, &::after { content: "/"; } }

Summary

<summary>的默认cursor: text被重置为pointer，提示可点击交互（_reboot.scss）。<details>/<summary>在等宽字体下展开收起的效果，与文档示例一致。

HTML5[hidden]属性：加!important防覆盖

HTML5 新增全局属性[hidden]，浏览器默认样式为display: none。借鉴 PureCSS 的思路，Reboot 将其强化为：

[hidden] { display: none !important; }

!important防止display被意外覆盖。由于 IE10 不原生支持[hidden]，这份显式声明恰好绕过该兼容问题。用法示例：

<input type="text" hidden>

BOOTSTRA.386 的实现位于 _reboot.scss，与文档描述完全一致。

需要特别注意的兼容性警告（文档原样保留）：[hidden]与 jQuery 的$(...).hide()/$(...).show()不兼容，因此官方并不特别推崇用它替代其他 display 管理手段。若只是想"切换可见性"——不改动display、元素仍占据文档流——应改用.invisible工具类（见 visibility 工具类）。此外，_reboot.scss 还定义了 DOS 配色的选中态：::selection白字青底（$cyan）。

如何基于这些变量定制自己的复古基线

如果你想按 BOOTSTRA.386 的思路定制主题，编译链路的入口非常清晰：bootstrap.scss 依次导入functions→variables→mixins→root→reboot→ ... →dos→utilities→print；bootstrap-reboot.scss 则只包含functions、variables、mixins、reboot。主题的全部"开关"集中在 _variables.scss 中，最核心的几个：

这些变量通过!default声明，意味着你可以复制一份_variables.scss覆盖默认值后重新用node-sass编译（package.json 中的css-compile-main脚本即为标准编译命令），即可把"DOS 感"迁移到任意 Bootstrap 4.4 项目上。

小结

Reboot 在 BOOTSTRA.386 中承担的是"世界观地基"的角色：原版 Reboot 负责统一现代浏览器的基线（border-box、rem间距、单向 margin、原生字体栈），而 BOOTSTRA.386 通过对 _variables.scss 与 _reboot.scss 的双重改造，把这一地基整体替换为 DOS 世界观——16px/14px 的像素节奏、8px 网格、蓝色背景、黄色链接、*//包裹的粗斜体、!important兜底的[hidden]。后续所有组件样式（_type.scss、表格、表单、导航等）都建立在这层基线上，这正是 BOOTSTRA.386 能"一套主题还原整个 1980 年代"的根本原因。

• 前端
• UI组件