RTL

“Bootstrap” -da ýerleşişimiz, komponentlerimiz we kömekçi hyzmatlarymyzda sagdan çepe teksti nädip goldap boljakdygyny öwreniň.

Bu sahypada

Tanyşyň

Ilki bilen “ Başlangyç giriş” sahypamyzy okap, “Bootstrap” bilen tanyşmagy maslahat berýäris . Ony öwreneniňizden soň, RTL-i nädip işletmelidigini şu ýerde okaň.

Şeýle hem , RTLCSS taslamasy barada okamak isläp bilersiňiz , sebäbi bu RTL-e bolan garaýşymyzy güýçlendirýär.

Synag aýratynlygy

RTL aýratynlygy henizem eksperimental we ulanyjylaryň pikirlerine görä öser. Bir zady gördüňizmi ýa-da teklip etjek gowulaşmaňyz barmy? Bir mesele açyň , düşünjeleriňizi almak isleýäris.

Gerekli HTML

“Bootstrap” bilen işleýän sahypalarda RTL-i işletmek üçin iki sany berk talap bar.

Elementi düzüň dir="rtl".<html>
Elemente meňzeş langatribut goşuň .lang="ar"<html>

Şol ýerden CSS-iň RTL wersiýasyny goşmaly bolarsyňyz. Mysal üçin, ine, RTL işledilen düzülen we kiçeldilen CSS-iň stil tablisasy:

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

Başlangyç şablon

Üýtgedilen RTL başlangyç şablonynda görkezilen ýokardaky talaplary görüp bilersiňiz.

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

RTL mysallary

Birnäçe RTL mysallarymyzyň biri bilen başlaň .

Çemeleşme

“Bootstrap” -a RTL goldawyny gurmak baradaky çemeleşmämiz, CSS-ni ýazmagymyza we ulanmagymyza täsir edýän iki möhüm karar bilen gelýär:

Ilki bilen ony RTLCSS taslamasy bilen gurmagy makul bildik . Bu, LTR-den RTL-e geçeniňizde üýtgeşmeleri dolandyrmak we üýtgetmek üçin käbir güýçli aýratynlyklary berýär. Şeýle hem, bir kod bazasyndan Bootstrap-yň iki wersiýasyny gurmaga mümkinçilik berýär.
Ikinjiden, logiki häsiýetlere çemeleşmek üçin birnäçe ugurly synpyň adyny üýtgetdik. Siziň köpüňiz, flex kömekçi enjamlarymyzyň kömegi bilen eýýäm logiki häsiýetler bilen aragatnaşyk sakladyňyz - olar ýaly ugurlary we lefttaraplary rightçalyşýarlar . Bu, synp atlaryny we bahalaryny LTR we RTL üçin laýyk edýär.startend

Mysal üçin, ýerine .ml-3derek margin-leftulanyň .ms-3.

Çeşme Sass ýa-da düzülen CSS arkaly RTL bilen işlemek, adaty LTR-dan kän bir tapawutlanmaly däldir.

Çeşmeden düzüň

Düzeltmek barada aýdylanda , üýtgeýänlerden, kartalardan we garyndylardan peýdalanmak islenýär. Bu çemeleşme, RTLCSS-iň işleýşi sebäpli, düzülen faýllardan gaýtadan işlenen hem bolsa, RTL üçin birmeňzeş işleýär .

RTörite RTL bahalary

RTLCSS baha görkezmelerini ulanyp , üýtgeýän çykyşy RTL üçin başga bir baha edip bilersiňiz. Mysal üçin, kod bazasynyň hemme ýerinde agramy azaltmak üçin sintaksis $font-weight-boldulanyp bilersiňiz :/*rtl: {value}*/

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

Adaty CSS we RTL CSS üçin aşakdakylara çykar:

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

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

Şriftiň alternatiw görnüşi

Adaty şrift ulanýan bolsaňyz, şriftleriň hemmesiniň latyn däl elipbiýini goldamaýandygyna üns beriň. Pan-Europeanewropadan arap maşgalasyna geçmek üçin /*rtl:insert: {value}*/şrift maşgalalarynyň atlaryny üýtgetmek üçin şrift bukjasynda ulanmagyňyz zerur bolup biler.

Mysal üçin, Helvetica NeueLTR üçin şriftden Helvetica Neue ArabicRTL-e geçmek üçin Sass koduňyz şeýle bolup biler:

$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 we RTL bir wagtda

Bir sahypada LTR we RTL ikisi gerekmi? RTLCSS setir kartalarynyň kömegi bilen bu gaty gönümel. @importS-laryňyzy synp bilen örtüň we RTLCSS üçin adyny üýtgetmek düzgünini düzüň :

/* 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-dan soň RTLCSS işledilenden soň, CSS faýllaryňyzdaky her bir saýlaýjy, .ltrRTL .rtlfaýllary üçin öňünden taýýarlanar. Indi iki faýly hem bir sahypada ulanyp bilersiňiz, .ltrýa .rtl-da bir ýa-da beýleki ugry ulanmak üçin diňe komponentleriň örtüklerini ulanyp bilersiňiz.

Gyradaky ýagdaýlar we belli çäklendirmeler

Bu çemeleşme düşnükli bolsa-da, aşakdakylara üns bermegiňizi haýyş edýäris:

Çalyşanyňyzda .ltrwe şoňa görä goşýandygyňyza we atributlaryňyza .rtlgöz ýetiriň .dirlang
Iki faýly ýüklemek hakyky öndürijilik päsgelçiligi bolup biler: käbir optimizasiýany göz öňünde tutuň we belki şol faýllaryň birini asynkron görnüşde ýüklemäge synanyşyň .
Bu görnüşde höwürtgeleýiş stilleri, form-validation-state()garyndymyzyň niýetlenilişi ýaly işlemeginiň öňüni alar, şeýlelik bilen biraz özüňiz düzeltmegiňizi talap eder. # 31223 serediň .

Çörek döwüji bölüji , özüniň täze üýtgeýjisini talap edýän ýeke-täk ýagdaý .$breadcrumb-divider-flipped$breadcrumb-divider

RTL