דף הבית / בניית אתרים / בניית אתרי אינטרנט ב – Bootstrap.CSS

בניית אתרי אינטרנט ב – Bootstrap.CSS

הפעם מתארח אור שוורץ מחברת DigitalST לבניית אתרים.

שנת 2017 הביאה עמה טרנדים חמים בעולם התכנות ובינהם עבודה עם ספריות CSS מוכנות. אנו נתמקד בספרייה הפופולרית ביותר Bootstrap.CSS ונסקור עבורכם את היתרונות והפיצ'רים בקובץ.

בניית אתרים בעזרת BootStrap

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

האפשרויות שמספקת השפה חוללו מהפכה בעולם הUI- ורובו הגדול של עולם התכנות באינטרנט אימץ אותה כאלטרנטיבה לפעולות שעד היום ניתנו ליישום רק ב JavaScript.

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

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

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

רספונסיביות – אתרים, טלפונים ומה שבניהם

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

חלוקה לאזורים

כחלק מהסטיילים הנכללים ב Bootstrap ניתן למצוא חלוקה לגריד של מספר אלמנטים. לדוגמה: אם בחרת לשלב 3 תיבות אשר יוצגו אחת ליד השנייה, כל שתידרש הוא להוסיף לתגית ה – Class את השם col-sm-4. אם תרצה לשנות את מספר התיבות ל -4 כל שעליך הוא לשנות את שם הקלאס לcol-sm-5.

Sticky Header

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

תפריט סמארטפון

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

איך להשתמש ב – Bootstrap.css

הטמעת הספרייה ניתנת ליישום בשני אופנים: CDN (Content Delivery Network) או קובץ מקומי. הגדרת הספרייה מתבצעת באמצעות שורת סקריפט (ראה צילום מסך המוצג למטה) פשוטה המכילה את כתובת הקובץ.

לאחר שהוספתם את הקבצים למסמך הHTML שלכם ניתן להתחיל לתכנת את נראות האתר והחלוקה לאזורים שונים.

כמה נקודות אותם נרצה לציין להתחלת עבודה חלקה עם Bootstrap:

לא לשנות את הקובץ המקורי

ההמלצה שלי הינה להוסיף קובץ CSS נוסף שבו ניתן להגדיר את ה-CSS לעיצוב יותר פרטני. עריכת קובץ המקור תקשה עליך לשדרג גרסה של Bootstrap בעתיד.

תמיד להשתמש בגרסה החדשה ביותר

Bootstrap הוא פרויקט קוד פתוח ולכן מוציא גרסאות בקצב מהיר. אני ממליץ להשתמש תמיד בגרסה החדשה ביותר הניתנת להורדה או קישור באתר של Bootstrap.

מצא קודים מוכנים ברשת

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

איפה ללמוד?

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

כמתכנת אמליץ להשתמש באתר של W3C המכיל מאות מדריכים עם דוגמאות קוד לשימוש בספרייה. כמו כן אמליץ על הפלטפורמה החברתית לשיתוף קוד StackOverflow המאפשר לכם לשאול שאלות ולקבל תשובות ממגוון מתכנתים ברחבי הגלובוס.

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

עוד מדריכים על בניית אתרים:


היו חברתיים!

אהבתם? במידה ותירצו לקבל ממני עדכונים עתידיים ישירות לפיד שלכם אתם מוזמנים לעשות לי לייק בפייסבוק או לעקוב אחריי בגוגל+. נשתמע!

יש לך שאלה? רוצה הצעה לקידום אתר? כמה פרטים ואחזור אליך 🙂

שם (חובה)

דואר אלקטרוני (חובה)

הטלפון שלך (חובה)

רוצים להגיב?

תגובות

אודות אור שוורץ

אור שוורץ - מנכ"ל חברת DigitalST LTD משנת 2006, בעל רקע וניסיון בתכנות, עיצוב והקמת אתרים בדגש על אופטמיזציה לקידום אתרים.

שווה לקרוא גם את

הנגשת אתרים

נגישות אתרים – מהי הדרך הכי בטוחה לגשת לזה?

רבים פונים אלינו ושואלים מהו רכיב נגישות? מי צריך אתר נגיש? מה זה בכלל חוק ...

שדרוג אתר

איך לעבור מאתר ישן לחדש ולהישאר בחיים

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *