RTL
了解如何在 Bootstrap 的版面配置、元件和通用類別中啟用對由右至左文字的支援。
熟悉 Bootstrap（Get familiar）
我們建議您先閱讀我們的入門介紹頁面來熟悉 Bootstrap。完成後，繼續閱讀此處了解如何啟用 RTL。
您可能還想閱讀 RTLCSS 專案，因為它支援我們的 RTL 方法。
Bootstrap 的 RTL 功能仍處於實驗階段，將根據使用者反饋進行改進。發現問題或有改進建議？開啟一個 issue，我們很樂意聽取您的見解。
必要的 HTML（Required HTML）
在 Bootstrap 驅動的頁面中啟用 RTL 有兩個嚴格的要求。
- 在
<html>元素上設定dir="rtl"。 - 在
<html>元素上加入適當的lang屬性，如lang="ar"。
接下來，您需要引入 RTL 版本的 CSS。例如，以下是啟用 RTL 的編譯並壓縮 CSS 的樣式表：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" crossorigin="anonymous">
入門模板（Starter template）
您可以在這個修改過的 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-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" 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-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" 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-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>
-->
</body>
</html>
RTL 範例（RTL examples）
從我們的幾個 RTL 範例開始。
方法（Approach）
我們在 Bootstrap 中建構 RTL 支援的方法有兩個重要的決定，影響了我們撰寫和使用 CSS 的方式：
-
首先，我們決定使用 RTLCSS 專案來建構它。 這為我們在從 LTR 轉換到 RTL 時管理變更和覆寫提供了一些強大的功能。它還允許我們從單一程式碼庫建構兩個版本的 Bootstrap。
-
其次，我們重新命名了一些方向性類別，採用邏輯屬性的方法。 由於我們的 flex 通用類別，大多數人已經接觸過邏輯屬性——它們用
start和end取代了像left和right這樣的方向屬性。這使得類別名稱和值適用於 LTR 和 RTL，而沒有任何額外負擔。
例如，使用 .ms-3 代替 .ml-3 來設定 margin-left。
透過我們的原始 Sass 或編譯後的 CSS 使用 RTL，應該與我們預設的 LTR 沒有太大區別。
從原始碼自訂（Customize from source）
在自訂方面，首選方式是利用變數、映射和 mixin。由於 RTLCSS 的運作方式，這種方法對於 RTL 也同樣適用，即使是從編譯後的檔案進行後處理。
自訂 RTL 值（Custom RTL values）
使用 RTLCSS value 指令，您可以讓一個變數在 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;
}
替代字體堆疊（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;
同時使用 LTR 和 RTL（LTR and RTL at the same time）
需要在同一頁面上同時使用 LTR 和 RTL？多虧了 RTLCSS String Maps，這非常簡單。用一個類別包裝您的 @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 實作時要考慮的邊界情況和已知限制：
- 切換
.ltr和.rtl時，請確保相應地加入dir和lang屬性。 - 載入兩個檔案可能會成為真正的效能瓶頸：考慮一些最佳化，也許可以嘗試非同步載入其中一個檔案。
- 以這種方式巢狀樣式會導致我們的
form-validation-state()mixin 無法按預期工作，因此需要您自己稍作調整。請參閱 #31223。
您想要自動化這個流程並處理在單一樣式表中涉及兩個方向的幾個邊界情況嗎？那麼，考慮使用 PostCSS RTLCSS 作為 PostCSS 外掛來處理您的原始檔案。PostCSS RTLCSS 在背後使用 RTLCSS 來管理方向翻轉流程，但它將翻轉的宣告分離到具有不同 LTR 和 RTL 前綴的規則中，這允許您在同一個樣式表檔案中擁有兩個方向。透過這樣做，您可以簡單地透過變更頁面的 dir 來切換 LTR 和 RTL 方向（或者如果您相應地設定外掛，甚至可以透過修改特定類別）。
使用 PostCSS RTLCSS 建構組合的 LTR 和 RTL 實作時需要考慮的重要事項：
- 建議您將
dir屬性加入到html元素。這樣，當您變更方向時，整個頁面都會受到影響。同時，請確保相應地加入lang屬性。 - 擁有包含兩個方向的單一套件會增加最終樣式表的大小（平均增加 20%-30%）：考慮一些最佳化。
- 請注意，PostCSS RTLCSS 與
/* rtl:remove */指令不相容，因為它不會移除任何 CSS 規則。您應該分別將/* rtl:remove */、/* rtl:begin:remove */和/* rtl:end:remove */指令替換為/* rtl:freeze */、/* rtl:begin:freeze */和/* rtl:end:freeze */指令。這些指令會將目標規則或宣告加上當前方向的前綴，但不會建立 RTL 對應項（與 RTLCSS 中的remove結果相同）。
麵包屑導覽的情況（The breadcrumb case）
麵包屑導覽分隔符號是唯一需要自己全新變數的情況——即 $breadcrumb-divider-flipped——預設為 $breadcrumb-divider。