ορια ΑΝΤΟΧΗΣ

Βασικές έννοιες

• Τα σημεία διακοπής είναι τα δομικά στοιχεία του σχεδιασμού με απόκριση. Χρησιμοποιήστε τα για να ελέγξετε πότε η διάταξή σας μπορεί να προσαρμοστεί σε ένα συγκεκριμένο παράθυρο προβολής ή μέγεθος συσκευής.

• Χρησιμοποιήστε ερωτήματα πολυμέσων για να δημιουργήσετε το CSS σας κατά σημείο διακοπής. Τα ερωτήματα πολυμέσων είναι μια δυνατότητα του CSS που σας επιτρέπει να εφαρμόζετε υπό όρους στυλ με βάση ένα σύνολο παραμέτρων προγράμματος περιήγησης και λειτουργικού συστήματος. Χρησιμοποιούμε πιο συχνά min-widthστα ερωτήματά μας για τα μέσα.

• Πρώτα από το κινητό, στόχος είναι ο σχεδιασμός με απόκριση. Το CSS του Bootstrap στοχεύει στην εφαρμογή του ελάχιστου στυλ για να κάνει μια διάταξη να λειτουργεί στο μικρότερο σημείο διακοπής και, στη συνέχεια, να στρώσει σε στυλ για να προσαρμόσει αυτή τη σχεδίαση για μεγαλύτερες συσκευές. Αυτό βελτιστοποιεί το CSS σας, βελτιώνει τον χρόνο απόδοσης και παρέχει μια εξαιρετική εμπειρία για τους επισκέπτες σας.

Διαθέσιμα σημεία διακοπής

Το Bootstrap περιλαμβάνει έξι προεπιλεγμένα σημεία διακοπής, τα οποία μερικές φορές αναφέρονται ως επίπεδα πλέγματος , για να δημιουργείται με απόκριση. Αυτά τα σημεία διακοπής μπορούν να προσαρμοστούν εάν χρησιμοποιείτε τα πηγαία αρχεία Sass.

Κάθε σημείο διακοπής επιλέχθηκε για να συγκρατεί άνετα κοντέινερ των οποίων τα πλάτη είναι πολλαπλάσια του 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;
  }
}

Αυτά τα mixins παίρνουν αυτά τα δηλωμένα σημεία διακοπής, .02pxτα αφαιρούν και τα χρησιμοποιούν ως max-widthτιμές μας. Για παράδειγμα:

// X-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) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

Ενιαίο σημείο διακοπής

Υπάρχουν επίσης ερωτήματα πολυμέσων και μίξεις για τη στόχευση ενός μεμονωμένου τμήματος μεγεθών οθόνης χρησιμοποιώντας το ελάχιστο και μέγιστο πλάτος σημείου διακοπής.

@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) { ... }