שלמה גולדברג
shlomo@haravdotnet.co.ilבפרק הקודם הבנו מה צריך להוריד כדי להתחיל לעבוד עם הספרייה, וכיצד צריך להיראות ה – template הבסיסי של דפי ה – WEB שלנו, היום נראה את תחילת הקוד, נכתוב את המסך הראשון ונכיר מספר css בסיסיים.
נזכיר מהו הקוד המשותף בין הדפים (Master Page, Layout Page)
<head>
<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>
כעת לאחר שהרצנו את הדף והכול תקין, נתחיל לכתוב את הקוד עצמו.
<div class="container">
<div class="page-header">
<h1>Bootstrap demo <small>By Haravdotnet</small></h1>
</div>
</div>
</body>
אחד הדברים שבדרך כלל נוודא שקוד ה – html עטוף במחלקה בשם container, מחלקה זו מוודאה שרוחב המסך שלנו יהיה קבוע בפיקסלים ידועים מראש עבור כל אחד מהגדלים הנתמכים.
בדרך כלל (וזו טעות נפוצה שהרבה אנשים חושבים אחרת) כשאנחנו באים לתכנון את העימוד של המסך שלנו, נרצה לתכנן את החלוקה (החיצונית) בפיקסלים ולא באחוזים, (זה נכון למערכות מידע – פחות לדפי נחיתה) מכיוון שעבודה באחוזים תגרום לחלוקה להיראות כמו שצריך במסך המתכנת אבל לא בשום מסך עם רזולוצייה או גודל אחר.
כמובן שאת החלוקה הפנימית (לאחר שהמסגרת הוגדרה בפיקסלים, נרצה לתכנן באחוזים), הבעייה היא שאת מסגרת האתר נרצה לקבוע לרוחב שונה לפי רזולוציות שונות.
הספרייה תומכות בארבעה גדלים:
- סלולר (xs) – כל רוחב שקטן מ – 768px.
- טאבלאט – (sm) – כל רוחב שגדול מ – 768px וקטן מ – 992px.
- סטנדרט – (md) – כל רוחב שגול מ – 992px וקטן מ – 1200px.
- גדול – (lg) – כל רוחב שגדול מ – 1200px.
המחלקה container קובעת רוחב קבוע עבור כל אחד מהגדלים שצוינו.
- xs – רוחב של 100%.
- sm – רוחב של 750px.
- md – רוחב של 970px
- lg – רוחב של 1170px.
בצורה הזה בכל אחד מהרזולוציות רוחב המסך יהיה הגיוני ונוכל לתכנן בקלות את החלוקה הפנימית, במידה ובכל זאת תרצו לקבל רוחב מסך מלא בכל הגדלים, תוכלו להחליף את המחלקה container במחלקה בשם container-fluid.
המחלקה page-header, נותנת עיצוב לכותרת הראשית של המסך, שימוש ב – small גורם להקטנת הפונט ב – 25% ממי שמכיל אותו (במקרה הזה h1 של ה – page-header.
בפרק הבא נגדיר את התפריט ונלמד על מערכת הגרידים של הספרייה.