Source

סקירה כללית

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

מיכלים

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

אמנם ניתן לקנן מיכלים, אך רוב הפריסות אינן דורשות מיכל מקונן.

<div class="container">
  <!-- Content here -->
</div>

השתמש .container-fluidעבור מיכל ברוחב מלא, המשתרע על כל רוחב יציאת התצוגה.

<div class="container-fluid">
  ...
</div>

נקודות שבירה רספונסיביות

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

Bootstrap משתמשת בעיקר בטווחי שאילתות המדיה הבאים - או נקודות עצירה - בקובצי המקור של Sass עבור הפריסה, מערכת הרשת והרכיבים שלנו.

// Extra small devices (portrait phones, less than 576px)
// No media query 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:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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) { ... }

ישנן גם שאילתות מדיה ומיקסינים למיקוד לפלח בודד של גדלי מסך תוך שימוש ברוחב נקודת השבירה המינימלי והמקסימלי.

// 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ערך גבוה יותר כדי להראות את הגבול שלו על פני מרכיבי האחים.