פיגומים

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

דורש HTML5 doctype

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

<!DOCTYPE html>
<html lang = "iw" > 
  ...
</html>

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

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

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

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

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

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

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

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

קיזוז עמודות

4 היסט 4

3 היסט 3

8 היסט 4

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

עמודות קינון

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

דוגמא

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

רמה 1 של העמודה

שלב 2

<div class = "row" > 
  <div class = "span6" > 
    עמודה רמה 1
    <div class = "row" > 
      <div class = "span3" > רמה 2 </div> 
      <div class = "span3" > רמה 2 </div> 
    </div>
  </div>
</div>

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

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

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

שורות נוזלים

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

סימון

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

קינון נוזלים

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

נוזל 12

נוזל 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    רמה 1 של העמודה
    <div class = "row-fluid" > 
      <div class = "span6" > רמה 2 </div> 
      <div class = "span6" > רמה 2 </div> 
    </div>
  </div>
</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">.

<גוף>
  <div class = "container" > 
    ...
  </div>
</body>

פריסה נוזלית

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

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--תוכן סרגל צד-->
    </div>
    <div class = "span10" > 
      <!--תוכן גוף-->
    </div>
  </div>
</div>

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

מה שהם עושים

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

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

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

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

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

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

דורש מטא תג

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

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

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

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

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

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

  /* טלפונים לרוחב ומטה */
  @media ( מקסימום רוחב : 480px ) { ... } _     
 
  /* טלפון לרוחב לטאבלט לאורך */
  @media ( מקסימום רוחב : 767px ) { ... } _     
 
  /* טאבלט לאורך לרוחב ולשולחן העבודה */
  @media ( מינימום רוחב : 768 פיקסלים ) ו- ( מקסימום רוחב : 979 פיקסלים ) { ... }        
 
  /* שולחן עבודה גדול */
  @media ( מינימום רוחב : 1200px ) { ... } _

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

מה הם

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

מתי להשתמש

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

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

שיעורי תמיכה

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

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

מקרה מבחן

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

גלוי ב...

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

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

מוסתר על...

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

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