RTL
Matutunan kung paano paganahin ang suporta para sa kanan-papuntang-kaliwang text sa Bootstrap sa aming layout, mga bahagi, at mga utility.
Maging pamilyar
Inirerekomenda naming maging pamilyar muna sa Bootstrap sa pamamagitan ng pagbabasa sa aming pahina ng Panimula sa Pagsisimula . Kapag natapos mo na ito, magpatuloy sa pagbabasa dito para sa kung paano paganahin ang RTL.
Baka gusto mo ring magbasa tungkol sa proyekto ng RTLCSS , dahil pinapagana nito ang aming diskarte sa RTL.
Pang-eksperimentong tampok
Ang tampok na RTL ay pang- eksperimento pa rin at malamang na magbabago ayon sa feedback ng user. May nakita o may iminumungkahi na pagpapabuti? Magbukas ng isyu , gusto naming makuha ang iyong mga insight.
Kinakailangang HTML
Mayroong dalawang mahigpit na kinakailangan para sa pagpapagana ng RTL sa mga pahinang pinapagana ng Bootstrap.
- Itakda
dir="rtl"
sa<html>
elemento. - Magdagdag ng naaangkop na
lang
katangian, tuladlang="ar"
ng , sa<html>
elemento.
Mula doon, kakailanganin mong magsama ng RTL na bersyon ng aming CSS. Halimbawa, narito ang stylesheet para sa aming pinagsama-sama at pinaliit na CSS na may pinaganang RTL:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Panimulang template
Makikita mo ang mga kinakailangan sa itaas na makikita sa binagong template ng starter ng RTL.
<!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>
Mga halimbawa ng RTL
Magsimula sa isa sa aming ilang mga halimbawa ng RTL .
Lapitan
Ang aming diskarte sa pagbuo ng suporta sa RTL sa Bootstrap ay may kasamang dalawang mahahalagang desisyon na nakakaapekto sa kung paano namin isinusulat at ginagamit ang aming CSS:
-
Una, nagpasya kaming itayo ito gamit ang proyekto ng RTLCSS . Nagbibigay ito sa amin ng ilang makapangyarihang feature para sa pamamahala ng mga pagbabago at pag-override kapag lumilipat mula sa LTR patungo sa RTL. Nagbibigay-daan din ito sa amin na bumuo ng dalawang bersyon ng Bootstrap mula sa isang codebase.
-
Pangalawa, pinalitan namin ang pangalan ng isang maliit na direksyon ng mga klase upang magpatibay ng isang lohikal na diskarte sa mga katangian. Karamihan sa inyo ay nakipag-ugnayan na sa mga lohikal na katangian salamat sa aming mga flex utility—pinapalitan nila ang mga katangian ng direksyon tulad ng
left
atright
paborstart
atend
. Ginagawa nitong naaangkop ang mga pangalan at value ng klase para sa LTR at RTL nang walang anumang overhead.
Halimbawa, sa halip na .ml-3
para sa margin-left
, gamitin ang .ms-3
.
Ang pagtatrabaho sa RTL, sa pamamagitan ng aming source na Sass o compiled CSS, ay hindi dapat magkaiba sa aming default na LTR.
I-customize mula sa pinagmulan
Pagdating sa pag- customize , ang gustong paraan ay ang samantalahin ang mga variable, mapa, at mixin. Parehong gumagana ang diskarteng ito para sa RTL, kahit na ito ay post-processed mula sa mga pinagsama-samang file, salamat sa kung paano gumagana ang RTLCSS .
Mga custom na halaga ng RTL
Gamit ang RTLCSS value directives , maaari kang gumawa ng variable na output ng ibang value para sa RTL. Halimbawa, upang bawasan ang bigat para sa $font-weight-bold
buong codebase, maaari mong gamitin ang /*rtl: {value}*/
syntax:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Alin ang maglalabas sa sumusunod para sa aming default na CSS at RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Alternatibong font stack
Kung gumagamit ka ng custom na font, tandaan na hindi lahat ng font ay sumusuporta sa hindi Latin na alpabeto. Upang lumipat mula sa Pan-European patungo sa Arabic na pamilya, maaaring kailanganin mong gamitin /*rtl:insert: {value}*/
sa iyong font stack upang baguhin ang mga pangalan ng mga pamilya ng font.
Halimbawa, upang lumipat mula Helvetica Neue Webfont
sa para sa LTR patungo sa Helvetica Neue Arabic
para sa RTL, magiging ganito ang hitsura ng iyong Sass code:
$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 at RTL sa parehong oras
Kailangan ng parehong LTR at RTL sa parehong pahina? Salamat sa RTLCSS String Maps , ito ay medyo diretso. I-wrap ang iyong @import
s sa isang klase, at magtakda ng custom na panuntunan sa pagpapalit ng pangalan para sa 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*/
Pagkatapos patakbuhin ang Sass at pagkatapos ay RTLCSS, ang bawat tagapili sa iyong mga CSS file ay pasisimulan ng .ltr
, at .rtl
para sa mga RTL file. Ngayon ay magagamit mo na ang parehong mga file sa parehong pahina, at gamitin lamang .ltr
o .rtl
sa iyong mga bahagi ng wrapper upang magamit ang isa o ang iba pang direksyon.
Edge case at alam na limitasyon
Bagama't nauunawaan ang pamamaraang ito, mangyaring bigyang-pansin ang mga sumusunod:
- Kapag lumilipat
.ltr
at.rtl
, tiyaking magdagdag kadir
atlang
mga attribute nang naaayon. - Ang paglo-load ng parehong mga file ay maaaring maging isang tunay na bottleneck sa pagganap: isaalang-alang ang ilang pag- optimize , at maaaring subukang i- load ang isa sa mga file na iyon nang asynchronous .
- Pipigilan ng mga nesting style sa ganitong paraan ang aming
form-validation-state()
mixin na gumana ayon sa nilalayon, kaya kailangan mong mag-tweak ito nang kaunti nang mag-isa. Tingnan ang #31223 .
Yung breadcrumb case
Ang breadcrumb separator ay ang tanging kaso na nangangailangan ng sarili nitong bagong-bagong variable— ibig sabihin, ang $breadcrumb-divider-flipped
pag-default sa $breadcrumb-divider
.