RTL

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

在此页

熟悉

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

You may also want to read up on the RTLCSS project, as it powers our approach to RTL.

Experimental feature

The RTL feature is still experimental and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? Open an issue, we’d love to get your insights.

Required HTML

There are two strict requirements for enabling RTL in Bootstrap-powered pages.

Set dir="rtl" on the <html> element.
Add an appropriate lang attribute, like lang="ar", on the <html> element.

From there, you’ll need to include an RTL version of our CSS. For example, here’s the stylesheet for our compiled and minified CSS with RTL enabled:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.rtl.min.css" integrity="sha384-WJUUqfoMmnfkBLne5uxXj+na/c7sesSJ32gI7GfCk4zO4GthUKhSEGyvQ839BC51" crossorigin="anonymous">

Starter template

您可以在这个修改后的 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/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.rtl.min.css" integrity="sha384-WJUUqfoMmnfkBLne5uxXj+na/c7sesSJ32gI7GfCk4zO4GthUKhSEGyvQ839BC51" 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/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL 示例

从我们的几个RTL 示例之一开始。

方法

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

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

例如，代替.ml-3for margin-left，使用.ms-3.

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

从源头定制

说到定制，首选的方法是利用变量、映射和混入。由于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;
}

替代字体堆栈

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

例如，要从Helvetica NeueLTR 字体切换到Helvetica Neue ArabicRTL 字体，您的 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 String Maps，这非常简单。用类包装你@import的 s，并为 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, 和.rtlRTL 文件为前缀。现在您可以在同一页面上使用这两个文件，并且只需在您的组件包装器上使用.ltr或.rtl来使用一个或另一个方向。

边缘情况和已知限制

虽然这种做法无可厚非，但请注意以下几点：

切换.ltrand时.rtl，请确保相应地添加dirandlang属性。
加载这两个文件可能是一个真正的性能瓶颈：考虑一些优化，并可能尝试异步加载其中一个文件。
以这种方式嵌套样式会阻止我们的form-validation-state()mixin 按预期工作，因此需要您自己稍微调整一下。参见#31223。

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

RTL

熟悉