Saltar al contenido principal Salta a docs navegación
in English

RTL nisqa

Yachay imayna yanapakuy atichiyta pañamanta lluq'i qillqapaq Bootstrap kaqpi tukuy ruwanaykupi, componentesniykupi chaymanta yanapakuyniykupi.

Kay p'anqapi

Riqsinakuy

Bootstrap kaqwan ñawpaqta riqsiyta yuyaychayku qallariy Riqsichiy p'anqaykupi ñawirispa . Huk kuti chayta purisqaykimanta, kaypi ñawiriyta hinalla ruway imayna RTL atichiypaq.

Hinallataq RTLCSS llamk'aymanta ñawiriyta munankiman , imaynachus RTL kaqman hamut'ayniyku kallpachan.

Característica experimental nisqa

RTL ruwayqa experimentalraq kachkan chaymanta ichapas evolucionanqa userkunap yuyayninmanhina. ¿Imatapas rikurqankichu icha huk allinchayta yuyaychanaykipaqchu kanki? Open an issue , anchata munayku hamut'ayniykikunata chaskiyta.

HTML nisqa

Iskay sinchi kamachiykuna kanku RTL atichiypaq Bootstrap-wan kallpachasqa p'anqakunapi.

  1. Elementopi churasqa dir="rtl".<html>
  2. Huk tupaq langatributota yapay, imayna lang="ar", <html>elementopi.

Chaypimanta, huk RTL laya CSSniykumanta churanayki tiyan. Ejemplopaq, kaypi kachkan RTL atichisqawan huñusqa chaymanta pisiyachisqa CSSniykupaq estilo raphi:

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

Plantilla de inicio

Kay tikrasqa RTL qallariy plantillapi rikuchisqa ñawpaq mañakuykunata qhawayta atinki.

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

Huknin achka RTL ejemploykuwan qallariy .

Asuykuy

RTL yanapakuy Bootstrap kaqman ruwanapaq enfoqueyku iskay importante tanteaykunawan hamun chaymanta imayna CSSniyku qillqayku chaymanta llamk'achiyku chayta impaktakun:

  1. Ñawpaqtaqa, RTLCSS nisqa proyectowan ruwanaykupaqmi yuyaykurqayku. Kayqa wakin kallpasapa ruwanakunata quwanchik tikraykunata kamachinapaq chaymanta LTR kaqmanta RTL kaqman kuyuypi. Hinallataq huk codebase kaqmanta Bootstrap iskay layakuna ruwayta saqin.

  2. Iskay kaq, huk makilla direccional clasekunata suticharqayku huk lógico propiedades enfoqueta hap'inaykupaq. Yaqa llapanchikqa propiedades lógicas kaqwanña interacturqankichik gracias a nuestras utilidades flex —paykunaqa propiedades dirección kaqmanta tikranku hina leftchaymanta rightfavorpi startchaymanta end. Chayqa ruwan clase sutikuna chaymanta chanikuna LTR kaqpaq chaymanta RTL kaqpaq mana ima hawa qullqiyuq.

Ejemplopaq, .ml-3para nisqaykimantaqa margin-left, nisqawanmi yanapachikunayki .ms-3.

RTL kaqwan llamk'ay, ñuqaykupa pukyuta Sass utaq huñusqa CSS kaqnintakama, mana ancha hukniraqchu kanan tiyan ñawpaqmanta LTRniykumanta ichaqa.

Pukyumanta ruway

When it comes to Customization , aswan allin ñanqa variables, mapas, mixins nisqakunata aprovechaymi. Kay ruwayqa RTL kaqpaq kikin llamk'an, huñusqa willañiqikunamanta qhipa ruwasqa kaptinpas, imayna RTLCSS llamk'anman gracias .

Sapanchasqa RTL chanikuna

RTLCSS chani kamachiykunata llamk'achispa , huk tikraq lluqsiyta huk chikan chaniyuq RTL kaqpaq ruwayta atikunki. Ejemplopaq, llasayninta pisiyachinapaq tukuy codigo-base kaqpi, sintaxis $font-weight-boldllamk'achiy atikunki :/*rtl: {value}*/

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

Mayqintaq kayman lluqsinman ñawpaqmanta CSSniykupaq chaymanta RTL CSSniykupaq:

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

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

Pila de fuente alternativa

Sichus huk sapanchasqa letrata llamk'achkanki, yachay mana llapa letrakunachu mana latin alfabeto yanapan. Pan-Europeomanta árabe aylluman /*rtl:insert: {value}*/tikranaykipaq, qillqakuna pilaykipi llamk'achinayki kanman qillqa ayllukunap sutinkunata tikranaykipaq.

Ejemplopaq, Helvetica Neue WebfontLTR Helvetica Neue Arabickaqpaq kaqmanta RTL kaqpaq tikraypaq, Sass codigoyki kayhina rikch'akun:

$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 y RTL al mismo tiempo

¿Necesitas tanto LTR y RTL en la misma página? Gracias a RTLCSS String Maps , kayqa ancha chiqanmi. S nisqayki @importhuk clasewan p'istuy, chaymanta RTLCSSpaq huk sapanchasqa suti tikray kamachiyta churay:

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

Sass chaymanta RTLCSS purichiymanta qhipaman, sapa akllaq CSS willañiqiykikunapi ñawpaqmanta churasqa kanqa .ltr, chaymanta .rtlRTL willañiqikunapaq. Kunanqa iskaynin willañiqikunata kikin p'anqapi llamk'achiyta atikunki, chaymanta sapalla llamk'achiy .ltrutaq .rtlcomponentes wrappersniykipi huk utaq wak direccionta llamk'achinapaq.

Casos de borde y limitaciones conocidas

Kay ruway entiendenapaq hina kaptinpas, ama hina kaspa kaykunata qhawariy:

  1. .ltrchaymanta , tikrachkaspa .rtl, chaymanhina yapasqaykita dirchaymanta langatributokunata qhaway.
  2. Iskaynin willañiqikunata kargayqa chiqap ruwaypa cuello de botella kanman: wakin allinchayta qhawariy , chaymanta ichapas huk chay willañiqikunata asíncronamente kargayta kallpachakuy .
  3. Estilos de anidación kayhina harkanqa form-validation-state()mixinniyku llamk'ayta munasqa hina, chayhina huk chhika sapallaykimanta t'ikranaykita mañasunki. Qaway #31223 nisqapi .

Chay t’anta mikhuy caja

T'anta t'aqaq sapalla caso kan kikin musuq variableta mañan— chaymanta $breadcrumb-divider-flipped—defaulting to $breadcrumb-divider.

Yanapakuykuna yapasqa