Skip to main content Skip to docs navigation

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

熟悉入门

我们建议你先通过阅读我们的 Getting Started Introduction page 来熟悉Bootstrap。 完成后,请继续阅读此处,了解如何启用RTL。

你可能还想了解RTLCSS项目,因为它为我们的RTL方法提供了支持。

Bootstrap的RTL功能仍然是实验性的,并将根据用户反馈进行发展。 发现了什么或有改进建议? Open an issue,我们很想了解你的见解。

必需的HTML

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

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

从那里开始,你需要包含我们CSS的RTL版本。 例如,以下是启用RTL的已编译和缩小CSS的样式表:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-nU14brUcp6StFntEOOEBvcJm4huWjB0OcIeQ3fltAfSmuZFrkAif0T+UtNGlKKQv" 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.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-nU14brUcp6StFntEOOEBvcJm4huWjB0OcIeQ3fltAfSmuZFrkAif0T+UtNGlKKQv" 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.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 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.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL示例

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

方法

我们在Bootstrap中构建RTL支持的方法有两个重要决定,它们会影响我们如何编写和使用CSS:

  1. 首先,我们决定与RTCLS一起构建项目这为我们提供了一些强大的功能,用于在从LTR移动到RTL时管理更改和覆盖。 它还允许我们从一个代码库构建两个版本的Bootstrap。

  2. 其次,我们重命名了一些定向类,以采用逻辑属性方法我们的flex工具集,你们中的大多数人已经与逻辑属性进行了交互——它们改写了方向属性,如leftright,取而代之的是startend。 这使得类名和值适用于LTR和RTL,而没有任何开销。

例如,使用.ms-3代替margin-left.ml-3

不过,通过我们的 Sass 源代码或编译 CSS 来处理 RTL 与默认的 LTR 并无太大区别。

从源代码定制

当涉及到自定义时,首选的方法是利用变量、映射和mixins。 这种方法对RTL也是一样的,即使它是从编译的文件中后期处理的,这要归功于RTLCSS的工作原理.

自定义RTL值

使用RTCLS值指令,可以使变量输出为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的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;

同时使用LTR和RTL

需要LTR和RTL在同一页上吗? 感谢RTCLS字符串映射,这很简单。 用类包装@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组合实施时要考虑的边缘情况和已知限制

  1. 切换.ltr.rtl时,请确保相应地添加dirlang属性。
  2. 加载这两个文件可能是一个真正的性能瓶颈:考虑一些optimization,也许可以尝试异步加载其中一个文件
  3. 以这种方式嵌套样式将阻止我们的form-validation-state()混合元素按预期工作,因此需要你自己进行一些调整。 See #31223.

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

额外资源