BOOTSTRA.386 实战：打造复古 DOS 风格的 Bootstrap 5.3 Navbar 导航栏-平芜编程栈

前端
UI组件

【免费下载链接】BOOTSTRA.386

A vintage 1980s DOS inspired Twitter Bootstrap theme

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

本文以 BOOTSTRA.386 仓库中 v5.3.1 版本文档 navbar.md 为核心骨架，完整讲解 Bootstrap 5.3 Navbar 组件的原理、支持内容、配色方案、响应式折叠行为与底层 CSS/Sass 实现，并结合本仓库v5.3.1/scss/与v5.3.1/js/src/的真实源码进行印证。读完本文，你将能够在复古 386 风格主题下独立搭建品牌区、导航菜单、搜索表单、下拉菜单与 offcanvas 抽屉，并理解navbar-expand-*断点折叠、data-bs-theme主题化与 CSS 变量定制机制，做到"既能写、又懂原理"。

一、Navbar 工作原理：先理解四个前提

在动手写代码之前，需要先明确 Bootstrap 5.3 Navbar 的几个核心约束（这些结论直接来自文档原文，并可在 v5.3.1/scss/_navbar.scss 的源码中得到印证）：

必须成对出现：Navbar 需要外层.navbar包装元素，并搭配.navbar-expand{-sm|-md|-lg|-xl|-xxl}中的一个断点类，用于控制响应式折叠行为；同时还需使用颜色方案类（如data-bs-theme）来确定外观。
默认是流式（fluid）布局：Navbar 及其内容默认占满容器宽度，可以通过容器（Containers）来限制水平宽度。
对齐靠工具类：Navbar 内部的间距与对齐，主要借助 spacing 与 flex 工具类（如me-auto、mb-2、d-flex）来完成，而不是内联样式。
折叠依赖 Collapse 插件：Navbar 的响应式折叠行为由 Bootstrap 的 Collapse JavaScript 插件驱动，对应源码为 v5.3.1/js/src/collapse.js。

除此之外，无障碍（Accessibility）是文档强调的硬性要求：

尽量使用语义化<nav>元素；如果出于结构原因使用了<div>等通用元素，必须为每个 navbar 添加role="navigation"，以显式标识为辅助技术可识别的 landmark 区域。
当前页/当前项必须通过aria-current标注：整页导航用aria-current="page"，一组内的当前项用aria-current="true"。
官方文档同时提醒（v5.3 新增的 prefers-reduced-motion 提示）：折叠与展开动画应尊重用户的「减少动态效果」系统偏好，Collapse 插件在实现中通过show/shown/hide/hidden事件与过渡回调来处理动画时序。

版本演进方面有一个重要变化（文档明确标注）：

New in v5.2.0:Navbars can be themed with CSS variables that are scoped to the.navbarbase class..navbar-lighthas been deprecated and.navbar-darkhas been rewritten to override CSS variables instead of adding additional styles.

也就是说，从 v5.2 开始 Navbar 的主题化全面转向CSS 变量（Custom Properties），.navbar-light已废弃（源码中仅保留@include deprecate(...)提示，见 v5.3.1/scss/_navbar.scss#L266-L268），.navbar-dark则被重写为"覆盖 CSS 变量"而非追加新样式。

二、支持的内容：七个内置子组件

Navbar 内置了对以下子组件的支持，按需选用即可：

子组件类	用途
`.navbar-brand`	公司、产品或项目名称
`.navbar-nav`	全高、轻量的导航（支持下拉菜单）
`.navbar-toggler`	配合 Collapse 插件使用的折叠按钮，也可配合其他导航切换行为
flex / spacing 工具类	用于任意表单控件与操作按钮的布局
`.navbar-text`	垂直居中的文本串
`.collapse.navbar-collapse`	按父级断点分组并隐藏 navbar 内容
`.navbar-scroll`（可选）	为展开的 navbar 内容设置`max-height`并启用滚动

下面是一个"全家福"示例：浅色主题、在lg（大屏）断点自动折叠的完整响应式 Navbar。它同时用到了bg-body-tertiary（背景工具类）与me-auto、mb-2、mb-lg-0、me-2（间距工具类）：

<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button"><!-- As a link --> <nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav> <!-- As a heading --> <nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">Navbar</span> </div> </nav>

图片品牌：用<img>替换文本，示例中width="30" height="24"用于固定图片尺寸：

<nav class="navbar bg-body-tertiary"> <div class="container"> <a class="navbar-brand" href="#"> <img src="logo.svg" alt="Bootstrap" width="30" height="24"> </a> </div> </nav>

图文并茂：注意图片上必须追加.d-inline-block与.align-text-top，才能与文字基线正确对齐：

<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top"> Bootstrap </a> </div> </nav>

从源码看，.navbar-brand的样式完全由 CSS 变量驱动（字号、内边距、外边距、颜色与悬停色），见 v5.3.1/scss/_navbar.scss#L66-L80：

.navbar-brand { padding-top: var(--#{$prefix}navbar-brand-padding-y); padding-bottom: var(--#{$prefix}navbar-brand-padding-y); margin-right: var(--#{$prefix}navbar-brand-margin-end); @include font-size(var(--#{$prefix}navbar-brand-font-size)); color: var(--#{$prefix}navbar-brand-color); text-decoration: if($link-decoration == none, null, none); white-space: nowrap; &:hover, &:focus { color: var(--#{$prefix}navbar-brand-hover-color); text-decoration: if($link-hover-decoration == underline, none, null); } }

2.2 导航`.navbar-nav`

.navbar-nav基于.nav选项体系，加上自己的修饰类，且需要配合 toggler 类才能获得正确的响应式样式。文档特别强调一个行为：

Navigation in navbars will also grow to occupy as much horizontal space as possibleto keep your navbar contents securely aligned.

即导航链接会尽量占据可用水平空间。用.active类标记当前页，同时必须附加aria-current属性。

<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button"><nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button"><nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button"><nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </nav>

.navbar的直接子元素使用 flex 布局，默认justify-content: space-between（源码见 v5.3.1/scss/_navbar.scss#L30-L47：display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between）。因此品牌区与表单会自动分居两侧：

<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand">Navbar</a> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </nav>

输入组（Input group）同样可用。如果整个 navbar 就是一个表单（或大部分是表单），可以直接用<form>作为容器，省掉一层 HTML：

<nav class="navbar bg-body-tertiary"> <form class="container-fluid"> <div class="input-group"> <span class="input-group-text" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> </form> </nav>

各类按钮也支持嵌套在表单中，同时这也是演示垂直对齐工具类的经典场景——不同尺寸的元素可以通过align-items系列工具类对齐：

<nav class="navbar bg-body-tertiary"> <form class="container-fluid justify-content-start"> <button class="btn btn-outline-success me-2" type="button">Main button</button> <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button> </form> </nav>

2.4 文本`.navbar-text`

.navbar-text用于放置垂直居中、水平有适当间距的文本串，它调整了垂直对齐与水平间距（源码见 [v3.3.2/scss/_navbar.scss 同构实现，v5.3.1 中对应 v5.3.1/scss/_navbar.scss#L121-L131）：

<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <span class="navbar-text"> Navbar text with an inline element </span> </div> </nav>

也可以与品牌、导航混合使用——在折叠区内部使用me-auto将导航推到左侧、文本顶到右侧：

<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar w/ text</a> <button class="navbar-toggler" type="button"><!-- 深色主题 + 深色背景 --> <nav class="navbar bg-dark border-bottom border-body">.navbar-dark, .navbar[data-bs-theme="dark"] { // scss-docs-start navbar-dark-css-vars --#{$prefix}navbar-color: #{$navbar-dark-color}; --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color}; --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color}; --#{$prefix}navbar-active-color: #{$navbar-dark-active-color}; --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color}; --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color}; --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color}; --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; // scss-docs-end navbar-dark-css-vars }

这里data-bs-theme="dark"与.navbar-dark走的是完全相同的选择器组，且没有追加任何新样式，只是重写了同一组 CSS 变量——这就是"变量主题化"与旧版"追加样式"的本质区别。同时，当全局启用深色模式（$enable-dark-mode）时，源码还会在color-mode(dark)作用域内自动替换 toggler 图标背景（v5.3.1/scss/_navbar.scss#L284-L289）。

四、容器 Containers

虽然并非必需，但可以：

在页面层用.container包裹整个 navbar 以居中——注意内部仍需再放一个 container；
或者在.navbar内部加 container，只让固定或静态顶部 navbar 的内容居中。

外层容器示例：

<div class="container"> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav> </div>

内层使用任意响应式容器（.container-sm/-md/-lg/-xl/-xxl、.container-fluid）可以控制内容宽度。例如container-md让内容在 md 及以上断点受限、更窄视口下占满全宽：

<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-md"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav>

源码对容器兼容的处理非常巧妙：在 v5.3.1/scss/_navbar.scss#L42-L58 中定义了一个%container-flex-properties占位符（display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between），然后让.navbar > .container、.navbar > .container-fluid以及所有.navbar > .container#{断点后缀}（通过$container-max-widthsmap 遍历生成）都@extend它——因为 flex 属性不会继承，这样做是为了让 navbar 内部嵌套的容器元素保持与.navbar一致的 flex 行为。

五、位置 Placement

借助 position 工具类可以将 navbar 放置在非静态位置。文档给出四种经典形态：

fixed-top：固定到顶部；
fixed-bottom：固定到底部；
sticky-top：吸顶——随页面滚动，滚到顶部后停留；
sticky-bottom：吸底——随页面滚动，滚到底部后停留。

<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Default</a> </div> </nav> <nav class="navbar fixed-top bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Fixed top</a> </div> </nav> <nav class="navbar fixed-bottom bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Fixed bottom</a> </div> </nav> <nav class="navbar sticky-top bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Sticky top</a> </div> </nav> <nav class="navbar sticky-bottom bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Sticky bottom</a> </div> </nav>

文档特别提醒一个坑：fixed navbar 使用position: fixed，会脱离 DOM 正常文档流，可能遮挡正文内容，通常需要自定义 CSS（例如给<body>增加padding-top）来避免元素重叠。仓库自带的示例页面可作为参考实现：navbar-static 示例（静态顶栏）、navbar-fixed 示例（固定顶栏）与 navbar-bottom 示例（底部导航），carousel 示例与 dashboard 示例中也能看到fixed-top/sticky-top的真实组合用法。

六、滚动 Scrolling

给.navbar-nav（或 navbar 的其他子组件）添加.navbar-nav-scroll类，可在折叠状态下让可切换内容内部垂直滚动。

默认滚动阈值是75vh（视口高度的 75%）；
可以通过局部 CSS 自定义属性--bs-scroll-height覆盖；
在大视口、navbar 展开时，内容表现与普通 navbar 一致（不滚动）。

需要注意overflow的副作用：启用overflow-y: auto（滚动所必需）时，overflow-x会等效为auto，可能裁切部分横向内容。

带自定义滚动高度的示例：

<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar scroll</a> <button class="navbar-toggler" type="button">.navbar-nav-scroll { max-height: var(--#{$prefix}scroll-height, 75vh); overflow-y: auto; }

在navbar-expand-*命中大屏断点后，.navbar-nav-scroll会被重置为overflow: visible（v5.3.1/scss/_navbar.scss#L217-L219），即"折叠时才滚动、展开时恢复默认"。

七、响应式行为 Responsive behaviors

Navbar 借助.navbar-toggler、.navbar-collapse与.navbar-expand{-sm|-md|-lg|-xl|-xxl}决定内容在哪个断点折叠到按钮之后；再配合其他工具类，可以精确控制某个元素的显隐时机。

两个极端形态：

从不折叠：加.navbar-expand（不带断点后缀）；
始终折叠：不加任何.navbar-expand类。

7.1 Toggler 按钮的三种布局

toggler 默认左对齐；但若它紧跟.navbar-brand之类的兄弟元素，会自动贴到最右侧；调换标记顺序即可反转 toggler 的位置。

最小断点下不显示品牌，toggler 在最左：

<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <button class="navbar-toggler" type="button"><nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button"><nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <button class="navbar-toggler" type="button"><div class="collapse" id="navbarToggleExternalContent"><nav class="navbar bg-body-tertiary fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#">Offcanvas navbar</a> <button class="navbar-toggler" type="button"><nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top"> <a class="navbar-brand" href="#">Offcanvas navbar</a> <button class="navbar-toggler" type="button"><nav class="navbar navbar-dark bg-dark fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#">Offcanvas dark navbar</a> <button class="navbar-toggler" type="button">.navbar { --#{$prefix}navbar-padding-x: ...; --#{$prefix}navbar-padding-y: ...; --#{$prefix}navbar-color: ...; --#{$prefix}navbar-hover-color: ...; --#{$prefix}navbar-disabled-color: ...; --#{$prefix}navbar-active-color: ...; --#{$prefix}navbar-brand-padding-y: ...; --#{$prefix}navbar-brand-margin-end: ...; --#{$prefix}navbar-brand-font-size: ...; --#{$prefix}navbar-brand-color: ...; --#{$prefix}navbar-brand-hover-color: ...; --#{$prefix}navbar-nav-link-padding-x: ...; --#{$prefix}navbar-toggler-padding-y: ...; --#{$prefix}navbar-toggler-padding-x: ...; --#{$prefix}navbar-toggler-font-size: ...; --#{$prefix}navbar-toggler-icon-bg: ...; --#{$prefix}navbar-toggler-border-color: ...; --#{$prefix}navbar-toggler-border-radius: ...; --#{$prefix}navbar-toggler-focus-width: ...; --#{$prefix}navbar-toggler-transition: ...; }

.navbar-nav上还有一组补充变量（v5.3.1/scss/_navbar.scss#L87-L96），它把 nav-link 的颜色系联到 navbar 颜色：

.navbar-nav { --#{$prefix}nav-link-padding-x: 0; --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y}; --#{$prefix}nav-link-font-size: ...; // 通过 rfs() 生成 --#{$prefix}nav-link-font-weight: ...; --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color); --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color); --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color); }

而data-bs-theme="dark"/.navbar-dark的定制，正是"只覆盖变量、不重复选择器"的范例（见上文颜色方案一节的源码）。

9.2 Sass 变量

所有 navbar 通用变量定义在 v5.3.1/scss/_variables.scss#L1278-L1305：

变量	默认值	说明
`$navbar-padding-y`	`0`（`spacer * .5`被注释）	垂直内边距
`$navbar-padding-x`	`null`	水平内边距（null 时 CSS 变量回退为 0）
`$navbar-nav-link-padding-x`	`$_font-size-base-px`	展开态导航链接水平内边距
`$navbar-brand-font-size`	`$font-size-lg`	品牌字号
`$navbar-brand-height`	`$navbar-brand-font-size * $line-height-base`	用于计算品牌高度
`$navbar-brand-padding-y`	`0`	品牌垂直内边距
`$navbar-brand-margin-end`	`$_font-size-base-px`	品牌右侧外边距
`$navbar-toggler-padding-y/x`	`0`	toggler 内边距
`$navbar-toggler-font-size`	`$font-size-lg`	toggler 字号
`$navbar-toggler-border-radius`	`$btn-border-radius`	toggler 圆角
`$navbar-toggler-focus-width`	`$btn-focus-width`	toggler 焦点环宽度
`$navbar-toggler-transition`	`box-shadow .15s ease-in-out`	toggler 过渡
`$navbar-light-color`	`rgba(emphasis-color-rgb, .65)`	浅色主题链接色
`$navbar-light-hover-color`	`rgba(emphasis-color-rgb, .8)`	悬停色
`$navbar-light-active-color`	`rgba(emphasis-color-rgb, 1)`	激活色
`$navbar-light-disabled-color`	`rgba(emphasis-color-rgb, .3)`	禁用色
`$navbar-light-icon-color`	`rgba($body-color, .75)`	toggler 图标色
`$navbar-light-toggler-icon-bg`	内联 SVG（三横线）	浅色主题 toggler 图标
`$navbar-light-toggler-border-color`	`rgba(emphasis-color-rgb, .15)`	浅色主题 toggler 边框
`$navbar-light-brand-color`/`-hover-color`	均取`$navbar-light-active-color`	品牌色

深色主题专用变量（v5.3.1/scss/_variables.scss#L1308-L1317）：

变量	默认值
`$navbar-dark-color`	`rgba($white, .55)`
`$navbar-dark-hover-color`	`rgba($white, .75)`
`$navbar-dark-active-color`	`$white`
`$navbar-dark-disabled-color`	`rgba($white, .25)`
`$navbar-dark-icon-color`	`$navbar-dark-color`
`$navbar-dark-toggler-icon-bg`	内联 SVG（白色三横线）
`$navbar-dark-toggler-border-color`	`rgba($white, .1)`
`$navbar-dark-brand-color`/`-hover-color`	均取`$navbar-dark-active-color`

注意toggler-icon-bg默认值是内联 data URI SVG（三个圆角 stroke 横线，stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"），并通过escape-svg()转义后注入 CSS 变量——这意味着想要自定义汉堡图标，只需覆盖--bs-navbar-toggler-icon-bg即可。

9.3 Sass 循环生成响应式类

.navbar-expand{-sm|-md|-lg|-xl|-xxl}这些响应式折叠类并非手写，而是通过$grid-breakpointsmap 循环生成的（v5.3.1/scss/_navbar.scss#L190-L260）：

.navbar-expand { @each $breakpoint in map-keys($grid-breakpoints) { $next: breakpoint-next($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($next, $grid-breakpoints); &#{$infix} { @include media-breakpoint-up($next) { flex-wrap: nowrap; justify-content: flex-start; .navbar-nav { flex-direction: row; .dropdown-menu { position: absolute; } .nav-link { padding-right: var(--#{$prefix}navbar-nav-link-padding-x); padding-left: var(--#{$prefix}navbar-nav-link-padding-x); } } .navbar-nav-scroll { overflow: visible; } .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-toggler { display: none; } .offcanvas { /* 还原为静态内联导航 */ } } } } }

这解释了前面所有行为的内在机制：命中断点后，.navbar变为nowrap且justify-content: flex-start，.navbar-nav变为横向、.dropdown-menu变为绝对定位、.navbar-collapse强制display: flex、.navbar-toggler隐藏、.navbar-nav-scroll恢复可见溢出、offcanvas 还原为普通导航。折叠/展开完全由这一套媒体查询驱动的规则决定。

十、在 BOOTSTRA.386 复古主题中的实践要点

BOOTSTRA.386 是一个"让网页看起来像 1980 年代 DOS 界面"的 Bootstrap v2/3/4/5 主题（见仓库根目录 README.md），v5.3.1/目录本身就是一个针对 Bootstrap 5.3.1 的 fork，包含完整的scss/源码、js/src组件源码与site/文档站。

在 386 复古语境下使用 Navbar，需要注意以下几点：

主题化的 DOS 质感来自全局基底：复古观感主要由 v5.3.1/scss/_dos.scss 这类全局文件贡献——例如像素风滚动条（::-webkit-scrollbar系列）、DOS 光标（.bootstra-cursor，mix-blend-mode: difference的#cbd448方块）以及隐藏原生光标的body.bootstra-enable-cursor规则。Navbar 本身在 386 主题中仍然遵循 Bootstrap 5.3 的组件规范，无需特殊类名即可与全局复古风格融合。
配色方案优先走data-bs-theme：由于 v5.3 已弃用.navbar-dark，复古主题下做深色导航条应使用<nav class="navbar bg-dark">

前端
UI组件

【免费下载链接】BOOTSTRA.386
A vintage 1980s DOS inspired Twitter Bootstrap theme
项目地址：https://gitcode.com/gh_mirrors/bo/BOOTSTRA.386
点击查看免费下载相关推荐
终极BOOTSTRA.386使用指南：如何快速创建复古DOS风格网页
终极BOOTSTRA.386使用指南：如何快速创建复古DOS风格网页 BOOTSTRA.386是一个基于MySQL 5.6的数据库管理系统，提供了各种数据库管理
前端UI组件
react-native-autolink完全指南：如何在React Native中自动链接文本内容
react native autolink完全指南：如何在React Native中自动链接文本内容 在React Native开发中，处理文本中的链接、电话号
Win95 CSS：打造复古风格的Bootstrap主题
Win95 CSS：打造复古风格的Bootstrap主题 Win95 CSS 是一个开源项目，其主要使用 HTML 和 CSS 编程语言。该项目旨在为 Boot
前端
上一篇：Quasar useId Composable 实战指南：为组件生成稳定且规避 Hydration 错误的唯一 ID
下一篇：react-admin `<ArrayField>` 完全指南：渲染内嵌对象数组字段的实战详解

BOOTSTRA.386 实战：打造复古 DOS 风格的 Bootstrap 5.3 Navbar 导航栏

【免费下载链接】BOOTSTRA.386

一、Navbar 工作原理：先理解四个前提

二、支持的内容：七个内置子组件

2.2 导航`.navbar-nav`

2.4 文本`.navbar-text`

四、容器 Containers

五、位置 Placement

六、滚动 Scrolling

七、响应式行为 Responsive behaviors

7.1 Toggler 按钮的三种布局

9.2 Sass 变量

9.3 Sass 循环生成响应式类

十、在 BOOTSTRA.386 复古主题中的实践要点

【免费下载链接】BOOTSTRA.386

相关推荐

终极BOOTSTRA.386使用指南：如何快速创建复古DOS风格网页

react-native-autolink完全指南：如何在React Native中自动链接文本内容

Win95 CSS：打造复古风格的Bootstrap主题

CentOS YUM安装报错/dev/mapper/cl-root空间不足的根因与修复

SpringBoot+Vue全栈企业工资管理系统开发实践

CTF杂项解题实战：从文件识别到流量取证的完整工具链

RGB、HSV、HSI颜色模型详解：从原理到实战选型

用CodeGraph打造代码图谱：从依赖分析到架构治理实战

如何编写RustCast自定义Shell命令：绑定快捷键与传参的完整指南

【免费下载链接】BOOTSTRA.386

一、Navbar 工作原理：先理解四个前提

二、支持的内容：七个内置子组件

2.2 导航.navbar-nav

2.4 文本.navbar-text

四、容器 Containers

五、位置 Placement

六、滚动 Scrolling

七、响应式行为 Responsive behaviors

7.1 Toggler 按钮的三种布局

9.2 Sass 变量

9.3 Sass 循环生成响应式类

十、在 BOOTSTRA.386 复古主题中的实践要点

【免费下载链接】BOOTSTRA.386

相关推荐

终极BOOTSTRA.386使用指南：如何快速创建复古DOS风格网页

react-native-autolink完全指南：如何在React Native中自动链接文本内容

Win95 CSS：打造复古风格的Bootstrap主题

CentOS YUM安装报错/dev/mapper/cl-root空间不足的根因与修复

SpringBoot+Vue全栈企业工资管理系统开发实践

CTF杂项解题实战：从文件识别到流量取证的完整工具链

RGB、HSV、HSI颜色模型详解：从原理到实战选型

用CodeGraph打造代码图谱：从依赖分析到架构治理实战

如何编写RustCast自定义Shell命令：绑定快捷键与传参的完整指南

2.2 导航`.navbar-nav`

2.4 文本`.navbar-text`