שלום אורח התחבר

מספר דוגמאות לשימוש בגריד של בוטסטרפ 4

נושאים:יומיפיתוח צד-לקוח

החידוש הכי גדול ב 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

נתראה שם.

מעדיפים לקרוא מהטלגרם? בקרו אותנו ב:@tocodeil

או הזינו את כתובת המייל וקבלו את הפוסט היומי בכל בוקר אליכם לתיבה:


נהניתם מהפוסט? מוזמנים לשתף ולהגיב