RTL

Naučite kako omogućiti podršku za tekst koji se piše zdesna nalijevo u Bootstrapu kroz naš izgled, komponente i uslužne programe.

Na ovoj stranici

Upoznajte se

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

Možda biste željeli pročitati i RTLCSS projekat , jer on pokreće naš pristup RTL-u.

Eksperimentalna karakteristika

RTL funkcija je još uvijek eksperimentalna i vjerovatno će se razvijati prema povratnim informacijama korisnika. Primetili ste nešto ili želite da predložite poboljšanje? Otvorite problem , voljeli bismo da dobijemo 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, kao što lang="ar"je , na <html>element.

Odatle ćete morati uključiti RTL verziju našeg CSS-a. Na primjer, evo tablice stilova za naš kompajlirani i minimizirani CSS sa omogućenim RTL-om:

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

Početni šablon

Gore navedene zahtjeve možete vidjeti u ovom modificiranom RTL starter predlošku.

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

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

Pristup

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

Prvo smo odlučili da ga izgradimo sa RTLCSS projektom. Ovo nam daje neke moćne karakteristike za upravljanje promjenama i zaobilaženjem pri prelasku sa LTR na RTL. Takođe nam omogućava da napravimo dve verzije Bootstrapa iz jedne baze koda.
Drugo, preimenovali smo nekoliko klasa usmjerenih kako bismo usvojili pristup logičkih svojstava. Većina vas je već stupila u interakciju s logičkim svojstvima zahvaljujući našim fleksibilnim uslužnim programima—oni zamjenjuju svojstva smjera poput lefti rightu korist starti end. To čini imena i vrijednosti klasa prikladnima za LTR i RTL bez ikakvih dodatnih troškova.

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

Rad sa RTL-om, preko našeg izvornog Sass-a ili kompajliranog CSS-a, ipak ne bi trebao biti mnogo drugačiji od našeg zadanog LTR-a.

Prilagodite iz izvora

Kada je u pitanju prilagođavanje , preferirani način je da se iskoristi prednosti varijabli, mapa i miksina. Ovaj pristup radi isto za RTL, čak i ako je naknadno obrađen iz kompajliranih datoteka, zahvaljujući tome kako RTLCSS radi .

Prilagođene RTL vrijednosti

Koristeći RTLCSS direktive vrijednosti , možete napraviti promjenljivu izlaz različitu vrijednost za RTL. Na primjer, da biste smanjili težinu za $font-weight-boldcijelu kodnu bazu, možete koristiti /*rtl: {value}*/sintaksu:

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

Što bi proizvelo sljedeće za naš zadani CSS i RTL CSS:

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

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

Alternativni skup fontova

U slučaju da koristite prilagođeni font, imajte na umu da svi fontovi ne podržavaju nelatinično pismo. Da biste prešli sa panevropske na arapsku porodicu, možda ćete morati da koristite /*rtl:insert: {value}*/u svom skupu fontova da izmenite imena porodica fontova.

Na primjer, da biste se prebacili sa 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 String Maps , ovo je prilično jednostavno. Omotajte svoje @imports 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, svaki selektor u vašim CSS datotekama će biti preveden sa .ltr, a .rtlza RTL datoteke. Sada možete koristiti obje datoteke na istoj stranici i jednostavno koristite .ltrili .rtlna omotima komponenti da biste koristili jedan ili drugi smjer.

Rubni slučajevi i poznata ograničenja

Iako je ovaj pristup razumljiv, obratite pažnju na sljedeće:

Prilikom prebacivanja .ltri .rtl, pobrinite se da dodate diri langatribute u skladu s tim.
Učitavanje oba fajla može biti pravo usko grlo u performansama: razmislite o nekoj optimizaciji i možda pokušajte da učitate jedan od tih fajlova asinhrono .
Stilovi ugniježđenja na ovaj način će spriječiti da naš form-validation-state()miksin radi kako je predviđeno, pa ćete ga morati malo sami podesiti. Pogledajte #31223 .

Razdjelnik hljebnih mrvica je jedini slučaj koji zahtijeva vlastitu potpuno novu varijablu— naime — zadanu vrijednost .$breadcrumb-divider-flipped$breadcrumb-divider

RTL