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 Webfont
LTR-დან Helvetica Neue Arabic
RTL-ზე გადასასვლელად, თქვენი 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- ის წყალობით , ეს საკმაოდ მარტივია. შეფუთეთ თქვენი @import
s კლასით და დააყენეთ მორგებული გადარქმევის წესი 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
და .rtl
RTL ფაილებისთვის. ახლა თქვენ შეგიძლიათ გამოიყენოთ ორივე ფაილი იმავე გვერდზე და უბრალოდ გამოიყენოთ .ltr
ან .rtl
თქვენი კომპონენტების შეფუთვაზე ერთი ან მეორე მიმართულების გამოსაყენებლად.
კიდეების შემთხვევები და ცნობილი შეზღუდვები
მიუხედავად იმისა, რომ ეს მიდგომა გასაგებია, გთხოვთ, ყურადღება მიაქციოთ შემდეგს:
.ltr
და გადართვისას.rtl
, დარწმუნდით, რომ დაამატეთdir
დაlang
ატრიბუტები შესაბამისად.- ორივე ფაილის ჩატვირთვა შეიძლება იყოს შესრულების რეალური შეფერხება: განიხილეთ გარკვეული ოპტიმიზაცია და შესაძლოა სცადოთ რომელიმე ამ ფაილის ასინქრონულად ჩატვირთვა .
- ამგვარად მობუდვის სტილები ხელს შეუშლის ჩვენს
form-validation-state()
მიქსინს იმუშაოს ისე, როგორც ეს იყო დაგეგმილი, ამიტომ მოითხოვს, რომ თქვენ თვითონ შეცვალოთ იგი. იხილეთ #31223 .
პურის ქეისი
breadcrumb გამყოფი ერთადერთი შემთხვევაა, რომელიც მოითხოვს თავის ახალ ცვლადს $breadcrumb-divider-flipped
— კერძოდ — ნაგულისხმევად $breadcrumb-divider
.