跳到主要内容 跳到文档导航
View on GitHub

RTL(从右到左)

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

在本页

熟悉

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

您可能还想阅读RTLCSS 项目，因为它支持我们的 RTL 方法。

实验特征

RTL 功能仍处于实验阶段，可能会根据用户反馈进行改进。发现了什么或有改进建议？打开一个问题，我们很乐意得到你的见解。

必需的HTML设置

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

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

从那里，您需要包含我们 CSS 的 RTL 版本。例如，这是启用了 RTL 的已编译和缩小 CSS 的样式表：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-WJUUqfoMmnfkBLne5uxXj+na/c7sesSJ32gI7GfCk4zO4GthUKhSEGyvQ839BC51" 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/npm/[email protected]/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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL 示例

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

方法

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

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

  2. 其次，我们重命名了一些定向类以采用逻辑属性方法。多亏了我们的 flex 实用程序，你们中的大多数人已经与逻辑属性进行了交互——它们取代了方向属性，例如相比left和right我们更喜欢用start和end。这使得类名和值适用于 LTR 和 RTL 而没有任何开销。

例如，使用.ms-3代替.ml-3来进行margin-left.

通过我们的源 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;
}

替换字体

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

例如，要从Helvetica Neue LTR 字体切换到Helvetica Neue Arabic RTL 字体，您的 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，并为 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来使用一个或另一个方向。

边界情况和已知限制

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

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

面包屑导航案例

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

额外资源