in English

סקירה כללית

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

מיכלים

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

Bootstrap מגיע עם שלושה מיכלים שונים:

  • .container, שקובע a max-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-widths עבור כל אחת מנקודות השבירה הגבוהות יותר. לדוגמה, .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ערך גבוה יותר כדי להראות את הגבול שלו מעל האלמנטים האחים.