RTL
了解我們?nèi)绾卧贐ootstrap的排版、元件和通用類別中啟用對right-to-left的支持。
如何熟悉
我們建議您先閱讀 入門指南頁面 來熟悉 Bootstrap。讀完之後，請繼續(xù)閱讀此處以了解如何啟用RTL。
你可能還需要閱讀 RTLCSS 項目，因為它為我們的 RTL 方法提供了動力。
實驗功能
RTL 功能仍然是 實驗性的 並可能會根據(jù)用戶的反饋去發(fā)展。若有發(fā)現(xiàn)了什麼或有改進的建議嗎？ 分享問題，我們很樂意聽取您的意見。
必要的 HTML
在 Bootstrap 的頁面中要啟用 RTL 有兩個嚴格要求。
- 在
<html>元素上設(shè)置dir="rtl"。 - 在
<html>元素上加入適合的 lang 屬性，例如 lang=“ar”。
接下來，您需要包括我們的 CSS 的 RTL 版本。例如，這是我們啟用 RTL的 已編譯和精簡 CSS 的樣式範例：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">
基本模板
你可以看到這個修改後的基本模板中，驗證了上面的要求：
<!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.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">
<title>????? ???????!</title>
</head>
<body>
<h1>????? ???????!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper.js and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
RTL 範例
開始使用以下的幾種方法之一 RTL examples.
方法
我們在 Bootstrap 中構(gòu)建支援 RTL 的方法有兩個重要的選擇，這些選擇會影響我們編寫和使用 CSS 的方式：
-
首先，我們決定使用 RTLCSS 項目進行構(gòu)建。 這為我們提供了一些強大的功能，可用於管理從 LTR 轉(zhuǎn)向 RTL 的更改和替代。它還允許我們從一個程式庫構(gòu)建兩個版本的 Bootstrap。
-
**再來，我們採用邏輯屬性方法，將少數(shù)的方向類別重新命名。**因為我們 flex 的通用類別，大多數(shù)的使用者都已經(jīng)接觸過了邏輯屬性方法 - 它們將方向?qū)傩匀?
left和right取代為start和end。這讓這些 class 名稱、用值更為適合 LTR 與 RTL。
例如，用 .ms-3 取代 margin-left 的 .ml-3。
透過我們原始的 Sass 或已編譯的 CSS 去使用 RTL，與我們的預設(shè)的 LTR 應該沒有太大不同。
從原始碼自定義
當涉及到 自定義 時，首選的方法是使用 variables、maps、和 mixins。就算是從編譯後的文件進行後處理，此方法也適用於 RTL，參考 RTLCSS 的運作方式。
自定義 RTL 數(shù)值
使用 RTLCSS 數(shù)值指令，可以從 variable 輸出不同的值給 RTL。例如，要減少整個 $font-weight-bold 代碼的權(quán)重，可以使用 /*rtl: {value}*/ 語法：
$font-weight-bold: 700 #{/* rtl:600 */} !default;
將會對預設(shè)的 CSS and RTL CSS 輸出以下內(nèi)容：
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
備用字體堆疊
如果您使用的是自定義字體，請注意，並非所有字體都支持非拉丁字母。為了將歐洲語系轉(zhuǎn)換為阿拉伯語系，你可能需要在在字體堆疊中使用 /*rtl:insert: {value}*/ 來修改字體的名稱。
例如，要將 LTR 的 Helvetica Neue Webfont 轉(zhuǎn)換為 RTL 的 Helvetica Neue Arabic，Sass 程式碼將如以下所示：
$font-family-sans-serif:
Helvetica Neue #{"/* rtl:insert:Arabic */"},
// 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;
breadcrumb 麵包屑
breadcrumb separator 是唯一需要為自己定義新變數(shù)的情況，即 $breadcrumb-divider-flipped — 預設(shè)為 $breadcrumb-divider。