ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

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

Εμπορευματοκιβώτια

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

Το Bootstrap έρχεται με τρία διαφορετικά δοχεία:

• .container, το οποίο ορίζει ένα max-widthσε κάθε σημείο διακοπής απόκρισης
• .container-fluid, το οποίο βρίσκεται width: 100%σε όλα τα σημεία διακοπής
• .container-{breakpoint}, το οποίο είναι width: 100%μέχρι το καθορισμένο σημείο διακοπής

Ο παρακάτω πίνακας δείχνει πώς max-widthσυγκρίνεται κάθε κοντέινερ με το αρχικό .containerκαι .container-fluidσε κάθε σημείο διακοπής.

Δείτε τα σε δράση και συγκρίνετε τα στο παράδειγμά μας Grid .

Ολα σε ένα

Η προεπιλεγμένη .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 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) { ... }

// 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

Για άλλη μια φορά, αυτά τα ερωτήματα πολυμέσων είναι επίσης διαθέσιμα μέσω Sass mixins:

@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 mixins:

@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-δείκτης

Πολλά στοιχεία Bootstrap χρησιμοποιούν z-indexτην ιδιότητα CSS που βοηθά στον έλεγχο της διάταξης παρέχοντας έναν τρίτο άξονα για την τακτοποίηση περιεχομένου. Χρησιμοποιούμε μια προεπιλεγμένη κλίμακα z-index στο Bootstrap που έχει σχεδιαστεί για να στρώνει σωστά την πλοήγηση, τις συμβουλές εργαλείων και τα popover, τα modals και πολλά άλλα.

Αυτές οι υψηλότερες τιμές ξεκινούν από έναν αυθαίρετο αριθμό, αρκετά υψηλό και συγκεκριμένο ώστε ιδανικά να αποφεύγονται οι συγκρούσεις. Χρειαζόμαστε ένα τυπικό σύνολο από αυτά στα πολυεπίπεδα στοιχεία μας—συμβουλές εργαλείων, popovers, γραμμές πλοήγησης, αναπτυσσόμενα μενού, modals— ώστε να μπορούμε να είμαστε αρκετά συνεπείς στις συμπεριφορές. Δεν υπάρχει λόγος να μην μπορούσαμε να χρησιμοποιήσουμε 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τιμή για να δείξουμε τα σύνορά του πάνω από τα αδερφικά στοιχεία.