引导程序-RTL

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

要求

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

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

您需要包含 RTL 版本的 CSS。例如，下面是启用了 RTL 的样式表：

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" integrity="sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq" 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.3.0/dist/css/bootstrap.rtl.min.css" integrity="sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq" 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/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
    -->
</body>
</html>

从源头定制

使用变量、映射和 mixins 来实现自定义目的。对于 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 阿拉伯语字体，您的 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() mixin，并且它可能无法按预期工作。

面包屑案例

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