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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" crossorigin="anonymous">

תבנית התחלה

אתה יכול לראות את הדרישות לעיל משתקפות בתבנית RTL Starter ששונתה.

<!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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

דוגמאות RTL

התחל עם אחת מכמה דוגמאות RTL שלנו .

גִישָׁה

הגישה שלנו לבניית תמיכת RTL לתוך Bootstrap מגיעה עם שתי החלטות חשובות המשפיעות על האופן שבו אנו כותבים ומשתמשים ב-CSS שלנו:

ראשית, החלטנו לבנות אותו עם פרויקט RTLCSS . זה נותן לנו כמה תכונות חזקות לניהול שינויים ועקיפות בעת מעבר מ-LTR ל-RTL. זה גם מאפשר לנו לבנות שתי גרסאות של Bootstrap מבסיס קוד אחד.
שנית, שינינו את שמו של קומץ מחלקות כיווניות כדי לאמץ גישת מאפיינים לוגיים. רובכם כבר יצרתם אינטראקציה עם מאפיינים לוגיים הודות לכלי השירות הגמישים שלנו - הם מחליפים מאפייני כיוון כמו leftובעד ו . זה הופך את השמות והערכים של המחלקות למתאימים עבור LTR ו-RTL ללא כל תקורה.rightstartend

לדוגמה, במקום .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מגופן עבור 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 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, ולקובצי .rtlRTL. כעת אתה יכול להשתמש בשני הקבצים באותו עמוד, ופשוט להשתמש .ltrאו .rtlבמעטפת הרכיבים שלך כדי להשתמש בכיוון זה או אחר.

מקרי קצה ומגבלות ידועות

למרות שגישה זו מובנת, אנא שימו לב לדברים הבאים:

בעת החלפת .ltrו- .rtl, ודא שאתה מוסיף dirומאפיינים langבהתאם.
טעינת שני הקבצים יכולה להיות צוואר בקבוק אמיתי בביצועים: שקול אופטימיזציה מסוימת , ואולי נסה לטעון אחד מהקבצים האלה באופן אסינכרוני .
סגנונות קינון בדרך זו ימנעו form-validation-state()מהמיקסין שלנו לפעול כמתוכנן, ובכך ידרשו ממך לצבוט אותו קצת בעצמך. ראה #31223 .

מפריד פירורי הלחם הוא המקרה היחיד הדורש משתנה חדש משלו - כלומר - $breadcrumb-divider-flippedברירת מחדל ל- $breadcrumb-divider.

RTL