RTL
Dzidza maitiro ekugonesa rutsigiro rwemavara-kuruboshwe-kuruboshwe muBootstrap pane yedu dhizaini, zvikamu, uye zvekushandisa.
Ziva
Isu tinokurudzira kujairana neBootstrap kutanga nekuverenga kuburikidza neGetting Started Sumo peji . Kana wapedza mazviri, ramba uchiverenga pano kuti ugone kugonesa RTL.
Iwe unogona zvakare kuda kuverenga pamusoro peiyo RTLCSS chirongwa , sezvo ichipa simba maitiro edu kuRTL.
Experimental feature
Iyo RTL ficha ichiri kuyedza uye inogona kushanduka zvichienderana nemhinduro yemushandisi. Wakaona chimwe chinhu kana kuva nekuvandudzwa kwekukurudzira? Vhura imwe nyaya , tinoda kuwana ruzivo rwako.
Inodiwa HTML
Pane zviviri zvakaomarara zvinodiwa pakugonesa RTL muBootstrap-powered mapeji.
- Gadzirisa
dir="rtl"
pane<html>
chinhu. - Wedzera
lang
hunhu hwakakodzera, sengelang="ar"
, pane<html>
chinhu.
Kubva ipapo, iwe uchafanirwa kusanganisira RTL vhezheni yeCSS yedu. Semuyenzaniso, heino shizha remaitiro edu akaunganidzwa uye akacheneswa CSS ine RTL inogoneswa:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Starter template
Iwe unogona kuona izvo zviri pamusoro zvinodiwa zvinoratidzwa mune ino yakagadziridzwa RTL yekutanga 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>
RTL mienzaniso
Tanga neimwe yemienzaniso yedu yakati wandei yeRTL .
Approach
Maitiro edu ekuvaka RTL rutsigiro muBootstrap inouya nesarudzo mbiri dzakakosha dzinobata manyorero atinoita nekushandisa CSS yedu:
-
Kutanga, takasarudza kuivaka nechirongwa cheRTLCSS . Izvi zvinotipa mamwe maficha ane simba ekugadzirisa shanduko uye anodarika kana uchifamba kubva kuLTR kuenda kuRTL. Izvo zvinotibvumirawo kuvaka maviri mavhezheni eBootstrap kubva kune imwe codebase.
-
Chechipiri, takapa zita remakirasi mashoma ekutungamira kuti atore inonzwisisika zvivakwa maitiro. Vazhinji vako vakatodyidzana neane musoro zvivakwa nekuda kwekushandisa kwedu kuchinjika-vanotsiva mafambiro ezvivakwa senge
left
uyeright
mukufarirastart
uyeend
. Izvo zvinoita kuti mazita ekirasi uye kukosha kwakakodzera LTR neRTL pasina chero pamusoro.
Somuenzaniso, panzvimbo ye .ml-3
, margin-left
shandisa .ms-3
.
Kushanda neRTL, kuburikidza neyedu sosi Sass kana yakaunganidzwa CSS, haifanire kunge yakasiyana zvakanyanya neyedu default LTR zvakadaro.
Gadzirisa kubva kunobva
Kana zvasvika pakugadzirisa , nzira inosarudzwa ndeye kutora mukana wezvinosiyana, mepu, uye musanganiswa. Iyi nzira inoshanda zvakafanana kuRTL, kunyangwe ikagadziriswa kubva kumafaira akaunganidzwa, nekuda kwemashandiro anoita RTLCSS .
Tsika RTL tsika
Uchishandisa RTLCSS kukosha dhairekitori , unogona kuita inoshanduka inoburitsa kukosha kwakasiyana kweRTL. Semuenzaniso, kuderedza huremu $font-weight-bold
hwese codebase, unogona kushandisa /*rtl: {value}*/
syntax:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Izvo zvaizoburitsa kune zvinotevera kune yedu default CSS uye RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Alternative font stack
Kana uri kushandisa font yetsika, ziva kuti haasi ese mafonti anotsigira asiri echiLatin alphabet. Kuti uchinje kubva kuPan-European kuenda kumhuri yechiArab, ungangoda kushandisa /*rtl:insert: {value}*/
mune yako font stack kugadzirisa mazita emhando dzemhuri.
Semuenzaniso, kuchinja kubva Helvetica Neue Webfont
kuLTR kuenda Helvetica Neue Arabic
kuRTL, yako Sass kodhi inotaridzika seizvi:
$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 uye RTL panguva imwe chete
Unoda zvese LTR neRTL pane imwechete peji? Kutenda kuRTLCSS String Mepu , izvi zvakatwasuka. Peta yako @import
nekirasi, uye isa tsika yekutumidza zita reRTLCSS:
/* 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*/
Mushure mekushandisa Sass ipapo RTLCSS, sarudzo yega yega mumafaira ako eCSS ichafanorongwa ne .ltr
, uye .rtl
nemafaira eRTL. Iye zvino wave kukwanisa kushandisa mafaera ese ari maviri pane imwechete peji, uye ingo shandisa .ltr
kana .rtl
pane ako ezvikamu wrappers kushandisa imwe kana imwe nzira.
Edge kesi uye zvinozivikanwa zvisingakwanisi
Kunyange nzira iyi ichinzwisisika, ndapota teerera kune zvinotevera:
- Paunenge uchichinja
.ltr
uye.rtl
, ita shuwa kuti unowedzeradir
uyelang
hunhu zvinoenderana. - Kurodha mafaera ese ari maviri anogona kunge ari chaiwo ekuita bhodhoro: funga kumwe optimization , uye pamwe edza kurodha imwe yeaya mafaera asynchronously .
- Nesting masitayipi neiyi nzira inodzivirira musanganiswa wedu
form-validation-state()
kubva kushanda sezvawakarongerwa, nekudaro zvinoda kuti uzvigadzirise zvishoma uri wega. Ona #31223 .
Iyo breadcrumb kesi
Iyo breadcrumb separator ndiyo chete nyaya inoda yayo nyowani nyowani-inoti $breadcrumb-divider-flipped
-defaulting to $breadcrumb-divider
.