בניית אתרים רספונסיבים עם Bootstrap

מהי פלטפורמת ה Bootstrap ומה ניתן לבצע איתה?

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

כיצד Bootstrap עובדת?

Bootstrap מתבססת על ספריית הקוד הפתוח הידועה ב - Javascript, Jquery, אך מוסיפה עליה קבצים נוספים, כולל קבצי עיצוב (CSS) וקבצי פונטים המשמשים את תבנית הבסיס שלה. תבנית זו מציעה למעשה את כל האלמנטים בהם ניתן להשתמ:

• כפתורים בצבעים וגדולים שונים

• תצוגה מקדימה לתמונות (Thumbnails)

• תפריטים נפתחים (Dropdown Menus) ורשימות של קישורים או פריטים

• תפריטי ניווט אופקיים

• התראות בצבעים שונים המחליפות את החלונות הקופצים הפשוטים ברוב האתרים

• פסי התקדמות (מתאים לאתרים שטוענים מידע מן השרת מבלי לטעון מחדש את העמוד דרך AJAX)

• פסקאות טקסט תחומות (ידועות גם כ - Wells)

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

התקנה

ההתקנה הפשוטה ביותר של Bootstrap מתבצעת באמצעות מספר שורות קוד פשוטות אשר למעשה מוסיפות למסמך ה - HTML הבסיסי את הקישור הנחוץ לקבצי המקור של Boostrap דרך שרת משותף (CDN), כך שלמעשה אין כלל צורך להוריד את הקבצים הללו אל המחשב המקומי.

קידוד

מבחינת כתיבת הקוד, למרות ש - Bootstrap בנויה ב - JS, הרי שרוב הקידוד מתבצע בשפת HTML ועל כן גם מי שאינו מתכנת פר אקסלנס יכול להשתמש במערכת בקלות יחסית. לדוגמה, על מנת ליצור קבוצה של שלושה כפתורים שכל אחד מהם מיושר לכיוון שונה (ימין מרכז ושמאל), נשתמש בקוד HTML רגיל, אך נוסיף לו תג חדש בשם <button> אשר נוצר על ידי הספרייה של Bootstrap. מבנים אחרים נוצרים באמצעות תגיות span במחלקות שונות (class) ואילו תפריטי ניווט עושים שימוש בתגיות <li> ו - <ul>.

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

סיכום

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