מערכת רשת
השתמש ברשת ה-flexbox העוצמתית שלנו לנייד-ראשון כדי לבנות פריסות מכל הצורות והגדלים הודות למערכת שתים עשרה עמודות, חמש שכבות תגובה ברירת מחדל, משתני Sass ו-mixins ועשרות מחלקות מוגדרות מראש.
מערכת הרשת של Bootstrap משתמשת בסדרה של מיכלים, שורות ועמודות כדי לפרוס וליישר תוכן. זה בנוי עם flexbox והוא מגיב במלואו. להלן דוגמה והסתכלות מעמיקה על האופן שבו הרשת מתאחדת.
חדש או לא מכיר את flexbox? קרא את המדריך הזה ל-CSS Tricks flexbox לקבלת רקע, מינוחים, הנחיות וקטעי קוד.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>הדוגמה שלמעלה יוצרת שלוש עמודות ברוחב שווה במכשירים קטנים, בינוניים, גדולים וגדולים במיוחד באמצעות מחלקות הרשת המוגדרות מראש שלנו. העמודות הללו ממורכזות בעמוד עם האב .container.
אם תפרט את זה, הנה איך זה עובד:
- מיכלים מספקים אמצעי למרכז ולרפד אופקית את תוכן האתר שלך. השתמש
.containerברוחב פיקסל מגיב או.container-fluidעבורwidth: 100%כל גדלי התצוגה והמכשירים. - שורות הן עטיפות עבור עמודות. לכל עמוד יש אופקי
padding(נקרא מרזב) לשליטה על הרווח ביניהם. לאחרpaddingמכן מתמודדים עם זה בשורות עם שוליים שליליים. בדרך זו, כל התוכן בעמודות שלך מיושר ויזואלית בצד שמאל. - בפריסת רשת, תוכן חייב להיות ממוקם בתוך עמודות ורק עמודות עשויות להיות ילדים מיידיים של שורות.
- הודות ל-flexbox, עמודות רשת ללא הגדרה מוגדרת יתפרסו
widthאוטומטית כעמודות ברוחב שווה. לדוגמה, ארבעה מופעים של.col-smכל אחד יהיו באופן אוטומטי ברוחב של 25% מנקודת השבירה הקטנה ומעלה. עיין בסעיף עמודות פריסה אוטומטית לקבלת דוגמאות נוספות. - מחלקות עמודות מציינות את מספר העמודות שבהן תרצה להשתמש מתוך 12 האפשרויות בכל שורה. לכן, אם אתה רוצה שלוש עמודות ברוחב שווה, אתה יכול להשתמש ב-
.col-4. - עמודות
widthמוגדרות באחוזים, כך שהן תמיד נוזליות וגודלן ביחס לאלמנט האב שלהן. - לעמודות יש אופקי
paddingכדי ליצור את המרזבים בין עמודות בודדות, עם זאת, ניתן להסיר אתmarginהשורותpaddingומעמודות עם.no-guttersה-.row. - כדי להפוך את הרשת למגיבה, ישנן חמש נקודות עצירה לרשת, אחת לכל נקודת עצירה מגיבה : כל נקודות השבירה (קטנות במיוחד), קטנות, בינוניות, גדולות וגדולות במיוחד.
- נקודות עצירה של רשת מבוססות על שאילתות מדיה ברוחב מינימלי, כלומר הן חלות על נקודת עצירה אחת ועל כל אלו שמעליה (למשל,
.col-sm-4חלות על התקנים קטנים, בינוניים, גדולים וגדולים במיוחד, אך לא עלxsנקודת השבירה הראשונה). - אתה יכול להשתמש במחלקות רשת מוגדרות מראש (כמו
.col-4) או Sass mixins עבור סימון סמנטי יותר.
היו מודעים למגבלות ולבאגים סביב flexbox , כמו חוסר היכולת להשתמש ברכיבי HTML מסוימים בתור מיכלי flex .
בעוד Bootstrap משתמש ב- ems או rems להגדרת רוב הגדלים, pxs משמשים לנקודות שבירה של רשת ורוחב מיכל. הסיבה לכך היא שרוחב יציאת התצוגה הוא בפיקסלים ואינו משתנה בהתאם לגודל הגופן .
ראה כיצד היבטים של מערכת הרשת Bootstrap פועלים על פני מכשירים מרובים עם טבלה שימושית.
| קטן במיוחד <576 פיקסלים |
קטן ≥576 פיקסלים |
בינוני ≥768 פיקסלים |
גדול ≥992 פיקסלים |
גדול במיוחד ≥1200 פיקסלים |
|
|---|---|---|---|---|---|
| רוחב מיכל מקסימלי | אין (אוטומטי) | 540 פיקסלים | 720 פיקסלים | 960 פיקסלים | 1140 פיקסלים |
| קידומת כיתה | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # עמודות | 12 | ||||
| רוחב מרזב | 30 פיקסלים (15 פיקסלים בכל צד של עמודה) | ||||
| ניתן לקן | כן | ||||
| סדר עמודות | כן | ||||
השתמש במחלקות עמודות ספציפיות לנקודת עצירה עבור גודל עמודות קל ללא מחלקה ממוספרת מפורשת כמו .col-sm-6.
לדוגמה, הנה שתי פריסות רשת החלות על כל מכשיר ונקודת מבט, מ xs-עד xl. הוסף כל מספר של מחלקות ללא יחידה עבור כל נקודת שבירה שאתה צריך וכל עמודה תהיה באותו רוחב.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>ניתן לחלק עמודות ברוחב שווה למספר שורות, אבל היה באג ב-Safari flexbox שמנע מזה לעבוד ללא מפורש flex-basisאו border. ישנן דרכים לעקיפת הבעיה עבור גרסאות דפדפן ישנות יותר, אך הן לא אמורות להיות נחוצות אם אתה מעודכן.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>פריסה אוטומטית עבור עמודות רשת flexbox פירושה גם שאתה יכול להגדיר את הרוחב של עמודה אחת ולשנות את הגודל של עמודות האחים סביבה באופן אוטומטי. אתה יכול להשתמש במחלקות רשת מוגדרות מראש (כפי שמוצג להלן), שילובי רשת או רוחבים מוטבעים. שימו לב שגודל העמודות האחרות ישתנו ללא קשר לרוחב העמודה המרכזית.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>השתמש col-{breakpoint}-autoבמחלקות כדי להתאים עמודות בהתאם לרוחב הטבעי של התוכן שלהן.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>צור עמודות ברוחב שווה המשתרעות על פני שורות מרובות על ידי הוספת .w-100עמודות היכן שברצונך שהעמודות יתפרקו לשורה חדשה. הפוך את ההפסקות לרספונסיביות על ידי ערבוב .w-100עם כמה כלי עזר לתצוגה מגיבה .
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>הרשת של Bootstrap כוללת חמש שכבות של מחלקות מוגדרות מראש לבניית פריסות רספונסיביות מורכבות. התאם אישית את גודל העמודות שלך במכשירים קטנים במיוחד, קטנים, בינוניים, גדולים או גדולים במיוחד לפי ראות עיניך.
עבור רשתות זהות מהמכשיר הקטן ביותר לגדול ביותר, השתמש במחלקות .colו .col-*. ציין מחלקה ממוספרת כאשר אתה צריך עמודה בגודל במיוחד; אחרת, אל תהסס לדבוק ב .col.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>באמצעות קבוצה אחת של .col-sm-*מחלקות, אתה יכול ליצור מערכת גריד בסיסית שמתחילה בערימה לפני שהופכת אופקית עם נקודת השבירה הקטנה ( sm).
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>לא רוצה שהעמודות שלך פשוט ייערמו בכמה שכבות רשת? השתמש בשילוב של מחלקות שונות עבור כל שכבה לפי הצורך. ראה את הדוגמה למטה כדי לקבל מושג טוב יותר על איך הכל עובד.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>השתמש בכלי עזר ליישור flexbox ליישור עמודות אנכית ואופקית.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div><div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>ניתן להסיר את המרזבים בין העמודות במחלקות הרשת המוגדרות מראש שלנו באמצעות .no-gutters. זה מסיר את ה- margins השליליים מהעמודות .rowהאופקיות paddingמכל עמודות הילדים המיידיות.
להלן קוד המקור ליצירת הסגנונות הללו. שים לב שעקיפות עמודות מגוונות רק לעמודות הבתים הראשונות וממוקדות באמצעות בורר התכונות . למרות שזה יוצר בורר ספציפי יותר, עדיין ניתן להתאים את ריפוד העמודות עם כלי עזר לרווחים .
זקוק לעיצוב מקצה לקצה? זרוק את ההורה .containerאו .container-fluid.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}בפועל, כך זה נראה. שים לב שאתה יכול להמשיך להשתמש בזה עם כל שאר מחלקות הרשת המוגדרות מראש (כולל רוחבי עמודות, שכבות תגובה, הזמנות מחדש ועוד).
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>אם יותר מ-12 עמודות ממוקמות בשורה בודדת, כל קבוצה של עמודות נוספות תתגלגל, כיחידה אחת, על שורה חדשה.
מאז 9 + 4 = 13 > 12, div זה ברוחב 4 עמודות נכרך על שורה חדשה כיחידה אחת רציפה.
העמודות הבאות ממשיכות לאורך הקו החדש.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>שבירת עמודות לשורה חדשה ב-flexbox דורשת פריצה קטנה: הוסף אלמנט עם width: 100%היכן שתרצה לעטוף את העמודות שלך לשורה חדשה. בדרך כלל זה מושג עם מספר .rows, אבל לא כל שיטת יישום יכולה להסביר זאת.
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>אתה יכול גם להחיל הפסקה זו בנקודות שבירה ספציפיות עם כלי העזר לתצוגה הרספונסיבית שלנו .
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>השתמש .order-בשיעורים לשליטה בסדר החזותי של התוכן שלך. מחלקות אלו מגיבות, כך שתוכל להגדיר את orderנקודת הפסקה (למשל, .order-1.order-md-2). כולל תמיכה 1לכל 12חמש שכבות הרשת.
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>יש גם רספונסיביות .order-firstומחלקות .order-lastשמשנות את orderהרכיב על ידי החלת order: -1ו- order: 13( order: $columns + 1), בהתאמה. ניתן גם לערבב שיעורים אלו עם .order-*הכיתות הממוספרות לפי הצורך.
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>אתה יכול לקזז את עמודות הרשת בשתי דרכים: .offset-מחלקות הרשת הרספונסיביות שלנו וכלי השירות שלנו לשוליים . מחלקות רשת מותאמות לעמודות בעוד השוליים שימושיים יותר עבור פריסות מהירות שבהן רוחב ההיסט משתנה.
העבר עמודות ימינה באמצעות .offset-md-*מחלקות. מחלקות אלו מגדילות את השוליים השמאליים של עמודה לפי *עמודות. לדוגמה, .offset-md-4עובר .col-md-4על פני ארבע עמודות.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>בנוסף לניקוי העמודות בנקודות שבירה מגיבות, ייתכן שיהיה עליך לאפס קיזוז. ראה זאת בפעולה בדוגמה של הרשת .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>עם המעבר ל-flexbox ב-v4, אתה יכול להשתמש בכלי עזר שוליים כמו .mr-autoלהרחיק עמודות אחים זה מזה.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>כדי לקנן את התוכן שלך עם רשת ברירת המחדל, הוסף קבוצה חדשה .rowוקבוצה של .col-sm-*עמודות בתוך עמודה קיימת .col-sm-*. שורות מקוננות צריכות לכלול קבוצה של עמודות שמצטברות ל-12 או פחות (אין צורך להשתמש בכל 12 העמודות הזמינות).
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>בעת שימוש בקובצי המקור Sass של Bootstrap, יש לך אפשרות להשתמש במשתנים ובמיקסים של Sass כדי ליצור פריסות עמוד מותאמות אישית, סמנטיות ומגוונות. מחלקות הרשת המוגדרות מראש שלנו משתמשות באותם משתנים ושילובים כדי לספק חבילה שלמה של מחלקות מוכנות לשימוש לפריסות תגובה מהירות.
משתנים ומפות קובעים את מספר העמודות, רוחב המרזב ונקודת שאילתת המדיה שבה מתחילים עמודות צפות. אנו משתמשים בהם כדי ליצור את מחלקות הרשת המוגדרות מראש שתועדו לעיל, כמו גם עבור המיקסינים המותאמים אישית המפורטים להלן.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);Mixins משמשים בשילוב עם משתני הרשת כדי ליצור CSS סמנטי עבור עמודות רשת בודדות.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);אתה יכול לשנות את המשתנים לערכים המותאמים אישית שלך, או פשוט להשתמש במיקסים עם ערכי ברירת המחדל שלהם. הנה דוגמה לשימוש בהגדרות ברירת המחדל ליצירת פריסה של שתי עמודות עם פער ביניהן.
.example-container {
width: 800px;
@include make-container();
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>באמצעות המשתנים והמפות המובנים ברשת Sass, ניתן להתאים אישית לחלוטין את מחלקות הרשת המוגדרות מראש. שנה את מספר השכבות, את ממדי שאילתת המדיה ואת רוחבי המכולה - ואז הידור מחדש.
ניתן לשנות את מספר עמודות הרשת באמצעות משתני Sass. $grid-columnsמשמש ליצירת הרוחב (באחוזים) של כל עמודה בודדת תוך מתן $grid-gutter-widthאפשרות לרוחבים ספציפיים לנקודת שבירה המחולקים באופן שווה לרוחב padding-leftולמרזבי padding-rightהעמודה.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;מעבר לעמודות עצמן, תוכל גם להתאים אישית את מספר שכבות הרשת. אם היית רוצה רק ארבע שכבות רשת, היית מעדכן את ה- $grid-breakpointsו $container-max-widthsלמשהו כזה:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);בעת ביצוע שינויים כלשהם במשתני או במפות של Sass, תצטרך לשמור את השינויים ולהרכיב מחדש. פעולה זו תפיק קבוצה חדשה לגמרי של מחלקות רשת מוגדרות מראש עבור רוחבי עמודות, קיזוזים וסדר. כלי עזר לניראות רספונסיביים יעודכנו גם כדי להשתמש בנקודות השבירה המותאמות אישית. הקפד להגדיר ערכי רשת ב px(לא rem, emאו %).