השינויים והחידושים ב-Bootstrap 5

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

אז חוץ מלוגו חדש, ישנם עוד כמה חידושים מעניינים ומרעניים בגרסה מספר 5 של ה-CSS Framework הכי נפוץ כרגע, בואו נעבור עליהם.

להתראות jQuery

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

אין יותר תמיכה ב-IE10 ו-IE11

אם חשבתם שהחידוש הקודם מרענן ונדרש אז שימו לב: Bootstrap 5 לא תומך ב-IE10 ו-IE11 יותר.

מי לא אוהב אייקונים?

חידוש כיפי ממש הוא שב-Bootstrap 5 מביא עמו הוא ספריית אייקונים מכובדת. אגב, האייקונים בפורמט svg כמובן.
ניתן להשתמש באייקונים כ-inline code או באמצעות sprite.
מעניין אתכם? כאן תוכלו לקרוא על Bootstrap Icons עוד קצת.

אילו classes הוסרו ואילו נוספו?

ה-classes שהוסרו הם: form-row, form-inline, list-inline, card-deck.
ה-classes שנוספו הם:
gx-* – מגדיר את ה-horizontal gutter.
gy-* – מגדיר את הvertical gutter.
g-* – מגדיר את ה-horizontal and vertical gutter.

מאחר ונכון לכתיבת שורות אלו מדובר בגרסת alpha בלבד, ייתכן שיוסרו/יתווספו classes נוספים.

עיצוב אחיד לתיבות סימון/כפתורי רדיו

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

דוקומנטציה חדשה

אולי לא מדובר בשינוי מרהיב מדי אבל הדוקומנטציה החדשה של Bootstrap 5 היא שינוי מרענן.

Utilities API

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

npm install bootstrap@5.0.0-alpha1

ואז יצרתי קובץ scss חדש ובו כללתי import שידאג לכלול את קובץ bootstrap.scss:

@import '../node_modules/bootstrap/scss/bootstrap.scss';

כעת כל מה שאתם צריכים לעשות זה להעתיק לקובץ ה-scss שלכם את הקטע הבא מתחת ליבוא של הקובץ bootstrap.scss אחרת זה לא יעבוד:

$utilities: () !default;
$utilities: map-merge(
(
    // Custom utilities here
), $utilities);

הנה דוגמה של utilities פשוט שיצרתי לצורך הדוגמה אשר דואג ל-border-radius של כפתורים:

$utilities: () !default;
$utilities: map-merge(
(
"button-border": (
    property: border-radius,
    class: btn-b,
    values: (
    0: 0px,
    1: 10px,
    2: 20px,
    3: 30px,
    4: 40px,
    5: 50px,
    6: 60px,
    )
),
), $utilities);

הסבר קצר:
button-border – השם שנתתי ל-utility.
border-radius – ה-css property שמקשור ל-utility.
btn-b – ה-class של ה-utility.
values – הערכים (key:value).

עכשיו אפשר להוסיף את ה-class ל-button ואפשר לראות שקיבלנו class חדש 🙂

לסיכום

הפוסט הקודם שכתבתי עוסק ב-Tailwind CSS אשר נקודת החוזקה של ה-Framework הנהדר הזה היא עיצוב מותאים אישית ברמה גבוה.
Bootstrap בגרסתו החמישית מאפשר לקסטם את האתר באופן מקיף ממה שהכרנו עד כה מ-Bootsrap, תודות בעיקר ל-Utilities API, כך שניתן להשתמש ב-Bootstrap המוכר והדי אהוב ומצד שני לוודא שהאתר לא ייראה "בוטסטראפי" מדי.
יש לשים לב שנכון לכתיבות שורות אלו מדובר בגרסת alpha בלבד ולכן ממש לא כדאי להשתמש בגרסה זו כרגע, עם זאת, אפשר לנשום לרווחה, נראה שהקפיצה מ-Bootstrap 4 ל-Bootstrap 5 תהיה די חלקה ולא צפויה לשבש את העיצוב יותר מדי.
מעוניינים לקרוא בהרחבה על השינויים והחידושים? הפוסט הרשמי של Bootstrap כאן.
בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)