RTL

Tìm hiểu cách bật hỗ trợ cho văn bản từ phải sang trái trong Bootstrap trên bố cục, thành phần và tiện ích của chúng tôi.

Trên trang này

Làm quen

Chúng tôi khuyên bạn nên làm quen với Bootstrap trước bằng cách đọc qua trang Giới thiệu Bắt đầu của chúng tôi . Khi bạn đã chạy qua nó, hãy tiếp tục đọc ở đây để biết cách bật RTL.

Bạn cũng có thể muốn đọc về dự án RTLCSS , vì nó hỗ trợ cách tiếp cận RTL của chúng tôi.

Tính năng thử nghiệm

Tính năng RTL vẫn đang trong giai đoạn thử nghiệm và có thể sẽ phát triển theo phản hồi của người dùng. Phát hiện một cái gì đó hoặc có một cải tiến để đề xuất? Mở một vấn đề , chúng tôi muốn có được thông tin chi tiết của bạn.

HTML bắt buộc

Có hai yêu cầu nghiêm ngặt để bật RTL trong các trang hỗ trợ Bootstrap.

Đặt dir="rtl"trên <html>phần tử.
Thêm một langthuộc tính thích hợp, chẳng hạn như lang="ar", trên <html>phần tử.

Từ đó, bạn sẽ cần bao gồm phiên bản RTL của CSS của chúng tôi. Ví dụ: đây là biểu định kiểu cho CSS đã biên dịch và rút gọn của chúng tôi có bật RTL:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" crossorigin="anonymous">

Mẫu dành cho người mới bắt đầu

Bạn có thể thấy các yêu cầu trên được phản ánh trong mẫu khởi động RTL đã sửa đổi này.

<!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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Ví dụ RTL

Bắt đầu với một trong một số ví dụ RTL của chúng tôi .

Cách tiếp cận

Cách tiếp cận của chúng tôi để xây dựng hỗ trợ RTL vào Bootstrap đi kèm với hai quyết định quan trọng ảnh hưởng đến cách chúng tôi viết và sử dụng CSS của mình:

Đầu tiên, chúng tôi quyết định xây dựng nó bằng dự án RTLCSS . Điều này cung cấp cho chúng tôi một số tính năng mạnh mẽ để quản lý các thay đổi và ghi đè khi chuyển từ LTR sang RTL. Nó cũng cho phép chúng tôi xây dựng hai phiên bản Bootstrap từ một cơ sở mã.
Thứ hai, chúng tôi đã đổi tên một số lớp định hướng để áp dụng cách tiếp cận thuộc tính logic. Hầu hết các bạn đã tương tác với các thuộc tính logic nhờ các tiện ích linh hoạt của chúng tôi — chúng thay thế các thuộc tính hướng như leftvà có rightlợi startvà end. Điều đó làm cho các tên và giá trị của lớp phù hợp với LTR và RTL mà không có bất kỳ chi phí nào.

Ví dụ, thay vì .ml-3for margin-left, hãy sử dụng .ms-3.

Làm việc với RTL, thông qua Sass nguồn hoặc CSS đã biên dịch của chúng tôi, không nên khác nhiều so với LTR mặc định của chúng tôi.

Tùy chỉnh từ nguồn

Khi nói đến tùy chỉnh , cách ưu tiên là tận dụng các biến, bản đồ và mixin. Cách tiếp cận này hoạt động tương tự đối với RTL, ngay cả khi nó được xử lý sau từ các tệp đã biên dịch, nhờ vào cách RTLCSS hoạt động .

Giá trị RTL tùy chỉnh

Sử dụng chỉ thị giá trị RTLCSS , bạn có thể tạo một đầu ra biến trở thành một giá trị khác cho RTL. Ví dụ: để giảm trọng lượng $font-weight-boldtrong toàn bộ cơ sở mã, bạn có thể sử dụng /*rtl: {value}*/cú pháp:

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

Điều này sẽ xuất ra như sau cho CSS CSS và RTL mặc định của chúng tôi:

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

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

Ngăn xếp phông chữ thay thế

Trong trường hợp bạn đang sử dụng phông chữ tùy chỉnh, hãy lưu ý rằng không phải tất cả các phông chữ đều hỗ trợ bảng chữ cái không phải Latinh. Để chuyển từ họ Liên Âu sang Ả Rập, bạn có thể cần sử dụng /*rtl:insert: {value}*/ngăn xếp phông chữ của mình để sửa đổi tên của họ phông chữ.

Ví dụ: để chuyển từ Helvetica Neuephông chữ cho LTR sang Helvetica Neue Arabiccho RTL, mã Sass của bạn có thể trông như sau:

$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 và RTL cùng một lúc

Cần cả LTR và RTL trên cùng một trang? Nhờ Bản đồ chuỗi RTLCSS , điều này khá đơn giản. Kết hợp các @imports của bạn với một lớp và đặt quy tắc đổi tên tùy chỉnh cho 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*/

Sau khi chạy Sass rồi đến RTLCSS, mỗi bộ chọn trong các tệp CSS của bạn sẽ được thêm vào trước .ltrvà .rtlđối với các tệp RTL. Giờ đây, bạn có thể sử dụng cả hai tệp trên cùng một trang và chỉ cần sử dụng .ltrhoặc .rtltrên trình bao bọc các thành phần của bạn để sử dụng một hoặc hướng khác.

Các trường hợp cạnh và các hạn chế đã biết

Mặc dù cách tiếp cận này có thể hiểu được, nhưng hãy chú ý đến những điều sau:

Khi chuyển đổi .ltrvà .rtl, hãy đảm bảo bạn thêm dirvà langcác thuộc tính cho phù hợp.
Tải cả hai tệp có thể là một nút cổ chai hiệu suất thực sự: hãy xem xét một số tối ưu hóa và có thể thử tải một trong những tệp đó không đồng bộ .
Việc lồng các kiểu theo cách này sẽ ngăn không cho form-validation-state()mixin của chúng ta hoạt động như dự định, do đó yêu cầu bạn phải tự mình chỉnh sửa nó một chút. Xem # 31223 .

Dấu phân tách breadcrumb là trường hợp duy nhất yêu cầu biến hoàn toàn mới của nó— cụ thể là $breadcrumb-divider-flipped—defaults to $breadcrumb-divider.

RTL