Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga
in English

RTL

A'oa'o pe fa'afefea ona fa'aagaaga le lagolago mo tusitusiga taumatau i le agavale i Bootstrap i la matou fa'asologa, vaega, ma mea aoga.

I luga o lenei itulau

Ia faamasani

Matou te fautuaina le faamasani muamua i Bootstrap e ala i le faitau i la matou itulau Fa'atomuaga Amata . A uma loa ona e fa'ata'ita'ia, fa'aauau le faitau iinei mo le fa'aogaina o le RTL.

Atonu e te mana'o e faitau i luga ole poloketi RTLCSS , aua e fa'amalosia ai la tatou auala ile RTL.

Fa'ata'ita'iga fa'apitoa

Ole vaega ole RTL o lo'o fa'ata'ita'i pea ma e ono fa'atupuina e tusa ai ma fa'amatalaga a tagata fa'aoga. Va'ai se mea pe iai se fa'aleleia atili e fautua mai? Tatala se mataupu , matou te fia maua ni ou malamalamaaga.

Manaomia HTML

E lua manaʻoga faʻapitoa mo le faʻatagaina o le RTL i itulau faʻamalosi Bootstrap.

  1. Seti dir="rtl"i luga o le <html>elemene.
  2. Faaopoopo se languiga talafeagai, pei o lang="ar"le , i luga o le <html>elemene.

Mai iina, e te manaʻomia le faʻapipiʻiina o se RTL version o la matou CSS. Mo se faʻataʻitaʻiga, o le sitaili lea mo la matou CSS tuʻufaʻatasia ma faʻaogaina le RTL:

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

Fa'ata'ita'iga amata

E mafai ona e vaʻai i manaʻoga o loʻo i luga o loʻo atagia mai i lenei faʻataʻitaʻiga faʻataʻitaʻiga RTL.

<!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 fa'ata'ita'iga

Amata i se tasi o matou RTL faʻataʻitaʻiga .

Auala

O la matou auala i le fausiaina o le RTL lagolago i totonu o Bootstrap e sau ma ni filifiliga taua se lua e aʻafia ai le auala matou te tusitusi ma faʻaoga ai la matou CSS:

  1. Muamua, na matou filifili e fausia i le RTLCSS poloketi. E maua mai ai ia i matou nisi o vaega mamana mo le puleaina o suiga ma fa'amalo pe a si'i mai le LTR i le RTL. E mafai ai foi ona tatou fausia ni lomiga se lua o Bootstrap mai le tasi codebase.

  2. Lona lua, ua matou toe fa'aigoaina ni vaega to'aitiiti o vasega fa'atonu e fa'aaoga ai se faiga fa'atatau. O le to'atele o outou ua uma ona fegalegaleai ma mea fa'atatau fa'afetai i a matou mea fa'aoga felefele—e suitulaga i mea fa'atonu e pei o leftma rightfa'amalie startma end. O le mea lena e talafeagai ai igoa o le vasega ma tau mo le LTR ma le RTL e aunoa ma se fa'asili.

Mo se faʻataʻitaʻiga, nai lo le .ml-3mo margin-left, faʻaaoga .ms-3.

O le galulue faatasi ma le RTL, e ala i le matou puna Sass poʻo le CSS tuʻufaʻatasia, e le tatau ona matua ese mai la matou LTR faaletonu.

Fa'asinomaga mai puna

A o'o mai i le fa'aganu'u , o le auala e sili ona lelei o le fa'aogaina lea o fesuiaiga, fa'afanua, ma fa'afefiloi. O lenei faiga e tutusa lava mo le RTL, e tusa lava pe na maeʻa ona faʻagasolo mai faila tuʻufaʻatasia, faʻafetai i le auala e galue ai le RTLCSS .

Tulaga fa'apitoa RTL

I le fa'aaogaina o fa'atonuga o le tau o le RTLCSS , e mafai ona e faia se fa'aliliuga fesuia'i se tau ese'ese mo le RTL. Mo se faʻataʻitaʻiga, e faʻaititia le mamafa mo le faʻasologa $font-weight-boldatoa o le codebase, e mafai ona e faʻaogaina le /*rtl: {value}*/syntax:

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

O le a le mea o loʻo faʻaalia i mea nei mo le faaletonu o le CSS ma le RTL CSS:

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

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

Isi fa'aputuga vaitusi

I le tulaga o lo'o e fa'aogaina se fa'ailoga masani, ia nofouta e le o fa'amauina uma e lagolagoina le alafapeta e le o le Latina. Ina ia sui mai le Pan-European i le aiga Arapi, atonu e te manaʻomia le faʻaogaina /*rtl:insert: {value}*/i lau faʻaputuga vai e sui ai igoa o aiga vaitusi.

Mo se faʻataʻitaʻiga, e sui mai Helvetica Neue Webfontle LTR i Helvetica Neue Arabicle RTL, e faʻapea lau code Sass:

$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 ma RTL i le taimi e tasi

Manaomia uma le LTR ma le RTL ile itulau e tasi? Fa'afetai ile RTLCSS String Maps , e fai lava si sa'o. Afi lau @imports i se vasega, ma seti se tulafono fa'aigoa masani mo 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*/

A uma ona fa'agasolo Sass ona RTLCSS, o tagata filifilia ta'itasi i au faila CSS o le a fa'apipi'iina e .ltr, ma .rtlmo faila RTL. O lea ua mafai ona e fa'aogaina faila uma i luga o le itulau e tasi, ma fa'aaoga .ltrpo'o .rtlluga o au vaega afifi e fa'aoga ai le tasi po'o le isi itu.

pito pito ma tapula'a iloa

E ui e malamalama lelei lenei faiga, faʻamolemole faʻalogo i mea nei:

  1. A fesuia'i .ltrma .rtl, ia mautinoa e te fa'aopoopo dirma languiga fa'atatau.
  2. O le faʻapipiʻiina o faila uma e lua e mafai ona avea ma faʻamaufaʻailoga faʻatinoga: mafaufau i se faʻataʻitaʻiga , ma atonu e taumafai e utaina se tasi o na faila asynchronously .
  3. Nesting styles this way will prevent our form-validation-state() mixin from working as intended, thus require you tweak it a bit by yourself. See #31223.

The breadcrumb case

The breadcrumb separator is the only case requiring its own brand new variable— namely $breadcrumb-divider-flipped —defaulting to $breadcrumb-divider.

Additional resources