企业官网建设流程全解析

• 前端
• UI组件

导读

RTL（Right-to-Left，从右到左）是阿拉伯语、希伯来语、波斯语等语言的排版方向。本文围绕 BOOTSTRA.386 v5.3.1（Bootstrap 5.3.1 的复古 DOS 风格主题）的 RTL 官方指南，系统讲解如何在页面中启用 RTL、理解其基于 RTLCSS 的构建方案、掌握start/end逻辑属性（logical properties）的用法，以及如何从 Sass 源码层面定制 RTL 输出（值指令、字体栈替换、同页 LTR/RTL 共存）。读完后，你将能够为基于 BOOTSTRA.386 的站点提供完整的双语（LTR + RTL）布局能力。

注意：Bootstrap 的 RTL 特性目前仍处于实验性阶段，会根据社区反馈持续演进。如果你发现问题或有改进建议，可以在仓库的 issues 中提出。

启用 RTL 的两条硬性要求

要为 BOOTSTRA.386 驱动的页面开启 RTL，HTML 层面有两个严格前提：

1. 在<html>元素上设置dir="rtl"；
2. 在<html>元素上添加合适的语言属性，如lang="ar"。

之后，还需要引入编译好的 RTL 版本样式表。例如官方文档中给出的 CDN 引入方式（cdn.css_rtl与cdn.css_rtl_hash分别对应 RTL CSS 的地址与 SRI 完整性哈希）：

<link rel="stylesheet" href="{{< param "cdn.css_rtl" >}}" integrity="{{< param "cdn.css_rtl_hash" >}}" crossorigin="anonymous">

在仓库中，这份 RTL 样式表就是 dist/css/bootstrap.rtl.css，它由同一套 Sass 源码经 RTLCSS 处理后生成；对应的压缩版为bootstrap.rtl.min.css。仓库还同时提供bootstrap-grid.rtl.css、bootstrap-reboot.rtl.css、bootstrap-utilities.rtl.css等细分模块的 RTL 版本（见 v5.3.1/dist/css）。

修改后的 RTL 起步模板

下面是将上述要求落实为完整 HTML 的 RTL 起步模板，官方文档称之为 "Starter template"：

<!doctype html> <html lang="ar" dir="rtl"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="{{< param "cdn.css_rtl" >}}" integrity="{{< param "cdn.css_rtl_hash" >}}" crossorigin="anonymous"> <title>مرحبًا بالعالم!</title> </head> <body> <h1>مرحبًا بالعالم!</h1> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script> <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script> --> </body> </html>

模板中的 JS 采用双选方案：默认引入 Bootstrap Bundle（内含 Popper），或按需分别引入 Popper 与 Bootstrap 独立 JS。

RTL 示例

仓库内置了多套完整的 RTL 示例页面，位于 v5.3.1/site/content/docs/5.3/examples 下带-rtl后缀的目录，例如blog-rtl、carousel-rtl、dashboard-rtl、cheatsheet-rtl、checkout-rtl等。以 blog-rtl/index.html 为例，其 front matter 通过direction: rtl声明页面方向，并通过extra_css引入../blog/blog.rtl.css作为 RTL 专属样式。这些示例是快速上手的理想起点。

构建方案：RTLCSS + 逻辑属性

Bootstrap 的 RTL 支持建立在两个关键决策之上，这也直接决定了整个 CSS 的编写方式：

1. 使用 RTLCSS 项目构建 RTL。RTLCSS 提供了在从 LTR 迁移到 RTL 时管理变更与覆盖的强有力特性，并允许我们从同一套代码库构建出 LTR 与 RTL 两个版本。仓库的 package.json 将其列为开发依赖（"rtlcss": "^4.1.0"），并提供了完整的构建脚本链：

   • css-compile：用 Sass 将scss/编译到dist/css/；
   • css-rtl：通过 PostCSS + RTLCSS 把编译产物处理为*.rtl.css；
   • css-minify-rtl：对*rtl.css做压缩生成*.rtl.min.css；
   • css：串联css-compile、css-prefix、css-rtl、css-minify与bootstra完成整条构建流水线。

2. 将一批方向类改名为逻辑属性方案。大多数开发者已经通过 flex 工具类接触过逻辑属性——它用start、end取代left、right这类方向属性，使类名和取值在 LTR 与 RTL 下都适用，无需额外开销。

   例如，不再使用.ml-3（margin-left），而是使用.ms-3（margin-start）。

在源码层面，逻辑属性贯穿于 scss/_utilities.scss 的整个工具类系统。以 float 工具类为例：

"float": ( responsive: true, property: float, values: ( start: left, end: right, none: none, ) ),

它把语义上的start/end映射为 LTR 下的left/right，RTLCSS 在生成 RTL 版本时会自动翻转。同样地，border 系列也遵循这一约定，见_utilities.scss中border-end与border-start的定义（分别映射border-right与border-left）。

组件层同样大量使用逻辑属性与border-start-radius/border-end-radius这类 mixin，例如：

• scss/_button-group.scss：@include border-end-radius(0)与@include border-start-radius(0)；
• scss/_card.scss、scss/forms/_input-group.scss、scss/_pagination.scss 中的分页圆角处理；
• 对应 mixin 定义在 scss/mixins/_border-radius.scss。

除此之外，RTLCSS 的各类控制指令也在源码中直接使用，例如：

• scss/_popover.scss 与 scss/_tooltip.scss 中用/* rtl:begin:ignore *///* rtl:end:ignore */保护不需要翻转的规则；
• scss/_spinners.scss 中用/* rtl:ignore */保证旋转动画方向不被镜像；
• scss/mixins/_utilities.scss 中用/* rtl:begin:remove *///* rtl:end:remove */在 RTL 版本中整体移除标记了rtl: false的工具类（如_utilities.scss中word-wrap的text-break）。

从源码结构看，这套"一套源码、双版本输出"的机制，是 RTL 支持得以低维护成本运转的核心。

从 Sass 源码定制 RTL

官方推荐的自定义方式是充分利用变量（variables）、映射（maps）与 mixin，这套做法对 RTL 同样适用——因为 RTLCSS 本质上是对编译后文件的后处理，所以无论通过源码还是编译产物，效果一致。

自定义 RTL 取值：RTLCSS 值指令

借助 RTLCSS 的 value directives，你可以让某个变量在 RTL 下输出不同的值。例如，想让$font-weight-bold在整个代码库中的 RTL 版本里字重从 700 降为 600，可以使用/*rtl: {value}*/语法：

$font-weight-bold: 700 #{/* rtl:600 */} !default;

编译加 RTL 处理后的输出效果为：

/* bootstrap.css */ dt { font-weight: 700 /* rtl:600 */; } /* bootstrap.rtl.css */ dt { font-weight: 600; }

可以看到，LTR 版本保留了原始注释，而 RTL 版本被替换为指定值。

替换字体栈：/*rtl:insert: {value}*/

如果使用自定义字体，需要注意并非所有字体都支持非拉丁字母。要从泛欧洲字体切换到阿拉伯语字体族，需要在字体栈中使用/*rtl:insert: {value}*/指令修改字体族的名称。

例如，把 LTR 下的Helvetica Neue切换为 RTL 下的Helvetica Neue Arabic：

$font-family-sans-serif: Helvetica Neue #{"/* rtl:insert:Arabic */"}, // Cross-platform generic font family (default user interface font) system-ui, // Safari for macOS and iOS (San Francisco) -apple-system, // Chrome < 56 for macOS (San Francisco) BlinkMacSystemFont, // Windows "Segoe UI", // Android Roboto, // Basic web fallback Arial, // Linux "Noto Sans", // Sans serif fallback sans-serif, // Emoji fonts "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

#{"/* rtl:insert:Arabic */"}这种插值写法是为了让 Sass 保留注释原文、把指令原样输出到 CSS，RTLCSS 处理时再把Arabic插入到Helvetica Neue之后，形成Helvetica Neue Arabic。

同一页面同时使用 LTR 与 RTL

如果需要在同一个页面上同时提供 LTR 与 RTL 两种方向，可以借助 RTLCSS 的 String Maps 机制：把@import包在一个类选择器中，并为 RTLCSS 设置自定义重命名规则：

/* rtl:begin:options: { "autoRename": true, "stringMap":[ { "name": "ltr-rtl", "priority": 100, "search": ["ltr"], "replace": ["rtl"], "options": { "scope": "*", "ignoreCase": false } } ] } */ .ltr { @import "../node_modules/bootstrap/scss/bootstrap"; } /*rtl:end:options*/

运行 Sass 与 RTLCSS 之后，LTR 文件中每个选择器都会被前置.ltr，RTL 文件中则被前置.rtl。于是你可以同时加载两份样式，并只在需要切换方向的组件外层套上.ltr或.rtl类即可。在 BOOTSTRA.386 的仓库布局下，导入路径即 v5.3.1/scss/bootstrap.scss。

使用这种 LTR + RTL 混合方案时，需要注意官方文档明确列出的边缘情况与已知限制：

1. 切换.ltr与.rtl时，必须相应地为元素添加dir与lang属性；
2. 同时加载两份样式会造成真实的性能瓶颈：建议参考优化指南，并考虑异步加载其中一份样式文件；
3. 以这种方式嵌套样式会使form-validation-state()mixin 无法按预期工作，需要自行微调（可参考 Bootstrap 相关的 issue 讨论）。

面包屑（breadcrumb）的特殊处理

面包屑分隔符是唯一需要全新专用变量的场景——即$breadcrumb-divider-flipped，其默认值等于$breadcrumb-divider。在 scss/_variables.scss 中可以找到它的定义：

$breadcrumb-divider: quote("/") !default; $breadcrumb-divider-flipped: $breadcrumb-divider !default;

在 scss/_breadcrumb.scss 中，分隔符通过 RTLCSS 值指令在同一行内同时输出 LTR 与 RTL 两个候选值：

content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};

编译产物验证了这一机制：在 dist/css/bootstrap.rtl.css 中，.breadcrumb-item + .breadcrumb-item::before的content被输出为/（默认分隔符），同时float由left翻转为right、padding-left/padding-right互换。默认分隔符/在 RTL 下视觉上仍然合理，但如果需要为 RTL 使用方向性更强的分隔符（如\），覆盖$breadcrumb-divider-flipped即可。

更多参考资源

• RTLCSS 官方文档：理解控制指令、值指令与 String Maps 的完整用法；
• RTL Styling 101：RTL 样式化的实战经验；
• 仓库内的 v5.3.1/dist/css 目录提供了全部 RTL 编译产物，可直接比对 LTR 与 RTL 输出差异；
• v5.3.1/site/content/docs/5.3/getting-started/introduction.md 是官方推荐的入门前提读物。

• 前端
• UI组件