Bootstrap בנוי על רשת מגיבה של 12 עמודות. כללנו גם פריסות ברוחב קבוע ונוזל המבוססות על מערכת זו.
מערכת ברירת המחדל המסופקת כחלק מ-Bootstrap היא רשת ברוחב 940 פיקסלים, 12 עמודות .
יש לו גם ארבע וריאציות רספונסיביות עבור מכשירים ורזולוציות שונות: טלפון, טאבלט לאורך, שולחן לרוחב ומחשבים שולחניים קטנים ומחשבים שולחניים עם מסך רחב.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
כפי שמוצג כאן, ניתן ליצור פריסה בסיסית עם שתי "עמודות", כל אחת משתרעת על מספר מ-12 עמודות היסוד שהגדרנו כחלק ממערכת הרשת שלנו.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
עם מערכת הרשת הסטטית (לא נוזלית) ב-Bootstrap, הקינון קל. כדי לקנן את התוכן שלך, פשוט הוסף קבוצה חדשה .row
וקבוצה של .span*
עמודות בתוך עמודה קיימת .span*
.
- <div class = "row" >
- <div class = "span12" >
- רמה 1 של העמודה
- <div class = "row" >
- <div class = "span6" > רמה 2 </div>
- <div class = "span6" > רמה 2 </div>
- </div>
- </div>
- </div>
מִשְׁתַנֶה | ערך ברירת מחדל | תיאור |
---|---|---|
@gridColumns |
12 | מספר העמודות |
@gridColumnWidth |
60 פיקסלים | רוחב כל עמודה |
@gridGutterWidth |
20 פיקסלים | רווח שלילי בין עמודות |
@siteWidth |
סכום מחושב של כל העמודות והמרזבים | סופר את מספר העמודות והמרזבים כדי להגדיר את רוחב .container-fixed() המיקסין |
מובנים ב-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>
Bootstrap תומך בקומץ של שאילתות מדיה כדי לעזור להפוך את הפרויקטים שלך למתאימים יותר במכשירים וברזולוציות מסך שונות. הנה מה שכלול:
תווית | רוחב פריסה | רוחב עמודה | רוחב מרזב |
---|---|---|---|
סמארטפונים | 480 פיקסלים ומטה | עמודים נוזליים, ללא רוחבים קבועים | |
טאבלטים לאורך | 480 פיקסלים עד 768 פיקסלים | עמודים נוזליים, ללא רוחבים קבועים | |
טאבלטים לנוף | 768 פיקסלים עד 940 פיקסלים | 44 פיקסלים | 20 פיקסלים |
בְּרִירַת מֶחדָל | 940 פיקסלים ומעלה | 60 פיקסלים | 20 פיקסלים |
תצוגה גדולה | 1210px ומעלה | 70 פיקסלים | 30 פיקסלים |
שאילתות מדיה מאפשרות CSS מותאם אישית בהתבסס על מספר תנאים - יחסים, רוחבים, סוג תצוגה וכו' - אך בדרך כלל מתמקדת סביב min-width
ו max-width
.
Bootstrap אינו כולל אוטומטית את שאילתות המדיה הללו, אך ההבנה וההוספה שלהן קלה מאוד ודורשת הגדרה מינימלית. יש לך כמה אפשרויות לכלול את התכונות הרספונסיביות של Bootstrap:
למה לא פשוט לכלול את זה? האמת, לא הכל צריך להגיב. במקום לעודד מפתחים להסיר תכונה זו, אנו חושבים שעדיף להפעיל אותה.
- // טלפונים נוף ומטה
- @media ( מקסימום רוחב : 480px ) { ... } _
- // טלפון לרוחב לטאבלט לאורך
- @media ( מקסימום רוחב : 768px ) { ... } _
- // טאבלט לאורך לרוחב ולשולחן העבודה
- @media ( מינימום רוחב : 768 פיקסלים ) ו- ( מקסימום רוחב : 940 פיקסלים ) { ... }
- // שולחן עבודה גדול
- @media ( מינימום רוחב : 1200px ) { .. } _