אתחול

פיגומים

Bootstrap בנוי על רשתות, פריסות ורכיבים רספונסיביים של 12 עמודות.

הגדרות כלליות

דורש HTML5 doctype

Bootstrap עושה שימוש ברכיבי HTML מסוימים ובמאפייני CSS הדורשים שימוש ב-HTML5 doctype. כלול אותו בתחילת כל הפרויקטים שלך.

  1. <!DOCTYPE html>
  2. <html lang = "iw" > 
  3.   ...
  4. </html>

טיפוגרפיה וקישורים

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

  • הסר marginעל הגוף
  • הגדר background-color: white;עלbody
  • השתמש בתכונות @baseFontFamily, @baseFontSize, ו @baseLineHeightכבסיס הטיפוגרפי שלנו
  • הגדר את צבע הקישור הגלובלי באמצעות @linkColorוהחל קו תחתון של קישור רק על:hover

סגנונות אלה ניתן למצוא בתוך scaffolding.less .

איפוס באמצעות נורמליזציה

עם Bootstrap 2, בלוק האיפוס הישן ירד לטובת Normalize.css , פרויקט של ניקולס גלאגר וג'ונתן ניל שגם מפעיל את HTML5 Boilerplate . אמנם אנו משתמשים בחלק ניכר מ-Normalize בתוך reset.less שלנו , אך הסרנו כמה אלמנטים במיוחד עבור Bootstrap.

מערכת רשת ברירת מחדל

דוגמה לרשת חיה

מערכת ברירת המחדל של ה-Bootstrap משתמשת ב-12 עמודות , מה שיוצר מיכל ברוחב של 940 פיקסלים ללא הפעלת תכונות תגובה . עם הוספת קובץ ה-CSS המגיב, הרשת מסתגלת לרוחבה של 724 פיקסלים ו-1170 פיקסלים בהתאם לנקודת התצוגה שלך. מתחת ליציאות תצוגה של 767 פיקסלים, העמודות נעשות נוזליות ומערימות אנכית.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML בסיסי ברשת

לפריסה פשוטה של ​​שתי עמודות, צור א .rowוהוסף את מספר .span*העמודות המתאים. מכיוון שזו רשת של 12 עמודות, כל אחת .span*משתרעת על מספר מ-12 העמודות הללו, ותמיד צריכה להסתכם ב-12 עבור כל שורה (או מספר העמודות באב).

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

בהינתן דוגמה זו, יש לנו .span4ו .span8, מה שמביא ל-12 עמודות בסך הכל ושורה שלמה.

קיזוז עמודות

הזז עמודות ימינה באמצעות .offset*מחלקות. כל מחלקה מגדילה את השוליים השמאליים של עמודה בעמודה שלמה. לדוגמה, .offset4עובר .span4על פני ארבע עמודות.

4
3 היסט 2
3 היסט 1
3 היסט 2
6 היסט 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

עמודות קינון

כדי לקנן את התוכן שלך עם רשת ברירת המחדל, הוסף קבוצה חדשה .rowוקבוצה של .span*עמודות בתוך עמודה קיימת .span*. שורות מקוננות צריכות לכלול קבוצה של עמודות שמצטברות למספר העמודות של האב שלהן.

עמודה רמה 1
שלב 2
שלב 2 
  1. <div class = "row" > 
  2.   <div class = "span9" > 
  3.     עמודה רמה 1
  4.     <div class = "row" > 
  5.       <div class = "span6" > רמה 2 </div> 
  6.       <div class = "span3" > רמה 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

מערכת רשת נוזלים

דוגמה לרשת נוזלים חיה

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

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

HTML רשת נוזלית בסיסית

הפוך כל שורה ל"נוזלת" על ידי שינוי .rowל- .row-fluid. מחלקות העמודות נשארות זהות בדיוק, מה שמקל על מעבר בין רשתות קבועות לנוזלות.

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

קיזוז נוזלים

פועל באותו אופן כמו קיזוז מערכת הרשת הקבועה: הוסף .offset*לכל עמודה כדי לקזז במספר עמודות.

4
4 היסט 4
3 היסט 3
3 היסט 3
6 היסט 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

קינון נוזלים

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

נוזל 12
נוזל 6
נוזל 6
נוזל 6
נוזל 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     נוזל 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         נוזל 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > נוזל 6 </div> 
  9.           <div class = "span6" > נוזל 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > נוזל 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

פריסות

פריסה קבועה

מספק פריסה משותפת ברוחב קבוע (ומגיבה אופציונלית) עם <div class="container">חובה בלבד.

  1. <גוף>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

פריסה נוזלית

צור דף קולח בן שתי עמודות עם <div class="container-fluid">-מעולה עבור יישומים ומסמכים.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--תוכן סרגל צד-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--תוכן גוף-->
  8.     </div>
  9.   </div>
  10. </div>

עיצוב רספונסיבי

הפעלת תכונות רספונסיביות

הפעל CSS רספונסיבי בפרויקט שלך על ידי הכללת המטא תג המתאים וגיליון סגנונות נוסף בתוך <head>המסמך שלך. אם הרכבת את Bootstrap מדף ההתאמה האישית, עליך לכלול רק את המטא תג.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "גיליון סגנונות" >

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

לגבי Bootstrap רספונסיבי

מכשירים רספונסיביים

שאילתות מדיה מאפשרות CSS מותאם אישית בהתבסס על מספר תנאים - יחסים, רוחבים, סוג תצוגה וכו' - אך בדרך כלל מתמקדת סביב min-widthו max-width.

  • שנה את רוחב העמודה ברשת שלנו
  • ערמו אלמנטים במקום לצוף בכל מקום שצריך
  • שנה את גודל הכותרות והטקסט כך שיתאימו יותר למכשירים

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

מכשירים נתמכים

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

תווית רוחב פריסה רוחב עמודה רוחב מרזב
תצוגה גדולה 1200 פיקסלים ומעלה 70 פיקסלים 30 פיקסלים
בְּרִירַת מֶחדָל 980 פיקסלים ומעלה 60 פיקסלים 20 פיקסלים
טאבלטים לאורך 768 פיקסלים ומעלה 42 פיקסלים 20 פיקסלים
טלפונים לטאבלטים 767 פיקסלים ומטה עמודים נוזליים, ללא רוחבים קבועים
טלפונים 480 פיקסלים ומטה עמודים נוזליים, ללא רוחבים קבועים 
  1. /* שולחן עבודה גדול */
  2. @media ( מינימום רוחב : 1200px ) { ... } _     
  3.  
  4. /* טאבלט לאורך לרוחב ולשולחן העבודה */
  5. @media ( מינימום רוחב : 768 פיקסלים ) ו- ( מקסימום רוחב : 979 פיקסלים ) { ... }        
  6.  
  7. /* טלפון לרוחב לטאבלט לאורך */
  8. @media ( מקסימום רוחב : 767px ) { ... } _     
  9.  
  10. /* טלפונים לרוחב ומטה */
  11. @media ( מקסימום רוחב : 480px ) { ... } _

שיעורי שירות רספונסיביים

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

מעמד טלפונים767 פיקסלים ומטה טאבלטים979 פיקסלים עד 768 פיקסלים שולחנות עבודהבְּרִירַת מֶחדָל
.visible-phone גלוי
.visible-tablet גלוי
.visible-desktop גלוי
.hidden-phone גלוי גלוי
.hidden-tablet גלוי גלוי
.hidden-desktop גלוי גלוי

מתי להשתמש

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

מקרה מבחן של כלי עזר רספונסיביים

שנה את גודל הדפדפן שלך או טען במכשירים שונים כדי לבדוק את השיעורים לעיל.

גלוי ב...

סימני ביקורת ירוקים מציינים שהכיתה גלויה בשדה התצוגה הנוכחי שלך.

  • טלפון✔ טלפון
  • לוּחַ✔ טאבלט
  • שולחן עבודה✔ שולחן עבודה

מוסתר על...

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

  • טלפון✔ טלפון
  • לוּחַ✔ טאבלט
  • שולחן עבודה✔ שולחן עבודה