Skip to main content Skip to docs navigation
View on GitHub

RTL

了解如何在我们的布局、组件和实用程序中启用 Bootstrap 对从右向左文本的支持。

On this page

熟悉

我们建议您首先阅读我们的入门介绍 页面，熟悉 Bootstrap。阅读完毕后，请继续阅读此处，了解如何启用 RTL。

您可能还想了解一下 RTLCSS 项目，因为它为我们的 RTL 方法提供了动力。

Bootstrap的RTL功能仍处于试验阶段，并将根据用户反馈不断改进。发现了什么问题或有改进建议？打开一个问题，我们很乐意听取您的见解。

所需的 HTML

在 Bootstrap 支持的页面中启用 RTL 有两个严格的要求。

  1. 在 <html> 元素上设置 dir=“rtl” 。
  2. 在 <html> 元素上添加适当的 lang 属性，如 lang=“ar”。

从这里开始，你需要包含一个 RTL 版本的 CSS。例如，下面是经过编译和精简并启用 RTL 的 CSS 样式表：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-Nxa4y0030omq3IhwslCXKjLu4iVljWMjr0lVT6y2MFakfQRvANMyuevjfETQmiJK" crossorigin="anonymous">

入门模版

您可以在修改后的 RTL 入门模板中看到上述要求。

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- 所需的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-Nxa4y0030omq3IhwslCXKjLu4iVljWMjr0lVT6y2MFakfQRvANMyuevjfETQmiJK" crossorigin="anonymous">

    <title>مرحبًا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبًا بالعالم!</h1>

    <!-- JavaScript 选项; 二选一! -->

    <!-- 选项 1: Popper 的 Bootstrap Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-r5kRSTMtRNVfwqCvIzNkemSRRqsQB3BJN5m7GjomHUT+81f70U37lfRUk9tJSSQO" crossorigin="anonymous"></script>

    <!-- 选项 2: 将 Popper 与 Bootstrap JS 分开 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-BRzTbsDillcZ9cJS3keZSZIggjuMr6yO0NydiQOk5xguSoFlRpj4FALnfgmFMjai" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL 示例

从我们的多个 RTL 示例开始。

方法

我们在 Bootstrap 中构建 RTL 支持的方法有两个重要决定，它们会影响我们如何编写和使用 CSS：

  1. 首先，我们决定使用RTLCSS 项目来构建它。 这为我们提供了一些强大的功能，以便在从 LTR 转向 RTL 时管理更改和覆盖。它还允许我们从一个代码库中构建两个版本的 Bootstrap。

  2. 其次，我们对一些方向类进行了重命名，以采用逻辑属性方法。 由于我们的 flex 工具，你们中的大多数人都已经与逻辑属性进行过交互–它们取代了 left 和 right 等方向属性，转而使用 start 和 end。这使得类名和值适合 LTR 和 RTL，而不会产生任何开销。

例如，“margin-left ”应使用“.ms-3”，而不是“.ml-3”。

不过，通过我们的 Sass 源代码或编译 CSS 来处理 RTL 与默认的 LTR 并无太大区别。

从源代码自定义

说到自定义，首选的方法是利用变量、映射和 mixins。得益于RTLCSS 工作原理，即使是对编译后的文件进行后处理，这种方法也同样适用于 RTL。

自定义 RTL 值

使用RTLCSS 值指令，您可以让变量输出不同的 RTL 值。例如，要在整个代码库中降低 $font-weight-bold 的权重，可以使用 /*rtl: {value}*/ 语法：

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

默认 CSS 和 RTL CSS 的输出结果如下：

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

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

备选字体堆栈

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

例如，要将 LTR 字体 Helvetica Neue 切换为 RTL 字体 Helvetica Neue Arabic，您的 Sass 代码可以如下所示：

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // 跨平台通用字体系列（默认用户界面字体）
  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;

同时使用 LTR 和 RTL

需要在同一页面上同时显示 LTR 和 RTL？多亏了 RTLCSS String Maps，这一切都变得简单明了。用一个类包裹您的 @imports，并为 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，CSS 文件中的每个选择器都将以 .ltr 作为前缀，而 RTL 文件则以 .rtl 作为前缀。现在，你可以在同一页面上使用这两个文件，只需在组件包装器上使用 .ltr 或 .rtl 即可使用其中一个方向。

在结合使用 LTR 和 RTL 实现时需要考虑的边缘情况和已知限制：

  1. 切换 .ltr 和 .rtl 时，请确保相应添加了 dir 和 lang 属性。
  2. 加载这两个文件可能会成为真正的性能瓶颈：考虑进行一些 优化，或许可以尝试 异步加载其中一个文件。
  3. 以这种方式嵌套样式会妨碍我们的 “form-validation-state() ”mixin 按预期工作，因此需要您自行调整一下。参见 #31223。

您想自动执行这一过程，并在单个样式表中处理涉及两个方向的多个边缘情况吗？那么，请考虑使用PostCSS RTLCSS作为PostCSS插件来处理源文件。PostCSS RTLCSS在幕后使用RTLCSS来管理方向翻转过程，但它会将翻转声明分离到规则中，并为LTR和RTL设置不同的前缀，这样你就可以在同一个样式表文件中同时拥有两种方向。这样，只需更改页面的 “dir”（如果对插件进行了相应配置，甚至可以通过修改特定类），就可以在 LTR 和 RTL 方向之间进行切换。

使用 PostCSS RTLCSS 构建 LTR 和 RTL 组合实现时需要考虑的重要事项：

  1. 建议在 html 元素中添加 dir 属性。这样，当您改变方向时，整个页面都会受到影响。此外，请确保相应地添加了 lang 属性。
  2. 使用一个包含两个方向的单一捆绑包会增加最终样式表的大小（平均增加 20%-30%）：请考虑进行一些 优化。
  3. 请注意，PostCSS RTLCSS 与 /* rtl:remove */ 指令不兼容，因为它不会删除任何 CSS 规则。你应将/* rtl:remove */、/* rtl:begin:remove */和/* rtl:end:remove */指令分别替换为/* rtl:ignore */、/* rtl:begin:ignore */和/* rtl:end:ignore */指令。这些指令将忽略规则，不会创建 RTL 对应规则（与 RTLCSS 中的 remove 指令结果相同）。

面包屑案例

面包屑分隔符是唯一需要自己的全新变量的情况，即“$breadcrumb-divider-flipped”，默认为“$breadcrumb-divider”。

额外资源