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

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

1. חלוקת השורה לעמודות באותו גודל

הגריד הראשון מציג שלוש עמודות ברוחב זהה:

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

בגלל השימוש בפלקסבוקס גובה כל שלושת העמודות יהיה זהה וייקבע לפי העמודה הגבוהה מכולן.

2. קביעת גודל השורה לפי גודל התוכן

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

בדוגמא הבאה יש לנו שתי שורות מלאות ועוד שורה אמצעית קטנה יותר. העמודות מוגדרות עם col-3 כדי שכל עמודה תתפוס רק רבע שורה, והשורה קיבלה את justify-content-center כדי להופיע בדיוק באמצע.

3. שילוב עמודות בגודל קבוע עם עמודות בגודל משתנה

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

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

4. גריד שמתרסק לערימה כשאין מספיק מקום

כמו בבוטסטרפ3 גם כאן קל מאוד לבנות גריד שמתרסק לערימה כשאין מספיק מקום על המסך, למשל כשאנחנו על מובייל:

הטריק הוא להשתמש בקלאס col-md (או החברים שלו col-xs, col-sm ו col-lg) כדי לקבוע באיזה נקודה העמודות יתרסקו לערימה.

רוצים לשמוע על עוד יכולות של בוטסטרפ 4? מצוין - ביום חמישי הקרוב אעביר וובינר בדיוק על זה. מוזמנים להצטרף בחינם בקישור:

https://www.tocode.co.il/workshops/66

נתראה שם.