Bootstrap - RTL（從右到左）

本章討論 Bootstrap 提供的 RTL（從右到左）支援。RTL 功能支援在您的佈局、元件和實用工具中從右到左的文字。

要求

要在由 Bootstrap 提供支援的頁面中啟用 RTL，您必須滿足兩個要求。它們如下所示

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

您需要包含 RTL 版本的 CSS。例如，這是一個啟用了 RTL 的樣式表。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" 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.0/dist/css/bootstrap.rtl.min.css" crossorigin="anonymous">

   <!--"Welcome to Tutorialspoint" written in arabic-->
   <title>مرحبًا بك في Tutorialspoint</title>
</head>
<body>
   <!--"Welcome to Tutorialspoint" written in arabic-->
   <h1>مرحبًا بك في Tutorialspoint</h1>

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

   <!-- Option 1: Bootstrap Bundle with Popper -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" 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.0/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
   -->
</body>
</html>

從原始碼自定義

使用變數、對映和混合器進行自定義。對於 RTL，此方法與 LTR 完全相同。

自定義 RTL 值

有一些用於 RTL CSS 值的指令，您可以透過這些指令為 RTL 設定變數的不同輸出。例如，為了減少整個程式碼庫的字型粗細，您可以使用/*rtl: {value}*/語法。

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

這將為預設 CSS 和 RTL CSS 輸出以下內容。

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

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

替代字型堆疊

您應該注意，並非所有非拉丁字母都受支援。因此，為了從泛歐字型切換到阿拉伯字體系列，您可能需要在字型堆疊中使用/*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;

同時使用 RTL 和 LTR

您是否想同時使用 LTR 和 RTL？這是完全可能的，您只需要用一個類包裝您的@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（或 RTL 檔案的.rtl）。現在這兩個檔案都可以在同一頁面上使用，您可以使用.ltr或.rtl元件包裝器副檔名來指定要使用的方向。

在同時使用 LTR 和 RTL 實現時，您需要注意以下幾點。

切換.ltr和.rtl時，請確保相應地新增dir和lang屬性。
嘗試進行一些自定義並非同步載入兩個檔案（ltr 和 rtl）中的一個，因為載入這兩個檔案可能會導致效能問題。
巢狀樣式將阻止form-validation-state()混合器，並且它可能無法按預期工作。

麵包屑的情況

唯一需要其自身全新變數的情況是麵包屑分隔符，即$breadcrumb-divider-flipped，預設為$breadcrumb-divider。

列印頁面