מבוא:
בהמשך לפוסט הקודם על עיצוב ריספונסיבי אני ממשיך לכתוב על Bootstrap 3. התייחסות תהיה לגריד הריספונסיבי. הגישה בבסיס הגריד הינה Mobile First ובניגוד לפוסט שכתבתי קודם הגדרות מקפצות מתייחסים למינימום רוחב המסך. המסך המינימלי 320 פיקסל רוחב ועד אינסוף.
תשתית Bootstrap פותחה בTwitter. בשנת 2011 בחינם למפתחים רבים, מאז נחשבת לתשתית בכי נפוצה (מעל 80 אלף עוקבים בGithub). את הקבצים ניתן להוריד מBootstrap או מGithub.
בניגוד לגרסה השנייה שבה היה ניתן להוריד קבצי ריספונסיבי בנפרד, גרסה שלישית לא מאפשרת זאת. חייבים להוריד קובץ css מכיל את כל ההגדרות ביחד ולחלץ את הריספונסיבי או להשתמש בתשתית כולה.
כאפשרות נוספת ישנם קבצי Less שניתן לעשות בהם שימוש.
הערות חשובות ביחס לגריד:
- כדי שגריד יעבוד חייבים בheader של כל מסמך html להגדיר מטה תאג viewport.
- גריד מתבסס על רוחב מקסימלי 1200 פיקסל או 100% רוחב. חישוב של עמודות באחוזים.
- עמודות ייעודיות לכל מקפצה שמאפשרים שליטה טובה יותר בכל מסך ומסך.
- רוחב עמודות מוגדר באחוזים, עם padding בצדדים. ז"א עמודות צמודות אחת לשנייה. שימוש בpadding מצמצם את שטח עבודה מ1200 ל1170 פיקסל רוחב. והופך את רוחב עמודות לערכים לא שלמים.
- התאמה לארבע גדלים שונים: מסך הכי קטן (xs), מסך קטן (sm), מסך ביניים (md) ומסך גדול (lg).
מושגי יסוד:
מושגי יסוד די דומים בכל גריד ריספונסיבי, בBootstrap ישנם מוסגים נוספים.
- רשת (Grid) – שטח עבודה בפועל, אזור שכולל בתוכו את כל האובייקטים של העיצוב.
- מכולה (Container) – מעטפת של שורות, יכול להכיל בין שורה אחת למסר שורות.
- שורה (Row) – שורה בודדת שמכילה 12 עמודות.
- עמודות (Columns) – אלמנט סופי שבתוכו נמצא תוכן האתר. במקרה של Bootstrap רוחב שלהם מחושב באחוזים עם מרווח פנימי (padding). שטח עבודה בתוך תא מצתמצם ב 30 פיקסל (15 מכל צד).
- רווח בין העמודות (Gutters) – רווח בין שני עמודות בודדות ששווה ל15 פיקסל.
- חלוקה פנימית בתוך העמודות – (Nesting) אפשרות לבצע שימוש בעמודות בתוך עמודות ולקבוע גודל ביחס לעמודה הראשית.
בניית גריד ריספונסיבי:
בניגוד לגריד שיצרתי בפוסט הקודם, Bootstrap מתייחס לרוחב עמודות בצורה זהה בכל המסכים (12 עמודות תמיד 100%, 6 עמודות תמיד 50% וכך הלה). אבל בתוך הגריד ישנם הגדרות שמאפשרות לקבוע הצגה שונה של העמודות, לדוגמה במסך גדול 4 קוביות עם 25% רוחב, במסך בינוני 2 קוביות עם 50% רוחב ובמסך הקטן קובייה אחת עם 100% רוחב.
- מסך הכי קטן (xs):
בגלל שBootstrap בנוי בשיטת Mobile First עמודות col-xs-* (1-12) עמודות עיקריות בגריד. במילים אחרות, אם לא מוגדר קלאס אחרף נקבל את הרוחב של col-xs-*. בכל מקרה, הקלאסים xs מיעדים לשימוש במסכים קטנים בלבד (עד 7"). רוחב המינימלי הינו 320 פיקסל (טלפון הכי קטן) ורוחב המסך המקסימלי של הקלאס לא מוגבל. מומלץ להגביל למקסימום של 768 ולהשתמש בקלאסים למסכים אחרים. - מסך קטן (sm):
מסכים הללו בד"כ מתאפיינים בגודל בין 7" ל 10" (טאבלטים קטנים ובינוניים). רוחב מינימלי 768 ועד אין סוף. שימוש ב sm מבטל את ההגדרות של xs. מומלץ להגביל למקסימום של 992 ולהשתמש בקלאסים למסכים אחרים. - מסך ביניים (md):
מסכים הללו בד"כ מתאפיינים בגודל בין 10" ל 12" (בעיקר טאבלטים ואולי מחשבים ניידים קטנים). רוחב מינימלי 992 ועד אין סוף. שימוש ב md מבטל את ההגדרות של xs וsm. - מסך גדול (lg):
כל המסכים הגדולים עם רזולוציה מעל 1200 ועד אין סוף. שימוש ב lg מבטל את ההגדרות של הקלאסים האחרים.
חשוב לדעת, בגלל Mobile First והגדרה בסיסית של מינימום רוחב לצורך התאמה ותצוגה טובה בכל המסכים, חובה להשתמש בקלאס col-xs-* כי הקלאס הזה הוא היחיד שמקבל התייחסות בכל המסכים. כל שאר הקלאסים מקבלים התייחסות במקפצה הרלוונטית ועד אין סוף.
דוגמה של העמוד הזה היא שימוש של 12 עמודות (קוביות) בתצוגה שונה.
בדוגמה הזאת הוגדרו קלאסים בצורה כזאת:
- 4 קוביות ברוחב של 25% במסך גדול.
- 3 קוביות ברוחב של 33.3% במסך ביניים.
- 2 קוביות ברוחב של 50% במסך קטן.
- קובייה אחת ברוחב של 100% במסך הכי קטן.
כמובן שאפשר לעשות מניפולציות שונות במסכים השונים, או לעשות התאמה רק לשני גדלים של מסך טלפון וכל השאר.
לראות את התוצאה ניתן בקישור הבא. לפתוח ולנסות להקטין את המסך.
חלוקה פנימית בתוך העמודות:
לפעמים ישנו צורך לחלק עמוסה מסוימת למספר עמודות נוספות. דוגמא:
בגלל שגריד מתייחס לכל הדיבים בצורה זהה (אותו מרווח, אותו רוחב וכו) בתוך 75% רוחב נרצה לקבל שני חצאים. ביחס למסגרת הראשית מדובר בשני עמודות ברוחב של 38.5% ואין לנו הגדרה כזאת בתוך הגריד. אבל מצד שני ביחס לעמודה שבתוכה נמצאים העמודות מדובר ברוחב של 50%. במקרים כאלו שימוש של עמודה בתוך עמודה נותן מענה לבעיות כאלו.
להל"ן דוגמה נכונה לביצוע.
כמו שניתן לראות, כדי להשתמש בNested columns חייבים להשתמש בשורה פנימית (row). השימוש בשורה מונע רווחים מיותרים שקיימים לעמודות, כמו בדוגמה הראשית.
אפשרויות נוספות:
בBootstrap ישנם עוד שתי אפשרויות נוספות שמקלות על פיתוח. אני לא נכנס לעומק של הדברים הללו כי הם פחות שמישים ברוב האתרים, רק אסביר בקצרה.
- רווח בין העמודות – (Offset). בפוסט הקודם כתבתי את הקוד הריספונסיבי שלא מתייחס למצב הזה והדרך היחידה לעשות רווח בין העמודות הוא להשתמש בעמודות ריקות. מבחינת Bootstrap ישנם קלאסים שמאפשרים לעשות רווח זה. משתמשים בקלאסים offset ומקבלים רווח רצוי במקפצה רצויה.
- שינוי מיקום עמודות (Ordering). כברירת מחדל כל העמודות מיושרות לצד אחד ומופיעות לפי סדר הופעתם בקוד HTML. לפעמים ישנו צורך לשנות את המיקום של עמודות בהתאם לגודל מסך. קיימים שתי אפשרויות push וpull.
מגבלות:
- המגבלה החשובה ביותר היא שמדובר בגריד עם רוחב 1170 ולא 1200 כמו שנראה לעין.
- גודל העמודות הינו יחסי ולא קבוע (בגלל החישוב באחוזים). לדוגמה גודל עמודה במסך רחב 97.5 פיקסלים ולא 100. זאת עובדה שצריך לדעת את קיומה.
- התבססות של Bootstrap על padding יוצר בעיה בשימוש מסגרות (border). שימוש במסגרות לכל עמודה יוצר מצב שמסגרות נצמדות אחת לשנייה. במקרים הללו חייבים ליצור div פנימי נוסף עם הגדרות מסגרת ולהכניס את התוכן לתוך הדיף.
סיכום:
ללא ספק, Bootstrap נחשבת כתשתית הכי טובה ונפוצה לפיתוח אתרים ריספונסיבים. יחד עם זאת כדאי לדעת מה הם המגבלות ומה החסרונות שלה פני שמתחילים לקפוץ למים עמוקים שנקרה פיתוח אתר על בסיס Bootstrap.
קפצי פוטושוף ניתן להוריד כאן.
