נקודות שבירה
נקודות פריצה הן רוחבים הניתנים להתאמה אישית שקובעים כיצד הפריסה הרספונסיבית שלך מתנהגת על פני גדלי מכשיר או נקודת מבט ב-Bootstrap.
מושגי ליבה
-
נקודות שבירה הן אבני הבניין של עיצוב רספונסיבי. השתמש בהם כדי לשלוט מתי ניתן להתאים את הפריסה שלך לאזור תצוגה מסוים או בגודל מכשיר מסוים.
-
השתמש בשאילתות מדיה כדי לעצב את ה-CSS שלך לפי נקודת שבירה. שאילתות מדיה הן תכונה של CSS המאפשרת לך להחיל סגנונות מותנה על סמך קבוצה של פרמטרים של דפדפן ומערכת הפעלה. אנו משתמשים לרוב
min-width
בשאילתות המדיה שלנו. -
קודם כל, עיצוב רספונסיבי הוא המטרה. ה-CSS של Bootstrap שואף ליישם את המינימום של סגנונות כדי לגרום לפריסה לעבוד בנקודת הפריצה הקטנה ביותר, ולאחר מכן שכבות על סגנונות כדי להתאים את העיצוב הזה למכשירים גדולים יותר. זה מייעל את ה-CSS שלך, משפר את זמן העיבוד ומספק חוויה נהדרת למבקרים שלך.
נקודות שבירה זמינות
Bootstrap כולל שש נקודות עצירה ברירת מחדל, המכונה לפעמים שכבות רשת , לבנייה בתגובה. ניתן להתאים אישית את נקודות השבירה האלה אם אתה משתמש בקובצי המקור של Sass.
נקודת שבירה | תיקון כיתה | ממדים |
---|---|---|
X-Small | אף אחד | <576 פיקסלים |
קָטָן | sm |
≥576 פיקסלים |
בינוני | md |
≥768 פיקסלים |
גָדוֹל | lg |
≥992 פיקסלים |
גדול מאוד | xl |
≥1200 פיקסלים |
גדול במיוחד במיוחד | xxl |
≥1400 פיקסלים |
כל נקודת שבירה נבחרה כדי להחזיק בנוחות מיכלים שרוחבם הוא כפולות של 12. נקודות שבירה מייצגות גם תת-קבוצה של גדלי מכשירים נפוצים וממדים של נקודת מבט - הם לא מכוונים ספציפית לכל מקרה שימוש או מכשיר. במקום זאת, הטווחים מספקים בסיס חזק ועקבי שאפשר לבנות עליו כמעט לכל מכשיר.
נקודות הפסקה הללו ניתנות להתאמה אישית באמצעות Sass - תמצאו אותן במפת Sass בגיליון _variables.scss
הסגנונות שלנו.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
למידע נוסף ודוגמאות כיצד לשנות את המפות והמשתנים של Sass שלנו, עיין בסעיף Sass בתיעוד ה-Grid .
שאילתות מדיה
מכיוון ש-Bootstrap פותח כדי להיות נייד תחילה, אנו משתמשים בקומץ של שאילתות מדיה כדי ליצור נקודות שבירה הגיוניות עבור הפריסות והממשקים שלנו. נקודות עצירה אלו מבוססות לרוב על רוחב מינימלי של יציאת תצוגה ומאפשרות לנו להגדיל אלמנטים כאשר נקודת התצוגה משתנה.
רוחב מינימלי
Bootstrap משתמשת בעיקר בטווחי שאילתות המדיה הבאים - או נקודות עצירה - בקובצי המקור של Sass עבור הפריסה, מערכת הרשת והרכיבים שלנו.
// Source mixins
// 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) { ... }
@include media-breakpoint-up(xxl) { ... }
// Usage
// 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;
}
}
המיקסים האלה של Sass מתרגמים ב-CSS הקומפילד שלנו באמצעות הערכים המוצהרים במשתני Sass שלנו. לדוגמה:
// X-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) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
רוחב מקסימלי
מדי פעם אנו משתמשים בשאילתות מדיה שהולכות בכיוון השני (בגודל המסך הנתון או קטן יותר ):
// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
המיקסים האלה לוקחים את נקודות השבירה המוצהרות האלה, מפחיתים .02px
מהן ומשתמשים בהן max-width
כערכים שלנו. לדוגמה:
// `xs` returns only a ruleset and no media query
// ... { ... }
// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
min-
ויציאותmax-
התצוגה עם רוחב חלקי (שיכול להתרחש בתנאים מסוימים במכשירים בעלי dpi גבוה, למשל) על ידי שימוש בערכים עם דיוק גבוה יותר.
נקודת שבירה בודדת
ישנן גם שאילתות מדיה ומיקסינים למיקוד לפלח בודד של גדלי מסך תוך שימוש ברוחב נקודת השבירה המינימלי והמקסימלי.
@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) { ... }
@include media-breakpoint-only(xxl) { ... }
לדוגמה, @include media-breakpoint-only(md) { ... }
הרצון יגרום ל:
@media (min-width: 768px) and (max-width: 991.98px) { ... }
בין נקודות שבירה
באופן דומה, שאילתות מדיה עשויות להשתרע על פני רוחב נקודות שבירה מרובים:
@include media-breakpoint-between(md, xl) { ... }
מה שמביא ל:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }