RTL

Pelajari cara mengaktifkan dukungan untuk teks kanan-ke-kiri di Bootstrap di seluruh tata letak, komponen, dan utilitas kami.

Di halaman ini

Kenali

Kami merekomendasikan untuk membiasakan diri dengan Bootstrap terlebih dahulu dengan membaca halaman Pengenalan Memulai kami . Setelah Anda menjalankannya, lanjutkan membaca di sini untuk cara mengaktifkan RTL.

Anda mungkin juga ingin membaca tentang proyek RTLCSS , karena ini memperkuat pendekatan kami terhadap RTL.

Fitur eksperimental

Fitur RTL masih eksperimental dan mungkin akan berkembang sesuai dengan umpan balik pengguna. Melihat sesuatu atau memiliki perbaikan untuk disarankan? Buka masalah , kami ingin mendapatkan wawasan Anda.

HTML yang diperlukan

Ada dua persyaratan ketat untuk mengaktifkan RTL di halaman yang didukung Bootstrap.

Tetapkan dir="rtl"pada <html>elemen.
Tambahkan langatribut yang sesuai, seperti lang="ar", pada <html>elemen.

Dari sana, Anda harus menyertakan versi RTL dari CSS kami. Misalnya, inilah stylesheet untuk CSS kami yang dikompilasi dan diperkecil dengan mengaktifkan RTL:

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

Template pemula

Anda dapat melihat persyaratan di atas yang tercermin dalam template starter RTL yang dimodifikasi ini.

<!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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Contoh RTL

Mulailah dengan salah satu dari beberapa contoh RTL kami .

Mendekati

Pendekatan kami untuk membangun dukungan RTL ke dalam Bootstrap hadir dengan dua keputusan penting yang memengaruhi cara kami menulis dan menggunakan CSS kami:

Pertama, kami memutuskan untuk membangunnya dengan proyek RTLCSS . Ini memberi kami beberapa fitur canggih untuk mengelola perubahan dan penggantian saat berpindah dari LTR ke RTL. Ini juga memungkinkan kita untuk membangun dua versi Bootstrap dari satu basis kode.
Kedua, kami telah mengganti nama beberapa kelas terarah untuk mengadopsi pendekatan properti logis. Sebagian besar dari Anda telah berinteraksi dengan properti logis berkat utilitas fleksibel kami—mereka menggantikan properti arah seperti leftdan rightmendukung startdan end. Itu membuat nama dan nilai kelas sesuai untuk LTR dan RTL tanpa biaya tambahan.

Misalnya, alih-alih .ml-3untuk margin-left, gunakan .ms-3.

Bekerja dengan RTL, melalui Sass sumber kami atau CSS yang dikompilasi, seharusnya tidak jauh berbeda dari LTR default kami.

Sesuaikan dari sumber

Dalam hal penyesuaian , cara yang lebih disukai adalah memanfaatkan variabel, peta, dan mixin. Pendekatan ini bekerja sama untuk RTL, meskipun setelah diproses dari file yang dikompilasi, berkat cara kerja RTLCSS .

Nilai RTL khusus

Menggunakan arahan nilai RTLCSS , Anda dapat membuat output variabel menjadi nilai yang berbeda untuk RTL. Misalnya, untuk mengurangi bobot $font-weight-bolddi seluruh basis kode, Anda dapat menggunakan /*rtl: {value}*/sintaks:

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

Yang akan menampilkan berikut ini untuk CSS default dan RTL CSS kami:

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

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

Tumpukan font alternatif

Jika Anda menggunakan font khusus, perhatikan bahwa tidak semua font mendukung alfabet non-Latin. Untuk beralih dari keluarga Pan-Eropa ke Arab, Anda mungkin perlu menggunakan /*rtl:insert: {value}*/tumpukan font untuk mengubah nama keluarga font.

Misalnya, untuk beralih dari Helvetica Neue Webfontuntuk LTR ke Helvetica Neue ArabicRTL, kode Sass Anda terlihat seperti ini:

$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 dan RTL secara bersamaan

Butuh LTR dan RTL di halaman yang sama? Berkat RTLCSS String Maps , ini cukup mudah. Bungkus @imports Anda dengan kelas, dan tetapkan aturan ganti nama khusus untuk 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*/

Setelah menjalankan Sass lalu RTLCSS, setiap pemilih di file CSS Anda akan diawali dengan .ltr, dan .rtluntuk file RTL. Sekarang Anda dapat menggunakan kedua file pada halaman yang sama, dan cukup gunakan .ltratau .rtlpada pembungkus komponen Anda untuk menggunakan satu atau arah lain.

Kasus tepi dan batasan yang diketahui

Meskipun pendekatan ini dapat dimengerti, harap perhatikan hal-hal berikut:

Saat beralih .ltrdan .rtl, pastikan Anda menambahkan dirdan langatribut yang sesuai.
Memuat kedua file dapat menjadi hambatan kinerja yang nyata: pertimbangkan beberapa pengoptimalan , dan mungkin coba muat salah satu file tersebut secara asinkron .
Gaya bersarang dengan cara ini akan mencegah form-validation-state()mixin kami bekerja sebagaimana dimaksud, sehingga mengharuskan Anda mengubahnya sedikit sendiri. Lihat #31223 .

Pemisah remah roti adalah satu-satunya kasus yang membutuhkan variabel barunya sendiri— yaitu $breadcrumb-divider-flipped—default ke $breadcrumb-divider.

RTL