RTL

ئورۇنلاشتۇرۇشىمىز ، زاپچاسلىرىمىز ۋە ئەسلىھەلىرىمىز ئارقىلىق Bootstrap دىكى ئوڭدىن سولغا تېكىستنى قانداق قوللاشنى ئۆگىنىۋېلىڭ.

بۇ بەتتە

تونۇش

ئالدى بىلەن تونۇشتۇرۇش بېتىمىزنى ئوقۇش ئارقىلىق Bootstrap بىلەن تونۇشۇشنى تەۋسىيە قىلىمىز . ئۇنى باشتىن كەچۈرگەندىن كېيىن ، RTL نى قانداق قوزغىتىش ئۈچۈن بۇ يەرنى داۋاملىق ئوقۇڭ.

سىز يەنە RTLCSS تۈرىنى ئوقۇشنى ئويلىسىڭىز بولىدۇ ، چۈنكى ئۇ بىزنىڭ RTL غا بولغان قارىشىمىزنى كۈچەيتىدۇ.

تەجرىبە ئالاھىدىلىكى

RTL ئىقتىدارى يەنىلا سىناق بولۇپ ، ئابونتلارنىڭ ئىنكاسىغا ئاساسەن تەرەققىي قىلىشى مۇمكىن. بىرەر نەرسىنى بايقىدىمۇ ياكى تەۋسىيە قىلىدىغان ياخشىلىنىش بارمۇ؟ بىر مەسىلىنى ئېچىڭ ، بىز سىزنىڭ چۈشەنچىڭىزگە ئېرىشىشنى خالايمىز.

HTML لازىم

Bootstrap قوزغىتىلغان بەتلەردە RTL نى قوزغىتىشتا ئىككى قاتتىق تەلەپ بار.

dir="rtl"ئېلېمېنتقا تەڭشەڭ <html>.
langئېلېمېنتقا ئوخشاش lang="ar"خاسلىق قوشۇڭ <html>.

ئۇ يەردىن ، بىزنىڭ CSS نىڭ RTL نۇسخىسىنى قوشۇشىڭىز كېرەك. مەسىلەن ، RTL قوزغىتىلغان ۋە كىچىكلىتىلگەن CSS نىڭ ئۇسلۇب جەدۋىلى:

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

Starter template

يۇقارقى تەلەپلەرنى بۇ ئۆزگەرتىلگەن RTL باشلاش قېلىپىدا ئەكس ئەتتۈرەلەيسىز.

<!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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL مىساللىرى

بىزنىڭ بىر قانچە RTL مىسالىمىزدىن باشلاڭ .

يېقىنلىشىش

بىزنىڭ Bootstrap غا RTL قوللاشنى بەرپا قىلىش ئۇسۇلىمىز CSS نى قانداق يېزىشىمىز ۋە ئىشلىتىشىمىزگە تەسىر كۆرسىتىدىغان ئىككى مۇھىم قارار بىلەن كېلىدۇ:

ئالدى بىلەن ئۇنى RTLCSS تۈرى بىلەن قۇرۇشنى قارار قىلدۇق . بۇ بىزگە LTR دىن RTL غا يۆتكەلگەندە ئۆزگىرىش ۋە باشقۇرۇشنىڭ كۈچلۈك ئىقتىدارلىرىنى بېرىدۇ. ئۇ يەنە بىر كود يەشكۈچتىن Bootstrap نىڭ ئىككى خىل نۇسخىسىنى قۇرۇشىمىزغا يول قويىدۇ.
ئىككىنچىدىن ، لوگىكىلىق خۇسۇسىيەت ئۇسۇلىنى قوللىنىش ئۈچۈن بىر نەچچە يۆنىلىشلىك سىنىپنىڭ نامىنى ئۆزگەرتتۇق. كۆپىنچىڭىز ئاللىبۇرۇن ئەۋرىشىم ئەسلىھەلىرىمىزنىڭ ياردىمىدە لوگىكىلىق خۇسۇسىيەتلەر بىلەن ئۆز-ئارا تەسىر كۆرسەتتىڭىز - ئۇلار يۆنىلىش ۋە leftخاسلىقنىڭ ئورنىنى ئالىدۇ . بۇنىڭدا سىنىپ ئىسمى ۋە قىممىتى LTR ۋە RTL غا ماس كېلىدۇ.rightstartend

مەسىلەن ، ئىشلىتىشنىڭ ئورنىغا .ml-3ئىشلىتىش .margin-left.ms-3

بىزنىڭ مەنبە Sass ياكى تۈزۈلگەن CSS ئارقىلىق RTL بىلەن ئىشلەش بىزنىڭ سۈكۈتتىكى LTR بىلەن كۆپ پەرقلەنمەسلىكى كېرەك.

مەنبەدىن خاسلاشتۇرۇڭ

خاسلاشتۇرۇشقا كەلسەك ، ياقتۇرىدىغان ئۇسۇل ئۆزگىرىشچان ، خەرىتە ۋە ئارىلاشمىلاردىن پايدىلىنىش. بۇ ئۇسۇل RTL ئۈچۈن ئوخشاش ئىشلەيدۇ ، گەرچە ئۇ تۈزۈلگەن ھۆججەتلەردىن كېيىن بىر تەرەپ قىلىنغان تەقدىردىمۇ ، RTLCSS نىڭ قانداق ئىشلىگەنلىكىگە رەھمەت .

ئىختىيارى RTL قىممىتى

RTLCSS قىممەت كۆرسەتمىسىنى ئىشلىتىپ ، ئۆزگىرىشچان مەھسۇلاتنى RTL ئۈچۈن باشقىچە قىممەتكە ئايلاندۇرالايسىز. مەسىلەن ، $font-weight-boldپۈتۈن كود ساندۇقىنىڭ ئېغىرلىقىنى تۆۋەنلىتىش ئۈچۈن ، گرامماتىكىنى ئىشلىتەلەيسىز /*rtl: {value}*/:

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

سۈكۈتتىكى CSS ۋە RTL CSS ئۈچۈن تۆۋەندىكىلەرگە چىقىرىلىدۇ:

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

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

باشقا خەت نۇسخىسى

ئۆزىڭىز ئىشلىتىدىغان خەت نۇسخىسىنى ئىشلىتىۋاتقان ئەھۋالدا ، دىققەت قىلىڭكى ، بارلىق خەت نۇسخىسى لاتىنچە ئېلىپبەسىنى قوللىمايدۇ. پان ياۋروپادىن ئەرەب ئائىلىسىگە ئۆتۈش ئۈچۈن ، /*rtl:insert: {value}*/خەت ساندۇقىڭىزدا خەت ئائىلىسىنىڭ ئىسمىنى ئۆزگەرتىشكە ئېھتىياجلىق بولۇشىڭىز مۇمكىن.

مەسىلەن ، Helvetica Neue WebfontLTR دىن Helvetica Neue ArabicRTL غا ئۆتۈش ئۈچۈن ، Sass كودىڭىز مۇنداق:

$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 ۋە RTL بىرلا ۋاقىتتا

ئوخشاش بىر بەتتە LTR ۋە RTL لازىممۇ؟ RTLCSS تىزما خەرىتىسىگە رەھمەت ، بۇ ناھايىتى ئاددىي. S نى دەرسلىك بىلەن ئوراپ ، RTLCSS @importئۈچۈن خاس ئىسىم قويۇش قائىدىسىنى بەلگىلەڭ:

/* 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 نى ئىجرا قىلغاندىن كېيىن RTLCSS ، CSS ھۆججىتىڭىزدىكى ھەر بىر تاللىغۇچ .ltrۋە .rtlRTL ھۆججىتى ئالدىن تەييارلىنىدۇ. ھازىر سىز ھەر ئىككى ھۆججەتنى ئوخشاش بىر بەتتە ئىشلىتەلەيسىز ، .ltrياكى .rtlزاپچاس ئورالمىلىرىڭىزدا بىر ياكى باشقا يۆنىلىشنى ئىشلىتەلەيسىز.

قىرغاق دېلولىرى ۋە مەلۇم چەكلىمىلەر

بۇ ئۇسۇلنى چۈشىنىشكە بولسىمۇ ، تۆۋەندىكىلەرگە دىققەت قىلىڭ:

ئالماشتۇرغاندا .ltrۋە ماس ھالدا قوشۇش ۋە خاسلىقنى .rtlجەزملەشتۈرۈڭ .dirlang
ھەر ئىككى ھۆججەتنى يۈكلەش ھەقىقىي ئىقتىداردىكى توسالغۇ بولۇشى مۇمكىن: بىر قىسىم ئەلالاشتۇرۇشنى ئويلاڭ ، بەلكىم بۇ ھۆججەتلەردىن بىرىنى ماس قەدەمدە يۈكلەپ سىناپ بېقىڭ .
بۇ خىل ئۇۋا ئۇسلۇبى بىزنىڭ form-validation-state()ئارىلاشتۇرۇشنىڭ مەقسەتلىك ئىشلىشىنىڭ ئالدىنى ئالىدۇ ، شۇڭا ئۇنى ئۆزىڭىز ئازراق تەڭشىشىڭىزنى تەلەپ قىلىدۇ. # 31223 گە قاراڭ .

بولكا پارچىلىغۇچ ئۆزىنىڭ بىردىنبىر يېڭى ئۆزگەرگۈچى مىقدارنى تەلەپ قىلىدىغان بىردىنبىر ئەھۋال .$breadcrumb-divider-flipped$breadcrumb-divider

RTL