מערכת רשת
השתמש ברשת ה-flexbox העוצמתית שלנו לנייד-ראשון כדי לבנות פריסות מכל הצורות והגדלים הודות למערכת שתים עשרה עמודות, שש שכבות תגובה ברירת מחדל, משתני Sass ו-mixins ועשרות מחלקות מוגדרות מראש.
דוגמא
מערכת הרשת של Bootstrap משתמשת בסדרה של מיכלים, שורות ועמודות כדי לפרוס וליישר תוכן. זה בנוי עם flexbox והוא מגיב במלואו. להלן דוגמה והסבר מעמיק לאופן שבו מערכת הרשת מתחברת.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
הדוגמה שלמעלה יוצרת שלוש עמודות ברוחב שווה בכל המכשירים ויציאות התצוגה באמצעות מחלקות הרשת המוגדרות מראש שלנו. העמודות הללו ממורכזות בעמוד עם האב .container
.
איך זה עובד
אם נפרט את זה, הנה איך מערכת הרשת מתחברת:
-
הרשת שלנו תומכת בשש נקודות שבירה מגיבות . נקודות עצירה מבוססות על
min-width
שאילתות מדיה, כלומר הן משפיעות על נקודת הפריצה ועל כל אלו שמעליה (למשל,.col-sm-4
חלות עלsm
,md
,lg
,xl
וxxl
). זה אומר שאתה יכול לשלוט בגודל ובהתנהגות של מיכל ועמודות לפי כל נקודת שבירה. -
מיכלים ממרכזים ומרופדים אופקית את התוכן שלך. השתמש
.container
עבור רוחב פיקסל מגיב,.container-fluid
עבורwidth: 100%
כל יציאות התצוגה וההתקנים, או מיכל מגיב (למשל,.container-md
) עבור שילוב של רוחב נוזל ופיקסלים. -
שורות הן עטיפות עבור עמודות. לכל עמוד יש אופקי
padding
(נקרא מרזב) לשליטה על הרווח ביניהם. לאחרpadding
מכן מתמודדים עם זה בשורות עם שוליים שליליים כדי להבטיח שהתוכן בעמודות שלך מיושר חזותית בצד שמאל. שורות תומכות גם במחלקות שינוי כדי להחיל באופן אחיד גודל עמודות ומחלקות מרזב כדי לשנות את המרווח של התוכן שלך. -
עמודות גמישות להפליא. ישנן 12 עמודות תבנית זמינות בכל שורה, המאפשרות לך ליצור שילובים שונים של אלמנטים המשתרעים על כל מספר של עמודות. מחלקות עמודות מציינות את מספר עמודות התבנית שיש להרחיב (למשל, טווח
col-4
ארבע).width
s נקבעים באחוזים כך שתמיד יהיה לך אותו גודל יחסי. -
מרזבים גם מגיבים וניתנים להתאמה אישית. שיעורי מרזב זמינים בכל נקודות השבירה, עם כל אותם גדלים כמו השוליים והמרווחים שלנו . שנה מרזבים אופקיים עם
.gx-*
מחלקות, מרזבים אנכיים עם.gy-*
, או כל המרזבים עם.g-*
מחלקות..g-0
זמין גם להסרת מרזבים. -
משתנים, מפות ומיקסינים של Sass מפעילים את הרשת. אם אינך רוצה להשתמש במחלקות הרשת המוגדרות מראש ב-Bootstrap, אתה יכול להשתמש ב- Sass המקור של הרשת שלנו כדי ליצור משלך עם סימון סמנטי יותר. אנו כוללים גם כמה מאפייני CSS מותאמים אישית כדי לצרוך משתני Sass אלה לגמיש��ת רבה עוד יותר עבורך.
היו מודעים למגבלות ולבאגים סביב flexbox , כמו חוסר היכולת להשתמש ברכיבי HTML מסוימים בתור מיכלי flex .
אפשרויות רשת
מערכת הרשת של Bootstrap יכולה להתאים לכל שש נקודות השבירה המוגדרות כברירת מחדל, וכל נקודות הפסקה שתתאים אישית. שש שכבות ברירת המחדל של הרשת הן כדלקמן:
- קטן במיוחד (xs)
- קטן (SM)
- בינוני (md)
- גדול (לג)
- גדול במיוחד (xl)
- גדול במיוחד (xxl)
כפי שצוין לעיל, לכל אחת מנקודות השבירה הללו יש מיכל משלה, קידומת מחלקה ייחודית ומשתנים. כך משתנה הרשת בנקודות השבירה האלה:
xs <576px |
sm ≥576 פיקסלים |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
מְכוֹלָהmax-width |
אין (אוטומטי) | 540 פיקסלים | 720 פיקסלים | 960 פיקסלים | 1140 פיקסלים | 1320 פיקסלים |
קידומת כיתה | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# עמודות | 12 | |||||
רוחב מרזב | 1.5 רמ (.75 רמ משמאל וימין) | |||||
מרזבים בהתאמה אישית | כן | |||||
ניתן לקן | כן | |||||
סדר עמודות | כן |
פריסה אוטומטית של עמודות
השתמש במחלקות עמודות ספציפיות לנקודת עצירה עבור גודל עמודות קל ללא מחלקה ממוספרת מפורשת כמו .col-sm-6
.
ברוחב שווה
לדוגמה, הנה שתי פריסות רשת החלות על כל מכשיר ונקודת מבט, מ xs
-עד xxl
. הוסף כל מספר של מחלקות ללא יחידה עבור כל נקודת שבירה שאתה צריך וכל עמודה תהיה באותו רוחב.
<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>
הגדרת רוחב עמודה אחת
פריסה אוטומטית עבור עמודות רשת 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>
שיעורים רספונסיביים
הרשת של Bootstrap כוללת שש שכבות של מחלקות מוגדרות מראש לבניית פריסות רספונסיביות מורכבות. התאם אישית את גודל העמודות שלך במכשירים קטנים במיוחד, קטנים, בינוניים, גדולים או גדולים במיוחד לפי ראות עיניך.
כל נקודות השבירה
עבור רשתות זהות מהמכשיר הקטן ביותר לגדול ביותר, השתמש במחלקות .col
ו .col-*
. ציין מחלקה ממוספרת כאשר אתה צריך עמודה בגודל במיוחד; אחרת, אל תהסס לדבוק ב .col
.
<div class="container">
<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>
</div>
מוערמים לאופקי
באמצעות קבוצה אחת של .col-sm-*
מחלקות, אתה יכול ליצור מערכת גריד בסיסית שמתחילה בערימה והופכת אופקית בנקודת השבירה הקטנה ( sm
).
<div class="container">
<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>
</div>
לערבב ולהתאים
לא רוצה שהעמודות שלך פשוט ייערמו בכמה שכבות רשת? השתמש בשילוב של מחלקות שונות עבור כל שכבה לפי הצורך. ראה את הדוגמה למטה כדי לקבל מושג טוב יותר על איך הכל עובד.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.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>
</div>
עמודות שורה
השתמש .row-cols-*
בשיעורים הרספונסיביים כדי להגדיר במהירות את מספר העמודות שיציגו בצורה הטובה ביותר את התוכן והפריסה שלך. בעוד מחלקות רגילות .col-*
חלות על העמודות הבודדות (למשל, .col-md-4
), מחלקות עמודות השורות מוגדרות על האב .row
כברירת מחדל עבור עמודות כלולים. עם .row-cols-auto
אתה יכול לתת לעמודים את הרוחב הטבעי שלהם.
השתמש במחלקות עמודות שורות אלה כדי ליצור במהירות פריסות רשת בסיסיות או כדי לשלוט בפריסות הכרטיסים שלך ולעקוף בעת הצורך ברמת העמודה.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
</div>
</div>
אתה יכול גם להשתמש במיקסין Sass הנלווה row-cols()
,:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
קינון
כדי לקנן את התוכן שלך עם רשת ברירת המחדל, הוסף קבוצה חדשה .row
וקבוצה של .col-sm-*
עמודות בתוך עמודה קיימת .col-sm-*
. שורות מקוננות צריכות לכלול קבוצה של עמודות שמצטברות ל-12 או פחות (אין צורך להשתמש בכל 12 העמודות הזמינות).
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="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>
</div>
סאס
בעת שימוש בקובצי המקור Sass של Bootstrap, יש לך אפשרות להשתמש במשתנים ובמיקסים של Sass כדי ליצור פריסות עמוד מותאמות אישית, סמנטיות ומגוונות. מחלקות הרשת המוגדרות מראש שלנו משתמשות באותם משתנים ושילובים כדי לספק חבילה שלמה של מחלקות מוכנות לשימוש לפריסות תגובה מהירות.
משתנים
משתנים ומפות קובעים את מספר העמודות, רוחב המרזב ונקודת שאילתת המדיה שבה מתחילים עמודות צפות. אנו משתמשים בהם כדי ליצור את מחלקות הרשת המוגדרות מראש שתועדו לעיל, כמו גם עבור המיקסינים המותאמים אישית המפורטים להלן.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
מיקסינס
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();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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 {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.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
הגדרת הרוחב עבור מרזבי העמודות.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !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
או %
).