RTL
Sinau carane ngaktifake dhukungan kanggo teks tengen-ngiwa ing Bootstrap ing tata letak, komponen, lan utilitas.
Menowo
Disaranake supaya kenal karo Bootstrap dhisik kanthi maca liwat kaca Pambuka Miwiti . Sawise sampeyan wis mbukak liwat, terus maca kene kanggo carane ngaktifake RTL.
Sampeyan bisa uga pengin maca babagan proyek RTLCSS , amarga menehi daya kanggo pendekatan RTL.
Fitur eksperimental
Fitur RTL isih eksperimen lan bisa uga bakal berkembang miturut umpan balik pangguna. Kesawang soko utawa duwe dandan kanggo suggest? Mbukak masalah , kita seneng njaluk wawasan sampeyan.
HTML sing dibutuhake
Ana rong syarat sing ketat kanggo ngaktifake RTL ing kaca sing nganggo Bootstrap.
- Setel
dir="rtl"
ing<html>
unsur. - Tambah
lang
atribut sing cocog, kayalang="ar"
, ing<html>
unsur kasebut.
Saka ing kono, sampeyan kudu nyakup versi RTL saka CSS kita. Contone, iki stylesheet kanggo CSS sing dikompilasi lan dikurangi kanthi RTL aktif:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Cithakan wiwitan
Sampeyan bisa ndeleng syarat ing ndhuwur sing dibayangke ing cithakan wiwitan RTL sing diowahi iki.
<!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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
conto RTL
Miwiti salah siji saka sawetara conto RTL .
pendekatan
Pendekatan kita kanggo mbangun dhukungan RTL menyang Bootstrap dilengkapi karo rong keputusan penting sing mengaruhi cara nulis lan nggunakake CSS:
-
Pisanan, kita mutusake kanggo mbangun karo proyek RTLCSS . Iki menehi sawetara fitur kuat kanggo ngatur owah-owahan lan overrides nalika pindhah saka LTR kanggo RTL. Uga ngidini kita mbangun rong versi Bootstrap saka siji basis kode.
-
Kapindho, kita wis ngganti jeneng sawetara kelas arah kanggo nggunakake pendekatan sifat logis. Umume sampeyan wis sesambungan karo sifat logis amarga utilitas fleksibel kita - ngganti sifat arah kaya
left
lanright
sing disenengistart
lanend
. Sing nggawe jeneng kelas lan nilai cocok kanggo LTR lan RTL tanpa overhead.
Contone, tinimbang .ml-3
kanggo margin-left
, nggunakake .ms-3
.
Nggarap RTL, liwat sumber Sass utawa kompilasi CSS, mesthine ora beda karo LTR standar.
Ngatur saka sumber
Nalika nerangake kustomisasi , cara sing disenengi yaiku njupuk kauntungan saka variabel, peta, lan campuran. Pendekatan iki bisa digunakake kanggo RTL, sanajan wis diproses saka file sing dikompilasi, amarga cara kerja RTLCSS .
Nilai RTL khusus
Nggunakake arahan nilai RTLCSS , sampeyan bisa nggawe output variabel dadi nilai sing beda kanggo RTL. Contone, kanggo ngurangi bobot $font-weight-bold
ing saindhenging basis kode, sampeyan bisa nggunakake /*rtl: {value}*/
sintaks:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Sing bakal ngasilake ing ngisor iki kanggo CSS standar lan CSS RTL:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Numpuk font alternatif
Yen sampeyan nggunakake font khusus, elinga yen ora kabeh font ndhukung aksara non-Latin. Kanggo ngalih saka kulawarga Pan-Eropah menyang kulawarga Arab, sampeyan bisa uga kudu nggunakake /*rtl:insert: {value}*/
tumpukan font kanggo ngowahi jeneng kulawarga font.
Contone, kanggo ngalih saka Helvetica Neue Webfont
LTR menyang Helvetica Neue Arabic
RTL, kode Sass sampeyan katon kaya iki:
$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 lan RTL bebarengan
Perlu LTR lan RTL ing kaca sing padha? Thanks kanggo RTLCSS String Maps , iki cukup gampang. Bungkus @import
s sampeyan karo kelas, lan atur aturan ganti jeneng khusus kanggo 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*/
Sawise mbukak Sass banjur RTLCSS, saben pamilih ing file CSS bakal prepended dening .ltr
, lan .rtl
kanggo file RTL. Saiki sampeyan bisa nggunakake loro file ing kaca sing padha, lan mung nggunakake .ltr
utawa .rtl
ing pambungkus komponen kanggo nggunakake siji utawa arah liyane.
Kasus pinggiran lan watesan sing dikenal
Nalika pendekatan iki bisa dingerteni, mangga digatekake ing ngisor iki:
- Nalika ngoper
.ltr
lan.rtl
, priksa manawa sampeyan nambahdir
lanlang
atribut sing cocog. - Loading file loro bisa dadi bottleneck kinerja nyata: nimbang sawetara optimasi , lan bisa uga nyoba kanggo mbukak salah siji saka file asynchronously .
- Gaya nesting kanthi cara iki bakal nyegah
form-validation-state()
mixin bisa digunakake kaya sing dikarepake, mula sampeyan kudu ngapiki dhewe. Waca #31223 .
Kasus breadcrumb
Pemisah breadcrumb minangka siji-sijine kasus sing mbutuhake variabel anyar dhewe - yaiku $breadcrumb-divider-flipped
- default menyang $breadcrumb-divider
.