RTL
Իմացեք, թե ինչպես միացնել Bootstrap-ում աջից ձախ տեքստի աջակցությունը մեր դասավորության, բաղադրիչների և կոմունալ ծառայությունների համար:
Ծանոթացեք
Մենք խորհուրդ ենք տալիս նախ ծանոթանալ Bootstrap-ին՝ կարդալով մեր «Սկսել» ներածական էջը : Այն անցնելուց հետո շարունակեք կարդալ այստեղ, թե ինչպես միացնել RTL-ը:
Կարող եք նաև կարդալ RTLCSS նախագծի մասին , քանի որ այն ուժ է տալիս մեր մոտեցումը RTL-ին:
Փորձարարական հատկանիշ
RTL ֆունկցիան դեռ փորձնական է և հավանաբար կզարգանա՝ օգտատերերի կարծիքների համաձայն: Ինչ-որ բան նկատե՞լ եք, թե՞ բարելավում ունեք առաջարկելու: Բացեք թողարկում , մենք կցանկանայինք ստանալ ձեր պատկերացումները:
Պահանջվող HTML
Bootstrap-ով աշխատող էջերում RTL-ն ակտիվացնելու երկու խիստ պահանջ կա:
- Սահմանել տարրի
dir="rtl"
վրա :<html>
- Տարրի վրա ավելացրեք համապատասխան
lang
հատկանիշ, ինչպես օրինակ :lang="ar"
<html>
Այնտեղից դուք պետք է ներառեք մեր CSS-ի RTL տարբերակը: Օրինակ, ահա մեր կազմված և փոքրացված CSS-ի ոճաթերթը միացված RTL-ով.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Սկսնակ ձևանմուշ
Դուք կարող եք տեսնել վերը նշված պահանջները, որոնք արտացոլված են այս փոփոխված 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-+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>
RTL օրինակներ
Սկսեք մեր մի քանի RTL օրինակներից մեկով :
Մոտեցում
Bootstrap-ում RTL աջակցություն ստեղծելու մեր մոտեցումը գալիս է երկու կարևոր որոշումներով, որոնք ազդում են մեր CSS-ի գրման և օգտագործման վրա.
-
Նախ, մենք որոշեցինք այն կառուցել RTLCSS նախագծով: Սա մեզ տալիս է մի քանի հզոր հնարավորություններ՝ LTR-ից RTL տեղափոխելիս փոփոխություններն ու անտեսումները կառավարելու համար: Այն նաև թույլ է տալիս մեզ ստեղծել Bootstrap-ի երկու տարբերակ մեկ կոդի բազայից:
-
Երկրորդ, մենք վերանվանել ենք մի քանի ուղղորդված դասեր՝ տրամաբանական հատկությունների մոտեցում ընդունելու համար: Ձեզանից շատերն արդեն շփվել են տրամաբանական հատկությունների հետ՝ շնորհիվ մեր ճկուն կոմունալ ծառայությունների. դրանք փոխարինում են ուղղության հատկությունները, ինչպես
left
ևright
հօգուտstart
ևend
. Դա դասերի անուններն ու արժեքները դարձնում է համապատասխան LTR-ի և RTL-ի համար՝ առանց որևէ գերավճարի:
Օրինակ՝ for-ի .ml-3
փոխարեն margin-left
օգտագործեք .ms-3
.
RTL-ի հետ աշխատելը, մեր աղբյուրի Sass-ի կամ կազմված CSS-ի միջոցով, չպետք է շատ տարբերվի մեր լռելյայն LTR-ից:
Անհատականացրեք աղբյուրից
Երբ խոսքը վերաբերում է անհատականացմանը , նախընտրելի միջոցը փոփոխականներից, քարտեզներից և միքսներից օգտվելն է: Այս մոտեցումը նույնն է աշխատում RTL-ի համար, նույնիսկ եթե այն հետմշակված է կազմված ֆայլերից՝ շնորհիվ այն, թե ինչպես է աշխատում RTLCSS-ը :
Պատվերով RTL արժեքներ
Օգտագործելով RTLCSS արժեքի դիրեկտիվները , դուք կարող եք փոփոխական ելքը դարձնել այլ արժեք RTL-ի համար: Օրինակ՝ $font-weight-bold
ամբողջ կոդի բազայի կշիռը նվազեցնելու համար կարող եք օգտագործել /*rtl: {value}*/
շարահյուսությունը.
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Որը կարտադրի հետևյալը մեր լռելյայն CSS-ի և RTL CSS-ի համար.
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Այլընտրանքային տառատեսակների կույտ
Այն դեպքում, երբ դուք օգտագործում եք հատուկ տառատեսակ, նկատեք, որ ոչ բոլոր տառատեսակներն են աջակցում ոչ լատինական այբուբենին: Համաեվրոպականից արաբական ընտանիքին անցնելու համար գուցե անհրաժեշտ լինի օգտագործել /*rtl:insert: {value}*/
տառատեսակների փաթեթում՝ տառատեսակների ընտանիքների անունները փոփոխելու համար:
Օրինակ, Helvetica Neue Webfont
LTR-ից Helvetica Neue Arabic
RTL-ի անցնելու համար ձեր Sass կոդը այսպիսի տեսք ունի.
$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 և RTL միաժամանակ
Պետք է և՛ LTR, և՛ RTL նույն էջում: RTLCSS String Maps- ի շնորհիվ սա բավականին պարզ է: Փաթաթեք ձեր @import
s-ը դասի հետ և սահմանեք 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*/
Sass-ը, ապա RTLCSS-ը գործարկելուց հետո, ձեր CSS ֆայլերի յուրաքանչյուր ընտրիչ կպահանջվի .ltr
, և .rtl
RTL ֆայլերի համար: Այժմ դուք կարող եք օգտագործել երկու ֆայլերը նույն էջում, և պարզապես օգտագործել .ltr
կամ .rtl
ձեր բաղադրիչների փաթաթանները՝ օգտագործելու այս կամ այն ուղղությունը:
Եզրային պատյաններ և հայտնի սահմանափակումներ
Թեև այս մոտեցումը հասկանալի է, խնդրում ենք ուշադրություն դարձնել հետևյալին.
- Անցնելով
.ltr
և.rtl
համոզվեք, որ համապատասխանաբար ավելացնում եքdir
ևlang
հատկացնում: - Երկու ֆայլերի բեռնումը կարող է իրական աշխատանքի խոչընդոտ լինել. հաշվի առեք որոշ օպտիմալացում և միգուցե փորձեք բեռնել այդ ֆայլերից մեկը ասինխրոն կերպով :
- Այս ձևով բույն դնելու ոճերը թույլ չեն տա մեր
form-validation-state()
միքսին աշխատել այնպես, ինչպես նախատեսված է, այդպիսով կպահանջվի, որ դուք ինքներդ մի փոքր կսմթեք այն: Տես #31223 :
Պաքսիմատի պատյան
Հացահատիկի տարանջատիչը միակ դեպքն է, որը պահանջում է իր բոլորովին նոր փոփոխականը, այն $breadcrumb-divider-flipped
է՝ լռությամբ $breadcrumb-divider
: