RTL
Jifunze jinsi ya kuwezesha usaidizi wa maandishi kutoka kulia kwenda kushoto katika Bootstrap katika mpangilio wetu, vijenzi na huduma.
Fahamu
Tunapendekeza kufahamiana na Bootstrap kwanza kwa kusoma kupitia ukurasa wetu wa Kuanza Utangulizi . Mara tu ukiipitia, endelea kusoma hapa jinsi ya kuwezesha RTL.
Unaweza pia kutaka kusoma juu ya mradi wa RTLCSS , kwa kuwa unawezesha mbinu yetu ya RTL.
Kipengele cha majaribio
Kipengele cha RTL bado ni cha majaribio na huenda kitabadilika kulingana na maoni ya mtumiaji. Umeona kitu au una uboreshaji wa kupendekeza? Fungua suala , tungependa kupata maarifa yako.
HTML inayohitajika
Kuna mahitaji mawili madhubuti ya kuwezesha RTL katika kurasa zinazoendeshwa na Bootstrap.
- Weka
dir="rtl"
kwenye<html>
kipengele. - Ongeza sifa inayofaa
lang
, kamalang="ar"
, kwenye<html>
kipengele.
Kuanzia hapo, utahitaji kujumuisha toleo la RTL la CSS yetu. Kwa mfano, hili ni laha ya mtindo kwa ajili ya CSS yetu iliyokusanywa na kupunguzwa na RTL imewezeshwa:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Kiolezo cha kuanza
Unaweza kuona mahitaji yaliyo hapo juu yakionyeshwa katika kiolezo hiki cha kianzilishi cha RTL kilichorekebishwa.
<!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>
Mifano ya RTL
Anza na mojawapo ya mifano yetu kadhaa ya RTL .
Mbinu
Mbinu yetu ya kujenga usaidizi wa RTL katika Bootstrap inakuja na maamuzi mawili muhimu ambayo huathiri jinsi tunavyoandika na kutumia CSS yetu:
-
Kwanza, tuliamua kuijenga kwa mradi wa RTLCSS . Hii inatupa baadhi ya vipengele muhimu vya kudhibiti mabadiliko na kubatilisha wakati wa kuhama kutoka LTR hadi RTL. Pia huturuhusu kuunda matoleo mawili ya Bootstrap kutoka codebase moja.
-
Pili, tumebadilisha majina machache ya madarasa ya mwelekeo ili kupitisha mbinu ya mantiki ya mali. Wengi wenu tayari mmeingiliana na sifa za kimantiki kutokana na huduma zetu zinazobadilika-badilika—zinabadilisha sifa za mwelekeo kama vile
left
naright
kupendeleastart
naend
. Hiyo hufanya majina na maadili ya darasa kuwa sawa kwa LTR na RTL bila malipo yoyote.
Kwa mfano, badala ya .ml-3
kwa margin-left
, tumia .ms-3
.
Kufanya kazi na RTL, kupitia chanzo chetu cha Sass au CSS iliyokusanywa, haipaswi kuwa tofauti sana na LTR yetu chaguo-msingi.
Geuza kukufaa kutoka chanzo
Linapokuja suala la kubinafsisha , njia inayopendelewa ni kuchukua fursa ya vigeu, ramani, na mchanganyiko. Njia hii inafanya kazi vivyo hivyo kwa RTL, hata ikiwa imechakatwa kutoka kwa faili zilizokusanywa, shukrani kwa jinsi RTLCSS inavyofanya kazi .
Thamani maalum za RTL
Kwa kutumia RTLCSS thamani maelekezo , unaweza kufanya pato variable thamani tofauti kwa RTL. Kwa mfano, ili kupunguza uzito kwa $font-weight-bold
msingi wote wa codebase, unaweza kutumia /*rtl: {value}*/
syntax:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Ambayo inaweza kutoa zifuatazo kwa CSS yetu ya msingi na RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Mlundikano wa fonti mbadala
Ikiwa unatumia fonti maalum, fahamu kuwa sio fonti zote zinazotumia alfabeti isiyo ya Kilatini. Ili kubadilisha kutoka kwa familia ya Pan-European hadi Kiarabu, huenda ukahitajika kutumia /*rtl:insert: {value}*/
katika mrundikano wako wa fonti ili kurekebisha majina ya familia za fonti.
Kwa mfano, kubadili kutoka Helvetica Neue Webfont
kwa LTR hadi Helvetica Neue Arabic
kwa RTL, msimbo wako wa Sass unaonekana kama hii:
$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 na RTL kwa wakati mmoja
Je, unahitaji LTR na RTL kwenye ukurasa mmoja? Shukrani kwa RTLCSS String Maps , hii ni moja kwa moja. Funga @import
s yako na darasa, na uweke sheria ya kubadilisha jina maalum kwa 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*/
Baada ya kuendesha Sass kisha RTLCSS, kila kiteuzi katika faili zako za CSS kitatanguliwa na .ltr
, na .rtl
kwa faili za RTL. Sasa unaweza kutumia faili zote mbili kwenye ukurasa mmoja, na tumia tu .ltr
au .rtl
kwenye vifuniko vya vifaa vyako kutumia mwelekeo mmoja au mwingine.
Kesi za makali na vikwazo vinavyojulikana
Ingawa mbinu hii inaeleweka, tafadhali zingatia yafuatayo:
- Unapobadilisha
.ltr
na.rtl
, hakikisha umeongezadir
nalang
kuangazia ipasavyo. - Kupakia faili zote mbili kunaweza kuwa kizuizi halisi cha utendakazi: fikiria uboreshaji fulani , na labda ujaribu kupakia mojawapo ya faili hizo asynchronously .
- Mitindo ya kuweka viota kwa njia hii itazuia
form-validation-state()
mixin yetu kufanya kazi inavyokusudiwa, kwa hivyo inahitaji uibadilishe kidogo peke yako. Tazama #31223 .
Kesi ya mkate
Kitenganishi cha breadcrumb ndicho kisa pekee kinachohitaji kigezo chake kipya kabisa— yaani $breadcrumb-divider-flipped
—defaulting to $breadcrumb-divider
.