סקירה כללית
רכיבים ואפשרויות לפריסת פרויקט ה-Bootstrap שלך, כולל עטיפת מיכלים, מערכת רשת חזקה, אובייקט מדיה גמיש ושיעורי עזר מגיבים.
מיכלים
קונטיינרים הם אלמנט הפריסה הבסיסי ביותר ב-Bootstrap והם נדרשים בעת שימוש במערכת ברירת המחדל שלנו . מיכלים משמשים להכיל, לרפד ו(לפעמים) למרכז את התוכן בתוכם. אמנם ניתן לקנן מיכלים, אך רוב הפריסות אינן דורשות מיכל מקונן.
Bootstrap מגיע עם שלושה מיכלים שונים:
.container
, שקובע amax-width
בכל נקודת שבירה מגיבה.container-fluid
, שזהwidth: 100%
בכל נקודות השבירה.container-{breakpoint}
, שזהwidth: 100%
עד לנקודת הפסיקה שצוינה
הטבלה שלהלן ממחישה כיצד כל מיכל max-width
בהשוואה למקור .container
ולרוחב .container-fluid
כל נקודת שבירה.
ראה אותם בפעולה והשווה אותם בדוגמה של Grid שלנו .
קטן במיוחד <576 פיקסלים |
קטן ≥576 פיקסלים |
בינוני ≥768 פיקסלים |
גדול ≥992 פיקסלים |
גדול במיוחד ≥1200 פיקסלים |
|
---|---|---|---|---|---|
.container |
100% | 540 פיקסלים | 720 פיקסלים | 960 פיקסלים | 1140 פיקסלים |
.container-sm |
100% | 540 פיקסלים | 720 פיקסלים | 960 פיקסלים | 1140 פיקסלים |
.container-md |
100% | 100% | 720 פיקסלים | 960 פיקסלים | 1140 פיקסלים |
.container-lg |
100% | 100% | 100% | 960 פיקסלים | 1140 פיקסלים |
.container-xl |
100% | 100% | 100% | 100% | 1140 פיקסלים |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
הכל באחד
מחלקת ברירת המחדל שלנו .container
היא מיכל מגיב ברוחב קבוע, כלומר max-width
השינויים שלו בכל נקודת שבירה.
<div class="container">
<!-- Content here -->
</div>
נוֹזֵל
השתמש .container-fluid
עבור מיכל ברוחב מלא, המשתרע על כל רוחב יציאת התצוגה.
<div class="container-fluid">
...
</div>
תגובה
קונטיינרים רספונסיביים הם חדשים ב-Bootstrap v4.4. הם מאפשרים לך לציין מחלקה ברוחב 100% עד שמגיעים לנקודת השבירה שצוינה, ולאחר מכן אנו מיישמים max-width
s עבור כל אחת מנקודות השבירה הגבוהות יותר. לדוגמה, .container-sm
הוא ברוחב של 100% כדי להתחיל עד sm
הגעה לנקודת השבירה, שם הוא יגדל עם md
, lg
, ו xl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
נקודות שבירה רספונסיביות
מכיוון ש-Bootstrap פותח כדי להיות נייד תחילה, אנו משתמשים בקומץ של שאילתות מדיה כדי ליצור נקודות שבירה הגיוניות עבור הפריסות והממשקים שלנו. נקודות עצירה אלו מבוססות לרוב על רוחב מינימלי של יציאת תצוגה ומאפשרות לנו להגדיל אלמנטים כאשר נקודת התצוגה משתנה.
Bootstrap משתמשת בעיקר בטווחי שאילתות המדיה הבאים - או נקודות עצירה - בקובצי המקור של Sass עבור הפריסה, מערכת הרשת והרכיבים שלנו.
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
מכיוון שאנו כותבים את ה-CSS המקור שלנו ב-Sass, כל שאילתות המדיה שלנו זמינות באמצעות מיקסים של Sass:
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
מדי פעם אנו משתמשים בשאילתות מדיה שהולכות בכיוון השני (בגודל המסך הנתון או קטן יותר ):
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
min-
ויציאותmax-
התצוגה עם רוחב חלקי (שיכול להתרחש בתנאים מסוימים במכשירים בעלי dpi גבוה, למשל) על ידי שימוש בערכים עם דיוק גבוה יותר עבור השוואות אלה .
שוב, שאילתות מדיה אלו זמינות גם דרך מיקסים של Sass:
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
ישנן גם שאילתות מדיה ומיקסינים למיקוד לפלח בודד של גדלי מסך תוך שימוש ברוחב נקודת השבירה המינימלי והמקסימלי.
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
שאילתות מדיה אלו זמינות גם דרך מיקסים של Sass:
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
באופן דומה, שאילתות מדיה עשויות להשתרע על פני רוחב נקודות שבירה מרובים:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
המיקסין של Sass למיקוד לאותו טווח גודל מסך יהיה:
@include media-breakpoint-between(md, xl) { ... }
Z-index
מספר רכיבי Bootstrap משתמשים z-index
ב-, מאפיין ה-CSS שעוזר לשלוט בפריסה על ידי מתן ציר שלישי לסידור תוכן. אנו משתמשים בסולם z-index ברירת מחדל ב-Bootstrap שתוכנן לניווט נכון בשכבות, עצות כלים ופופ-אוברים, מודלים ועוד.
ערכים גבוהים אלה מתחילים במספר שרירותי, גבוה וספציפי מספיק כדי למנוע התנגשויות באופן אידיאלי. אנו זקוקים לסט סטנדרטי של אלה על פני רכיבי השכבות שלנו - טיפים לכלים, פופ-אוברים, סרגלי ניווט, תפריטים נפתחים, מודלים - כדי שנוכל להיות עקביים באופן סביר בהתנהגויות. אין סיבה שלא יכולנו להשתמש ב- 100
+ או ב- 500
+.
אנחנו לא מעודדים התאמה אישית של ערכים בודדים אלה; אם תשנה אחד, סביר להניח שתצטרך לשנות את כולם.
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
כדי לטפל בגבולות חופפים בתוך רכיבים (למשל, לחצנים וכניסות בקבוצות קלט), אנו משתמשים בערכים חד ספרתיים z-index
נמוכים של 1
, 2
, 3
ולברירת מחדל, מצבי ריחוף ופעילים. ברחף/מיקוד/פעיל, אנו מביאים אלמנט מסוים לקדמת הבמה עם z-index
ערך גבוה יותר כדי להראות את הגבול שלו מעל האלמנטים האחים.