View on GitHub

RTL

了解我們如何在 Bootstrap 的排版、元件和通用類別中啟用對 right-to-left 的支援。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

On this page

如何熟悉

我們建議您先閱讀入門指南頁面來熟悉 Bootstrap。讀完之後，請繼續閱讀此處以了解如何啟用RTL。

你可能還需要閱讀 RTLCSS 項目，因為它為我們的 RTL 方法提供了動力。

實驗功能

RTL 功能仍然是 實驗性的 並可能會根據用戶的反饋去發展。若有發現了什麼或有改進的建議嗎？分享問題，我們很樂意聽取您的意見。

必要的 HTML

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

在 <html> 元素上設置 dir="rtl"。
在 <html> 元素上加入適合的 lang 屬性，例如 lang=“ar”。

接下來，您需要包括我們的 CSS 的 RTL 版本。例如，這是我們啟用 RTL的已編譯和精簡 CSS 的樣式範例：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-beJoAY4VI2Q+5IPXjI207/ntOuaz06QYCdpWfWRv4lSFDyUSqsM0W+wiAMr2I185" crossorigin="anonymous">

基本模板

你可以看到這個修改後的基本模板中，驗證了上面的要求：

<!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-beJoAY4VI2Q+5IPXjI207/ntOuaz06QYCdpWfWRv4lSFDyUSqsM0W+wiAMr2I185" 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-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" 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-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL 範例

開始使用以下的幾種方法之一 RTL examples.

方法

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

首先，我們決定使用 RTLCSS 項目進行構建。 這為我們提供了一些強大的功能，可用於管理從 LTR 轉向 RTL 的更改和替代。它還允許我們從一個程式庫構建兩個版本的 Bootstrap。
**再來，我們採用邏輯屬性方法，將少數的方向類別重新命名。**因為我們 flex 的通用類別，大多數的使用者都已經接觸過了邏輯屬性方法 - 它們將方向屬性如 left 和 right 取代為 start 和 end。這讓這些 class 名稱、用值更為適合 LTR 與 RTL。

例如，用 .ms-3 取代 margin-left 的 .ml-3。

透過我們原始的 Sass 或已編譯的 CSS 去使用 RTL，與我們的預設的 LTR 應該沒有太大不同。

從原始碼自定義

當涉及到自定義時，首選的方法是使用 variables、maps、和 mixins。就算是從編譯後的文件進行後處理，此方法也適用於 RTL，參考 RTLCSS 的運作方式。

自定義 RTL 數值

使用 RTLCSS 數值指令，可以從 variable 輸出不同的值給 RTL。例如，要減少整個 $font-weight-bold 代碼的權重，可以使用 /*rtl: {value}*/ 語法：

$font-weight-bold: 700 #{/* rtl:600 */} !default;

將會對預設的 CSS and RTL CSS 輸出以下內容：

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

備用字體堆疊

如果您使用的是自定義字體，請注意，並非所有字體都支持非拉丁字母。為了將歐洲語系轉換為阿拉伯語系，你可能需要在在字體堆疊中使用 /*rtl:insert: {value}*/ 來修改字體的名稱。例如，要將 LTR 的 Helvetica Neue Webfont 轉換為 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 String Maps，這非常簡單。用一個 class 包你的 @imports，並為 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 和 .rtl 來表示 RTL 文件。現在，您可以在同一個頁面中使用這兩個文件，只需在 components wrappers 上使用 .ltr 或 .rtl，即可使用一個或另一個方向。

極端情況和已知限制

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

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

breadcrumb separator 是唯一需要為自己定義新變數的情況，即 $breadcrumb-divider-flipped — 預設為 $breadcrumb-divider。

RTL