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 מכילה שינויים, חידושים והרבה דברים שכדאי לדעת.
אני ממליץ לבקר כאן וללמוד על כל החידושים הקיימים.
בהצלחה!
נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!
גרסה מבורכת! אחלה של כתבה!
תודה רבה!
עוד שינויים מבורכים:
ברירת המחדל ב-reset היא box-sizing: border-box
המידות שונו מ-px,em ל-rem
אתה יודע מתי צפוייה הגרסה הרשמית?