חדשות ב-Bootstrap 5

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

Bootstrap 5 (הגרסה העיקרית הנוכחית, שנוצרה במאי 2021) הביאה איתה המון שינויים ושיפורים, כולל הוספת רכיבים חדשים, קבוצות חדשות, עיצוב חדש לרכיבים הישנים, תמיכה בדפדפן מעודכן, הסרה של כמה רכיבים ישנים ועוד.

במאמר זה, נכסה מה השתנה ב-Bootstrap 5, מה נמחק, והכי מרגש מכולם, מה חדש.

מתי להשתמש ב-Bootstrap (ומתי לא)

Bootstrap מצהירה על עצמה כ-“המסגרת הפופולרית ביותר בעולם לבניית אתרים תגובה, מוביל סלולרי”, ועם 152 אלף כוכבים ב-GitHub, אני לא חושב שהטענה רחוקה מדי. במיוחד עבור מתחילים, Bootstrap היא דרך מצוינת להתחיל ליצור אתרים מודרניים ונקיים. היא מקלה על הגשמת עיצובים מורכבים וסלולריים ומספקת רבים מרכיבים שאתה כנראה תצטרך במספר פרויקטים.

ל-Bootstrap מורגלים קצרים והיא מתאימה גם לאתרים סטטיים שאינם דורשים שלב בנייה, מאחר ואפשר פשוט להפנות לספרייה מ-CDN של Bootstrap. זה בניגוד לכמה מסגרות CSS פופולריות אחרות שעשויות להיות מותאמות במיוחד לשימוש עם מארז או מנהל משימות.

כמובן שעליך להיות מודע, עם זאת, ש-Bootstrap איננו פסגת הקרח. עבור אלה שלא מכירים, Bootstrap מקל עליך ליצור קוד מסובך ומבולגן. זהו גם ספרייה די כבדה במונחים של קילובייטים (אם כי זה משתפר עם כל שדרוג), ולכן ייתכן שזו לא תהיה הבחירה הטובה ביותר אם אתה משתמש רק באחת או שתיים מתכונותיו. כמו כל הפשטה, זה יעזור מאוד אם יש לך הבנה טובה של הטכנולוגיה הבסיסית ותוכל לקבוע בקלות מתי להשתמש בה.

עדכון מ-Bootstrap 4 ל-5

עדכון מ-Bootstrap 4 ל-5 הוא באופן כללי די קל. רוב הרכיבים, המחלקות שלהם והמחלקות הכליליות שהיו זמינות ב-Bootstrap 4 עדיין זמינות ב-Bootstrap 5. הדבר העיקרי שעליך להתמקד בו כשאתה מעביר מילויים הוא האם המחלקות או הרכיבים שאתה משתמש בהם נמחקו. אם נמחקו, יש תחליפים או דרכים להשיג את אותו תוצאה באמצעות מחלקות כליליות. הדבר השני שעליך להתמקד בו הוא החלפת התכונות data-* לתכונות data-bs-* ברכיבים שדורשים גם ג'אווה סקריפט כחלק מהפונקציונליות שלהם. (נכסה זאת יותר בפרק הבא.)

אם אתה משתמש בקבצי Sass של Bootstrap, יש כמה משתנים ו-mixins ששמותיהם שונו. Bootstrap 5 כולל סעיף מרחיב ומפורט על התאמה אישית, כמו גם פרטים על משתני Sass ו-mixins לכל רכיב בדפי התיעוד המתאימים.

מה השתנה

Bootstrap 5 מביא שינויים עיקריים ל-Bootstrap כספרייה, עם שינוי בתלות הנדרשת, תמיכת הדפדפן ועוד. הוא גם מביא שינויים לרכיבים ולמחלקות שתמיד השתמשנו בהם בגרסאות קודמות.

jQuery כבר אינו תלות

כשינוי מרכזי מהגרסאות הקודמות, jQuery כבר אינו תלות של Bootstrap. כעת, אפשר להשתמש ב-Bootstrap בכל התפארתו ללא זה, אך עדיין נדרש Popper.js. שינוי זה מקל על השימוש ב-Bootstrap בפרויקטים שאינם דורשים או משתמשים ב-jQuery – כגון כשמשתמשים ב-Bootstrap עם React.

אפשר עדיין להשתמש ב-jQuery עם Bootstrap אם זה חלק מהאתר שלך. אם Bootstrap מזהה את jQuery באובייקט window, הוא יוסיף אוטומטית את כל הרכיבים למערכת התוספות של jQuery. אז, אם אתה מעביר מ-v4 ל-v5, אין צורך לדאוג לגבי השינוי הזה, ואפשר עדיין להשתמש ב-jQuery עם Bootstrap ככל שצריך.

אבל מה אם אתה משתמש ב-jQuery באתר שלך, אך אינך רוצה ש-Bootstrap ישתמש ב-jQuery? אפשר לעשות זאת על ידי הוספת התכונה data-bs-no-jquery לאלמנט הגוף של המסמך:

<body data-bs-no-jquery="true">
</body>

איך Bootstrap עובד ללא jQuery? למשל, ב-v4 היית משתמש בקוד הבא ב-JavaScript כדי ליצור אלמנט Toast:

$('.toast').toast()

ב-Bootstrap 5, אפשר להשתמש באותו הקוד כדי ליצור אלמנט Toast אם האתר שלך כבר משתמש ב-jQuery. ללא jQuery, יש להשתמש במשהו כמו הקוד הבא כדי ליצור אלמנט Toast:

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

זה פשוט משתמש ב-Vanilla JavaScript כדי לשאול את המסמך עבור רכיבים שיש להם את המחלקה .toast, ואז מתחיל רכיב טוסט על האלמנט באמצעות new bootstrap.Toast().

שינוי בתמיכה בדפדפן

עד v4, Bootstrap התמודד עם Internet Explorer (IE) 10 ו-11. מ-Bootstrap 5 והלאה, תמיכה ב-IE נמחקה לחלוטין. אז, אם אתה צריך לתמוך ב-IE באתר שלך, כנראה שאתה צריך להיזהר כשאתה עובר ל-v5.

שינויים נוספים בתמיכה בדפדפן כוללים:

תמיכה ב-Firefox ו-Chrome מופעלת כעת מגירסא 60
תמיכה ב-Safari ו-iOS מופעלת כעת מגירסא 12
תמיכה ב-Android Browser ו-WebView מופעלת כעת מגירסא 6

שינוי בתכונות הנתונים

ב-Bootstrap 5 שינוי בשמות התכונות הנתונים שבדרך כלל משמשים ברכיבים שלו שמשתמשים ב-JavaScript כחלק מהפונקציונליות שלהם. קודם לכן, רוב הרכיבים שהסתמכו על פונקציונליות מסוימת של JavaScript היו משתמשים בתכונות נתונים המתחילות ב-data-. לדוגמה, כדי ליצור רכיב Tooltip ב-Bootstrap 4:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

שימו לב לשימוש ב-data-toggle ו-data-placement. ב-Bootstrap 5, תכונות הנתונים עבור רכיבים אלה מתחילות כעת ב-data-bs כדי לקלות על שמות המרחב של התכונות של Bootstrap. לדוגמה, כדי ליצור רכיב Tooltip ב-Bootstrap 5:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

במקום להשתמש בdata-toggle וdata-placement, אנו משתמשים בdata-bs-toggle וdata-bs-placement. אם אתה משתמש ב-JavaScript ליצירת רכיבים ב-Bootstrap, ייתכן שאין צורך לבצע שינויים. עם זאת, אם הרכיבים שלך תלויים רק בתכונות נתונים לפעולה, אתה צריך לשנות את כל התכונות הנתונים שמתחילות בdata להתחיל בdata-bs.

תקופות משופרות

בתיעוד של Bootstrap 4 תחת דפדפנים ומכשירים, יש רשימה של באגים שמתרחשים בכמה דפדפנים. באגים אלה אינם מופיעים יותר באותה הרשימה עבור Bootstrap 5. הרשימה כוללת את הבאים:

סגנון הסרטן שימש להחיל על אלמנטים באירועים מגע ב-iOS, מה שלא היה רצוי מאחר שנחשב להתנהגות לא צפויה.
שימוש ב.container ב-Safari 8 ומעלה גרם לגופן קטן בהדפסה.
רדיוס הגבול נעקף על ידי פידבק האימות (אך יכול היה להתבצע תיקון על ידי הוספת מחלקה נוספת .has-validation).

רשימת הבאגים והבעיות בתיעוד של Bootstrap 4 גם מתארת באגים שהתרחשו בגרסאות דפדפן שאינן נתמכות יותר.

שינויים נוספים

יש עוד שינויים רבים שהם מינוריים או שלא גורמים לשינוי דרמטי ומובן לעין. השינויים האלה הם:

Bootstrap 5 כעת משתמש בPopper v2. הקפידו לשדרג את גרסתכם של Popper. Popper v1 לא יעבוד יותר, שכן Bootstrap 5 דורש את @popperjs/core במקום popper.js הקודמת.
Bootstrap 5 עכשיו יכול לשמש כמודול בדפדפן בשימוש בגרסת Bootstrap נבנית כמודול ECMAScript.
מאחר וLibsass ו-Node Sass (שנמצאו בשימוש ב-Bootstrap 4) מתווספים כעת לפירוק, Bootstrap 5 משתמש בDart Sass להמרת קבצי ה-Sass המקוריים ל-CSS.
היו שינויים בערכים של משתני Sass מסוימים, כמו $zindex-modal שהשתנה מ-1050 ל-1060, $zindex-popover מ-1060 ל-1070 ועוד. לכן, מומלץ לבדוק את משתני ה-Sass של כל רכיב או קבוצת כימושים בתיעוד של Bootstrap 5.
בעבר, כדי להסתיר אלמנט אך לשמר את נגישותו לטכנולוגיות עזר, נהוג היה להשתמש בקלאס .sr-only. קלאס זה הוחלף עכשיו ב-.visually-hidden.
בעבר, כדי להסתיר אלמנט אינטראקטיבי אך לשמור על ניתוקו לטכנולוגיות עזר זמינות, הייתם צריכים להשתמש בשתי קבוצות .sr-only ו-.sr-only-focusable. ב-Bootstrap 5, אתם פשוט צריכים להשתמש ב-.visually-hidden-focusable מבלי להשתמש ב-.visually-hidden.
ציטוטים עם מקור שם כעת מכוללים על ידי אלמנט <figure>.

הנה דוגמה לאופן שבו ציטוטים נמצאים כעת ב-Bootstrap 5:
בגרסאות קודמות, עיצובי הטבלאות היו מורכבים. זה אומר שאם טבלה מושמשת בתוך טבלה אחרת, הטבלה המושמשת תירשם מהטבלה ההורה. ב-Bootstrap 5, עיצובי הטבלאות עצמם בלתי תלויים זה בזה גם אם הם מושמשים.
כלים לסריג שפה כעת תומכים בטבלאות. זה אומר שאפשר כעת לשנות את צבע הסריג של טבלה באמצעות כלי צבע סריג.

הנה דוגמה לשימוש בכלי סריג עם טבלאות ב-Bootstrap 5:
העיצוב הברדקראבס הברירת מחדל שונה, מפסיק את הרקע האפור הברירת מחדל, הפדינג ורדיוס הגבול שהיה בגרסאות קודמות.

הנה דוגמה לסגנון הברדקראבס ב-Bootstrap 5:
שינוי שמות הקלאסים שהשתמשו ב-left ו-right להתייחסות למיקום להשתמש ב-start ו-end שינוי. לדוגמה, .dropleft ו-.dropright ב-dropdowns מוחלפים ב-.dropstart ו-.dropend בהתאמה.
כמו קודם, מחלקות יכולות שמשתמשות בl עבור left וr עבור right עכשיו משתמשות בs עבור start וe עבור end בהתאמה. לדוגמה, .mr-* הוא עכשיו .me-*.
המחלקה .form-control-range שנמצאה לקלטות טווח עכשיו היא .form-range.
גאוטרים מוגדרים כעת בrems ולא כמו קודם בpx.
.no-gutters שונה שמו ל.g-0 כחלק ממחלקות הגאוטר החדשות שנוספו (עוד על כך בסעיפים הבאים).
הקישורים מסומנים עם תחתית על ברור עכשיו, אפילו כשאינם מושפעים.
שמות המחלקות ההתאמתיים לאלמנטים טפסים שונו מ .custom-* להיות חלק ממחלקות אלמנטי הטפסים. לדוגמה, .custom-check הוחלף על ידי .form-check, .custom-select הוחלף על ידי .form-select, וכן הלאה.
הוספת .form-label לתוויות נדרשת עכשיו.
אזעקות, קרברס, קלאסים, נחשולים, קבוצות רשימה, מודלים, פופאופרים וטולטיפים משתמשים כעת באותם ערכי הפרדה באמצעות משתנה $spacer.
הפרדה ברורה באלמנטים של תווית שמורה שונה עכשיו מ .25em/.5em ל .35em/.65em.

אריזות לכפתורי הפעלה משמשות עם תיבות בירוק ורדיו. התחפושת מפושטת גם כעת. ב-Bootstrap 4, כפתור הפעלה עם תיבת בירוק נוצר עם התחפושת הבאה:

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> מצופה
  </label>
</div>

ב-Bootstrap 5, ניתן לעשות זאת בצורה פשוטה יותר:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">מצופה</label>

מצבי ה-active וה-hover של הכפתורים עכשיו יותר מובנים בצבע.
הסמלים של חרוזי הקרואוסל משתמשים כעת ב-SVG מ-Bootstrap Icons.
מחלקת הכפתור לסגירה משנה את שמה כעת מ-.close ל-.btn-close, ומשתמשת בסמל SVG במקום ב-×.
המפרידים בתפריט מפוארים כעת בצבע כהה יותר לשם קונטרסט.

תוכן ה-Navbar כעת צריך להיות עטוף באלמנט מכלול. לדוגמה ב-Bootstrap 4:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  ...
</nav>

הופך ב-Bootstrap 5:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </div>
</nav>

המחלקה .arrow ברכיבים popover עכשיו הוחלפה על ידי .popover-arrow, והמחלקה .arrow ברכיבים Tooltip עכשיו הוחלפה על ידי .tooltip-arrow.
אפשרות ה-popover whiteList שנותרה לשמור על רשימה לבנה עכשיו שינתה ל-allowList.
המשך הזמן הברירת המחדל של Toast השתנה ל-5 שניות.
הערך הברירתי ל-fallbackPlacements ברכיבים כמו tooltip, dropdown ו-popover שונה למערך ['top', 'right', 'bottom', 'left'].
.text-monospace שונה ל-.font-monospace.
.font-weight-* שונה ל-.fw-* ו-.font-style-* ל-.fst-*.
.rounded-sm ו-.rounded-lg הוחלפו כעת על ידי טווח של מחלקות מעוגלות .rounded-* מ-0 עד 3.

מה נמחק

שינויים יכולים לבוא במחיר. כשגרסה חדשה מגיעה ומביאה שינויים ושיפורים, גם מוחקת כמה מהתכונות הישנות שהתומכות בהן. עם שחרור זה, כמה מרכיבי Bootstrap, מחלקות הנוחיות או תכונות אחרות נמחקו.

רוב הפריטים שנשארו מבוסטרפלט 5 נשארו כיוון שאפשר להשיג אותו באמצעות שימוש בקבוצות יתרונות במקום להפוך אותם לרכיב עצמאי. כמו כן, חלק מהפריטים שנשארו הוכחו כלא בשימוש או שאינם הכרחיים.

הנה רשימה של מה שנשאר מבוסטרפלט 5:

כפי שצוין בסעיף הקודם, התמיכה ב-IE נשארה לחלוטין.
קבוצות צבע בד "ג (למשל, .badge-primary) נשארו עבור השימוש בקבוצות יתרונות צבע (למשל, .bg-primary).
המחלקה .badge-pill של הבד, שנתנה לבד סגנון גלולה, נשארה עבור השימוש ב-.rounded-pill, שמשיג את אותו התוצאה.
המחלקה .btn-block של הכפתור הוסרה, שכן אותה תוצאה ניתן להשיג על ידי שימוש במחלקות אופציות תצוגה כמו .d-block.
פריסת הקלסטים .card-columns המסודרת בצורה מתמטית שהיתה זמינה קודם לכן נמחקה, שכן היתה לה הרבה תופעות לוואי.
האפשרות flip עבור רכיבי התפרידות הוסרה, לטובת הגדרות של Popper.
רכיב ה-Jumbotron הוסר, שכן אותה תוצאה ניתן להשג על ידי שימוש במחלקות יישומיות.
חלק ממחלקות היעילות של הזמן (.order-*) נמחקו, כפי שהם פעם הגיעו מ-1 עד 12. עכשיו הם מגיעים מ-1 עד 5.
הרכיב המדיה נמחק, מאחר ואותו תוצאה ניתן להשיג עם מחלקות יעילות.
מחלקות .thead-light ו-.thead-dark נמחקו, מאחר ומחלקות הגורם .table-* ניתן להחיל על כל אלמנטי הטבלה.
מחלקת .pre-scrollable נמחקה, מאחר שהיא לא משמשת הרבה.
מחלקת .text-justify נמחקה, בגלל בעיות רגישות, כמו כן מחלקת .text-hide, מכיוון שהשיטה שלה ישנה ולא צריך להשתמש בה. ומחלקות .text-* לא מוסיפות עוד מצבי לעלות או להתמקדות לקישורים יותר. מחלקות .text-* אלו צריכות להחליף במחלקות .link-*.
קבוצות קלט שיש להן מספר קלטים או רכיבים אינם צריכים להשתמש ב.input-group-append ו.input-group-prepend יותר. אלמנטים שצריכים להיות בקבוצה יכולים פשוט להוסיף ישירות כילדים של .input-group.

הנה דוגמה לשימוש בקבוצות קלט עם מספר קלטים:
.form-group, .form-row, ו-.form-inline כולם נמחקו למען מחלקות עיצוב.
.form-text לא יש יותר תכונת display קבועה. התצוגה של האלמנט תלויה באם האלמנט עצמו הוא אלמנט בלוק או אינליין.
הסמלים לאימות נמחקו עבור אלמנטים <select> עם multiple.
המחלקה .card-deck נמחקה למען מחלקות רשת.
שולחנות מרווח שליליים נכבו כברירת מחדל.
.embed-responsive-item אלמנטים נמחקו כעת למען החלת הסגנון על כל הילדים של היחסים, שכברהם היה קודם ממלאים מסוימים (עוד על כך בסעיף הבא).

מה חדש

לבסוף, בוסטרפל מביא הרבה תוספות מרגש לספרייתו בגרסה 5. חלק מהשינויים הללו כוללים תכונות חדשות, רעיונות תומכים חדשים, רכיבים חדשים, מחלקות יעילות חדשות ועוד.

גדלי גופן מסתובבים מופעלים כעת כברירת מחדל

גדלי גופן מסתובבים (RFS) היה בגרסאות קודמות של בוסטרפל, אך הושבת כברירת מחדל. בוסטרפל 5 מאפשר RFS כברירת מחדל, מה שהופך את הגופנים בבוסטרפל ליותר מסתובבים. RFS הוא פרויקט צד שנוצר על ידי בוסטרפל כדי להתחיל בהגדלה ושינוי גודל הגופן באופן מסתובב. עכשיו, זה מסוגל לעשות את אותו הדבר עבור תכונות כמו שורש, ריפוי, צללית תיבה ועוד.

מה שזה עושה הוא בעיקר לחשב את הערכים המתאימים ביותר על פי ממדי הדפדפן, והחישובים הללו מתורגמים לפונקציות calc כשזה מורכב. השימוש ב- RFS גם מפטר מהשימוש הקודם ב- px להשתמש ב- rem, כפי שזה עוזר להשיג תכונות מסתובבות טובות יותר.

אם אתה משתמש בקבצי Sass עבור בוסטרפל, אתה יכול כעת להשתמש במיקסינים שנוצרו על ידי RFS, כולל font-size, margin, padding, ועוד, שמאשרים לך לוודא שהרכיבים והסגנונות שלך מסתובבים.

תמיכה בכיוון מימין לשמאל

Bootstrap 5 מוסיף תמיכה בכיוון מימין לשמאל (RTL) באמצעות RTLCSS. מאחר שהוא משמש ברחבי העולם, זהו צעד גדול וחשוב לגרום לתמיכה ב-RTL להיות זמינה מיידית. לשם כך, Bootstrap 5 דילג על שמות ספציפיים לכיוונים (למשל, שימוש ב-left ו-right) תמורת start ו-end. זה מאפשר ל-Bootstrap להיות גמיש מספיק לעבודה גם עם אתרים משמאל לימין (LTR) וגם מימין לשמאל (RTL). לדוגמה, .dropleft הוא עכשיו .dropstart, .ml-* הוא עכשיו .ms-*, ועוד.

כדי לגרום ל-Bootstrap לזהות וליישם עיצובים RTL באתר שלך, עליך לקבוע את ה-dir של <html> ל-rtl, ולהוסיף תכונה lang עם השפה RTL של האתר. לדוגמה, lang="ar".

לבסוף, תצטרך לכלול את קובץ ה-CSS של Bootstrap ל-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.

נקודת שבירה חדשה

Bootstrap 5 מביא תמיכה בנקודת השבירה החדשה xxl שמטרת מכשירים עם רוחב גדול או שווה ל-1400px. קודם לכן, הנקודת שבירה הגבוהה ביותר הייתה xl, שהטילה על מכשירים עם רוחב גדול או שווה ל-1200px. שינוי זה מאפשר תכנונים תגובתיים טובים יותר למכשירים עם מסך גדול יותר, שכן נקודת השבירה xl לא הספיקה.

השימוש בנקודת ההפסקה החדשה דומה לכל נקודות ההפסקה האחרות. לדוגמה, כדי להחיל ריחוף עבור מכשירים שרוחב המסך שלהם גדול מ- 1400px או שווה לו, אפשר לעשות זאת באמצעות המחלקה .p-xxl-2.

תיקון תיעוד

למרות שזה אינו חלק מהספרייה עצמה, כדאי לציין את השיפור בתיעוד של בוסטרפלט. תיעוד ב-Bootstrap 5 מסודר יותר טוב, כך שרכיבים שיש להם פירוט רב יותר בהם מקבלים סעיפים משלהם. לדוגמה, רכיב הטופס ב-Bootstrap 4 היה עמוד אחד עם כל הרכיבים דחוסים בתוכו. ב-Bootstrap 5, תיעוד רכיב הטופס הוא סעיף משל עצמו, עם תתי-סעיפים לרכיבים משנה כולל קונטרול טופס, בחירה, קבוצות קלט ועוד.

בנוסף, הניווט בתיעוד קל יותר עכשיו דרך הסייר בצד, במיוחד עבור מכשירים קטנים יותר. ב-Bootstrap 4, טבלת התוכן בצד אינה נצפית במכשירים קטנים, מה שהקשה על מציאת הסעיף הנדרש בדף. ב-Bootstrap 5, טבלת התוכן תמיד נצפית בכל רצועות המסך.

בנוסף, ב-Bootstrap 5 אפשר למצוא את כל משתני Sass, מיקסינים ופונקציות לכל רכיב בדף שלו. קודם, היה רק דף התאמה שהיה מספר פרטים על איך לשנות את משתני הנושא ב-Bootstrap. עכשיו, יש סעיף ההתאמה משל עצמו שיש בו פרטים רבים יותר על איך להתאים את הנושא של בוסטרפלט.

רכיבים חדשים

Bootstrap 5 מביא כמה רכיבים חדשים לספרייה. חלק מהרכיבים הללו היו חלק מרכיבים אחרים ועכשיו הם רכיבים עצמאיים.

אקורדיון

בעבר, אקורדיון היה חלק מהרכיב הקופצני, ולא רכיב עצמאי. ב-Bootstrap 5, אקורדיון הוא רכיב חדש. עם אקורדיון מגיעה מחלקה חדשה, .accordion, שמכילה בתוכה רשימה של פריטי אקורדיון. כמו כן, לאקורדיונים יש סגנון חדש יחסית לסגנון הקודם ב-Bootstrap 4. הנה דוגמה לרכיב האקורדיון:

Bootstrap 5 מוסיף גם כמה מחלקות לשינוי הסגנון של האקורדיון. לדוגמה, .accordion-flush מסיר חלק מהסגנון הברירת מחדל של האקורדיון כמו צבעי הרקע או הגבולות. אפשר גם להפוך פריט אקורדיון לפתוח תמיד על ידי הסרת התכונה data-bs-parent מהאלמנט .accordion-collapse.

Offcanvas

עוד רכיב חדש הוא Offcanvas, המאפשר לך ליצור מדורה צדדית. זהו הסיירד שבדרך כלל משמש באתרים להצגת התפריט על מכשירים קטנים יותר. אפשר למקם אותו בכל צד של הדף על ידי שימוש ב-.offcanvas-start לשמאל ב-LTR, .offcanvas-top למעלה, .offcanvas-end לימין ב-LTR, ו-.offcanvas-bottom לתחתית. אפשר גם לציין האם ה-Offcanvas צריך להכיל רקע או לא. הנה דוגמה לשימוש ברכיב Offcanvas:

שיאות צפים

שיאות צפים היא רכיב חדש במרכיבי הטופס. היא מאפשרת לך ליצור קלט שבו התווית נראית כמו מלבן תאריך בהתחלה, ואז כשהקלט מקבל קשר מרכזי התווית צפה לראש הקלט מעל הערך. זה גם עובד על רכיבים <select> ועל רכיבים <textarea>. הנה דוגמה לשימוש בשיאות צפים:

והוספות אחרות

מלבד הרכיבים החדשים, יש מחלקות חדשות לרכיבים קיימים, מחלקות עוזרות חדשות, מחלקות עוזר חדשות ועוד. הנה רשימה של כל הוספות החדשות ב-Bootstrap 5:

הוספה מחלקה .row-cols-auto שמאפשרת לעמודות לקבל את הרוחב הטבעי שלהן.
A new utility class has been added to justify content called .justify-content-evenly.
בעבר, רווחים בין עמודות הושגו באמצעות כלי התפרטות. עכשיו, אפשר לקבוע את הרווח בין עמודות באמצעות כלי הפריסה החדש Gutter. כדי לקבוע רווח אופקי, השתמש ב-.gx-*. כדי לקבוע רווח אנכי, השתמש ב-.gy-*. כדי לקבוע רווח גם אופקי וגם אנכי, השתמש ב-.g-*.
A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.
קבילויות כלי מיון אנכי עכשיו יכולות לשמש עם טבלאות.
A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.
יש עכשיו את האפשרות לשנות את המפרד ב Breadcrumb באמצעות משתנה CSS --bs-breadcrumb-divider.

הנה דוגמה לשינוי המפרד ל >>:
יש גרסה כהה חדשה לקרואול שמשתמשת במחלקה .carousel-dark, וגרסה כהה חדשה לתפריט נפתח באמצעות .dropdown-menu-dark.
יש אפשרות סגירה אוטומטית חדשה בתפריט נפתח המשנה את ההתנהגות הברירת מחדל של סגירת תפריט הנפתח. ברירת המחדל, תפריטים נפתחים נסגרים כשלוחצים מחוץ לתפריט או על אחד הפריטים בתפריט. אפשר לשנות את זה על ידי הגדרת תכונת הנתונים data-bs-auto-close לinside, מה שגורם לסגירת התפריט כשלוחצים על אחד הפריטים בתפריט אך לא כשלוחצים מחוץ לתפריט. אפשר גם להגדיר אותו כoutside, מה שיגרום לסגירת התפריט רק כשלוחצים מחוץ לתפריט. לבסוף, אפשר להגדיר אותו כfalse כדי לגרום לזה להיסגר רק כשלוחצים על כפתור התפריט שוב. אם אתה מתחיל את התפריט עם JavaScript, אפשר להשתמש באפשרות autoClose במקום בתכונת הנתונים. הנה דוגמה לשימוש בה:
התחלנו להשתמש בסגנון משופר עבור קלטי קבצים בטופסים.
A new color input has been added, using the class .form-control-color.
A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:
הוספנו צבעים חדשים וגוונים במשתני Sass.
הוספנו שני גדלים חדשים של כותרות בתצוגה .display-5 ו .display-6.
הוספנו גרסה לבנה חדשה לכפתורי סגירה .btn-close-white.
כעת ניתן לעטוף את .dropdown-items באלמנטים <li> בתפריטים.
פריטים בקבוצות רשימה יכולים עכשיו להיות ממוספרים באמצעות המחלקה החדשה .list-group-numbered.
קיימות תכונות transition לקישורים ברכיב Pagination, מה שמשפר את הסגנון שלהם.
הוספנו מחלקה חדשה .bg-body המגדירה את צבע הרקע של הגוף ללבן.
הוספנו מחלקות חדשות שימוש בכונן עמדה להגדרת התכונות top, left, right או bottom של אלמנט. לדוגמא, .top-0.
הוספנו מחלקות חדשות .translate-middle-x ו-.translate-middle-y להצפנת אלמנטים ממוקמים באופן מדויק אופקית ואנכית בהתאמה.
הוספנו מחלקות עוזרות חדשות לרוחב הגבול border width .border-* בטווח מ-1 עד 5.
הוספה עוזרת חדשה להצגה .d-grid ועוזרת חדשה לפער .gap.
הוספנו עוזרים חדשים לגובה השורה .lh-1, .lh-sm, .lh-base ו-.lh-lg.
הוספנו עוזרים חדשים ליחס תיבת הצגה שמחליפים את מה שהיה עוזרי ההטמעה הנגררים לפני כן. שמות המחלקות שונו על ידי החלפת embed-responsive ב-ratio ו-by ב-x. לדוגמה, מה שהיה .embed-responsive-16by9 עכשיו הוא .ratio-16x9.
A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.
יש כלי .fs-* לגופנים, כפי שRFS מופעל כבר מלכתחילה.

מסקנה

Bootstrap היה אחד הספריות CSS המובילות במשך רוב העשור האחרון. זה מאפשר למפתחים לבנות בקלות אתרים תגובתיים ולספק חוויה משתמשים טובה. עם התוספות והשינויים של Bootstrap 5, התהליך יהיה אף יותר קל ויאפשר לשפר את עיצוב האתר ולספק חוויה משתמשים טובה. אם אתה משתמש ב-Bootstrap 4 ואתה מעלה את האפשרות לעבור ל-Bootstrap 5, העברה קלה ואתה כנראה לא תצטרך לבצע הרבה שינויים.

שאלות שונות נפוצות (FAQs) על Bootstrap 5

מה ההבדלים העיקריים בין Bootstrap 4 ל-Bootstrap 5?

ההבדל הכי משמעותי בין Bootstrap 4 ל-Bootstrap 5 הוא הסרה של jQuery באחרון. Bootstrap 5 כעת משתמש ב-JavaScript טהור, מה שעושה אותו קליל ומהיר יותר. שינוי מרכזי נוסף הוא החלפת Jekyll ל-Hugo עבור יצירת אתר סטטי התיעוד. Bootstrap 5 גם מציג ממשק כלי חדש, קולירף צבעים מורחב, ובקרות טופס מעודכנים.

איך אפשר לעבור מ-Bootstrap 4 ל-Bootstrap 5?

העברת מBootstrap 4 ל-Bootstrap 5 כרוכה במספר שלבים. ראשית, עליך להסיר את jQuery ולהחליף אותו ב-vanilla JavaScript. לאחר מכן, עדכן את קישורי ה-CSS וה-JS של Bootstrap לגרסה האחרונה. עליך גם להחליף את הקבוצות הישנות בקבוצות החדשות שהוצגו ב-Bootstrap 5. לבסוף, עדכן בקרת הטופס שלך ובדוק את המדריך הרשמי של Bootstrap לשינויים נוספים.

מהם התכונות החדשות ב-Bootstrap 5?

Bootstrap 5 מציג מספר תכונות חדשות. עכשיו זה משתמש ב-vanilla JavaScript במקום jQuery, מה שהופך אותו לקל יותר ומהיר יותר. הוא גם מציג API יישומי חדש לקבלת שיתוף פעולה גמישה יותר, צבעים מורחבים, בקרת טופס מעודכנים וספריית סמלים SVG חדשה. התיעוד גם משתפר עם המעבר מ-Jekyll ל-Hugo.

איך ה-API היישומי החדש ב-Bootstrap 5 עובד?

API היישומי החדש ב-Bootstrap 5 מאפשר שיתוף פעולה גמישה יותר. הוא מאפשר לך ליצור קבוצות יישומיות משלך, לשלוט באילו יישומים מיוצרים, ואפילו לשנות יישומים קיימים. זה מקל על ההתאמה של Bootstrap לצרכים והעדפותיך הספציפיים.

מה המטרה של הצבעים המורחבים ב-Bootstrap 5?

הצבעים המורחבים ב-Bootstrap 5 מספקים יותר אפשרויות להתאמה. הם כוללים טווח רחב יותר של צבעים, מה שמאפשר לך ליצור עיצובים מרובים ומראה מרהיבים יותר. זה מקל על ההתאמה של צבעי האתר או היישום שלך לצבעי המותג שלך.

כיצד עודכנו בקרות הטופס ב-Bootstrap 5?

ב-Bootstrap 5, בקרות הטופס עודכנו לשימוש ב-CSS במקום ב-JavaScript לשם ביצועים טובים יותר ופשטות. יש להם גם מראה חדש עם עיצובים מודרניים ונקיים יותר. כמו כן, טופסים מותאמים אישית הוחלפו בבקרות הטופס החדשים לשם קבלת עקביות טובה יותר.

מהו ספריית הסמלים ה-SVG החדשה ב-Bootstrap 5?

ספריית הסמלים ה-SVG החדשה ב-Bootstrap 5 מספקת למעלה מ-1,000 סמלים בחינם, באיכות גבוהה. סמלים אלה ניתנים להתאמה וניתן להשתמש בהם בחלקים שונים של אתר האינטרנט או היישום שלך, כגון בכפתורים, תפריטים ואזעקות. הם גם מיועדים לשימוש ברשת.

במה הושתפה התיעוד ב-Bootstrap 5?

ב-Bootstrap 5, התיעוד הושתף עם החלפת Jekyll ל-Hugo עבור יצירת אתר סטטי. זה מהיר יותר וקל יותר לשימוש. הוא כולל גם דוגמאות והסברים נוספים כדי לעזור לך להבין איך להשתמש ב-Bootstrap ביעילות.

האם Bootstrap 5 תואם את כל הדפדפנים?

Bootstrap 5 תואם את הגרסאות האחרונות של כל הדפדפנים המרכזיים, כולל Chrome, Firefox, Safari ו-Edge. עם זאת, הוא כבר אינו תומך ב-Internet Explorer. זאת מכיוון ש-Internet Explorer מיושן ואינו תומך ברשת טכנולוגיות מודרניות רבות.

איך אפשר להתחיל להשתמש ב-Bootstrap 5?

כדי להתחיל להשתמש ב-Bootstrap 5, אפשר להוריד אותו מאתר ה-Bootstrap הרשמי. אפשר גם להשתמש ב-CDN כדי לכלול את Bootstrap בפרויקט שלך. ברגע שיש לך את Bootstrap, אפשר להתחיל להשתמש במחלקות ורכיבים שלו בקבצי ה-HTML שלך. ודא לבדוק את התיעוד הרשמי של Bootstrap לקבלת מידע נוסף ודוגמאות.