RTL

Uzziniet, kā iespējot atbalstu tekstam no labās puses uz kreiso programmā Bootstrap mūsu izkārtojumā, komponentos un utilītprogrammās.

Šajā lapā

Iepazīstieties

Mēs iesakām vispirms iepazīties ar Bootstrap, izlasot mūsu darba sākšanas ievada lapu . Kad esat to paveicis, turpiniet lasīt šeit, lai uzzinātu, kā iespējot RTL.

Varat arī izlasīt par RTLCSS projektu , jo tas nodrošina mūsu pieeju RTL.

Eksperimentāla iezīme

RTL funkcija joprojām ir eksperimentāla un, iespējams, attīstīsies saskaņā ar lietotāju atsauksmēm. Vai esat kaut ko pamanījuši vai ieteikt kādu uzlabojumu? Atklājiet problēmu , mēs labprāt saņemtu jūsu ieskatu.

Nepieciešams HTML

Ir divas stingras prasības, lai iespējotu RTL ar Bootstrap darbināmās lapās.

Uzstādiet dir="rtl"uz <html>elementa.
Pievienojiet elementam atbilstošu langatribūtu, piemēram lang="ar", .<html>

Tālāk jums būs jāiekļauj mūsu CSS RTL versija. Piemēram, šeit ir stila lapa mūsu apkopotajam un samazinātajam CSS ar iespējotu RTL:

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

Startera veidne

Iepriekš minētās prasības ir atspoguļotas šajā modificētajā RTL sākuma veidnē.

<!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 piemēri

Sāciet darbu ar kādu no mūsu vairākiem RTL piemēriem .

Pieeja

Mūsu pieeja RTL atbalsta izveidei Bootstrap ietver divus svarīgus lēmumus, kas ietekmē to, kā mēs rakstām un lietojam CSS:

Pirmkārt, mēs nolēmām to izveidot, izmantojot RTLCSS projektu. Tas mums sniedz dažas jaudīgas funkcijas izmaiņu un ignorēšanas pārvaldībai, pārejot no LTR uz RTL. Tas arī ļauj mums izveidot divas Bootstrap versijas no vienas kodu bāzes.
Otrkārt, mēs esam pārdēvējuši dažas virzienu klases, lai pieņemtu loģisko īpašību pieeju. Lielākā daļa no jums jau ir izmantojuši loģiskās īpašības, pateicoties mūsu elastīgajām utilītprogrammām — tās aizstāj virziena īpašības, piemēram , leftun rightpar labu startun end. Tas padara klašu nosaukumus un vērtības piemērotus LTR un RTL bez papildu izmaksām.

Piemēram, vārda vietā .ml-3izmantojiet .margin-left.ms-3

Tomēr darbam ar RTL, izmantojot mūsu avotu Sass vai kompilēto CSS, nevajadzētu daudz atšķirties no mūsu noklusējuma LTR.

Pielāgot no avota

Runājot par pielāgošanu , vēlamais veids ir izmantot mainīgo, karšu un kombināciju priekšrocības. Pateicoties tam, kā darbojas RTLCSS , šī pieeja darbojas tāpat kā RTL, pat ja tā ir pēcapstrāde no apkopotajiem failiem .

Pielāgotas RTL vērtības

Izmantojot RTLCSS vērtību direktīvas , varat iestatīt mainīgā izvadei atšķirīgu RTL vērtību. Piemēram, lai samazinātu svaru $font-weight-boldvisā kodu bāzē, varat izmantot /*rtl: {value}*/sintaksi:

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

Kas mūsu noklusējuma CSS un RTL CSS izvadīs tālāk norādīto:

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

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

Alternatīva fontu kaudze

Ja izmantojat pielāgotu fontu, ņemiet vērā, ka ne visi fonti atbalsta alfabētu, kas nav latīņu alfabēts. Lai pārslēgtos no visas Eiropas uz arābu saimi, iespējams /*rtl:insert: {value}*/, fontu kaudzē būs jāizmanto fontu saimes nosaukumi.

Piemēram, lai pārslēgtos no Helvetica Neue WebfontLTR uz Helvetica Neue ArabicRTL, jūsu Sass kods izskatās šādi:

$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 un RTL vienlaikus

Nepieciešams gan LTR, gan RTL vienā lapā? Pateicoties RTLCSS String Maps , tas ir diezgan vienkārši. Aptiniet savu @imports ar klasi un iestatiet pielāgotu pārdēvēšanas kārtulu 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*/

Pēc Sass, pēc tam RTLCSS palaišanas katram atlasītājam jūsu CSS failos tiks pievienots .ltr, un .rtlRTL failiem. Tagad jūs varat izmantot abus failus vienā lapā un vienkārši izmantot .ltrvai .rtluz komponentu iesaiņojumiem, lai izmantotu vienu vai otru virzienu.

Malu gadījumi un zināmie ierobežojumi

Lai gan šī pieeja ir saprotama, lūdzu, pievērsiet uzmanību šādiem aspektiem:

Pārslēdzot .ltrun .rtl, noteikti pievienojiet dirun langattiecīgi atribūtus.
Abu failu ielāde var būt reāls veiktspējas vājais kakls: apsveriet optimizāciju un, iespējams, mēģiniet ielādēt kādu no šiem failiem asinhroni .
Šādā veidā ligzdošanas stili neļaus mūsu form-validation-state()miksam darboties, kā paredzēts, tāpēc jums tas būs nedaudz jāpielāgo pašam. Skatiet #31223 .

Hierarhiskās navigācijas atdalītājs ir vienīgais gadījums, kad ir nepieciešams jauns mainīgais, proti $breadcrumb-divider-flipped, pēc noklusējuma ir $breadcrumb-divider.

RTL