跳到主要內容 跳到文檔導航

了解如何在我們的佈局、組件和實用程序中啟用對 Bootstrap 中從右到左文本的支持。

熟悉

我們建議首先閱讀我們的入門介紹頁面來熟悉 Bootstrap 。完成後,請繼續閱讀此處了解如何啟用 RTL。

您可能還想閱讀RTLCSS 項目,因為它為我們的 RTL 方法提供了動力。

實驗功能

RTL 功能仍處於試驗階段,可能會根據用戶反饋進行改進。發現了什麼或有改進建議?打開一個問題,我們很想得到您的見解。

必需的 HTML

在 Bootstrap 支持的頁面中啟用 RTL 有兩個嚴格的要求。

  1. 設置dir="rtl"<html>元素上。
  2. 在元素上添加適當的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 的方式:

  1. 首先,我們決定使用RTLCSS項目來構建它。這為我們提供了一些強大的功能,用於在從 LTR 遷移到 RTL 時管理更改和覆蓋。它還允許我們從一個代碼庫構建兩個版本的 Bootstrap。

  2. 其次,我們重命名了一些方向類以採用邏輯屬性方法。多虧了我們的 flex 實用程序,你們中的大多數人已經與邏輯屬性進行了交互——它們替換了方向屬性,例如leftandright支持startand end。這使得類名和值適用於 LTR 和 RTL,而沒有任何開銷。

例如,代替.ml-3for 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 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,這非常簡單。用類包裝你@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。現在您可以在同一頁面上使用這兩個文件,並且只需在您的組件包裝器上使用.ltror.rtl來使用一個或另一個方向。

邊緣情況和已知限制

雖然這種方法是可以理解的,但請注意以下幾點:

  1. 切換.ltr和時.rtl,請確保相應地添加dirlang屬性。
  2. 加載這兩個文件可能是一個真正的性能瓶頸:考慮一些優化,也許嘗試異步加載其中一個文件
  3. 以這種方式嵌套樣式將阻止我們的form-validation-state()mixin 按預期工作,因此需要您自己稍微調整一下。請參閱#31223

麵包屑案例

麵包屑分隔符是唯一需要其自己的全新變量的情況 - 即$breadcrumb-divider-flipped- 默認為$breadcrumb-divider.

其他資源