הפוסט הבא עוסק בפריימוורק – Bootstrap, המושג שכל מעצב אינטראקטיבי חייב להכיר. אם עוד לא הכרתם – אז כדאי להכיר, ואם יש לכם טיפה ידע ב-HTML הרווחתם כפליים.
אז לאחר בדיקה קצרה בגוגל, ובאתרים ישראליים – לא נמצאה האבידה: חיפשתי וחיפשתי איזשהו מדריך קצר ל-Bootstrap, אבל לא מצאתי משהו נורמלי. החלטתי להרים את הכפפה בעצמי – ולנסות ולכתוב מספר מדריכים לאחד הכלים שיכולים לקצר לנו את העבודה ולהפוך אותה למדהימה!
בפוסט הבא – שכתבתי לראשונה בבלוג שלי (מוזמנים לבקר) – אתן סקירה והדרכה לפריימוורק שפותח בטוויטר לפני כשנתיים, לאחר מכן שוחרר כ-open source והוא כיום פרויקט ה-GitHub הכי גדול.
אז למה בכלל Bootstrap?
אנחנו כמפתחי ומעצבי ווב, תמיד חייבים לחשוב על הדבר הבא, על המסך הבא. האם הוא יהיה בצורה של משקפיים? האם נענוד אותו על היד ?
וכמו תמיד לפני כל פרוייקט, אנו חייבים לחשוב כמה צעדים קדימה בשלב התכנון. באתרים האחרונים שלי כבר הגעתי למסקנה די נחרצת והיא: שאין לנו מנוס מעיצוב רספונסיבי.
כדי ליצור אתר רספונסיבי, יש להתשמש בין היתר ב-CSS3 Media Queries.
בתוך קובץ ה-css שלנו יש לכתוב שוב ושוב לאותם אלמנטים, מיקומים וגדלים שונים לרזולוציות שונות. מה שגרם לי בהרבה מקרים לשבת שבועות על קובץ אחד ולבדוק אותו בלפחות 12 רזולוציות שונות. בקיצור – עבודה קשה, ארוכה אבל שווה כי בסוף האתר הוא רספונסיבי.
מה ש-Bootstrap מציע לנו, זה לעצב ולבנות בצורה ממש מהירה תבנית של דף רספונסיבי, בשילוב עם תבניות מוכנות ומעוצבות של אלמנטים שונים כמו לדוגמא תפריט וסליידר. מה שיכול לחסוך לנו המון המון זמן ולהבטיח לנו שזה עובד פיקס.
רקע קצר
Bootstrap הוא פריימוורק שפותח ב-Twitter על ידי Mark Otto ו-Jacob Thornton במטרה ולשמור על אחידות בפיתוח הכלים הפנימיים של טוויטר. הצורך שהוביל אותם לפתח את "בוטסטרפ" היה בעקבות זה שהיו הרבה ספריות שונות וכלים שונים לפיתוח ממשק, שלא היה בינהם קשר. מה שיצר סירבול ונטל תחזוקה ושדרוגים.
הגירסה הראשונה יצאה לרשת באוגוסט 2011. בשנת 2012 כבר נחשבה לפרוייקט GitHub הכי גדול.
משהו קטן לפני שמתחילים: המדריך הותאם לגרסת 2.3.2 של Bootstrap (היום יש כבר גרסאות מתקדמות יותר). וזה ממספר סיבות שהעיקרית היא משום שלגירסה זו (נכון לזמן כתיבת הפוסט הזה) יש הכי הרבה תיעוד ברשת והיא הכי נפוצה. באחד הפוסטים הבאים אנסה לסקר את התוספות והשינויים של הגרסה החדשה שיצאה ממש לאחרונה.ועכשיו לתכלס
1. בואו נוריד קודם כל את הקובץ מהאתר שלהם:
http://getbootstrap.com/2.3.2/getting-started.html
2. נחלץ את הקבצים לתוך תיקית הפרוייקט שלנו.
הקבצים המצורפים :
הקבצים bootstrap.css, bootstrap-responsive.css הם הקבצים שיהיו אחראים על עיצוב העמוד (ההבדל בינהם הוא שבאחד מוכלים עיצובי העמוד המותאים למבנה רספונסיבי ובשני מוכלים העיצובים למבנה דף רגיל.. נפרט בהמשך).
הקבצים glyphicons-halflings.png , glyphicons-halflings-white.png, הם בעצם 2 קבצי תמונה שמכילים בתוכם סמלים קטנים שנותנים לנו אפשרות להשתמש בהם במהלך הבניה בצורה מהירה. ההבדל בינהם הוא שבאחד הסמלים הם בצבע שחור ובשני הם בלבן.
הקובץ האחרון bootstrap.js הוא הקובץ המכיל את הפלאגינים (סקריפטים של תכנות javascript) של Bootstrap.
שמתם לב לכך שלכל קובץ יש גם קובץ עם סיומת min. קובץ ה minified למעשה קובץ שמכיל את אותו הקוד של אחיו – אך ההבדל היחיד הוא שכאשר תנסו להכנס אליו ולערוך אותו – תראו רצף של קוד בצורה לא מובנת וללא רווחים – בקיצור בלגאן. אבל אם אנחנו (ברוב המקרים) לא מעוניינים לשנות את הקבצים הללו, אז נבחר להטמיע את קבצי ה Minified וזאת משום שהם שוקלים פחות בהרבה ובכך משפרים את זמני טעינת האתר שלנו. יש לשים לב לא להטמיע את שני סוגי הקבצים, לדוגמא: לא להטמיע את bootstrap.js & bootstrap.min.js ביחד.3. הטמעה של הקוד בדף ה – Html5:
Bootstrap דורשת להשתמש בדף html5 ובהטמעה של Jquery. אני מראה פה דוגמא בסיסית להטמעה של Bootstrap.
[html wraplines="true" gutter="true"]
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
bootstarp Document
<link href="files/css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="files/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<!– HTML5 shim for IE backwards compatibility –>
<!–[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
</body>
</html>
<h1>Hellow World</h1>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="files/js/bootstrap.min.js"></script>
</body>
</html>
[/html]
4. מערכת ה Grid's:
בוטסטראפ בחרה בארכיטקטורת בנייה של 12-column grids .
המבנה של הדף בנוי מ – Div שעוטף הכל (Container) ובתוכו שורות (Rows), כאשר כל שורה מכילה 12 עמודות.
קיימות 2 צורות בנייה אפשריות של עמוד. שבעיקרון ההבדל הוא שבאחת הפריסה של ה12 עמודות על כל רוחבו של המסך ובשניה הפריסה היא על רוב רוחבו של המסך.
ועכשיו נפרט על כל שיטה.
Basic grid system
בשיטת הפריסה הבסיסית, ה12 חלקים נפרסים לרוחב של 1170 פיקסלים או לרוחב של 940 פיקסלים או לרוחב של 724 פיקסלים. וכמובן שהכל תלוי בגודל המסך שבו מוצג הדף. לדוגמא: במסך מחשב רחב וגדול, הפריסה של ה 12 עמודות שבכול שורה תיהיה ברוחב של 1170 פיקסלים בגלל שזה הרוחב האפשרי הכי גדול שקיים בצורת פריסה זו.
ועכשיו נראה הדגמה בקוד של שורה שמתחלקת ל 2 חלקים:
[html wraplines="true" gutter="true"]
<div class="Container">
<div class="row">
<div class="span3">Col 3</div>
<div class="span9">Col 9</div>
</div>
</div>
[/html]
אז מה אנחנו רואים פה:
קודם כל אנחנו כמובן עוטפים הכל ב-div שהקלאס שלו הוא container.
בתוכו יש לנו div מסוג שורה row,
שיכיל בתוכו 2 עמודות ביחידיות של 9 ו 3 שיהיו מסוג span3 & span9
ומה שיצא לנו זה דבר כזה:
Fluid grid system
בשיטת פריסה זו, ה-12 יחידות נפרסות לכל אורך המסך . ניקח את הדוגמא הקודמת ונשנה את הקלאס של ה container ל container-fluid
וכמו כן נשנה גם את הקלאס של השורה במקום .row ל .row-fluid
[html wraplines="true" gutter="true"]
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">Col 3</div>
<div class="span9">Col 9</div>
</div>
</div>
[/html]
ומה שיצא לנו זה פריסה על כל רוחב המסך. מדהים!
Offseting
מה אנחנו צריכים לעשות כדי ליצור רווח בין יחידות שבאותה השורה?
לצורך כך אנחנו צריכים להשתמש בעוד class מסוג offset על אותה העמודה שאנחנו רוצים "להזיז" בכמה יחידות.
לדוגמא: ניצור row ובתוכו 2 עמודות, האחת ברוחב של 3 יחידות והשניה ברוחב של 7. את היחידה של ה-7 נרצה להזיז ימינה ב 2 יחידות. מה שאנחנו צריכים לעשות בסך הכל זה להוסיף ליחידה של ה 7 את הקלאס offset2. וככה זה נראה בקוד:
[html wraplines="true" gutter="true"]
<div class="row-fluid">
<div class="span3">Col 3</div>
<div class="span7 offset2">Col 7 with 2 units offset</div>
</div>
[/html]
Nesting
כאשר ניהיה מעוניינים לחלק איזשהי יחידה לעוד יחידות משנה, כל מה שנצטרך לעשות זה להוסיף עוד divים , לתת להם יחידות חדשות ולהתיחס אל האבא שלהם כ 12. ניישם את זה בדוגמא וזה יהיה יותר פשוט להבנה:
ניצור שורה ובתוכה 2 תאים בחלוקה שווה של 6 יחידות. את זה כבר אתם יודעים לעשות. ואחר כך נוסיף לאחת מהיחידות תחתיה 2 divs – אחד ברוחב של 2 יחידות והשניה ברוחב של 10 (מה שמשלים ל 12 . למרות שאפשר פחות) ויצא לנו הקוד הבא:
[html wraplines="true" gutter="true"]
<div class="row-fluid">
<div class="span6">Col 6</div>
<div class="span6">
<div class="span2">2</div>
<div class="span10">10</div>
</div>
</div>
[/html]
וכך זה נראה על המסך:
אם ננסה ליישם את זה בשיטת Basic grid system זה יתחיל לעשות לנו צרות וזאת משום שאנחנו צריכים להתיחס לאבא כ 6 ולא כ 12 . ככה יראה הקוד:
[html wraplines="true" gutter="true"]
<div class="container">
<div class="row">
<div class="span6">Col 6</div>
<div class="row">
<div class="span2">2</div>
<div class="span4">4</div>
</div>
</div>
</div>
[/html]
5. רספונסיביות:
ועכשיו לדובדבן שבקצפת, לדבר שמשדרג אותנו כמפתחי web ומקצר לנו הרבה שורות של media queries. העיצוב הרספונסיבי.
אז כדי שכל מה שכתבנו עכשיו ועיצבנו יהפוך להיות רספונסיבי, כל שעלינו לעשות זה להחליף את קובץ ה css שהטמענו בראש העמוד מ bootstrap.css ל bootstrap-responsive.css. תנסו קצת לשחק עם גודל חלון הדפדפן ולראות את ההבדל.
וזה הסוף… אם המדריך הזה היה טוב לדעתכם ועזר, אנא הגיבו בהתאם. ויש עוד כמה מדריכים בדרך אז יש למה לצפות. המדריך פורסם לראשונה באתר שלי : אמנות המסך
