Bootstrap 4 – החידושים, השינויים ומה שצריך לדעת

גרסה מספר 4 של הפריימוורק הנהדר מביאה עמה המון שינויים וחידושים.
מאמר על החידושים, השינויים ומה שצריך לדעת, אסור לפספס!

ראשית, אציין כי נכון לכתיבת שורות אלו Bootstrap 4 היא בגרסת alpha ולכן אני ממליץ שלא להשתמש בה ב-Production.
ראו הוזהרתם 🙂
שנתחיל?

תמיכת דפדפנים – תודה לאל!

לא יודע איך היום עבר עליכם עד כה אבל אני מבטיח שהשורה הבאה עומדת לשפר אותו פלאים – החל מגרסה מספר 4 של Bootstrap, התמיכה ב-IE8, iOS 6 ו-IE9 הופסקה.
אני התרגשתי.

Flexbox

במידה והפסקה הקודמת לא עשתה את העבודה והיום שלכם עדיין לא השתפר, אז עכשיו זה יקרה באמת.
Bootsrap 4 תומכת ב-Flexbox באופן מלא.
נפלא.

LESS OUT SASS IN

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

משתני SASS להתאמה אישית

Bootsrap 4 שמה דגש על יכולות התאמה אישית באמצעות קובץ ה-variables.scss שמאפשר להוסיף משתני SASS בקלות ובפשטות.
אהבתי!

Cards

הרכיבים האהובים – panels ו- wells מסיימים את דרכן בגרסה 4 והחל מגרסה זו ישנו רכיב מדליק חדש – Cards.
ה-Cards הוא רכיב תוכן הניתן לעיצוב באופן גמיש למדי והוא יכול לכלול כותרת עליונה, תחתונה, רקע ועוד.

Reboot

קובץ ה-Normalize.css (קובץ ה-CSS RESET של Bootstrap) מסיים דרכו גם הוא וכעת ישנו קובץ חדש – reboot.css שבעל תוספות מיוחדות.

Glyphicons

התמיכה ב-Glyphicons הופסקה.
המלצתי החמה – Font Awesome

שינוי שמות המחלקות

יש לציין כי מחלקות CSS רבות שינו את שמן, מגוון דוגמאות:

תמונות:

.img-rounded -> .rounded
.img-responsive -> .img-fluid.
.img-circle ->.rounded-circle

כפתורים:

.btn-default -> .btn-secondary.

טפסים:

.control-label -> .form-control-label.
.input-lg -> .form-control-lg
.input-sm -> .form-control-sm

אלו רק חלק מהשינויים בשמות המחלקות, אני יותר ממליץ לעבור על הרשימה המלאה.

טקטס גדול יותר

החל מגרסה 4, גודל ברירת המחדל של הטקסט הוא 16px ולא 14px כפי שהיה.
שימו לב 🙂

נקודת שבירה נוספת

נקודות השבירה עברו סידור מחדש ותגידו שלום ל-col-xl-*.
מעכשיו ישנם grid tiers 5 ולא 4.

סיכום

אין ספק ש-Bootsrap 4 מכילה שינויים, חידושים והרבה דברים שכדאי לדעת.
אני ממליץ לבקר כאן וללמוד על כל החידושים הקיימים.

בהצלחה!

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