免費(fèi)AI編程助手
Bootstrap5 RTL
了解如何在 Bootstrap 中跨我們的布局、組件和實(shí)用程序啟用對(duì)從右到左文本的支持。
熟悉
我們建議先通讀我們的入門(mén)介紹頁(yè)面，熟悉 Bootstrap 。完成后，請(qǐng)繼續(xù)閱讀此處了解如何啟用 RTL。
您可能還想閱讀RTLCSS 項(xiàng)目，因?yàn)樗С治覀兊?RTL 方法。
實(shí)驗(yàn)功能
RTL 功能仍處于試驗(yàn)階段，可能會(huì)根據(jù)用戶反饋進(jìn)行改進(jìn)。發(fā)現(xiàn)了什么或有改進(jìn)建議？打開(kāi)一個(gè)issue，我們很想得到你的見(jiàn)解。
必需的 HTML
在 Bootstrap 驅(qū)動(dòng)的頁(yè)面中啟用 RTL 有兩個(gè)嚴(yán)格的要求。
- 在?
<html>?元素上設(shè)置?dir="rtl"?。 - 在元素上添加適當(dāng)?shù)膌ang屬性，例如，給?
<html>?元素添加?lang="ar"?屬性。
從那里，您需要包含我們 CSS 的 RTL 版本。例如，這是啟用 RTL 的已編譯和縮小的 CSS 的樣式表：
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" integrity="sha384-Go4Pq7Es8lMcUKQ0MUAhFdeI660zUyFA3qpjZPcXkeobN9wjSHp/MjjPpUeGBXW0" crossorigin="anonymous">
入門(mén)模板
您可以在此修改后的 RTL 入門(mén)模板中看到上述要求。
<!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" 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 示例
從我們的幾個(gè)RTL 示例之一開(kāi)始。
方法
我們?cè)?Bootstrap 中構(gòu)建 RTL 支持的方法有兩個(gè)影響我們編寫(xiě)和使用 CSS 的重要決定：
- 首先，我們決定使用RTLCSS項(xiàng)目構(gòu)建它。這為我們提供了一些強(qiáng)大的功能，用于在從 LTR 移動(dòng)到 RTL 時(shí)管理更改和覆蓋。它還允許我們從一個(gè)代碼庫(kù)構(gòu)建兩個(gè)版本的 Bootstrap。
- 其次，我們重命名了一些定向類(lèi)以采用邏輯屬性方法。多虧了我們的 flex 實(shí)用程序，你們中的大多數(shù)人已經(jīng)與邏輯屬性進(jìn)行了交互——它們?nèi)〈朔较驅(qū)傩?，如left和right，有利于start和end。這使得類(lèi)名和值適用于 LTR 和 RTL，沒(méi)有任何開(kāi)銷(xiāo)。
例如，而不是?.ml-3?為?margin-left?，使用?.ms-3?。
不過(guò)，通過(guò)我們的源 Sass 或編譯的 CSS 使用 RTL 應(yīng)該與我們的默認(rèn) LTR 沒(méi)有太大區(qū)別。
從源自定義
在定制方面，首選方法是利用變量、映射和混合。由于RTLCSS是如何工作的，這種方法對(duì) RTL 也同樣有效，即使它是從編譯后的文件中進(jìn)行后處理的。
自定義 RTL 值
使用RTLCSS 值指令，您可以使變量輸出不同的 RTL 值。例如，要降低?$font-weight-bold?整個(gè)代碼庫(kù)的權(quán)重，您可以使用以下?/*rtl: {value}*/?語(yǔ)法：
$font-weight-bold: 700 #{/* rtl:600 */} !default;
對(duì)于我們的默認(rèn) CSS 和 RTL CSS，這將輸出到以下內(nèi)容：
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
替代字體堆棧
如果您使用自定義字體，請(qǐng)注意并非所有字體都支持非拉丁字母。要從泛歐系列切換到阿拉伯系列，您可能需要?/*rtl:insert: {value}*/?在字體堆棧中使用來(lái)修改字體系列的名稱(chēng)。
例如，要從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同時(shí)進(jìn)行
需要在同一頁(yè)面上同時(shí)使用 LTR 和 RTL？多虧了RTLCSS String Maps，這非常簡(jiǎn)單。使用類(lèi)包裝@imports，并為RTLCS設(shè)置自定義重命名規(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*/
在運(yùn)行 Sass 和 RTLCSS 之后，你的 CSS 文件中的每個(gè)選擇器都會(huì)在RTL 文件前面加上?.ltr?, 和?.rtl?。現(xiàn)在，您就可以使用同一頁(yè)面上兩個(gè)文件，并簡(jiǎn)單地使用?.ltr?或?.rtl?在您的組件封裝使用一個(gè)或另一個(gè)方向。
邊緣情況和已知限制
雖然這種方法是可以理解的，但請(qǐng)注意以下幾點(diǎn)：
在切換?
.ltr?和?.rtl?時(shí)，請(qǐng)確保相應(yīng)地添加了?dir?和?lang?屬性。- 加載這兩個(gè)文件可能是一個(gè)真正的性能瓶頸：考慮一些優(yōu)化，或者嘗試異步加載其中一個(gè)文件。
- 以這種嵌套樣式將阻止我們的?
form-validation-state()?mixin 按預(yù)期工作，因此需要您自己稍微調(diào)整一下。見(jiàn)#31223。
面包屑案例
該面包屑分隔符是唯一需要自己的全新變量的情況-即?$breadcrumb-divider-flipped?——默認(rèn)為?$breadcrumb-divider?。
更多建議：