RTL
了解如何在我们的布局、组件和实用程序中启用对 Bootstrap 中从右到左文本的支持。
熟悉
我们建议首先阅读我们的入门介绍页面来熟悉 Bootstrap 。完成后,请继续阅读此处了解如何启用 RTL。
您可能还想阅读RTLCSS 项目,因为它为我们的 RTL 方法提供了动力。
实验功能
RTL 功能仍处于试验阶段,可能会根据用户反馈进行改进。发现了什么或有改进建议?打开一个问题,我们很乐意获得您的见解。
必需的 HTML
在 Bootstrap 支持的页面中启用 RTL 有两个严格的要求。
- 设置
dir="rtl"
在<html>
元素上。 - 在元素上添加适当的
lang
属性,例如。lang="ar"
<html>
从那里,您需要包含我们的 CSS 的 RTL 版本。例如,这是我们编译和缩小的 CSS 启用 RTL 的样式表:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
RTL 示例
从我们的几个RTL 示例之一开始。
方法
我们在 Bootstrap 中构建 RTL 支持的方法有两个重要的决定,这些决定会影响我们编写和使用 CSS 的方式:
-
首先,我们决定使用RTLCSS项目来构建它。这为我们提供了一些强大的功能,用于在从 LTR 迁移到 RTL 时管理更改和覆盖。它还允许我们从一个代码库构建两个版本的 Bootstrap。
-
其次,我们重命名了一些方向类以采用逻辑属性方法。多亏了我们的 flex 实用程序,你们中的大多数人已经与逻辑属性进行了交互——它们替换了方向属性,例如
left
andright
支持start
andend
。这使得类名和值适用于 LTR 和 RTL,而没有任何开销。
例如,代替.ml-3
for margin-left
,使用.ms-3
.
通过我们的源代码 Sass 或编译的 CSS 使用 RTL,与我们的默认 LTR 应该没有太大区别。
从源代码自定义
在定制方面,首选方法是利用变量、映射和混合。这种方法同样适用于 RTL,即使它是从编译文件中进行后处理的,这要归功于RTLCSS 的工作原理。
自定义 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 Webfont
LTR 切换到Helvetica Neue Arabic
RTL,您的 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,这非常简单。用类包装你@import
的 s,并为 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 文件中的每个选择器都将在RTL 文件之前添加.ltr
, 和.rtl
。现在您可以在同一页面上使用这两个文件,并且只需在您的组件包装器上使用.ltr
or.rtl
来使用一个或另一个方向。
边缘情况和已知限制
虽然这种方法是可以理解的,但请注意以下几点:
- 切换
.ltr
和时.rtl
,请确保相应地添加dir
和lang
属性。 - 加载这两个文件可能是一个真正的性能瓶颈:考虑一些优化,也许尝试异步加载其中一个文件。
- 以这种方式嵌套样式将阻止我们的
form-validation-state()
mixin 按预期工作,因此需要您自己稍微调整一下。请参阅#31223。
面包屑案例
面包屑分隔符是唯一需要其自己的全新变量的情况 - 即$breadcrumb-divider-flipped
- 默认为$breadcrumb-divider
.