RTL

Opi ottamaan käyttöön oikealta vasemmalle luettavan tekstin tuki Bootstrapissa asettelussamme, osissamme ja apuohjelmissamme.

Tällä sivulla

Tutustua

Suosittelemme tutustumaan Bootstrapiin ensin lukemalla Aloitusopas -sivumme . Kun olet käynyt sen läpi, jatka lukemista tästä, kuinka voit ottaa RTL:n käyttöön.

Haluat ehkä myös lukea RTLCSS-projektista , koska se vahvistaa lähestymistapaamme RTL:ään.

Kokeellinen ominaisuus

RTL-ominaisuus on vielä kokeellinen ja todennäköisesti kehittyy käyttäjien palautteen mukaan. Huomasitko jotain tai onko sinulla parannusehdotuksia? Avaa ongelma , haluaisimme mielellämme näkemyksiäsi.

Pakollinen HTML

RTL:n sallimiselle Bootstrap-pohjaisilla sivuilla on kaksi tiukkaa vaatimusta.

Aseta dir="rtl"elementtiin <html>.
Lisää elementtiin sopiva langattribuutti, lang="ar"kuten <html>.

Sieltä sinun on sisällytettävä RTL-versio CSS:stämme. Tässä on esimerkiksi tyylitaulukko käännetylle ja pienennetylle CSS:lle, jossa RTL on käytössä:

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

Aloitusmalli

Yllä olevat vaatimukset näkyvät tässä muokatussa RTL-aloitusmallissa.

<!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-esimerkkejä

Aloita yhdellä useista RTL-esimerkeistämme .

Lähestyä

Lähestymistapamme RTL-tuen rakentamisessa Bootstrapiin sisältää kaksi tärkeää päätöstä, jotka vaikuttavat siihen, miten kirjoitamme ja käytämme CSS:ää:

Ensin päätimme rakentaa sen RTLCSS- projektin avulla. Tämä antaa meille tehokkaita ominaisuuksia muutosten ja ohitusten hallintaan siirryttäessä LTR:stä RTL:ään. Sen avulla voimme myös rakentaa kaksi versiota Bootstrapista yhdestä koodikannasta.
Toiseksi olemme nimenneet uudelleen kourallisen suuntaluokkia omaksuksemme loogisten ominaisuuksien lähestymistavan. Useimmat teistä ovat jo käyttäneet loogisia ominaisuuksia flex-apuohjelmiemme ansiosta – ne korvaavat suuntaominaisuudet, kuten leftja rightpuolesta startja end. Tämä tekee luokkien nimet ja arvot sopivia LTR:lle ja RTL:lle ilman lisäkustannuksia.

Käytä .ml-3esimerkiksi merkin sijaan .margin-left.ms-3

RTL:n kanssa työskentely Sass-lähdekoodin tai käännetyn CSS:n kautta ei kuitenkaan saisi poiketa paljon oletus-LTR:stämme.

Mukauta lähteestä

Mitä tulee räätälöintiin , suositeltava tapa on hyödyntää muuttujia, karttoja ja sekoituksia. Tämä lähestymistapa toimii samoin RTL:lle, vaikka se olisi jälkikäsitelty käännetyistä tiedostoista RTLCSS :n toiminnan ansiosta .

Mukautetut RTL-arvot

Käyttämällä RTLCSS-arvodirektiivejä voit tehdä muuttujan ulostulosta erilaisen arvon RTL:lle. Voit esimerkiksi vähentää painoa $font-weight-boldkoko koodikannassa käyttämällä /*rtl: {value}*/syntaksia:

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

Joka tuottaisi seuraavat oletus-CSS- ja RTL-CSS:mme:

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

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

Vaihtoehtoinen fonttipino

Jos käytät mukautettua kirjasinta, ota huomioon, että kaikki kirjasimet eivät tue ei-latinalaisia aakkosia. Jos haluat vaihtaa yleiseurooppalaisesta arabialaiseen perheeseen, sinun on ehkä käytettävä /*rtl:insert: {value}*/fonttipinossasi kirjasinperheiden nimien muokkaamiseen.

Jos esimerkiksi haluat vaihtaa Helvetica Neue WebfontLTR:stä Helvetica Neue ArabicRTL:ään, Sass-koodisi näyttää tältä:

$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 ja RTL samaan aikaan

Tarvitsetko sekä LTR:n että RTL:n samalla sivulla? RTLCSS String Mapsin ansiosta tämä on melko yksinkertaista. Kääri @imports:si luokalle ja aseta mukautettu uudelleennimeämissääntö RTLCSS:lle:

/* 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*/

Kun Sass ja sitten RTLCSS on suoritettu, jokaisen CSS-tiedostosi valitsimen eteen lisätään .ltr, ja .rtlRTL-tiedostoille. Nyt voit käyttää molempia tiedostoja samalla sivulla ja yksinkertaisesti käyttää .ltrtai .rtlkomponenttien kääreitä käyttääksesi jompaankumpaan suuntaan.

Reunatapaukset ja tunnetut rajoitukset

Vaikka tämä lähestymistapa on ymmärrettävä, kiinnitä huomiota seuraaviin seikkoihin:

Kun vaihdat .ltrja .rtl, varmista, että lisäät dirja langmääritteet vastaavasti.
Molempien tiedostojen lataaminen voi olla todellinen suorituskyvyn pullonkaula: harkitse optimointia ja yritä ehkä ladata jokin näistä tiedostoista asynkronisesti .
Sisäkkäiset tyylit tällä tavalla estävät form-validation-state()mixiniämme toimimasta tarkoitetulla tavalla, joten sinun on säädettävä sitä hieman itse. Katso #31223 .

Painepolun erotin on ainoa tapaus, joka vaatii oman upouuden muuttujan, nimittäin $breadcrumb-divider-flippedoletuksena $breadcrumb-divider.

RTL