RTL

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

在本页面

熟悉

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

您可能还需要阅读 RTLCSS项目，因为它为我们的RTL方法提供了动力。

实验特性

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

所需的 HTML

在由Bootstrap驱动的页面中启用RTL有两个严格的要求。

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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" 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.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">

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

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

    <!-- Option 1: Bootstrap Bundle with Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper.js and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL示例

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

建议

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

首先，我们决定使用 RTLCSS 项目进行构建。 这为我们提供了一些强大的功能，可用于管理从LTR到RTL时的更改和替代。它还允许我们从一个代码库构建Bootstrap的两个版本。
其次，我们重命名了一些定向类，以采用逻辑属性方法。借助我们的flex实用程序，您中的大多数人已经与逻辑属性进行了交互，它们可以替换定向属性，例如 left 和 right 支持 start 和 end。这使得类名称和值适合LTR和RTL，而没有任何开销。

例如，使用 .ms-3替代margin-left 而不是 .ml-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;
}

备用字体堆栈

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

例如，要从Helvetica Neue WebfontLTR切换到Helvetica Neue Arabic RTL，您的Sass代码如下所示：

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // 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;

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

RTL

熟悉