in English

RTL

Baro sida loo suurtageliyo taageerada qoraalka midig-ilaa-bidix ee Bootstrap guud ahaan nashqadayada, qaybaha, iyo adeegyadayada.

Boggaan

Baro

Waxaan kugula talineynaa inaad barato Bootstrap marka hore adigoo akhrinaya boggayaga Bilawga Horudhaca . Marka aad ka gudubto, sii wad akhrinta halkan si aad u awood u yeelato RTL.

Waxa kale oo laga yaabaa inaad rabto inaad wax ka akhrido mashruuca RTLCSS , maadaama ay awood u leedahay habkayaga RTL.

Sifada tijaabada ah

Habka RTL wali waa tijaabo waxaana laga yaabaa inuu u kobco si waafaqsan jawaab celinta isticmaale. Wax ma aragtay ama ma leedahay horumar aad soo jeediso? Furo arrin , waxaan jeclaan lahayn inaan helno fikradahaaga.

HTML loo baahan yahay

Waxaa jira laba shuruudood oo adag oo awood u siinaya RTL boggaga ku shaqeeya Bootstrap.

Ku dheji dir="rtl"curiyaha <html>.
langKu dar sifo ku habboon , sida lang="ar", <html>qaybta.

Halkaa, waxaad u baahan doontaa inaad ku darto nooca RTL ee CSS-kayaga. Tusaale ahaan, halkan waa xaashida qaab-dhismeedka ee CSS-ta la soo ururiyey oo la yareeyey ee RTL karti u yeelatay:

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

Qaabka bilowga

Waxaad arki kartaa shuruudaha kor ku xusan oo ka muuqda qaabkan RTL ee wax laga beddelay.

<!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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Tusaalooyinka RTL

Ku bilow mid ka mid ah dhowr tusaale oo RTL ah .

Habka

Habkayaga ku dhisitaanka taageerada RTL ee Bootstrap waxay la socotaa laba go'aan oo muhiim ah oo saameeya sida aan u qorno oo u isticmaalno CSS:

Marka hore, waxaan go'aansanay inaan ku dhisno mashruuca RTLCSS . Tani waxay ina siinaysaa astaamo awood leh oo lagu maareeyo isbeddelada iyo ka-hortagga marka laga guurayo LTR una guurayo RTL. Waxa kale oo ay noo ogolaataa in aan dhisno laba nooc oo Bootstrap ah hal codebase.
Marka labaad, waxaanu magacownay dhawr fasal oo hagitaan ah si aanu u qaadano hab sifo macquul ah. In badan oo idinka mid ah waxaad horey ula falgalteen sifooyin macquul ah iyadoo ay ugu wacan tahay adeegyadeena flex-waxay bedelaan guryaha jihada sida leftiyo rightdoorbidka startiyo end. Taasi waxay ka dhigaysaa magacyada fasalka iyo qiyamka ku haboon LTR iyo RTL iyada oo aan wax dulsaar ah lahayn.

Tusaale ahaan, halkii aad ka isticmaali .ml-3lahayd margin-left, isticmaal .ms-3.

La shaqaynta RTL, iyada oo loo marayo ishayaga Sass ama CSS la soo ururiyey, waa in aanay wax badan ka duwanayn LTR our default.

Ka bedel isha

Marka ay timaado habaynta, habka la door bidaayo waa in laga faa'iidaysto doorsoomayaasha, khariidado, iyo isku darka. Habkani wuxuu u shaqeeyaa si la mid ah RTL, xitaa haddii laga soo shaqeeyay faylalka la soo ururiyey, iyada oo ay ugu wacan tahay sida RTLCSS u shaqeyso .

Qiimaha RTL ee gaarka ah

Adigoo isticmaalaya dardaaranka qiimaha RTLCSS , waxaad samayn kartaa wax soo saarka doorsoome qiimo ka duwan RTL. Tusaale ahaan, si loo yareeyo miisaanka $font-weight-bolddhammaan codebase, waxaad isticmaali kartaa /*rtl: {value}*/ereyga:

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

Kaas oo soo saari kara kuwan soo socda ee CSS-tayada caadiga ah iyo RTL CSS:

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

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

Xirmada xarfaha kale

Xaaladda aad isticmaalayso far gaar ah, ka digtoonow in dhammaan xarfaha aanay taageersanayn alifbeetada aan Latinka ahayn. Si aad uga soo beddesho Pan-European una guurto qoyska Carabiga, waxa laga yaabaa inaad u baahato inaad ku dhex isticmaasho /*rtl:insert: {value}*/kaydka fartaada si aad wax uga bedesho magacyada qoysaska farta

Tusaale ahaan, si aad uga bedesho Helvetica Neuefarta LTR una aaddo Helvetica Neue ArabicRTL, codekaga Sass waxa uu u ekaan karaa sidan:

$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 iyo RTL isku mar

Ma u baahan tahay labada LTR iyo RTL isku bog? Thanks to RTLCSS Khariidadaha Xadhkaha , tani waa mid toos ah. Ku duub @importfasalkaaga fasalka, oo u deji xeerka beddelka magaca 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*/

Kadib socodsiinta Sass ka dib RTLCSS, doore kasta oo ku jira faylalkaaga CSS waxaa loo sii diyaarin doonaa .ltr, iyo .rtlfaylalka RTL. Hadda waxaad awood u leedahay inaad ku isticmaasho labada fayl isla bogga, oo si fudud u isticmaal .ltrama u isticmaal .rtlqaybahaaga duubabka si aad u isticmaasho mid ama jiha kale.

Kiisaska geesaha iyo xaddidaadaha la yaqaan

Iyadoo habkani yahay mid la fahmi karo, fadlan u fiirso kuwa soo socda:

Markaad bedesho .ltriyo .rtl, hubi inaad ku darto diroo langu sifo si waafaqsan.
Soo dejinta labada faylal waxay noqon karaan caqabad dhab ah oo wax qabad leh: ka fiirso qaar ka mid ah hagaajinta , oo laga yaabee isku day inaad ku shubto mid ka mid ah faylashaas si isku mid ah .
Qaababka buulka ee habkan ayaa ka ilaalin doona form-validation-state()isku-darkayaga inuu u shaqeeyo sidii loogu talagalay, markaa waxay u baahan tahay inaad adigu xoogaa hagaajiso. Fiiri #31223 .

Kala- soocida rootiga ayaa ah kiiska kaliya ee u baahan doorsoomahiisa-cusub-oo ah-ku- $breadcrumb-divider-flippedtalagalka $breadcrumb-divider.

RTL