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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" 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}*/տառատեսակների փաթեթում՝ տառատեսակների ընտանիքների անունները փոփոխելու համար:

Օրինակ, LTR-ի Helvetica Neueտառատեսակից Helvetica Neue ArabicRTL-ի անցնելու համար ձեր 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- ի շնորհիվ սա բավականին պարզ է: Փաթաթեք ձեր @imports-ը դասի հետ և սահմանեք 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, և .rtlRTL ֆայլերի համար: Այժմ դուք կարող եք օգտագործել երկու ֆայլերը նույն էջում, և պարզապես օգտագործել .ltrկամ .rtlձեր բաղադրիչների փաթաթանները՝ օգտագործելու այս կամ այն ուղղությունը:

Եզրային պատյաններ և հայտնի սահմանափակումներ

Թեև այս մոտեցումը հասկանալի է, խնդրում ենք ուշադրություն դարձնել հետևյալին.

Անցնելով .ltrև .rtlհամոզվեք, որ համապատասխանաբար ավելացնում եք dirև langհատկացնում:
Երկու ֆայլերի բեռնումը կարող է իրական աշխատանքի խոչընդոտ լինել. հաշվի առեք որոշ օպտիմալացում և միգուցե փորձեք բեռնել այդ ֆայլերից մեկը ասինխրոն կերպով :
Այս ձևով բույն դնելու ոճերը թույլ չեն տա մեր form-validation-state()միքսին աշխատել այնպես, ինչպես նախատեսված է, այդպիսով կպահանջվի, որ դուք ինքներդ մի փոքր կսմթեք այն: Տես #31223 :

Հացահատիկի տարանջատիչը միակ դեպքն է, որը պահանջում է իր բոլորովին նոր փոփոխականը, այն $breadcrumb-divider-flippedէ՝ լռելյայն $breadcrumb-divider.

RTL