在GitHub上查看

RTL

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

本页导航↓

Get 熟悉

我们建议首先通过阅读入门介绍页面来熟悉Bootstrap。读完它之后，请继续阅读这里，了解如何启用RTL。

你也可以了解一下 RTLCSS，因为它支持使用RTL的方法。

实验功能

RTL特性还处于实验阶段，可能会根据用户的反馈进行改进。发现了什么或有改进建议? 打开一个问题，我们希望得到你的见解。

所需的 HTML

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

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

从那里，你需要包括我们的CSS的RTL版本。例如，下面是我们启用RTL的编译和压缩的CSS的样式表：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">

入门模板

你可以在这个修改后的RTL starter模板中看到上述要求。

<!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.1/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.1/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.1/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。

例如，使用 .ms-3代替 .ml-3 来表示 margin-left,。

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

从源自定义

在进行定制时，首选的方法是利用变量、映射和mixin。由于 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 Webfont 的LTR切换到 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;

同时使用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和 .rtl 作为RTL文件的前缀。现在，您可以在同一页面上使用这两个文件，只需在组件包装上使用 .ltr或 .rtl 即可使用一个或另一个。

限制条件

尽管这种方法是可以理解的，但请注意以下几点：

切换 .ltr 和 .rtl 时，请确保相应地添加 dir 和 lang 属性。
加载这两个文件可能会出现一些为功能上问题，我们也考虑到了一些优化，可以尝试异步加载其中的一个文件
这种方式的嵌套样式将阻止我们的 form-validation-state() mixin正常工作，因此需要您自己进行一些调整。详见＃31223。

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

RTL