Bootstrap V5.3 : RTL 中文翻译版

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

熟悉

我们建议先通过阅读我们的入门介绍页面来熟悉 Bootstrap。运行完毕后，请继续阅读此处了解如何启用 RTL。

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

Bootstrap 的 RTL 功能仍处于实验阶段，将根据用户反馈进行发展。发现了一些东西或有改进建议？打开一个问题，我们很乐意听取您的见解。

必需的 HTML

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

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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" 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.8/dist/css/bootstrap.rtl.min.css" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" 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.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" 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.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL 示例

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

方法

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

首先，我们决定用 RTLCSS 项目来构建它。这为我们提供了一些强大的功能，用于在从 LTR 迁移到 RTL 时管理更改和覆盖。它还允许我们从一个代码库构建两个版本的 Bootstrap。
其次，我们重命名了一些定向类，以采用逻辑属性方法。由于我们的 flex 实用程序，你们中的大多数人已经与逻辑属性进行了交互——它们取代了方向属性，如和 in favor 和。这使得类名称和值适用于 LTR 和 RTL，没有任何开销。leftrightstartend

例如，代替 for ，使用 ..ml-3margin-left.ms-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}*/

例如，要从 LTR 的字体切换到 RTL 的字体，您的 Sass 代码可能如下所示：Helvetica NeueHelvetica Neue Arabic

$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 字符串映射，这非常简单。用类包装你的 s，并为 RTLCSS 设置自定义重命名规则：@import

/* 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 文件中的每个选择器都将以和作为 RTL 文件的前面添加。现在，您可以在同一页面上使用这两个文件，并且只需在组件包装器上使用或即可使用一个或另一个方向。.ltr.rtl.ltr.rtl

使用 LTR 和 RTL 组合实现时要考虑的边缘情况和已知限制：

切换和时，请确保相应地添加和属性。.ltr.rtldirlang
加载这两个文件可能是一个真正的性能瓶颈：考虑一些优化，也许可以尝试异步加载其中一个文件。
以这种方式嵌套样式会阻止我们的 mixin 按预期工作，因此需要您自己稍微调整一下。参见 #31223。form-validation-state()

您想自动化此过程并解决单个样式表中涉及两个方向的多个边缘情况吗？然后，考虑使用 PostCSS RTLCSS 作为 PostCSS 插件来处理您的源文件。PostCSS RTLCSS 在幕后使用 RTLCSS 来管理方向翻转过程，但它将翻转的声明分成具有 LTR 和 RTL 前缀的规则，这允许您在同一样式表文件中拥有两个方向。通过这样做，您可以通过简单地更改页面（或者如果您相应地配置插件，甚至可以修改特定类）在 LTR 和 RTL 方向之间切换。dir

使用 PostCSS RTLCSS 构建组合的 LTR 和 RTL 实现时需要考虑的重要事项：

建议您将该属性添加到元素中。这样，当您更改方向时，整个页面都会受到影响。另外，请确保相应地添加属性。dirhtmllang
拥有两个方向的单个捆绑包将增加最终样式表的大小（平均增加 20%-30%）：考虑进行一些优化。
考虑到 PostCSS RTLCSS 与指令不兼容，因为它不会删除任何 CSS 规则。您应该分别将和指令替换为，和指令。这些指令将以当前方向为目标规则或声明添加前缀，但不会创建 RTL 对应项（与 RTLCSS 中的结果相同）。/* rtl:remove *//* rtl:remove *//* rtl:begin:remove *//* rtl:end:remove *//* rtl:freeze *//* rtl:begin:freeze *//* rtl:end:freeze */remove

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

Bootstrap V5.3 中文手册

入门指南 Getting started

定制化 Customize

布局方式 Layout

内容样式 Content

表单控件 Forms

组件集合 Components

辅助工具 Helpers

工具类库 Utilities

功能扩展 Extend

关于Bootstrap

RTL

熟悉

必需的 HTML

入门模板

RTL 示例

方法

从源代码自定义

自定义 RTL 值

替代字体堆栈

同时进行 LTR 和 RTL

其他资源

RTL

熟悉

必需的 HTML

入门模板

RTL 示例

方法

从源代码自定义

自定义 RTL 值

替代字体堆栈

同时进行 LTR 和 RTL

面包屑案例

其他资源