RTL

了解我們?nèi)绾卧贐ootstrap的排版、元件和通用類別中啟用對right-to-left的支持。

On this page

如何熟悉

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

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

實驗功能

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

必要的 HTML

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

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

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

<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 範(fàn)例

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

方法

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

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

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

透過我們原始的 Sass 或已編譯的 CSS 去使用 RTL，與我們的預(yù)設(shè)的 LTR 應(yīng)該沒有太大不同。

從原始碼自定義

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

自定義 RTL 數(shù)值

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

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

將會對預(yù)設(shè)的 CSS and RTL CSS 輸出以下內(nèi)容：

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

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

備用字體堆疊

如果您使用的是自定義字體，請注意，並非所有字體都支持非拉丁字母。為了將歐洲語系轉(zhuǎn)換為阿拉伯語系，你可能需要在在字體堆疊中使用 /*rtl:insert: {value}*/ 來修改字體的名稱。例如，要將 LTR 的 Helvetica Neue Webfont 轉(zhuǎn)換為 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 是唯一需要為自己定義新變數(shù)的情況，即 $breadcrumb-divider-flipped — 預(yù)設(shè)為 $breadcrumb-divider。

RTL