RTL
Baro sida loo suurtageliyo taageerada qoraalka midig-ilaa-bidix ee Bootstrap guud ahaan nashqadayada, qaybaha, iyo adeegyadayada.
Baro
Waxaan kugula talineynaa inaad barato Bootstrap marka hore adigoo akhrinaya boggayaga Bilawga Hordhaca . Marka aad ka gudubto, sii wad akhrinta halkan sida loo awoodsiiyo RTL.
Waxa kale oo laga yaabaa inaad rabto inaad wax ka akhrido mashruuca RTLCSS , maadaama ay awood u leedahay habkayaga RTL.
Sifada tijaabada ah
Habka RTL weli waa tijaabo waxaana laga yaabaa inuu u kobco si waafaqsan jawaab celinta isticmaalaha. Wax ma aragtay ama ma leedahay horumar aad soo jeediso? Furo arrin , waxaan jeclaan lahayn inaan helno fikradahaaga.
HTML loo baahan yahay
Waxaa jira laba shuruudood oo adag oo awood u siinaya RTL boggaga ku shaqeeya Bootstrap.
- Ku dheji
dir="rtl"
curiyaha<html>
. lang
Ku dar sifo ku habboon , sidalang="ar"
,<html>
qaybta.
Halkaa, waxaad u baahan doontaa inaad ku darto nooca RTL ee CSS-kayaga. Tusaale ahaan, halkan waa xaashida qaab-dhismeedka ee CSS-ta la soo ururiyey oo la yareeyey ee RTL karti u yeelatay:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Qaabka bilowga
Waxaad arki kartaa shuruudaha kor ku xusan oo ka muuqda qaabkan RTL ee wax laga beddelay.
<!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>
Tusaalooyinka RTL
Ku bilow mid ka mid ah dhowr tusaale oo RTL ah .
Habka
Habkayaga ku dhisitaanka taageerada RTL ee Bootstrap waxay la socotaa laba go'aan oo muhiim ah oo saameeya sida aan u qorno oo u isticmaalno CSS:
-
Marka hore, waxaan go'aansanay inaan ku dhisno mashruuca RTLCSS . Tani waxay ina siinaysaa astaamo awood leh oo lagu maareeyo isbeddelada iyo ka-hortagga marka laga guurayo LTR una guurayo RTL. Waxa kale oo ay noo ogolaataa in aan dhisno laba nooc oo Bootstrap ah hal codebase.
-
Marka labaad, waxaanu magacownay dhawr fasal oo hagitaan ah si aanu u qaadano hab sifo macquul ah. In badan oo idinka mid ah waxaad horey ula falgalteen sifooyin macquul ah iyadoo ay ugu wacan tahay adeegyadeena flex-waxay bedelaan sifooyinka jihada sida
left
iyoright
doorbidkastart
iyoend
. Taasi waxay ka dhigaysaa magacyada fasalka iyo qiyamka ku haboon LTR iyo RTL iyada oo aan wax dulsaar ah lahayn.
Tusaale ahaan, halkii aad ka isticmaali .ml-3
lahayd margin-left
, isticmaal .ms-3
.
La shaqaynta RTL, iyada oo loo marayo ishayaga Sass ama CSS la soo ururiyey, waa in aanay wax badan ka duwanayn LTR our default.
Ka bedel isha
Marka ay timaado habaynta, habka la door bidaayo waa in laga faa'iidaysto doorsoomayaasha, khariidado, iyo isku darka. Habkani wuxuu u shaqeeyaa si la mid ah RTL, xitaa haddii laga soo shaqeeyay faylalka la soo ururiyey, iyada oo ay ugu wacan tahay sida RTLCSS u shaqeyso .
Qiimaha RTL ee gaarka ah
Adigoo isticmaalaya dardaaranka qiimaha RTLCSS , waxaad samayn kartaa wax soo saarka doorsoome qiimo ka duwan RTL. Tusaale ahaan, si loo yareeyo miisaanka $font-weight-bold
dhammaan codebase, waxaad isticmaali kartaa /*rtl: {value}*/
ereyga:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Kaas oo soo saari kara kuwan soo socda ee CSS-tayada caadiga ah iyo RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Xirmada xarfaha kale
Xaaladda aad isticmaalayso far gaar ah, ka digtoonow in dhammaan xarfaha aanay taageersanayn alifbeetada Latinka. Si aad uga bedesho Pan-European una guurto qoyska Carabiga, waxa laga yaabaa inaad u baahato inaad ku dhex isticmaasho /*rtl:insert: {value}*/
kaydka fartaada si aad wax uga bedesho magacyada qoysaska farta
Tusaale ahaan, si aad uga beddesho Helvetica Neue Webfont
LTR una aaddo Helvetica Neue Arabic
RTL, koodhkaga Sass-kaagu waxa uu u eegyahay sidan:
$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 iyo RTL isku mar
Ma u baahan tahay labada LTR iyo RTL isku bog? Thanks to RTLCSS Khariidadaha Xadhkaha , tani waa mid toos ah. Ku duub @import
fasalkaaga fasalka, oo u deji xeer beddelaad magac u leh 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*/
Kadib socodsiinta Sass ka dib RTLCSS, doore kasta oo ku jira faylalkaaga CSS waxaa loo sii diyaarin doonaa .ltr
, iyo .rtl
faylalka RTL. Hadda waxaad awood u leedahay inaad ku isticmaasho labada fayl isla bogga, oo si fudud u isticmaal .ltr
ama u isticmaal .rtl
qaybahaaga duubabka si aad u isticmaasho mid ama jiha kale.
Kiisaska geesaha iyo xaddidaadyada la yaqaan
Iyadoo habkani yahay mid la fahmi karo, fadlan u fiirso kuwa soo socda:
- Markaad bedesho
.ltr
iyo.rtl
, hubi inaad ku dartodir
oolang
u sifo si waafaqsan. - Soo dejinta labada faylal waxay noqon karaan caqabad dhab ah oo wax qabad leh: ka fiirso qaar ka mid ah hagaajinta , oo laga yaabee isku day inaad ku shubto mid ka mid ah faylashaas si isku mid ah .
- Qaababka buulka ee habkan ayaa ka ilaalin doona
form-validation-state()
isku-darkayaga inuu u shaqeeyo sidii loogu talagalay, markaa waxay u baahan tahay inaad adigu xoogaa hagaajiso. Fiiri #31223 .
Kiiskii rootiga
Kala- soocida rootiga ayaa ah kiiska kaliya ee u baahan doorsoome cusub oo u gaar ah - oo ah $breadcrumb-divider-flipped
— ugu talagal $breadcrumb-divider
.