שלמה גולדברג
shlomo@haravdotnet.co.ilבתוכן העניינים למדנו למה כדאי ומומלץ להשתמש בספריית Bootstarp ותיארנו את רשימת הנושאים שנלמד, בפרק הנוכחי נראה מהיכן להוריד את הספרייה, ומהם הצעדים המומלצים כדי להתחיל לעבוד עם הספרייה.
ראשית נוריד את הספרייה מהאתר שלהם בלינק הבא בלחצן Download Bootstrap, יירד לכם קובץ zip ובתוכו התיקיות הבאות:
- CSS
- npm.jsbootstrap.css
- bootstrap.css.map
- bootstrap.min.css
- bootstrap-theme.css
- bootstrap-theme.css.map
- bootstrap-theme.min.css
- Fonts
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
- glyphicons-halflings-regular.woff2
- JS
- bootstrap.js
- bootstrap.min.js
- npm.js
כל מה שלא מודגש אינו חשוב לזמן הפיתוח, הוא רלוונטי בזמן העלאה לשרת עבור ביצועים וכדו’, אבל לעת עתה ניתן למחוק את הקבצים שאינם מודגשים.
כדי לעבוד עם העיצוב של הספרייה, עלינו להוסיף לפרוייקט את תיקיית css+fonts, את קובץ הסקריפט נוסיף רק במידה ונרצה להשתמש ביכולות הסקריפטיות של הספרייה (פקדים וכדו’) במקרה כזה נצטרף להוסיף גם את jQuery, מכיוון שהוא מבוסס עליו.
בנוסף מומלץ להוריד גם את הספריות respond ו – html5shiv, הראשונה תדאג לוודא שיכולות הספרייה של תמיכה ברזולוציות שונות לא תפגע בפדפנים ישנים, והספרייה השנייה תוודא לעצב את האלמנטים החדשים של html5 גם בדפדפנים שלא תומכים בהם.
בסופו של דבר – פרוייקט סטנדרטי עם הספרייה נראה ככה:
לאחר שייבאנו את כל הספריות הדרושות, נראה כיצד צריכים להיראות הדפים (או ה – MasterPage, LayoutPage)
<title>Bootstrap demo</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="../Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="../Content/bootstrap/css/bootstrap-theme.css" rel="stylesheet" />
<!– [if lt IE 9]
<script src="../Scripts/html5shiv.js"></script>
<script src="../Scripts/respond.src.js"></script>
–>
<script src="../Scripts/jquery-1.11.3.js"></script>
<script src="../Scripts/bootstrap.js"></script>
</head>
שלושת תגיות ה – meta הראשונות חייבות להגיע לפני הבאת הספרייה, כמו שאפשר לראות הספרייה מגיעה עם שני קבצי css, אחת הבסיסית והשנייה עם תוספות עיצוב.
לאחר מכן נשתמש במה שנקרא conditional css המאפשרת לכתוב הערה שתיקרא בגרסאות IE ישנות, בקוד שלנו נרצה לטעון שני קבצי JS במידה והדפדפן הינו קטן ב – IE9.
בסוף נייבא את jQuery וקובץ הסקריפט של הספרייה.
בפרק הבא נלמד על כתיבת המסך הראשון.