במאמר השני בסדרה בואו נתמודד עם תכונות Bootstrap. זוהי ספרייה שלמה של משאבים לעיצוב אתרי אינטרנט ויישומים, כולל תבניות ואלמנטים לטפסים, גופנים ותפריטים, בין היתר.
ב מאמר קודם טענו שיש מקרים שבהם מנהלי תוכן הם לא האפשרות הטובה ביותר וזה כתיבת קוד מאפס עבור אתר אינטרנט היא החלופה הנכונה. עם זאת, זה לא אומר שעלינו להמציא את הגלגל מחדש. שימוש במסגרות כמו Bootstrap מקטין מאוד את זמן העיצוב ומקל על השגת תוצאות.
תכונות Bootstrap
כדי להבין את התכונות של Bootstrap, עלינו להבין שינוי הפרדיגמה בעיצוב אתרים.
כשהם הופיעו אתרי אינטרנט פשוט היו צריכים להתאים את עצמם לגדלים השונים של צגים. אבל, עם הזמן, טלפונים ניידים וטאבלטים הפכו יותר ויותר לאמצעי הגישה המועדף על המשתמשים. האתגר היה לגרום לדפים להתאים את עצמם למסכים השונים מבלי שהמשתמש יצטרך להגדיל, לכווץ או להזיז את התוכן כדי שיוכל לראות אותו.
באופן עקרוני אומצו הגישות הבאות:
- עיצוב רספונסיבי: העיצוב זהה אך מותאם אוטומטית לגודל המסך. לגישה זו יש כמה בעיות כגון המשתמש עשוי להאלץ להתקרב לחלקים מסוימים בדף כדי לראות אותם.
- התקדמות מתקדמת: זה מתחיל בעיצוב האתר עבור המכשיר עם פחות משאבים (בדרך כלל הטלפון הנייד כי יש לו מסך קטן יותר, דפדפן עם פחות תאימות לתכונות מתקדמות, ולעיתים קרובות דורש שימוש בתוכנית נתונים כדי להתחבר). לאחר סיום, בהתבסס על עיצוב זה, תכונות נוספות כדי להשיג את הגרסה עבור טאבלטים, מחברות ומחשבים שולחניים.
- השפלה הדרגתית: זה הדרך ההפוכה. אתר הדסקטופ נוצר תחילה והתכונות מוסרות עד לקבלת גרסה מותאמת לנייד.
מכיוון שתמיד קל יותר להוסיף מאשר להסיר, ההתקדמות המתקדמת היא המגמה שהצליחה לנצח. ב.ootstrap למשל נוקט בגישת "מובייל תחילה"., כלומר, הבסיס של העיצוב הוא תמיד הגרסה שתוצג בגודל המסך הקטן ביותר, ולאחר מכן, השינויים שיבוצעו עם העברתו לגדלים הבאים נקבעים.
יתרון נוסף בשימוש ב-Bootstrap קשור לעובדה גוגל נותנת עדיפות לאתרים ידידותיים לנייד בחיפושים שלה.
קונספט נוסף שעלינו לקחת בחשבון הוא ההבדל בין עיצוב חזיתי ועיצוב אחורי. עיצוב חזיתי דואג לכל מה שהמשתמש רואה ולכל מה שהוא מתקשר איתו. Backend מקבץ את מה שנעשה בשרת. דוגמה לראשון היא זו של טופס אינטרנט. הצגת סדרה של אפשרויות מוצגת כתפריט נפתח הוא עיצוב קצה, שהאפשרות שנבחרה נשלחת בדואר או מתווספת למסד נתונים היא עיצוב אחורי.
Bootstrap היא מסגרת המשלבת אלמנטים של סגנון CSS ותכנות Javascript כדי לשלוט בעיבוד ולתת אינטראקטיביות לכל רכיבי הדף שפותחו ב-HTML5.
בין הדברים שאנו יכולים לשלוט בהם עם Bootstrap הם:
- נגישות: רכיבים כגון תפריטים או דיאלוגים תואמים לקוראי מסך או מתאימים לשימוש על ידי אנשים עם מוגבלות בניידות.
- כפתורים: כולל מידות, סגנונות, מצבים וקיבוץ.
- טפסים: כולל עיבוד, סוגי פקדים ואימות קלט.
- תמונות: שולט במקור, היישור וגודל המסך של תמונות שהוכנסו.
- רכיבי ניווט: לדוגמה, סרגלי צד הניתנים להסתרה או תפריטים אנכיים או אופקיים בהתאם למכשיר.
- טיפוגרפיה: שליטה על אופן הצגת חלקים שונים של הטקסט.
- מַעֲרָך: התאמת עיבוד התוכן בהתאם למכשיר
במאמר הבא נראה כמה דוגמאות מעשיות לשימוש בו.
מצפה ללמוד משהו על bootstrap.
תודה על הזמן שלך!