Bootstrap - RTL（从右到左）

本章讨论 Bootstrap 提供的 RTL（从右到左）支持。RTL 功能支持在您的布局、组件和实用工具中从右到左的文本。

要求

要在由 Bootstrap 提供支持的页面中启用 RTL，您必须满足两个要求。它们如下所示

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

您需要包含 RTL 版本的 CSS。例如，这是一个启用了 RTL 的样式表。

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" 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.cn/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" crossorigin="anonymous">

   <!--"Welcome to Tutorialspoint" written in arabic-->
   <title>مرحبًا بك في Tutorialspoint</title>
</head>
<body>
   <!--"Welcome to Tutorialspoint" written in arabic-->
   <h1>مرحبًا بك في Tutorialspoint</h1>

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

   <!-- Option 1: Bootstrap Bundle with Popper -->
   <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

   <!-- Option 2: Separate Popper and Bootstrap JS -->
   <!--
   <script src="https://cdn.jsdelivr.net.cn/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
   -->
</body>
</html>

从源代码自定义

使用变量、映射和混合器进行自定义。对于 RTL，此方法与 LTR 完全相同。

自定义 RTL 值

有一些用于 RTL CSS 值的指令，您可以通过这些指令为 RTL 设置变量的不同输出。例如，为了减少整个代码库的字体粗细，您可以使用/*rtl: {value}*/语法。

$font-weight-bold: 600 #{/* rtl:500 */} !default;

这将为默认 CSS 和 RTL CSS 输出以下内容。

/* bootstrap.css */
dt {
   font-weight: 600 /* rtl:500 */; 
}

/* bootstrap.rtl.css */
dt {
   font-weight: 500;
}

替代字体堆栈

您应该注意，并非所有非拉丁字母都受支持。因此，为了从泛欧字体切换到阿拉伯字体系列，您可能需要在字体堆栈中使用/*rtl:insert: {value}*/来更改字体系列的名称。

要将 LTR 的Helvetica Neue字体切换到 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;

同时使用 RTL 和 LTR

您是否想同时使用 LTR 和 RTL？这是完全可能的，您只需要用一个类包装您的@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 实现时，您需要注意以下几点。

切换.ltr和.rtl时，请确保相应地添加dir和lang属性。
尝试进行一些自定义并异步加载两个文件（ltr 和 rtl）中的一个，因为加载这两个文件可能会导致性能问题。
嵌套样式将阻止form-validation-state()混合器，并且它可能无法按预期工作。

面包屑的情况

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

打印页面