RTL
Diajar kumaha ngaktipkeun rojongan pikeun téks katuhu-ka-kénca dina Bootstrap sakuliah tata perenah urang, komponén, jeung utilitas.
Wawuh
Kami ngarékoméndasikeun pikeun kenal sareng Bootstrap heula ku maca halaman Perkenalan Ngamimitian kami . Sakali anjeun parantos ngaliwat, teraskeun maca di dieu pikeun kumaha cara ngaktipkeun RTL.
Anjeun oge bisa hayang maca up on proyék RTLCSS , sabab kakuatan pendekatan kami pikeun RTL.
Fitur ékspérimén
Fitur RTL masih ékspérimén sareng sigana bakal mekar dumasar kana tanggapan pangguna. Ningali hiji hal atanapi gaduh pamutahiran pikeun nyarankeun? Buka hiji masalah , kami hoyong kéngingkeun wawasan anjeun.
HTML diperlukeun
Aya dua syarat anu ketat pikeun ngaktipkeun RTL dina halaman anu didamel Bootstrap.
- Setel
dir="rtl"
dina<html>
unsur. - Tambahkeun hiji
lang
atribut luyu, kawaslang="ar"
, dina<html>
unsur.
Ti dinya, anjeun kedah ngalebetkeun versi RTL tina CSS kami. Salaku conto, ieu mangrupikeun stylesheet pikeun CSS kami anu disusun sareng diminimalkeun kalayan diaktipkeun RTL:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Citakan starter
Anjeun tiasa ningali sarat di luhur reflected dina ieu dirobah RTL starter template.
<!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>
conto RTL
Mimitian ku salah sahiji sababaraha conto RTL kami .
Ngadeukeutan
Pendekatan kami pikeun ngawangun dukungan RTL kana Bootstrap hadir sareng dua kaputusan penting anu mangaruhan kumaha urang nyerat sareng ngagunakeun CSS kami:
-
Kahiji, urang mutuskeun pikeun ngawangun éta kalayan proyék RTLCSS . Ieu masihan kami sababaraha fitur anu kuat pikeun ngatur parobahan sareng overrides nalika pindah ti LTR ka RTL. Ogé ngamungkinkeun urang ngawangun dua vérsi Bootstrap tina hiji basis kode.
-
Kadua, kami parantos namina sababaraha kelas arah pikeun ngadopsi pendekatan sipat logis. Seuseueurna anjeun parantos berinteraksi sareng sipat logis berkat utilitas fleksibel kami-aranjeunna ngagentos sipat arah sapertos
left
sarengright
dina kahadeanstart
sarengend
. Nu ngajadikeun ngaran kelas na nilai luyu pikeun LTR na RTL tanpa overhead nanaon.
Contona, tinimbang .ml-3
keur margin-left
, make .ms-3
.
Gawe sareng RTL, ngaliwatan sumber urang Sass atanapi CSS disusun, teu kudu jauh béda ti LTR standar urang sanajan.
Sesuaikeun tina sumber
Nalika datang ka kustomisasi , cara anu dipikaresep nyaéta ngamangpaatkeun variabel, peta, sareng campuran. Pendekatan ieu tiasa dianggo sami pikeun RTL, sanaos diolah saatosna tina file anu disusun, hatur nuhun kana kumaha RTLCSS jalanna .
nilai custom RTL
Ngagunakeun diréktif nilai RTLCSS , anjeun tiasa ngadamel kaluaran variabel hiji nilai béda pikeun RTL. Contona, pikeun ngurangan beurat $font-weight-bold
sapanjang codebase, Anjeun bisa make /*rtl: {value}*/
sintaksis:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Nu bakal kaluaran ka handap pikeun CSS standar urang jeung RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
tumpukan font alternatif
Upami anjeun nganggo font khusus, perhatikeun yén henteu sadayana fon ngadukung alfabét non-Latin. Pikeun ngalih ti Pan-Éropa ka kulawarga Arab, anjeun kedah nganggo /*rtl:insert: {value}*/
dina tumpukan font anjeun pikeun ngarobih nami kulawarga font.
Contona, pikeun ngalih ti Helvetica Neue Webfont
LTR ka Helvetica Neue Arabic
RTL, kode Sass anjeun siga kieu:
$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 sareng RTL dina waktos anu sami
Peryogi LTR sareng RTL dina halaman anu sami? Hatur nuhun kana RTLCSS String Maps , ieu geulis lugas. Bungkus @import
s anjeun kalawan kelas, tur nyetel aturan ngaganti ngaran custom pikeun 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*/
Sanggeus ngajalankeun Sass lajeng RTLCSS, unggal pamilih dina file CSS anjeun bakal prepended ku .ltr
, sarta .rtl
pikeun file RTL. Ayeuna anjeun tiasa nganggo duanana file dina halaman anu sami, sareng ngan ukur nganggo .ltr
atanapi .rtl
dina bungkus komponén anjeun pikeun nganggo hiji atanapi arah anu sanés.
Kasus tepi sareng watesan anu dipikanyaho
Sanaos pendekatan ieu kaharti, punten perhatoskeun ieu:
- Nalika ngagentos
.ltr
sareng.rtl
, pastikeun anjeun nambihandir
sarenglang
atribut sasuai. - Loading duanana file bisa jadi bottleneck kinerja nyata: mertimbangkeun sababaraha optimasi , sarta meureun coba mun muka salah sahiji file asynchronously .
- Gaya nyarang ku cara ieu bakal nyegah
form-validation-state()
mixin urang tiasa dianggo sakumaha anu dituju, ku kituna anjeun kedah ngarobih sakedik ku nyalira. Tempo #31223 .
Kasus breadcrumb
Pamisah breadcrumb mangrupikeun hiji-hijina pasualan anu meryogikeun variabel anyarna sorangan— nyaéta $breadcrumb-divider-flipped
—defaulting ka $breadcrumb-divider
.