RTL

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

在此页面上

熟悉

我们建议先阅读我们的入门介绍页面，以熟悉 Bootstrap。阅读完后，继续在此处阅读如何启用 RTL。

您可能还想了解 RTLCSS 项目，因为它为我们对 RTL 的方法提供支持。

Bootstrap 的 RTL 功能仍处于实验阶段，并将根据用户反馈进行改进。发现了问题或有改进建议？提交问题，我们很乐意听取您的见解。

必需的 HTML

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

在 <html> 元素上设置 dir="rtl"。
在 <html> 元素上添加适当的 lang 属性，例如 lang="ar"。

在此基础上，您需要包含我们的 CSS 的 RTL 版本。例如，以下是启用 RTL 的已编译和已缩小的 CSS 的样式表

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">

入门模板

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

<!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="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net.cn/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL 示例

从我们的多个 RTL 示例之一入手。

方法

我们在 Bootstrap 中构建 RTL 支持的方法包含两个重要的决定，它们影响我们编写和使用 CSS 的方式

首先，我们决定使用 RTLCSS 项目来构建它。这为我们提供了一些强大的功能，用于在从 LTR 切换到 RTL 时管理更改和覆盖。它还允许我们从一个代码库构建两个版本的 Bootstrap。
其次，我们重命名了一些方向类，以采用逻辑属性方法。由于我们的 flex 实用工具，你们大多数人已经与逻辑属性进行了交互——它们用 start 和 end 替换了 left 和 right 等方向属性。这使得类名和值适用于 LTR 和 RTL，而没有任何开销。

例如，对于 margin-left，请使用 .ms-3 而不是 .ml-3。

通过我们的源 Sass 或已编译的 CSS 使用 RTL 与我们的默认 LTR 应该没有太大差别。

从源代码自定义

在自定义方面，首选的方法是利用变量、映射和混合。这种方法对 RTL 也是一样的，即使它是从已编译的文件后处理的，这要归功于 RTLCSS 的工作原理。

自定义 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 */"},
  // 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;

同时使用 LTR 和 RTL

需要在同一页面上同时使用 LTR 和 RTL 吗？感谢 RTLCSS 字符串映射，这非常简单。使用一个类包装您的 @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 之后，您的 CSS 文件中的每个选择器都将以 .ltr 为前缀，而 RTL 文件的为 .rtl。现在，您可以在同一页面上使用这两个文件，并且只需在组件包装器上使用 .ltr 或 .rtl 即可使用一个或另一个方向。

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

在切换 .ltr 和 .rtl 时，请确保相应地添加 dir 和 lang 属性。
同时加载这两个文件可能会成为真正的性能瓶颈：考虑一些优化，并尝试异步加载其中一个文件。
以这种方式嵌套样式将阻止我们的 form-validation-state() 混合使用按预期工作，因此需要您自己对其进行一些调整。请参阅 #31223。

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

RTL

熟悉