מבוא ל-Bootstrap ותיאור מערכת הגרידים הרספונסיביים

הפוסט הבא עוסק בפריימוורק – 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.

<!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>

4. מערכת ה Grid's:

בוטסטראפ בחרה בארכיטקטורת בנייה של 12-column grids .

המבנה של הדף בנוי מ – Div שעוטף הכל (Container) ובתוכו שורות (Rows), כאשר כל שורה מכילה 12 עמודות.

קיימות 2 צורות בנייה אפשריות של עמוד. שבעיקרון ההבדל הוא שבאחת הפריסה של ה12 עמודות על כל רוחבו של המסך ובשניה הפריסה היא על רוב רוחבו של המסך.

ועכשיו נפרט על כל שיטה.

Basic grid system

בשיטת הפריסה הבסיסית, ה12 חלקים נפרסים לרוחב של 1170 פיקסלים או לרוחב של 940 פיקסלים או לרוחב של 724 פיקסלים. וכמובן שהכל תלוי בגודל המסך שבו מוצג הדף. לדוגמא: במסך מחשב רחב וגדול, הפריסה של ה 12 עמודות שבכול שורה תיהיה ברוחב של 1170 פיקסלים בגלל שזה הרוחב האפשרי הכי גדול שקיים בצורת פריסה זו.

ועכשיו נראה הדגמה בקוד של שורה שמתחלקת ל 2 חלקים:

<div class="Container">
<div class="row">
<div class="span3">Col 3</div>
<div class="span9">Col 9</div>
</div>
</div>

אז מה אנחנו רואים פה:

קודם כל אנחנו כמובן עוטפים הכל ב-div שהקלאס שלו הוא container.

בתוכו יש לנו div מסוג שורה row,

שיכיל בתוכו 2 עמודות ביחידיות של 9 ו 3 שיהיו מסוג span3 & span9

ומה שיצא לנו זה דבר כזה:

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

Fluid grid system

בשיטת פריסה זו, ה-12 יחידות נפרסות לכל אורך המסך . ניקח את הדוגמא הקודמת ונשנה את הקלאס של ה container ל container-fluid

וכמו כן נשנה גם את הקלאס של השורה במקום .row ל .row-fluid

<div class="container-fluid">
<div class="row-fluid">
<div class="span3">Col 3</div>
<div class="span9">Col 9</div>
</div>
</div>

ומה שיצא לנו זה פריסה על כל רוחב המסך. מדהים!

Offseting

מה אנחנו צריכים לעשות כדי ליצור רווח בין יחידות שבאותה השורה?

לצורך כך אנחנו צריכים להשתמש בעוד class מסוג offset על אותה העמודה שאנחנו רוצים "להזיז" בכמה יחידות.

לדוגמא: ניצור row ובתוכו 2 עמודות, האחת ברוחב של 3 יחידות והשניה ברוחב של 7. את היחידה של ה-7 נרצה להזיז ימינה ב 2 יחידות. מה שאנחנו צריכים לעשות בסך הכל זה להוסיף ליחידה של ה 7 את הקלאס offset2. וככה זה נראה בקוד:

<div class="row-fluid">
<div class="span3">Col 3</div>
<div class="span7 offset2">Col 7 with 2 units offset</div>
</div>

Nesting

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

ניצור שורה ובתוכה 2 תאים בחלוקה שווה של 6 יחידות. את זה כבר אתם יודעים לעשות. ואחר כך נוסיף לאחת מהיחידות תחתיה 2 divs – אחד ברוחב של 2 יחידות והשניה ברוחב של 10 (מה שמשלים ל 12 . למרות שאפשר פחות) ויצא לנו הקוד הבא:

<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>

 

וכך זה נראה על המסך:

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

אם ננסה ליישם את זה בשיטת Basic grid system זה יתחיל לעשות לנו צרות וזאת משום שאנחנו צריכים להתיחס לאבא כ 6 ולא כ 12 . ככה יראה הקוד:

<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>

5. רספונסיביות:

ועכשיו לדובדבן שבקצפת, לדבר שמשדרג אותנו כמפתחי web ומקצר לנו הרבה שורות של media queries. העיצוב הרספונסיבי.

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

 
וזה הסוף…
אם המדריך הזה היה טוב לדעתכם ועזר, אנא הגיבו בהתאם. ויש עוד כמה מדריכים בדרך אז יש למה לצפות. 
 
המדריך פורסם לראשונה באתר שלי : אמנות המסך
 

הפוסט נכתב על ידי:

סגירת תפריט

אנא מלאו את הטופס ונחזור אליכם בהקדם!

 

נשמח לתת לך עוד פרטים

יש למלא את הטופס הבא על מנת לשריין מקום באירוע הקרוב.


נא לבדוק ביומן לפני מילוי הטופס: 
30 למאי (יום רביעי)
בשעה 18:30
בתל אביב (מיקום מדוייק יישלח בהמשך)

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

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

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

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

קבלת ה-PDF מותנית ברישום לניוזלטר שלנו (מי שרשום לניוזלטר נחשב חבר בקהילה ולכן אנחנו מפנקים בגישה לכל החינמיים שלנו).


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

×

אשמח לשלוח לך פרטים!

אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה

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

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

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

נשמח לתת לך עוד פרטים!

לצפייה מיידית בסילבוס ובפרטים אודות הקורס אנא מלא/י את הפרטים כאן: