אתחול

פיגומים

Bootstrap בנוי על רשת מגיבה של 12 עמודות. כללנו גם פריסות ברוחב קבוע ונוזל המבוססות על מערכת זו.

סגנונות גלובליים לאיפוס CSS, טיפוגרפיה וקישורים

דורש HTML5 doctype

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

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

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

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

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

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

החל מ-Bootstrap 2, איפוס ה-CSS המסורתי התפתח כדי לעשות שימוש באלמנטים מ- Normalize.css , פרויקט של Nicolas Gallagher המניע גם את HTML5 Boilerplate .

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

מערכת ברירת מחדל 12 עמודות עם טוויסט מגיב

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

ברירת המחדל של מערכת הרשת המסופקת כחלק מ-Bootstrap היא רשת ברוחב 940 פיקסלים, 12 עמודות .

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

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

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


קיזוז עמודות

4
4 היסט 4
3 היסט 3
3 היסט 3
8 היסט 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

עמודות קינון

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

דוגמא

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

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

מערכת רשת נוזלים 12 עמודות רספונסיביות, מבוססות אחוזים

עמודות נוזלים

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

אחוזים, לא פיקסלים

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

שורות נוזלים

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

סימון

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

קינון נוזלים

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

נוזל 12
נוזל 6
נוזל 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     רמה 1 של העמודה
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > רמה 2 </div> 
  6.       <div class = "span6" > רמה 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

התאמה אישית של רשת

מִשְׁתַנֶה ערך ברירת מחדל תיאור
@gridColumns 12 מספר העמודות
@gridColumnWidth 60 פיקסלים רוחב כל עמודה
@gridGutterWidth 20 פיקסלים רווח שלילי בין עמודות

משתנים ב-LESS

מובנים ב-Bootstrap קומץ משתנים להתאמה אישית של מערכת ברירת המחדל של 940px, המתועדת לעיל. כל המשתנים עבור הרשת מאוחסנים ב-variables.less.

כיצד להתאים אישית

שינוי הרשת פירושו שינוי שלושת @grid*המשתנים והידור מחדש של Bootstrap. שנה את משתני הרשת ב-variables.less והשתמש באחת מארבע הדרכים שתועדו להידור מחדש . אם אתה מוסיף עוד עמודות, הקפד להוסיף את ה-CSS עבור אלה ב-grid.less.

נשאר רספונסיבי

התאמה אישית של הרשת פועלת רק ברמת ברירת המחדל, רשת 940px. כדי לשמור על ההיבטים הרספונסיביים של Bootstrap, תצטרך גם להתאים אישית את הרשתות ב-responsive.less.

פריסות תבניות בסיסיות ליצירת דפי אינטרנט

פריסה קבועה

פריסת ברירת המחדל והפשוטה ברוחב 940 פיקסלים, מרוכזת כמעט עבור כל אתר או דף שסופק על ידי יחיד <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 מותאם אישית בהתבסס על מספר ת��אים - יחסים, רוחבים, סוג תצוגה וכו' - אך בדרך כלל מתמקדת סביב min-widthו max-width.

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

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

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

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

תווית רוחב פריסה רוחב עמודה רוחב מרזב
סמארטפונים 480 פיקסלים ומטה עמודים נוזליים, ללא רוחבים קבועים
סמארטפונים לטאבלטים 767 פיקסלים ומטה עמודים נוזליים, ללא רוחבים קבועים
טאבלטים לאורך 768 פיקסלים ומעלה 42 פיקסלים 20 פיקסלים
בְּרִירַת מֶחדָל 980 פיקסלים ומעלה 60 פיקסלים 20 פיקסלים
תצוגה גדולה 1200 פיקסלים ומעלה 70 פיקסלים 30 פיקסלים

דורש מטא תג

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

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

שימוש בשאילתות המדיה

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

  1. השתמש בגרסה הרספונסיבית המהידור, bootstrap-responsive.css
  2. הוסף @import "responsive.less" והידור מחדש של Bootstrap
  3. שנה וקומפילציה מחדש של responsive.less כקובץ נפרד

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

  1.   // טלפונים נוף ומטה
  2.   @media ( מקסימום רוחב : 480px ) { ... } _     
  3.  
  4.   // טלפון לרוחב לטאבלט לאורך
  5.   @media ( מקסימום רוחב : 767px ) { ... } _     
  6.  
  7.   // טאבלט לאורך לרוחב ולשולחן העבודה
  8.   @media ( מינימום רוחב : 768px ) ו- ( מקסימום - רוחב : 979px ) { ... } _        
  9.  
  10.   // שולחן עבודה גדול
  11.   @media ( מינימום רוחב : 1200px ) { ... } _

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

מה הם

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

מתי להשתמש

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

לדוגמה, תוכל להציג <select>אלמנט עבור nav בפריסות לנייד, אך לא בטאבלטים או במחשבים שולחניים.

שיעורי תמיכה

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

מעמד טלפונים480 פיקסלים ומטה טאבלטים767 פיקסלים ומטה שולחנות עבודה768 פיקסלים ומעלה
.visible-phone גלוי
.visible-tablet גלוי
.visible-desktop גלוי
.hidden-phone גלוי גלוי
.hidden-tablet גלוי גלוי
.hidden-desktop גלוי גלוי

מקרה מבחן

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

גלוי ב...

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

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

מוסתר על...

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

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