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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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 .

Πλησιάζω

Η προσέγγισή μας για τη δημιουργία υποστήριξης 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 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 , αυτό είναι αρκετά απλό. Τυλίξτε τα @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, και .rtlγια αρχεία RTL. Τώρα μπορείτε να χρησιμοποιήσετε και τα δύο αρχεία στην ίδια σελίδα και απλά να χρησιμοποιήσετε .ltrή .rtlστα περιτυλίγματα των στοιχείων σας για να χρησιμοποιήσετε τη μία ή την άλλη κατεύθυνση.

Edge case και γνωστοί περιορισμοί

Αν και αυτή η προσέγγιση είναι κατανοητή, παρακαλούμε δώστε προσοχή στα ακόλουθα:

Κατά την εναλλαγή .ltrκαι .rtl, βεβαιωθείτε ότι προσθέτετε dirκαι langχαρακτηρίζετε ανάλογα.
Η φόρτωση και των δύο αρχείων μπορεί να είναι μια πραγματική συμφόρηση απόδοσης: σκεφτείτε κάποια βελτιστοποίηση και ίσως προσπαθήστε να φορτώσετε ένα από αυτά τα αρχεία ασύγχρονα .
Τα στυλ ένθεσης με αυτόν τον τρόπο θα εμποδίσουν τη form-validation-state()μίξη μας να λειτουργήσει όπως προορίζεται, επομένως απαιτούν να το τροποποιήσετε λίγο μόνοι σας. Δείτε #31223 .

Ο διαχωριστής φρυγανιάς είναι η μόνη περίπτωση που απαιτεί τη δική του ολοκαίνουργια μεταβλητή—δηλαδή —η $breadcrumb-divider-flippedπροεπιλογή να είναι $breadcrumb-divider.

RTL