Skip to main content Skip to docs navigation

RTL

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

内容提要

先熟悉Bootstrap

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

如果您还想了解更多相关信息，请先阅读 RTLCSS 项目，因为它为我们实现 RTL 的方法是建立在此项目的原理的基础之上。

还处于实验阶段

RTL 功能仍是实验性的，可能会根据用户反馈进行改进。 发现了什么瑕疵或有改进建议？ 打开一个issue，我们很想得到您的见解。

HTML方面的要求

想要在 Bootstrap 制作的页面中启用 RTL 有两个硬性要求。

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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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/bootstrap@5.1.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL 示例

您可以从这些RTL 示例中的一个开始您的项目。

支持 RTL 的方法

在 Bootstrap 页面中支持 RTL ，需要做出以下两个重要的决定，这些决定会影响我们编写和使用 CSS 的方式：

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

  2. 其次，我们以名称符合逻辑的原则，重命名了一些方向类。 得益于 flex 实用程序，它们替换了像 left 、 right 、 start 和 end这样的方向属性。 这使得类名和值适用于 LTR 和 RTL，切换起来也没有任何代价。

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

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

定制源码

对于自定义，首选方法是利用变量、映射(maps)和混合(mixins)。这种方法同样适用于 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 Webfont 切换到 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 为前辍。 现在您可以在同一页面上使用这两个文件，只需在组件包装器上使用 .ltr 或 .rtl 即可使用一个或另一个方向。

边缘情况和已知限制

虽然这种方法是很好理解的，但请注意以下几点：

  1. 切换 .ltr 和 .rtl 时，请确保相应地添加 dir 和 lang 属性。
  2. 加载这两个文件可能是一个真正的性能瓶颈：考虑一些优化，也许可以尝试异步加载这些文件之一。
  3. 以这种方式嵌套样式将阻止我们的 form-validation-state() mixin 按预期工作，因此需要您自己稍微调整一下。
面包屑分隔符是唯一需要其自己的全新变量的情况 - 即 $breadcrumb-divider-flipped - 默认为 $breadcrumb-divider。

面包屑导航

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

相关资源