Bootstrap – המדריך

20 במאי 2015

תגיות: , , ,
9 תגובות

מטרת המדריך

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

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

 

למה להשתמש בספרייה

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

ללמד את מי שצריך לתחזק את הקוד שימוש בספרייה קיימת, קל ופשוט בהרבה מאשר ללמד אותו את הקונבנציות שלנו.

כולם יודעים (היום) שצריך לעמד את המסך בעזרת div ולא בעזרת טבלאות, מכמה סיבות:

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

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

 

רשימת הפרקים

(נ.ב. כל פרק שיפורסם (בימים הקרובים) יעודכן כאן ללינק לפרק.)

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

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

9 תגובות

  1. יהושע21 במאי 2015 ב 9:36

    היי

    ישר כח

    סוף כל סוף מדריך Bootstrap לעניין

    חיפשתי לא מעט מדריך שילך לכיון כזה

    תודה!!

    הגב
  2. עופר15 ביולי 2015 ב 10:22

    תודה רבה על ההשקעה. וכמו כל פוסט של ברור וקצר

    הגב
  3. הפנר11 בספטמבר 2015 ב 12:23

    תודה גדולה,
    לא כל הקוראים המשץמשים במדריך מגיבים.

    אנו ממתינים להמשך.

    ישר כח

    הגב
  4. חיה14 באוקטובר 2015 ב 18:28

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

    הגב
  5. יוכבד20 בדצמבר 2015 ב 8:42

    שלום,

    אשמח לדעת האם יש ל bootstrap 4 alpha תמיכה לעברית?
    לא מצאתי שום איזכור לכך באתר הרשמי של bootstrap
    אם כן איך מיישמים?

    בתודה מראש,

    הגב
  6. אבי9 במאי 2016 ב 20:37

    שלום קודם כל תודה רבה אני לומד ממך הרבה אשמח אם תמשיך את המדריכים הנהדרים שלך ואפילו תמשיך ל boostrap 4 ותעדכן מה חדש שם תודה רבה רבה !!

    הגב
  7. מרים14 ביוני 2016 ב 14:06

    תודה,
    מדריך מצוין וממוקד.
    יהיה המשך -פרקים 12-13 ?

    שוב תודה !

    הגב
  8. יוסי22 ביוני 2016 ב 10:26

    מדריך יפה מאד!
    איך עובדים עם bootstrape בעברית? נתקלתי בכמה מקרים שהספריה לא היתה מתאימה לעמוד RTL.

    הגב
    1. הרב דוטנט
      הרב דוטנט26 בספטמבר 2016 ב 6:35

      בגרסה 4, תהיה תמיכה מובנית. כיום ניתן לעבוד עם: https://github.com/morteza/bootstrap-rtl

      הגב