RTL
Pelajari cara mengaktifkan dukungan untuk teks kanan-ke-kiri di Bootstrap di seluruh tata letak, komponen, dan utilitas kami.
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
lang
atribut yang sesuai, sepertilang="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
left
danright
mendukungstart
danend
. Itu membuat nama dan nilai kelas sesuai untuk LTR dan RTL tanpa biaya tambahan.
Misalnya, alih-alih .ml-3
untuk 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-bold
di 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 Webfont
untuk LTR ke Helvetica Neue Arabic
RTL, 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 @import
s 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 .rtl
untuk file RTL. Sekarang Anda dapat menggunakan kedua file pada halaman yang sama, dan cukup gunakan .ltr
atau .rtl
pada 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
.ltr
dan.rtl
, pastikan Anda menambahkandir
danlang
atribut 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 .
Kasus remah roti
Pemisah remah roti adalah satu-satunya kasus yang membutuhkan variabel barunya sendiri— yaitu $breadcrumb-divider-flipped
—default ke $breadcrumb-divider
.