BOOTSTRA.386 设计手记：1983 年那场“剪纸 UX“与 Bootstrap 主题的叙事推演-平芜编程栈

前端
UI组件

【免费下载链接】BOOTSTRA.386

A vintage 1980s DOS inspired Twitter Bootstrap theme

项目地址：https://gitcode.com/gh_mirrors/bo/BOOTSTRA.386

1980 年代 DOS 风格 Bootstrap 主题 BOOTSTRA.386（本仓库即其源码与发行版集合）的floppy/notes.md是一份高度凝练的设计手记：它用人物弧光（Jay、Orion、Thomas、Gilda、Chuck）和一段 1983 年的时间线，推演了这套主题"从无到有"的构建节奏，同时以 McLuhan、Mumford 等媒介理论为底色，探讨了界面设计在人际距离、伦理立场与社会结构中的位置。本文以该笔记为骨架，对照仓库中 v2.3.1 / v4.4.1 / v5.3.1 的_dos.scss、dos.js、make-floppy.sh等源码，逐段还原这份手记背后的设计意图与可落地的实现依据——读完后，你将理解这套复古主题"为什么长这样"以及"它是怎么被一步步造出来的"。

一、手记的定位：一份"叙事驱动"的设计规划

floppy/notes.md不是传统意义上的技术规格文档，它更像导演的分镜脚本。开篇的 Todo 列表直指三个核心交付物：

construction paper ux scene（剪纸造型的用户界面场景）
为另外 4 个月补充内容（其中一条候选是Maybe http?）
为章节注入"冲突/洞见"以驱动叙事，避免变成对技术的干瘪恋物

作者明确写道："There's the drama of building things which is only good with conflict."——即构建之戏剧性只能靠冲突来成就。这解释了仓库中大量"看似炫技"的设计细节：它们不是装饰，而是这套主题希望唤起用户对技术史记忆的叙事道具。

值得注意：这份手记同时是作者创作流程的一部分。仓库根目录的 render-book.sh 显示，作者用 pandoc 把index.md编译为 PDF 并发布，而 make-floppy.sh 则负责把素材烧录成 1.44MB 的 DOS 软盘镜像——连"叙事"都用了软盘这种 1980 年代介质来承载。

二、人物原型：科技叙事的五个面向

手记给出了五位角色的定位，它们构成设计叙事的情感引擎：

Jay—— Hope & Dreams（希望与梦想）
Orion—— Openness & Adaptation（开放与适应）
Thomas—— Ethics & Ownership（伦理与所有权）
Gilda—— Discipline & Analysis（纪律与分析）
Chuck—— Feasibility & Communication (Interpersonal)（可行性与人际沟通）

并特别注明"The characters should be archetypes about the facets of technology. There's minitel."——角色是技术面向的原型，甚至援引了法国的 Minitel 终端作为参照。从仓库现状看，这套角色模型最终化作了主题的"组件人格"：网格（Discipline）、导航（Communication）、卡片（Ownership）、表单（Feasibility）各司其职，对应 v2.3.1 的less/与 v4.4.1 的scss/中井井有条的模块划分。

手记还记录了一个"casual sexism"（日常性别歧视）的场景提案：客户总是向男性工程师请教，尽管 Kat 提供了更多有效帮助。这个看似与代码无关的细节，实则是作者反复强调的道德立场的具象化——"Every interface is a moral stance"（每个界面都是一种道德立场）。

三、设计哲学：Mumford、McLuhan 与"界面即立场"

手记集中引用了两位媒介思想家的观点，并延伸出自己的界面观。以下是逐条展开：

3.1 Mumford：技术是语言，不是机器

作者转述："Mumford said it's not technology but language (symbols and communication) - techne social milieu and technological innovation——the 'wishes, habits, ideas, goals' as well as 'industrial processes' of a society." 即技术本质是语言（符号与沟通），是社会的"愿望、习惯、观念、目标"与"工业进程"的复合体。手记还补充了 Mumford 对战争与大众体育（游戏）的观察：它们被视作机械化生活的社会释放阀。

3.2 计算机作为"监工"，用户作为"被管理者"

手记提出一组尖锐的类比：殖民主义通过中介运作——被统治者、监工、所有者；计算机是监工，用户是被管理者。由此推导出中介（界面）的四个结构性职能：

职能	机制	目的
让被压迫者"可读"、可治理	降低信息不对称	主人无法直接监控千万人
可否认的执行	外包道德风险与操作摩擦	直接镇压成本高、风险大、失正当性
意识形态再生产	把结构性不平等包装成"英才统治"	强制不可持续，同意（或认命）更廉价
集体行动的缓冲	将下层阶级碎片化为互相竞争的小群体	团结是等级制的最大威胁

外加一条"临时且可撤销的特权"：不安全感催生服从，确保忠诚靠存在性依赖。这套框架解释了 BOOTSTRA.386 主题对"秩序感"的偏执——DOS 界面的严格网格与受控色彩，本质是对"纪律与分析"（Gilda）这一人格的视觉化。

3.3 McLuhan：电子脑、大兄弟与"环境即媒介"

手记引用了 McLuhan 著名的论断：世界没有变成亚历山大图书馆，而是变成了一台计算机、一个电子脑；当感官外化，"Big Brother 便进入内部"。并给出可操作的建议："Mcluhan recommends the browser turn to page 69 of any book and read it. If you like that page, buy the book."——先抽样再投入，这与仓库 README 主张的"先看 demo 再下载"一脉相承。

关键的设计推论是：

"a light bulb creates an environment by its mere presence"——灯炮因其存在本身便创造环境，界面亦然；
界面规划应强调人与生活空间的"有机关系"（organic relationship）；
由于 proxemics（近体学）与设备位置，计算机天然变得私人而亲密；屏幕越小，人们感到舒适的亲密层级越高。

3.4 作者自己的界面箴言

手记后半部分沉淀了作者本人的 UI 原则，可直接转译为设计规范：

"Unless your tools are insufficient your dreams are too small"：工具不足则梦想太小——所以这套主题执着于在 8px 字符格上做出完整组件库；
"Someone's gotta have an opinion. Either you or the user."：观点带来规则，规则带来结构，结构是可用的原始汤（primordial soup of usability）——主题内置强风格即是"替用户做决定"；
交互五要素：intimacy（亲密，快速且渐进）、cancelable（可取消）、temporality（时间性）、reversibility（可逆）、concrete（具体）；
"Every second you live is a form of living"：任何交互时间都是生命，因此界面设计要尊重用户的时间；
"The computer as a participant in the division of labor"：计算机是劳动分工的参与者，界面即工作台上的同事。

四、1983 年时间线：一个 Bootstrap 主题的"31 天冲刺"

手记主体是一份以 1983 年为舞台的构建时间线，从 11 月 Comdex 起笔，到次年 8 月 Jay 离开收束。按周展开如下（原笔记为手写潦草体，日期部分为作者补充推算）：

时间	事件
1982-11	Comdex（拉斯维加斯计算机展）
1983-03（约）	Jay 抵达（时间未定）
1983-04-01（周五）	Boston I（28 天时钟，3 月 4 日启动）
1983-04-08（周二）	Thomas 登场
1983-04-10	简历（Resume）
1983-04-11	面试（Interview）——Jay
1983-04-14（周一）	开工
04-15（周二）	—
04-16（周三）	Construction paper（剪纸原型）
04-17（周四）	Markup Proposal（HTML/CSS/JS 提案）
04-18（周五）	布局模型、间距流、语义色
04-21（周一）	DropDown 与 Navbar
04-22（周二）	设备方向与 12 列布局
04-23（周三）	按钮组与列表
04-24（周四）	表单、输入组与面包屑
04-25（周五）	Tooltip、Alert 与 Toast
04-28（周一）	Spinner、进度条与 Pager
05-01（周二）	Carousel、Jumbotron 与 Popover
05-02（周三）	卡片、徽章与 Navbar
05-03（周四）	Todo 应用与 SPA
05-04	Boston II
05 起	标准组织与 RFC
05 起	SAS 与 HTTP 协议
05 起	浏览器设计
1983-08	Jay 离开

这份时间线与仓库实际交付物高度吻合：v2.3.1 正是 Bootstrap 2.x 时代的完整主题，其less/目录下存在navbar.less、dropdowns.less、button-groups.less、breadcrumbs.less、tooltip.less、alerts.less、progress-bars.less、pagination.less、carousel.less、hero-unit.less、popovers.less、thumbnails.less、forms.less等一整套模块——与手记中"04-21 做下拉与导航、04-28 做加载指示器、05-01 做转盘与 Jumbotron"的排期一一对应。可以推断，作者把组件开发顺序写进了叙事，让"构建过程"本身成为故事。

4.1 为什么是"剪纸"起步：Construction Paper 的工程含义

手记把construction paper ux scene列为首要待办，并把 04-16 定为剪纸日。这并非儿童手工：在字符终端约束下，先以物理剪纸摆放间距与层级，再翻译成 CSS，是保证"每个边距都能整除字符宽度"的最直接手段。仓库源码印证了这一点——v4.4.1 的 mixins/_dos.scss 中，dos-margin-only、dos-padding-only等混合宏全部以8/$sz * $line-height、7/$sz * $space-width这类分数形式定义边距，注释明说"左、右边框其实要更厚一些"；dos-border-background甚至用四组box-shadow在四角"画"出边框。这种像素级较真，只有通过"先剪纸、后写码"才能系统性落地。

4.2 "Maybe http?"与时间线里的协议课

手记在"另外 4 个月的内容"待办中写下Maybe http?，时间线末尾又出现"standards bodies & rfcs、SAS & http protocols、browser design"。可以推断作者原本打算把叙事延伸到 1983 年之后的互联网史（RFC 与 HTTP 的诞生、浏览器设计）。结合仓库现状，这条线索最终沉淀为 v4/v5 的"浏览器即终端"体验：dos.js的滚动锁与字符光标、_dos.scss的自定义滚动条，都是在现代浏览器里复刻 1980 年代终端的行为。

五、从手记到实现：仓库源码对照

以下把手记中的抽象原则逐一映射到仓库中可验证的实现文件：

5.1 "快速且渐进"的加载动画：dos.js 的进度光栅

手记强调交互要 intimacy（快速且渐进）。v4.4.1 的 js/src/dos.js 是直接产物：_386全局对象提供fastLoad、onePass、speedFactor三个配置（README 中给出了默认值 false / false / 1.0 及示例_386 = { onePass: true, speedFactor: 1.25 }）。其加载算法以字符单元格（width=8、height=16）为单位，按rounds = (width * height) / speedFactor计算"扫描圈数"，用setInterval以 1ms 步进刷新#bar386与#cursor386；若页面body { visibility: hidden }（README 建议配合使用），则先完成第一遍"铺底"再触发第二遍光标飞过。该动画的时间正比于窗口面积，正是"渐进"原则的工程化。

v2.3.1 的 less/386.less 为这套动画定义了骨架：#wrap386全屏遮罩、#bar386底部进度条、#cursor386右下角光标，颜色取自 EGA 调色板的深蓝@blueDark与白色@white。dos.js还实现了magicCursor（跟随鼠标的字符块光标）、scrollLock（以字符高度为模数的滚动锁，把滚动量钳制在 16px 的倍数上）和centerNudger（对居中的奇数长度文本块右移一个字符宽度，修正 DOS 下的视觉居中误差）——这些细节让"字符网格"不再是装饰而是交互契约。

5.2 12 列网格与 4 位 EGA 色彩：1983 年的"语义色"

手记在 04-18 安排了"layout models, spacing flow, semantic colors"（布局模型、间距流、语义色）。仓库中的两处实现可为佐证：

网格：v2.3.1 的 less/grid.less 通过#grid > .core(...)与.fluid(...)生成 940px 固定网格与流体网格，span 类支持pull-right等对齐工具；v4.4.1 的scss/mixins/_grid-framework.scss则是 Bootstrap 4 的 12 列弹性网格。手记中"04-22 设备方向与 12 列布局"与现代响应式设计在时间线上形成了有趣的对照——1983 年的"设备方向"对应的是 CGA/EGA 不同分辨率。
色彩：v4.4.1 的 scss/_variables.scss 完整保留了 EGA 16 色调色板（注释明确标注取值来自维基百科的 Enhanced Graphics Adapter 条目）：$blue: #000084、$green: #00aa00、$red: #aa0000、$magenta: #aa00aa、$brown: #aa5500，以及亮度版$blueBright: #55f、$greenBright: #5f5、$cyanBright: #5ff、$redBright: #f55、$magentaBright: #f5f、$yellow: #fefe54；灰阶也被有意压缩（$gray-100至$gray-500全部映射为#777，注释直言"this isn't really correct but there's a legibility issue"）。这就是手记所说"语义色"的源头——4 位亮度映射让每个颜色都携带"高亮/普通"的语义层级。

5.3 "按钮/面包屑/进度条"：一份可核对的组件清单

时间线列出的组件，几乎都能在仓库中找到同名文件：

DropDown 与 Navbar → less/dropdowns.less、less/navbar.less
按钮组与列表 → less/button-groups.less、less/navs.less
面包屑 → less/breadcrumbs.less
Tooltip / Alert / Toast → less/tooltip.less、less/alerts.less；Toast 属 v4/v5 新增，见 v4.4.1/scss/_toasts.scss
Spinner / 进度条 / Pager → less/progress-bars.less、less/pagination.less；Spinner 为 v4 新增，见 v4.4.1/scss/_spinners.scss
Carousel / Jumbotron / Popover → less/carousel.less、less/hero-unit.less、less/popovers.less
卡片 / 徽章 → v4.4.1/scss/_card.scss、less/labels-badges.less

以 less/hero-unit.less 为例，可见 DOS 语汇如何渗透进组件：border: 4px double复刻文本模式下的粗框，text-decoration: blink直接启用 CSS 闪烁，标题使用blink与居中，圆角被强制为0（.border-radius(0)）——圆角在这套主题里是"不存在的概念"。v4.4.1 的mixins/_dos.scss更进一步：dos-border-active通过position: relative; top: 8px; left: 8px模拟按钮按下位移且不引起布局跳动，dos-solid-border组合单线边框与四角 shadow 制造"双线字符框"效果。

5.4 "浏览器即 1983 年的终端"：从手记的 browser design 到 _dos.scss

时间线末段的"browser design"在手记语境下有两层含义：既是 1990 年代浏览器史叙事，也是本主题"把浏览器调校成 DOS 终端"的工程目标。v4.4.1 的 scss/_dos.scss 展示了后者的实现细节：

光标.bootstra-cursor：mix-blend-mode: difference的字符块光标，宽$space-width、高$line-height，配合body.bootstra-enable-cursor * { cursor: none !important; }隐藏系统鼠标；
滚动条全部重绘为 8px 宽的黑底细条，箭头按钮使用arrow-up-black.svg/arrow-down-black.svg位图；
字符网格基准$line-height（16px）与$space-width（8px）贯穿全部尺寸变量，保证任何组件都能在网格上对齐——这正是手记"structure is the primordial soup of usability"的代码化表达。

v5.3.1 的 scss/_dos.scss 保留了几乎一致的实现，说明这套"终端协议"从 v4 稳定延续到 v5。

六、这些原则如何用在你自己的页面上

手记不是一篇"怎么做"的教程，但它的原则可以立刻转化为可执行的设计检查清单：

一切对齐到 8×16 字符网格：把$line-height视为 16px、$space-width视为 8px，任何 padding、margin、边框宽度都取整数倍；
禁用圆角与阴影滥用：圆角设为 0，层次用"双线框"（4px double）或四角box-shadow表达，参照 less/hero-unit.less 与 mixins/_dos.scss；
色彩只用 EGA 16 色调色板：普通色与亮色成对出现，#000084蓝、#00aa00绿、#fefe54黄是这套主题的招牌组合，变量定义见 scss/_variables.scss；
把加载动画做成"渐进扫描"：参考 dos.js 的光栅推进算法，用_386对象暴露fastLoad、onePass、speedFactor供用户覆盖；配合 README 建议的body { visibility: hidden }与<noscript>兜底样式；
为"无 JS"用户兜底：README 明确给出把visibility: visible写进<noscript><style>的兼容方案——这呼应了手记"用户是协作者而非顾客"的立场。

七、结语：作为道德立场的界面

回到手记开篇的自我提醒："It can't just be some dry fetishization of technology." BOOTSTRA.386 的价值不在于把页面"打扮"得像 1983 年，而在于用一套严格的自约束（8×16 网格、EGA 色板、零圆角）回答了手记留下的问题："Every interface is a moral stance." 当你启用dos.js的字符光标、把滚动锁进 16px 的模数、让按钮按下时精确位移 8px，你其实是在采用笔记中 Gilda（纪律与分析）、Thomas（伦理与所有权）与 Chuck（可行性与沟通）共同签署的那份设计契约——屏幕越小越亲密、结构是可用的前提、工具不足则梦想太小。

读者若想亲手验证手记的推演，可以从 floppy/notes.md 出发，依次对照 make-floppy.sh（软盘镜像构建）、v2.3.1/less/386.less（动画骨架）、v4.4.1/js/src/dos.js（交互实现）与 v4.4.1/scss/mixins/_dos.scss（字符度量体系），即可在源码层面完整走通"1983 叙事 → 组件排期 → 现代实现"的整条链路。