RTL

了解如何在 Bootstrap 中為我們的版面、元件和工具啟用支援從右到左的文字。

在此頁面上

熟悉

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

您可能還想閱讀 RTLCSS 專案，因為它支援我們對 RTL 的方法。

Bootstrap 的 RTL 功能仍處於實驗階段，並會根據使用者的回饋進行調整。發現問題或有改進建議嗎？開啟問題，我們很樂意聽取您的見解。

必要的 HTML

在以 Bootstrap 為基礎的頁面中啟用 RTL 有兩個嚴格的要求。

在 <html> 元素上設定 dir="rtl"。
在 <html> 元素上新增適當的 lang 屬性，例如 lang="ar"。

從那裡，您需要包含我們的 CSS 的 RTL 版本。例如，以下是啟用 RTL 的已編譯和已壓縮 CSS 的樣式表

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" 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/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" 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.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL 範例

從我們的幾個 RTL 範例開始。

方法

我們建立 Bootstrap 中 RTL 支援的方法附帶兩個重要的決定，影響我們撰寫和使用 CSS 的方式

首先，我們決定使用 RTLCSS 專案來建立它。這為我們提供一些強大的功能，用於在從 LTR 轉換到 RTL 時管理變更和覆寫。它也允許我們從一個程式碼庫建立兩個版本的 Bootstrap。
其次，我們重新命名一些方向類別，以採用邏輯屬性方法。由於我們的彈性公用程式，大多數人已經與邏輯屬性互動過，它們以 start 和 end 取代 left 和 right 等方向屬性。這使得類別名稱和值適合 LTR 和 RTL，而沒有任何額外負擔。

例如，使用 .ms-3 取代 .ml-3 表示 margin-left。

透過我們的 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}*/ 來修改字型家族的名稱。

例如，若要從 LTR 的 Helvetica Neue 字型切換到 RTL 的 Helvetica Neue Arabic 字型，您的 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 字串對應，這非常簡單。使用類別包裝您的 @import，並為 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 檔案中的每個選取器都會加上 .ltr（LTR 檔案）或 .rtl（RTL 檔案）開頭。現在您可以在同一頁面上使用這兩個檔案，只要在元件包裝器上使用 .ltr 或 .rtl 即可使用其中一個方向。

邊界案例和已知限制在使用結合 LTR 和 RTL 實作時需要考量

切換 .ltr 和 .rtl 時，請務必相應地新增 dir 和 lang 屬性。
載入兩個檔案可能會造成真正的效能瓶頸：考慮一些最佳化，並嘗試非同步載入其中一個檔案。
以這種方式巢狀樣式會使我們的 form-validation-state() 混入無法按預期運作，因此需要您自行調整。請參閱 #31223。

麵包屑分隔符號是唯一需要自己全新變數的案例，即 $breadcrumb-divider-flipped，預設為 $breadcrumb-divider。

RTL

熟悉