RTL

Disce quomodo subsidia pro textu dextro ad sinistrum in Bootstrap transmisso nostro layout, componentium, utilitatum.

In hac pagina

Adepto nota

Commendamus familiaritatem cum Bootstrap primo legendo per nostram paginam Introductio Questus Coepi . Cum percurristi, hic pergere legere quomodo RTL facere possis.

Etiam in RTLCSS incepto legere vis , ut aditus nostros ad RTL.

Pluma experimentale

Pluma RTL adhuc experimentum est et probabiliter evolutionis secundum feedback usoris. Quid maculosum, an emendationem habere ad suadendum? Aperi constitutionem , amamus ut tuas pervestigationes.

requiritur HTML

Duo stricta requisita sunt ut RTL in paginas Powered in Bootstrap.

In elementum posuere dir="rtl".<html>
Congrua langattributum adde velut lang="ar"in <html>elementum.

Inde, debes versionem RTL nostrae CSS includere. Exempli gratia, hic scheda nostra pro CSS compilata et diminuta est cum RTL para;

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

Starter template

Potes videre requisita quae in RTL starter template modificatur, reflectuntur.

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

Incipias una ex pluribus nostris RTL exemplis .

Accessus

Accessus noster ad aedificandum RTL subsidium in Bootstrap venit cum duobus momentis decisionibus impulsus quomodo scribimus et utimur nostro CSS:

Primum placuit eam aedificare cum project RTLCSS . Hoc nobis praebet nonnullas validissimas lineas ad mutationes mutandas et vincit cum ab LTR ad RTL movendo. Etiam nobis concedit duas versiones Bootstrap ex uno codebase aedificare.
Secundo, nominavimus nonnullas classes directionales ut logicas proprietates adeamus. Plerique vestrum iam inter se occurrunt cum proprietatibus logicalibus propter nostrae utilitatis flexae - proprietates directiones reponunt sicut leftet rightin favorem startet end. Id facit nomina classium et valores LTR et RTL sine ullo supra capite congruos.

Exempli gratia .ml-3pro margin-left, uti .ms-3.

Laborans cum RTL, per fontem nostrum Sass vel CSS exaratum, non multum differt a nostro defectu LTR quamquam.

Mos ex fonte

Cum ad customizationem venit, modus praelatus variabilibus, mappis et mixinis utetur. Accessus hic idem operatur pro RTL, etsi suus post-processionaliter a lima exarato, gratias quomodo RTLCSS operatur .

Custom RTL values

Utens RTLCSS valorem normas , variam rationem facere potes pro RTL valore alium. Exempli gratia, pondus in toto codicebasi decrescere , syntaxi $font-weight-bolduti licet :/*rtl: {value}*/

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

Quae output in sequentibus pro defectu nostro CSS et RTL CSS:

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

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

Alternative font acervus

In casu quo consuetudini uteris, scias non omnes fontes in alphabeto non-latino sustinere. Ad ex Pan-Europea ad familiam Arabicam commutandam, uti debes /*rtl:insert: {value}*/in acervo fontium nomina familiarum fontium mutare.

Exempli gratia, commutandum ab Helvetica Neue Webfontpro LTR ad Helvetica Neue Arabicpro RTL, codicem tuum Sass hoc simile vide:

$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 et RTL simul

Utrumque LTR et RTL in eadem pagina opus est? Gratias RTLCSS String Maps , haec satis directa est. Involve @importcum classe, et pone consuetudinem fasciculorum regulae pro 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*/

Post currit Sass tunc RTLCSS, quisque selector in tuis CSS fasciculis prependetur ab .ltr, et .rtlpro RTL lima. Iam utraque fascicula in eadem pagina uti potes, et involucris simplicibus .ltrvel .rtlin membranis tuis uno vel altero utaris.

In ore casibus notisque limitibus

Dum hic accessus sit comprehensibilis, sequentia attende quaeso;

Cum mutando .ltret .rtl, fac ergo addas diret langattributa.
Onerans utraque lima potest esse reali perficiendi bottleneck: considerans aliquam optimiizationem , et fortasse experire unum illorum imaginum asynchronously onerare .
Modus nidificans hanc viam nostram mixin ab opere intento prohibebit form-validation-state(), ita te paulum a te deposco. See #31223 .

Crus panis separator solus casus requirit propriam notam novam variabilem, scilicet $breadcrumb-divider-flipped- defaltam $breadcrumb-divider.

RTL