Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
in English

RTL

Ianaro ny fomba ahafahan'ny fanohanana ny lahatsoratra havanana miankavia ao amin'ny Bootstrap manerana ny fandrindrana, ny singa ary ny fitaovana ampiasainay.

Amin'ity pejy ity

Fantaro

Manoro hevitra izahay mba hahalalanao ny Bootstrap aloha amin'ny famakiana ny pejy Fampidirana fanombohana anay . Rehefa vitanao ilay izy dia tohizo ny famakiana eto momba ny fomba ahafahan'ny RTL.

Azonao atao ihany koa ny mamaky momba ny tetikasa RTLCSS , satria izany dia manome hery ny fomba fiasantsika amin'ny RTL.

Endri-javatra andrana

Ny endri-javatra RTL dia mbola andrana ary mety hivoatra araka ny tamberin'ny mpampiasa. Nahita zavatra na misy fanatsarana azo aroso? Sokafy olana iray , tianay ny hahazo ny hevitrao.

HTML ilaina

Misy fepetra henjana roa ahafahana mampandeha ny RTL amin'ny pejin'ny Bootstrap.

  1. Hiverina dir="rtl"any amin'ny <html>element.
  2. Manampia langtoetra mety, toy ny lang="ar", amin'ny <html>singa.

Avy eo dia mila mampiditra kinova RTL amin'ny CSS-nay ianao. Ohatra, ity ny stylesheet ho an'ny CSS voaangona sy nohavaozina miaraka amin'ny RTL afaka:

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

Modely fanombohana

Azonao atao ny mahita ireo fepetra etsy ambony hita taratra amin'ity maodely fanombohana RTL novaina ity.

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

Ohatra RTL

Manomboha amin'ny iray amin'ireo ohatra RTL marobe .

fomba Fiasa

Ny fomba fiasantsika amin'ny fananganana fanohanana RTL ao amin'ny Bootstrap dia misy fanapahan-kevitra manan-danja roa izay misy fiantraikany amin'ny fomba fanoratana sy fampiasana ny CSS:

  1. Voalohany, nanapa-kevitra ny hanangana izany miaraka amin'ny tetikasa RTLCSS izahay. Izany dia manome antsika endri-javatra mahery vaika sasany amin'ny fitantanana ny fanovana sy ny fanoloana rehefa mifindra avy amin'ny LTR mankany RTL. Izy io koa dia mamela antsika hanangana dikan-teny roa amin'ny Bootstrap avy amin'ny codebase iray.

  2. Faharoa, nosoloinay anarana vitsivitsy amin'ireo kilasy tari-dalana mba hampiasana fomba fiasa lojika. Ny ankamaroanareo dia efa nifanerasera tamin'ny fananana lojika noho ny fampiasanay flex—izy ireo dia manolo ny toetran'ny fitarihana toy ny leftary rightmanohana startsy end. Izany no mahatonga ny anaran'ny kilasy sy ny soatoavina mifanaraka amin'ny LTR sy RTL tsy misy overhead.

Ohatra, fa tsy ho .ml-3an'ny margin-left, ampiasao .ms-3.

Ny fiaraha-miasa amin'ny RTL, amin'ny alàlan'ny loharano Sass na CSS natambatra, dia tsy tokony ho hafa noho ny LTR mahazatra antsika.

Amboary avy amin'ny loharano

Raha mikasika ny fanasokajiana , ny fomba tiana indrindra dia ny manararaotra ireo fari-pahalalana, sarintany ary mixins. Ity fomba fiasa ity dia miasa mitovy amin'ny RTL, na dia avy amin'ny rakitra voaangona aza izy io, noho ny fomba fiasan'ny RTLCSS .

Sanda RTL manokana

Amin'ny fampiasana ny toromarika sanda RTLCSS , azonao atao ny manamboatra sanda hafa ho an'ny RTL ny vokatra miovaova. Ohatra, mba hampihenana ny lanjany $font-weight-boldmanerana ny codebase dia azonao ampiasaina ny /*rtl: {value}*/syntax:

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

Izay mety hivoaka amin'ireto manaraka ireto ho an'ny CSS default sy RTL CSS:

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

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

Antontan-tsoratra hafa

Raha toa ka mampiasa endri-tsoratra mahazatra ianao dia tandremo fa tsy ny endritsoratra rehetra no manohana ny abidy tsy latina. Raha hifindra avy amin'ny fianakaviana Pan-European mankany Arabo ianao dia mety mila mampiasa /*rtl:insert: {value}*/ao amin'ny antontam-endrinao ianao hanovana ny anaran'ny fianakaviamben'ny endritsoratra.

Ohatra, raha hifindra avy Helvetica Neue Webfontamin'ny LTR mankany Helvetica Neue Arabicamin'ny RTL dia toy izao ny kaody Sass-nao:

$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 sy RTL miaraka

Mila LTR sy RTL amin'ny pejy iray ve ianao? Misaotra an'i RTLCSS String Maps , tena tsotra izany. Fenoy kilasy ny @imports anao, ary mametraha fitsipika fanovana anarana ho an'ny 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*/

Aorian'ny fampandehanana ny Sass avy eo ny RTLCSS, ny mpisafidy tsirairay ao amin'ny rakitra CSS-nao dia apetraka amin'ny .ltr, ary .rtlho an'ny rakitra RTL. Ankehitriny ianao dia afaka mampiasa ireo rakitra roa ao amin'ny pejy iray ihany, ary mampiasa fotsiny .ltrna .rtlamin'ny fonon'ny singa ampiasainao mba hampiasana lalana iray na hafa.

Raharaha Edge sy ny fetra fantatra

Na dia azo takarina aza ity fomba ity, dia tandremo ireto manaraka ireto:

  1. Rehefa mifamadika .ltrsy .rtl, ataovy azo antoka fa manampy dirsy langtoetra mifanaraka amin'izany ianao.
  2. Ny fametrahana ireo rakitra roa ireo dia mety ho tena olana amin'ny fampandehanana azy: diniho ny fanatsarana sasany , ary mety andramo ny hampiditra ny iray amin'ireo rakitra ireo amin'ny fomba asynchronous .
  3. Ny fomba fanatobiana amin'ity fomba ity dia hanakana ny form-validation-state()mixin tsy hiasa araka ny tokony ho izy, noho izany dia mila manitsy azy irery ianao. Jereo ny #31223 .

Ny kitapo mofo

Ny fanasarahana mofo no hany tranga mitaky ny fari-piadidiany vaovao — izany hoe $breadcrumb-divider-flipped— mivadika amin'ny $breadcrumb-divider.

Loharano fanampiny