RTL

შეიტყვეთ, როგორ ჩართოთ Bootstrap-ში მარჯვნიდან მარცხნივ ტექსტის მხარდაჭერა ჩვენი განლაგების, კომპონენტებისა და კომუნალური პროგრამების მიხედვით.

ამ გვერდზე

გაეცანით

ჩვენ გირჩევთ გაეცნოთ Bootstrap-ს პირველ რიგში ჩვენი „ დაწყების“ შესავალი გვერდის წაკითხვით . მას შემდეგ რაც გაივლით, გააგრძელეთ აქ კითხვა, თუ როგორ უნდა ჩართოთ RTL.

თქვენ ასევე შეგიძლიათ გაეცნოთ RTLCSS პროექტს , რადგან ის აძლიერებს ჩვენს მიდგომას RTL-ის მიმართ.

ექსპერიმენტული ფუნქცია

RTL ფუნქცია ჯერ კიდევ ექსპერიმენტულია და სავარაუდოდ განვითარდება მომხმარებლის გამოხმაურების მიხედვით. შენიშნეთ რამე ან გაქვთ რაიმე გაუმჯობესება? გახსენით ნომერი , ჩვენ სიამოვნებით მივიღებთ თქვენს ინფორმაციას.

საჭირო HTML

არსებობს ორი მკაცრი მოთხოვნა Bootstrap-ზე მომუშავე გვერდებზე RTL-ის გასააქტიურებლად.

დააყენეთ ელემენტზე dir="rtl".<html>
დაამატეთ შესაბამისი langატრიბუტი, როგორიცაა lang="ar", <html>ელემენტზე.

იქიდან, თქვენ უნდა შეიტანოთ ჩვენი CSS RTL ვერსია. მაგალითად, აქ არის სტილის ფურცელი ჩვენი შედგენილი და მინიფიცირებული CSS-ისთვის RTL ჩართულით:

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

დამწყებ შაბლონი

თქვენ შეგიძლიათ იხილოთ ზემოთ მოყვანილი მოთხოვნები ასახული ამ შეცვლილ 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-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 მაგალითები

დაიწყეთ ჩვენი რამდენიმე RTL მაგალითიდან ერთ-ერთი .

მიდგომა

ჩვენი მიდგომა RTL-ის მხარდაჭერის Bootstrap-ში ჩასართავად მოყვება ორ მნიშვნელოვან გადაწყვეტილებას, რომლებიც გავლენას ახდენს იმაზე, თუ როგორ ვწერთ და ვიყენებთ ჩვენს CSS-ს:

პირველ რიგში, ჩვენ გადავწყვიტეთ მისი აშენება RTLCSS პროექტით. ეს გვაძლევს მძლავრ ფუნქციებს ცვლილებებისა და უგულებელყოფის მართვისთვის LTR-დან RTL-ზე გადასვლისას. ის ასევე საშუალებას გვაძლევს შევქმნათ Bootstrap-ის ორი ვერსია ერთი კოდის ბაზიდან.
მეორე, ჩვენ დავარქვით რამდენიმე მიმართულების კლასს, რათა მივიღოთ ლოგიკური თვისებების მიდგომა. თქვენგან უმეტესობას უკვე აქვს ურთიერთქმედება ლოგიკურ თვისებებთან ჩვენი მოქნილი უტილიტების წყალობით — ისინი ცვლიან მიმართულების თვისებებს, როგორიცაა leftდა rightსასარგებლოდ startდა end. ეს ხდის კლასის სახელებს და მნიშვნელობებს შესაბამისი LTR და RTL ყოველგვარი ზედნადების გარეშე.

მაგალითად, for-ის .ml-3ნაცვლად margin-leftგამოიყენეთ .ms-3.

RTL-თან მუშაობა, ჩვენი წყარო Sass-ით ან შედგენილი CSS-ით, დიდად არ უნდა განსხვავდებოდეს ჩვენი ნაგულისხმევი 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 String Maps- ის წყალობით , ეს საკმაოდ მარტივია. შეფუთეთ თქვენი @imports კლასით და დააყენეთ მორგებული გადარქმევის წესი 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*/

Sass-ის, შემდეგ RTLCSS-ის გაშვების შემდეგ, თქვენს CSS ფაილებში თითოეული ამომრჩევი დაყენებული იქნება .ltrდა .rtlRTL ფაილებისთვის. ახლა თქვენ შეგიძლიათ გამოიყენოთ ორივე ფაილი იმავე გვერდზე და უბრალოდ გამოიყენოთ .ltrან .rtlთქვენი კომპონენტების შეფუთვაზე ერთი ან მეორე მიმართულების გამოსაყენებლად.

კიდეების შემთხვევები და ცნობილი შეზღუდვები

მიუხედავად იმისა, რომ ეს მიდგომა გასაგებია, გთხოვთ, ყურადღება მიაქციოთ შემდეგს:

.ltrდა გადართვისას .rtl, დარწმუნდით, რომ დაამატეთ dirდა langატრიბუტები შესაბამისად.
ორივე ფაილის ჩატვირთვა შეიძლება იყოს შესრულების რეალური შეფერხება: განიხილეთ გარკვეული ოპტიმიზაცია და შესაძლოა სცადოთ რომელიმე ამ ფაილის ასინქრონულად ჩატვირთვა .
ამგვარად მობუდვის სტილები ხელს შეუშლის ჩვენს form-validation-state()მიქსინს იმუშაოს ისე, როგორც ეს იყო დაგეგმილი, ამიტომ მოითხოვს, რომ თქვენ თვითონ შეცვალოთ იგი. იხილეთ #31223 .

breadcrumb გამყოფი ერთადერთი შემთხვევაა, რომელიც მოითხოვს თავის ახალ ცვლადს $breadcrumb-divider-flipped— კერძოდ — ნაგულისხმევად $breadcrumb-divider.

RTL