Skip to main content Skip to docs navigation
View on GitHub

RTL

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

On this page

如何熟悉

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

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

實驗功能

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

必要的 HTML

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

  1. 在 <html> 元素上設置 dir="rtl"。
  2. 在 <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-jHiSqEim4+W1UCvv8kTcMbtCZlRF8MxbgKdfpvncia8gdN1UImBnhTpKtufREzv7" 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-jHiSqEim4+W1UCvv8kTcMbtCZlRF8MxbgKdfpvncia8gdN1UImBnhTpKtufREzv7" 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-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" 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-lpyLfhYuitXl2zRZ5Bn2fqnhNAKOAaM/0Kr9laMspuaMiZfGmfwRNFh8HlMy49eQ" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL 範例

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

方法

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

  1. 首先，我們決定使用 RTLCSS 項目進行構建。 這為我們提供了一些強大的功能，可用於管理從 LTR 轉向 RTL 的更改和替代。它還允許我們從一個程式庫構建兩個版本的 Bootstrap。

  2. **再來，我們採用邏輯屬性方法，將少數的方向類別重新命名。**因為我們 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 and RTL at the same time

Need both LTR and RTL on the same page? Thanks to RTLCSS String Maps, this is pretty straightforward. Wrap your @imports with a class, and set a custom rename rule for 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*/

After running Sass then RTLCSS, each selector in your CSS files will be prepended by .ltr, and .rtl for RTL files. Now you’re able to use both files on the same page, and simply use .ltr or .rtl on your components wrappers to use one or the other direction.

Edge cases and known limitations

While this approach is understandable, please pay attention to the following:

  1. When switching .ltr and .rtl, make sure you add dir and lang attributes accordingly.
  2. Loading both files can be a real performance bottleneck: consider some optimization, and maybe try to load one of those files asynchronously.
  3. Nesting styles this way will prevent our form-validation-state() mixin from working as intended, thus require you tweak it a bit by yourself. See #31223.

breadcrumb 麵包屑

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

額外資源