RTL

了解我们如何在Bootstrap的排版、元件和通用类别中启用对right-to-left的支持。

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/bootstrap@5.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" 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/bootstrap@5.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">

    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper.js and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" 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 */"},
  // 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;

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

RTL