אם הגירסה השלישית של bootstrap לפני מספר חודשים, לשחק עם המערכת, ללמוד את השינויים והאפשרויות החדשות שהוכנסו בה וליצור בעזרתה דברים מעניינים. במושג רשת אני מתכוון לצורה בה bootstrap מחלק את המסך (מבוסס על 12 עמודות).

ההבדלים

ההבדל העיקרי בין הגרסה החדשה לגירסאות הקודמות היא במערכת הרשת (grid). בגירסה 2 יש הפרדה בין שני סוגי דפדפנים (מסכים רגילים של מחשבים ביתיים ומסכים של מכשירים ניידים). בגירסה 3 החדשה, אתם תחשבו על מערכות ניידות תחילה ומערת הרשת מאפשרת ליצור מערכת רשת התואמת לגודל המסך בא מוצג האתר.

Bootstrap 2

מערכת הרשת שיצרתם עבדה על מסך של מחשב שולחני וכאשר רוחב המסך הוקטן מתחת לערך מסוים (בדרך כלל 767 פיקסלים) העמודות "נפלו" אחת מתחת לשניה. זה הגביל אותנו מפני שזה אישפר לנו להגדיר מערכת רשת אחת וגרמה לתצוגה להראות כמו "מחסנית" כשהאתר הוצג במכשיר עם מסך צר (לדוגמא טלפונים חכמים).

Bootstrap 3

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

לדוגמא, אנו מעוניינים באתר אשר מוגדר כך:

• עמודה אחת במסכים קטנים במיוחד
• שתי עמודות במסכים צרים ומסכים בעלי רוחב ממומצע
• 4 עמודות במסכים רחבים

מיכוון שמערת הרשת מתחילה במערכות צרות מסך ועולה כלפי מעלה קוד ה-CSS יראה כך:

<div class="row">
	<div class="col-sm-6 col-lg-3">
		חלק ממערכת הרשת שלנו.
	</div>
	<div class="col-sm-6 col-lg-3">
		חלק ממערכת הרשת שלנו.
	</div>
	<div class="col-sm-6 col-lg-3">
		חלק ממערכת הרשת שלנו.
	</div>	
	<div class="col-sm-6 col-lg-3">
		חלק ממערכת הרשת שלנו.
	</div>	
</div>

איננו צרכים להגדיר דבר למסכים צרים מאד מפני שברירת המחדל היא עמודה אחת. אנו נדרשים להגדיר את גדלי הרשת למכשירים קטנים, אבל לא למכשירים בעלי רוחב מסך בינוני. זה בגלל שהמערכת משייכת את הערכים שנקבעו מן המסך הצר ביותר לזה הרחב ותר. לכן הגדרנו את הממדים של sm, והערכים האלו ישמשו גם את sm' md' ו-lg.

מיד אסביר את ההבדלים בממדי הרשת (עמודות) וכיצד תוכלו ליצור אותם ולבסוף יהיו יוצגו דוגמאות

ממדי הרשת (רוחב עמודות)

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

במסמך הרישמי של Bootstrap ניתן לימצוא פירוט נוסף וניתן לקבל הבנה טובה יותר על עקרונות הפעולה של מערכת הרשת של bootstrap. תוכלו לקבל שם מידע על רוחב עמודות, רוחב המשפכים וערכי המקסימום של אלמנטים אלו.

כלי עזר לתבנית מגיבה

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

• visible-xs
• visible-sm
• visible-md
• visible-lg
• hidden-xs
• hidden-sm
• hidden-md
• hidden-lg

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

דוגמאות

להלן מספר דוגמאות של גדלי עמודות אותן תוכלו ליצור. אציג כמה פשוט ליצור אתרים המתאימים לכל קשת המסכים הקיימים בשוק, וכמה קל לעשות זאת עם מערכת הרשת של Bootstrap 3.

פשוט: מסך רחב לעומת מסך של מכשיר נייד

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

והקוד למימוש הדוגמא הזאת:

<div class="row">
	<div class="col-md-6 col-lg-3">
		<div class="visible-lg text-success">Large Devices!</div>
		<div class="visible-md text-warning">Medium Devices!</div>
		<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="visible-lg text-success">Large Devices!</div>
		<div class="visible-md text-warning">Medium Devices!</div>
		<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="visible-lg text-success">Large Devices!</div>
		<div class="visible-md text-warning">Medium Devices!</div>
		<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
	</div>	
	<div class="col-md-6 col-lg-3">
		<div class="visible-lg text-success">Large Devices!</div>
		<div class="visible-md text-warning">Medium Devices!</div>
		<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
	</div>	
</div>

ביניים: הצגת עמודה נוספת על מסכים רחבים

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

אנו נשנה את הרוחב של עמודת התוכן הראשית ל-6 יחידות (span 6) בתצוגה על מסכים רחבים וכך ניצור מרחב חדש בו תוכנס העמודה הנוספת. זו דרך מעולה להשתמש בשטח המסך שיש לנו במסכים רחבים. וזה הקוד של דוגמא זאת:

<div class="row">
	<div class="col-sm-9 col-lg-6 text-danger">
		אני פיסת תוכן מרכזית.
	</div>
	<div class="col-sm-3 text-warning">
		אני העמודה הראשית.
	</div>
	<div class="col-lg-3 visible-lg text-success">
		אני העמודה המשנית שמוצגת במסכים רחבים בלבד.
</div>
</div>

מתקדם: רישות שונה לכל גודל מסך

זאת תהיה דוגמא מסובכת יותר. נצא מתוך הנחה שהדרישה שנדרשנו לבצע היא שבכל מקרה לא תהיה "נפילה" של עמודה מתחת לעמודה הניצבת לידה כאשר אנו "מקטינים" את רוחב המסך.  במכשירים בעלי מסכים צרים במיוחד אהנו רוצים תצוגה של שתי עמודות. במסכים צרים יוצגו 3 עמודות. במסכים בעלי רוחב בינוני נרצה להציג 4 עמודות. ולבסוף, במסכים רחבים נרצה להציג 6 עמודות, כאשר אחד מהעמודות תוצג על על סוג מסך זה.

והרי לכם הדוגמא והקוד למימושה:

<div class="row">
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		תוכן כל שהוא!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		תוכן כל שהוא!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		תוכן כל שהוא!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		תוכן כל שהוא!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		תוכן כל שהוא!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg">
		תוכן כל שהוא שיוצג רק על מסכים רחבים!
	</div>
</div>

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

לסיכום!

אני מקווה שהצלחתי להציג לכם את הקלות שבשימוש  במערכת הרשת (עמודות) של Bootstrap 3, מצד אחד, ואת היכולות הרבות שלה מצד שני. המערכת נותנת הרבה גמישות בקביעת התצוגה על סוגי מסכים שונים, בעלי רוחב שונה ומאפשרת לכם להתאים את התצוגה של האתרים שלכם במכשירים השונים בצורה מיטבית.

בניית המאמר התבססה על מאמר באנגלית אותו ניתן למצוא כאן.