RTL

Koyi yadda ake ba da goyan baya ga rubutu na dama-zuwa-hagu a cikin Bootstrap a cikin shimfidar wuri, abubuwan da aka gyara, da abubuwan amfani.

A wannan shafi

Ku saba

Muna ba da shawarar sanin Bootstrap da farko ta hanyar karantawa ta shafinmu na Fara Gabatarwa . Da zarar kun gama, ci gaba da karantawa anan don yadda ake kunna RTL.

Hakanan kuna iya son karantawa akan aikin RTLCSS , saboda yana ba da ikon tsarin mu ga RTL.

Siffar gwaji

Siffar RTL har yanzu gwaji ce kuma wataƙila za ta samo asali bisa ga ra'ayin mai amfani. Ya hango wani abu ko yana da haɓaka don ba da shawara? Bude wani batu , muna son samun fahimtar ku.

HTML da ake buƙata

Akwai ƙaƙƙarfan buƙatu guda biyu don kunna RTL a cikin shafuka masu ƙarfi na Bootstrap.

Saita dir="rtl"akan <html>kashi.
Ƙara langsifa mai dacewa, kamar lang="ar", akan <html>kashi.

Daga can, kuna buƙatar haɗa da sigar RTL ta CSS ɗin mu. Misali, ga tsarin salon rubutun CSS ɗinmu da aka haɗa kuma an rage shi tare da kunna RTL:

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

Samfurin farawa

Kuna iya ganin buƙatun da ke sama suna nunawa a cikin wannan samfuri na farawa na RTL da aka gyara.

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

Misalin RTL

Fara da ɗaya daga cikin misalan RTL da yawa .

kusanci

Hanyarmu don gina tallafin RTL cikin Bootstrap ya zo tare da yanke shawara guda biyu waɗanda ke tasiri yadda muke rubutu da amfani da CSS ɗin mu:

Da farko, mun yanke shawarar gina shi tare da aikin RTLCSS . Wannan yana ba mu wasu fasaloli masu ƙarfi don sarrafa canje-canje da sokewa lokacin ƙaura daga LTR zuwa RTL. Hakanan yana ba mu damar gina nau'ikan Bootstrap guda biyu daga tushe guda ɗaya.
Na biyu, mun canza suna kaɗan na azuzuwan jagora don ɗaukar tsarin kaddarorin ma'ana. Yawancinku sun riga sun yi hulɗa tare da kaddarorin ma'ana godiya ga kayan aikin mu masu sassauƙa - suna maye gurbin kaddarorin jagora kamar leftkuma rightcikin ni'ima startda end. Wannan ya sa sunaye da ƙimar ajin suka dace da LTR da RTL ba tare da wani sama ba.

Misali, maimakon .ml-3don margin-left, yi amfani da .ms-3.

Yin aiki tare da RTL, ta hanyar tushen mu Sass ko haɗa CSS, bai kamata ya bambanta da tsohuwar LTR ɗinmu ba.

Keɓance daga tushe

Idan ya zo ga keɓancewa , hanyar da aka fi so ita ce a yi amfani da fa'idodin masu canji, taswira, da mixins. Wannan tsarin yana aiki iri ɗaya don RTL, koda kuwa an sarrafa shi daga fayilolin da aka haɗa, godiya ga yadda RTLCSS ke aiki .

Ƙimar RTL ta al'ada

Yin amfani da umarnin ƙimar RTLCSS , zaku iya sanya fitarwa mai canzawa ta zama ƙima daban don RTL. Alal misali, don rage nauyi ga $font-weight-boldko'ina cikin codebase, za ka iya amfani da /*rtl: {value}*/syntax:

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

Wanne zai fitar zuwa masu zuwa don tsohowar CSS da RTL CSS:

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

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

Madadin tarin font

A cikin yanayin da kuke amfani da font na al'ada, ku sani cewa ba duk nau'ikan rubutu ba ne ke tallafawa haruffan da ba na Latin ba. Don canjawa daga Pan-Turai zuwa dangin Larabci, ƙila kuna buƙatar amfani /*rtl:insert: {value}*/da tarin font ɗinku don canza sunayen iyalai na rubutu.

Misali, don canzawa daga Helvetica Neue WebfontLTR zuwa Helvetica Neue ArabicRTL, lambar Sass ɗinku tayi kama da wannan:

$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 da RTL a lokaci guda

Kuna buƙatar duka LTR da RTL akan shafi ɗaya? Godiya ga RTLCSS Maps String , wannan yana da kyau madaidaiciya. Kunna @imports ɗin ku tare da aji, kuma saita ƙa'idar canza suna na al'ada don 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*/

Bayan gudanar da Sass sannan RTLCSS, kowane mai zaɓi a cikin fayilolin CSS ɗinku za a tsara shi ta .ltr, da .rtlfayilolin RTL. Yanzu kuna iya amfani da fayiloli guda biyu akan shafi ɗaya, kuma kawai kuyi amfani da .ltrko .rtla kan kayan aikin ku don amfani da ɗayan ko ɗayan.

Abubuwan Edge da iyakokin da aka sani

Yayin da ake iya fahimtar wannan hanyar, da fatan za a kula da waɗannan masu zuwa:

Lokacin canzawa .ltrda .rtl, tabbatar da ƙara dirda langsifofi daidai.
Load da fayiloli guda biyu na iya zama ƙaƙƙarfan aiki na gaske: la'akari da ingantawa , kuma wataƙila ƙoƙarin loda ɗayan waɗannan fayilolin asynchronously .
Salon ƙorafi ta wannan hanyar zai hana haɗin gwiwarmu form-validation-state()yin aiki kamar yadda aka yi niyya, don haka yana buƙatar ka ɗan ɗanɗana shi da kanka. Duba #31223 .

Mai raba burodin burodi shine kawai yanayin da ke buƙatar sabon canjin sa - wato $breadcrumb-divider-flipped-defaulting zuwa $breadcrumb-divider.

RTL