RTL

Naučite kako omogućiti podršku za tekst zdesna nalijevo u Bootstrapu u našem izgledu, komponentama i uslužnim programima.

Na ovoj stranici

Upoznaj se

Preporučujemo da se najprije upoznate s Bootstrapom tako što ćete pročitati našu uvodnu stranicu za početak . Nakon što ga prođete, nastavite čitati ovdje kako omogućiti RTL.

Možda biste također željeli pročitati više o projektu RTLCSS , budući da daje snagu našem pristupu RTL-u.

Eksperimentalna značajka

Značajka RTL još uvijek je eksperimentalna i vjerojatno će se razvijati u skladu s povratnim informacijama korisnika. Uočili ste nešto ili želite predložiti poboljšanje? Otvorite problem , voljeli bismo dobiti vaše uvide.

Potreban HTML

Postoje dva stroga zahtjeva za omogućavanje RTL-a na stranicama koje pokreće Bootstrap.

Postavite dir="rtl"na <html>element.
Dodajte odgovarajući langatribut, poput lang="ar", <html>elementu.

Odatle ćete morati uključiti RTL verziju našeg CSS-a. Na primjer, ovdje je stilska tablica za naš kompilirani i umanjeni CSS s omogućenim RTL-om:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

Početni predložak

Gore navedene zahtjeve možete vidjeti prikazane u ovom modificiranom početnom predlošku RTL-a.

<!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 primjeri

Započnite s jednim od naših nekoliko RTL primjera .

Pristup

Naš pristup izgradnji RTL podrške u Bootstrapu dolazi s dvije važne odluke koje utječu na to kako pišemo i koristimo naš CSS:

Prvo smo ga odlučili izgraditi s projektom RTLCSS . To nam daje neke moćne značajke za upravljanje promjenama i nadjačanjima pri prelasku s LTR na RTL. Također nam omogućuje da izgradimo dvije verzije Bootstrapa iz jedne baze koda.
Drugo, preimenovali smo nekoliko usmjerenih klasa kako bismo usvojili pristup logičkih svojstava. Većina vas je već bila u interakciji s logičkim svojstvima zahvaljujući našim flex uslužnim programima—oni zamjenjuju svojstva smjera kao što su lefti rightu korist starti end. To čini imena klasa i vrijednosti prikladnima za LTR i RTL bez ikakvih dodatnih troškova.

Na primjer, umjesto .ml-3za margin-left, koristite .ms-3.

Rad s RTL-om, putem našeg izvornog Sass-a ili kompajliranog CSS-a, ipak se ne bi trebao puno razlikovati od našeg zadanog LTR-a.

Prilagodite iz izvora

Kada je riječ o prilagodbi , preferirani način je iskoristiti prednosti varijabli, mapa i mixina. Ovaj pristup radi isto za RTL, čak i ako je naknadno obrađen iz kompajliranih datoteka, zahvaljujući tome kako radi RTLCSS .

Prilagođene RTL vrijednosti

Koristeći RTLCSS vrijednosne direktive , možete napraviti izlaz varijable drugačije vrijednosti za RTL. Na primjer, da smanjite težinu za $font-weight-boldcijelu bazu koda, možete koristiti /*rtl: {value}*/sintaksu:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

Što bi rezultiralo sljedećim za naš zadani CSS i RTL CSS:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

Alternativni hrp fontova

U slučaju da koristite prilagođeni font, imajte na umu da svi fontovi ne podržavaju nelatinično pismo. Da biste se prebacili s paneuropske na arapsku obitelj, možda ćete morati upotrijebiti /*rtl:insert: {value}*/u svom nizu fontova za izmjenu imena obitelji fontova.

Na primjer, za prebacivanje s Helvetica Neue Webfontza LTR na Helvetica Neue Arabicza RTL, vaš Sass kod izgleda ovako:

$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 i RTL u isto vrijeme

Trebate i LTR i RTL na istoj stranici? Zahvaljujući RTLCSS kartama nizova , ovo je prilično jednostavno. Zamotajte svoj @imports s klasom i postavite prilagođeno pravilo preimenovanja za 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*/

Nakon pokretanja Sass-a, a zatim RTLCSS-a, ispred svakog selektora u vašim CSS datotekama bit će .ltr, i .rtlza RTL datoteke. Sada možete koristiti obje datoteke na istoj stranici i jednostavno koristiti .ltrili .rtlna omotima svojih komponenti da koristite jedan ili drugi smjer.

Rubni slučajevi i poznata ograničenja

Iako je ovaj pristup razumljiv, obratite pozornost na sljedeće:

Kada mijenjate .ltri .rtl, svakako dodajte atribute diri u skladu s tim.lang
Učitavanje obiju datoteka može biti stvarno usko grlo performansi: razmislite o optimizaciji i možda pokušajte učitati jednu od tih datoteka asinkrono .
Stilovi ugniježđivanja na ovaj način spriječit će naš form-validation-state()miksin da radi kako je predviđeno, stoga ćete ga morati malo sami prilagoditi. Vidi #31223 .

Razdjelnik putanje jedini je slučaj koji zahtijeva vlastitu potpuno novu varijablu— naime — $breadcrumb-divider-flippedzadanu vrijednost $breadcrumb-divider.

RTL