RTL

Ikasi Bootstrap-en eskuinetik ezkerreko testurako laguntza nola gaitzen gure diseinu, osagai eta utilitateetan.

Orrialde honetan

Ezagutu zaitez

Lehenik eta behin, Bootstrap-ekin ezagutzea gomendatzen dugu gure Lehen urratsak emateko Sarrera orria irakurrita . Behin exekutatuta, jarraitu hemen irakurtzen RTL nola gaitu jakiteko.

Baliteke RTLCSS proiektuari buruz ere irakurri nahi izatea, RTLrako gure ikuspegia indartzen baitu.

Ezaugarri esperimentala

RTL funtzioa oraindik esperimentala da eta ziurrenik erabiltzaileen iritzien arabera eboluzionatuko da. Zerbait ikusi al duzu edo iradokitzeko hobekuntzarik? Ireki ale bat , zure estatistikak jasotzea gustatuko litzaiguke.

HTML beharrezkoa

Bi eskakizun zorrotz daude RTL gaitzeko Bootstrap-eko orrialdeetan.

Ezarri dir="rtl"elementuan <html>.
langGehitu atributu egoki bat , adibidez lang="ar", <html>elementuan.

Hortik aurrera, gure CSSren RTL bertsio bat sartu beharko duzu. Adibidez, hona hemen gure CSS konpilatu eta txikituaren estilo-orria RTL gaituta:

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

Hasierako txantiloia

Goiko eskakizunak aldatutako RTL hasierako txantiloi honetan islatuta ikus ditzakezu.

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

Hasi gure RTL adibideetako batekin .

Hurbilketa

Bootstrap-en RTL euskarria eraikitzeko gure ikuspegia gure CSS idazten eta erabiltzen dugun moduan eragina duten bi erabaki garrantzitsurekin dator:

Lehenik eta behin, RTLCSS proiektuarekin eraikitzea erabaki genuen . Honek funtzio indartsu batzuk eskaintzen dizkigu aldaketak eta gainidatziak kudeatzeko LTRtik RTLra pasatzean. Gainera, Bootstrap-en bi bertsio eraikitzeko aukera ematen digu kode-base batetik.
Bigarrenik, norabide-klase batzuei izena aldatu diegu propietate logikoen ikuspegia hartzeko. Gehienek propietate logikoekin elkarreragin duzue gure flex utilitateei esker left; Horrek klaseen izenak eta balioak egokiak bihurtzen ditu LTR eta RTL-entzako inolako gasturik gabe.rightstartend

Adibidez, .ml-3for ordez margin-left, erabili .ms-3.

RTL-rekin lan egiteak, gure iturburu Sass edo konpilatutako CSS bidez, ez luke gure LTR lehenetsiaren oso desberdina izan behar.

Pertsonalizatu iturburutik

Pertsonalizazioari dagokionez , hobetsitako modua aldagaiak, mapak eta nahasketak aprobetxatzea da. Ikuspegi honek berdin funtzionatzen du RTLrentzat, nahiz eta konpilatutako fitxategietatik postprozesatzen den, RTLCSS funtzionatzen duenari esker .

RTL balio pertsonalizatuak

RTLCSS balioaren zuzentarauak erabiliz , irteera aldagai bat RTLrako balio desberdina izan dezakezu. Adibidez, kode-base osoan pisua murrizteko, sintaxia $font-weight-bolderabil dezakezu :/*rtl: {value}*/

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

Gure CSS eta RTL CSS lehenetsietarako hurrengora aterako litzateke:

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

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

Letra-tipo alternatiboa

Letra-tipo pertsonalizatua erabiltzen ari bazara, kontutan izan letra-tipo guztiek ez dutela latindarrik gabeko alfabetoa onartzen. Paneuropartik arabiar familiara aldatzeko, baliteke /*rtl:insert: {value}*/letra-tipo-pilean erabili behar izatea letra-tipo-familien izenak aldatzeko.

Adibidez, Helvetica Neue WebfontLTR-tik Helvetica Neue ArabicRTL-ra aldatzeko, zure Sass kodea honelakoa izango da:

$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 eta RTL aldi berean

LTR eta RTL orri berean behar dituzu? RTLCSS String Maps - i esker , hau nahiko erraza da. Itzul ezazu zure @imports klase batekin eta ezarri RTLCSS-ren izen-abizen arau pertsonalizatu bat:

/* 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 eta gero RTLCSS exekutatu ondoren, zure CSS fitxategietako hautatzaile bakoitza .ltr, eta .rtlRTL fitxategien aurretik jarriko da. Orain bi fitxategiak orri berean erabili ahal izango dituzu, eta zure osagaien bilgarrietan erabili .ltredo .rtlbeste norabide bat edo beste erabiltzeko.

Ertz kasuak eta muga ezagunak

Planteamendu hau ulergarria den arren, arreta jarri hurrengoei:

.ltrEta aldatzean .rtl, ziurtatu direta langhorren arabera atributuak gehitzen dituzula.
Bi fitxategiak kargatzea benetako errendimendu-botoia izan daiteke: kontuan hartu optimizazio batzuk eta, agian, saiatu fitxategi horietako bat modu asinkronoan kargatzen .
Modu honetan habiatzeko estiloek gure form-validation-state()nahasketak nahi bezala funtzionatzea eragotziko dute, beraz, zuk zeuk apur bat moldatu beharko duzu. Ikusi #31223 .

Ogi- bira- bereizlea bere aldagai berria eskatzen duen kasu bakarra da, hots $breadcrumb-divider-flipped, lehenetsia izatea $breadcrumb-divider.

RTL