Bootstrap 简明教程
Bootstrap - RTL
本章讨论了 Bootstrap 提供的 RTL（从右向左）支持。RTL 功能支持整个布局、组件和实用工具的从右向左文本。
Requirements
若要在 Bootstrap 提供支持的页面中启用 RTL，你必须满足两个要求。如下所示：
-
在 <html> 元素上，设置 dir-"rtl" 。
-
在 <html> 元素上，添加适当的 lang 属性，例如 lang="ar" 。
你需要包含 CSS 的 RTL 版本。例如，这是一个启用了 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">Starter template
以下是满足启用 RTL 要求的一个初始模板示例：
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
<!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>Custom RTL values
通过某些 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;
}Alternative font stack
您应该知道并非所有非拉丁字母都受支持。因此，为了从泛欧字体系列切换到阿拉伯字体系列，您可能需要在字体栈中使用 /*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;RTL and LTR at the same time
您是否想同时使用 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 实现时，您需要考虑以下几点：