免費 AI IDE
Bootstrap5 RTL
了解如何在 Bootstrap 中跨我們的布局、組件和實用程序啟用對從右到左文本的支持。
熟悉
我們建議先通讀我們的入門介紹頁面，熟悉 Bootstrap 。完成后，請繼續(xù)閱讀此處了解如何啟用 RTL。
您可能還想閱讀RTLCSS 項目，因為它支持我們的 RTL 方法。
實驗功能
RTL 功能仍處于試驗階段，可能會根據用戶反饋進行改進。發(fā)現(xiàn)了什么或有改進建議？打開一個issue，我們很想得到你的見解。
必需的 HTML
在 Bootstrap 驅動的頁面中啟用 RTL 有兩個嚴格的要求。
- 在?
<html>?元素上設置?dir="rtl"?。 - 在元素上添加適當的lang屬性，例如，給?
<html>?元素添加?lang="ar"?屬性。
從那里，您需要包含我們 CSS 的 RTL 版本。例如，這是啟用 RTL 的已編譯和縮小的 CSS 的樣式表：
<link rel="stylesheet" rel="external nofollow" target="_blank" integrity="sha384-Go4Pq7Es8lMcUKQ0MUAhFdeI660zUyFA3qpjZPcXkeobN9wjSHp/MjjPpUeGBXW0" 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" rel="external nofollow" target="_blank" integrity="sha384-Go4Pq7Es8lMcUKQ0MUAhFdeI660zUyFA3qpjZPcXkeobN9wjSHp/MjjPpUeGBXW0" 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/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" rel="external nofollow" integrity="sha384-KIT91OlDmsIXvQaqzxNONuO4ve97S3yDh9A0nea67fEK+03Wdyc/3oGgd0+DPaf7" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" rel="external nofollow" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" rel="external nofollow" integrity="sha384-eHUUET4pt56BkNH9bTjZqK3d9mJAjuwJF3IR0yb+k7goQPFwqV5q+Bn51DOhBWkk" crossorigin="anonymous"></script>
-->
</body>
</html>
RTL 示例
從我們的幾個RTL 示例之一開始。
方法
我們在 Bootstrap 中構建 RTL 支持的方法有兩個影響我們編寫和使用 CSS 的重要決定：
- 首先，我們決定使用RTLCSS項目構建它。這為我們提供了一些強大的功能，用于在從 LTR 移動到 RTL 時管理更改和覆蓋。它還允許我們從一個代碼庫構建兩個版本的 Bootstrap。
- 其次，我們重命名了一些定向類以采用邏輯屬性方法。多虧了我們的 flex 實用程序，你們中的大多數人已經與邏輯屬性進行了交互——它們取代了方向屬性，如left和right，有利于start和end。這使得類名和值適用于 LTR 和 RTL，沒有任何開銷。
例如，而不是?.ml-3?為?margin-left?，使用?.ms-3?。
不過，通過我們的源 Sass 或編譯的 CSS 使用 RTL 應該與我們的默認 LTR 沒有太大區(qū)別。
從源自定義
在定制方面，首選方法是利用變量、映射和混合。由于RTLCSS是如何工作的，這種方法對 RTL 也同樣有效，即使它是從編譯后的文件中進行后處理的。
自定義 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 WebfontLTR切換到Helvetica Neue ArabicRTL，您的 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，這非常簡單。使用類包裝@imports，并為RTLCS設置自定義重命名規(guī)則：
/* 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??，F(xiàn)在，您就可以使用同一頁面上兩個文件，并簡單地使用?.ltr?或?.rtl?在您的組件封裝使用一個或另一個方向。
邊緣情況和已知限制
雖然這種方法是可以理解的，但請注意以下幾點：
在切換?
.ltr?和?.rtl?時，請確保相應地添加了?dir?和?lang?屬性。- 加載這兩個文件可能是一個真正的性能瓶頸：考慮一些優(yōu)化，或者嘗試異步加載其中一個文件。
- 以這種嵌套樣式將阻止我們的?
form-validation-state()?mixin 按預期工作，因此需要您自己稍微調整一下。見#31223。
面包屑案例
該面包屑分隔符是唯一需要自己的全新變量的情況-即?$breadcrumb-divider-flipped?——默認為?$breadcrumb-divider?。
更多建議：