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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL 示例

從我們的幾個RTL 示例之一開始。

方法

我們在 Bootstrap 中構建 RTL 支持的方法有兩個重要的決定，這些決定會影響我們編寫和使用 CSS 的方式：

首先，我們決定使用RTLCSS項目來構建它。這為我們提供了一些強大的功能，用於在從 LTR 遷移到 RTL 時管理更改和覆蓋。它還允許我們從一個代碼庫構建兩個版本的 Bootstrap。
其次，我們重命名了一些方向類以採用邏輯屬性方法。借助我們的 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來使用一個或另一個方向。

邊緣情況和已知限制

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

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

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

RTL

熟悉