RTL
Μάθετε πώς μπορείτε να ενεργοποιήσετε την υποστήριξη για κείμενο από δεξιά προς τα αριστερά στο Bootstrap σε όλη τη διάταξη, τα στοιχεία και τα βοηθητικά προγράμματα μας.
Εξοικειωθείτε
Συνιστούμε να εξοικειωθείτε πρώτα με το Bootstrap διαβάζοντας τη σελίδα Εισαγωγή Ξεκινώντας . Αφού το ολοκληρώσετε, συνεχίστε να διαβάζετε εδώ για το πώς να ενεργοποιήσετε το RTL.
Μπορεί επίσης να θέλετε να διαβάσετε για το έργο RTLCSS , καθώς τροφοδοτεί την προσέγγισή μας στο RTL.
Πειραματικό χαρακτηριστικό
Η δυνατότητα RTL είναι ακόμα πειραματική και πιθανότατα θα εξελιχθεί σύμφωνα με τα σχόλια των χρηστών. Βρήκατε κάτι ή έχετε κάποια βελτίωση να προτείνετε; Ανοίξτε ένα θέμα , θα θέλαμε να λάβουμε τις πληροφορίες σας.
Απαιτούμενο HTML
Υπάρχουν δύο αυστηρές απαιτήσεις για την ενεργοποίηση του RTL σε σελίδες που τροφοδοτούνται με Bootstrap.
- Ρύθμιση
dir="rtl"
στο<html>
στοιχείο. - Προσθέστε ένα κατάλληλο
lang
χαρακτηριστικό, όπωςlang="ar"
, στο<html>
στοιχείο.
Από εκεί, θα πρέπει να συμπεριλάβετε μια έκδοση RTL του CSS μας. Για παράδειγμα, εδώ είναι το φύλλο στυλ για το μεταγλωττισμένο και ελαχιστοποιημένο 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 χωρίς επιβάρυνση.
Για παράδειγμα, αντί .ml-3
για margin-left
, χρησιμοποιήστε το .ms-3
.
Ωστόσο, η εργασία με RTL, μέσω του Sass της πηγής ή του μεταγλωττισμένου CSS, δεν θα πρέπει να διαφέρει πολύ από το προεπιλεγμένο LTR.
Προσαρμογή από την πηγή
Όταν πρόκειται για προσαρμογή , ο προτιμώμενος τρόπος είναι να εκμεταλλευτείτε τις μεταβλητές, τους χάρτες και τα mixins. Αυτή η προσέγγιση λειτουργεί το ίδιο για το 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 , αυτό είναι αρκετά απλό. Τυλίξτε τα @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
στα περιτυλίγματα των στοιχείων σας για να χρησιμοποιήσετε τη μία ή την άλλη κατεύθυνση.
Edge case και γνωστοί περιορισμοί
Αν και αυτή η προσέγγιση είναι κατανοητή, παρακαλούμε δώστε προσοχή στα ακόλουθα:
- Κατά την εναλλαγή
.ltr
και.rtl
, βεβαιωθείτε ότι προσθέτετεdir
καιlang
χαρακτηρίζετε ανάλογα. - Η φόρτωση και των δύο αρχείων μπορεί να είναι μια πραγματική συμφόρηση απόδοσης: σκεφτείτε κάποια βελτιστοποίηση και ίσως προσπαθήστε να φορτώσετε ένα από αυτά τα αρχεία ασύγχρονα .
- Τα στυλ ένθεσης με αυτόν τον τρόπο θα εμποδίσουν το
form-validation-state()
mixin μας να λειτουργήσει όπως προορίζεται, επομένως θα χρειαστεί να το τροποποιήσετε λίγο μόνοι σας. Δείτε #31223 .
Η θήκη για τη φρυγανιά
Ο διαχωριστής φρυγανιάς είναι η μόνη περίπτωση που απαιτεί τη δική του ολοκαίνουργια μεταβλητή—δηλαδή —η $breadcrumb-divider-flipped
προεπιλογή να είναι $breadcrumb-divider
.