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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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
.