Bootstrap5 RTL

2021-09-01 11:12 更新

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

熟悉

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

您可能还想阅读RTLCSS 项目,因为它支持我们的 RTL 方法。

实验功能

RTL 功能仍处于试验阶段,可能会根据用户反馈进行改进。发现了什么或有改进建议?打开一个issue,我们很想得到你的见解。

必需的 HTML

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

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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.rtl.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  integrity="sha384-Go4Pq7Es8lMcUKQ0MUAhFdeI660zUyFA3qpjZPcXkeobN9wjSHp/MjjPpUeGBXW0" 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.1.0/dist/css/bootstrap.rtl.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  integrity="sha384-Go4Pq7Es8lMcUKQ0MUAhFdeI660zUyFA3qpjZPcXkeobN9wjSHp/MjjPpUeGBXW0" 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.1.0/dist/js/bootstrap.bundle.min.js" rel="external nofollow"  integrity="sha384-KIT91OlDmsIXvQaqzxNONuO4ve97S3yDh9A0nea67fEK+03Wdyc/3oGgd0+DPaf7" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" rel="external nofollow"  integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" rel="external nofollow"  integrity="sha384-eHUUET4pt56BkNH9bTjZqK3d9mJAjuwJF3IR0yb+k7goQPFwqV5q+Bn51DOhBWkk" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL 示例

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

方法

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

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

例如,而不是​.ml-3​为​margin-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}*/​在字体堆栈中使用来修改字体系列的名称。

例如,要从Helvetica Neue WebfontLTR切换到Helvetica Neue ArabicRTL,您的 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?多亏了RTLCSS String Maps,这非常简单。使用类包装@imports,并为RTLCS设置自定义重命名规则:

/* 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​在您的组件封装使用一个或另一个方向。

 边缘情况和已知限制

虽然这种方法是可以理解的,但请注意以下几点:

  1. 在切换​.ltr​和​.rtl​时,请确保相应地添加了​dir​和​lang​属性。

  2. 加载这两个文件可能是一个真正的性能瓶颈:考虑一些优化,或者尝试异步加载其中一个文件
  3. 以这种嵌套样式将阻止我们的​form-validation-state()​mixin 按预期工作,因此需要您自己稍微调整一下。见#31223

面包屑案例

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

其他资源


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号