Εμπορευματοκιβώτια
Τα κοντέινερ είναι ένα θεμελιώδες δομικό στοιχείο του Bootstrap που περιέχει, επικαλύπτει και ευθυγραμμίζει το περιεχόμενό σας σε μια δεδομένη συσκευή ή θύρα προβολής.
Πώς λειτουργούν
Τα κοντέινερ είναι το πιο βασικό στοιχείο διάταξης στο Bootstrap και απαιτούνται κατά τη χρήση του προεπιλεγμένου συστήματος πλέγματος . Τα δοχεία χρησιμοποιούνται για να περιέχουν, να επικαλύπτουν και (μερικές φορές) να κεντράρουν το περιεχόμενο μέσα τους. Ενώ τα δοχεία μπορούν να είναι ένθετα, οι περισσότερες διατάξεις δεν απαιτούν ένθετο δοχείο.
Το Bootstrap έρχεται με τρία διαφορετικά δοχεία:
.container
, το οποίο ορίζει έναmax-width
σε κάθε σημείο διακοπής απόκρισης.container-fluid
, το οποίο βρίσκεταιwidth: 100%
σε όλα τα σημεία διακοπής.container-{breakpoint}
, το οποίο είναιwidth: 100%
μέχρι το καθορισμένο σημείο διακοπής
Ο παρακάτω πίνακας δείχνει πώς max-width
συγκρίνεται κάθε κοντέινερ με το αρχικό .container
και .container-fluid
σε κάθε σημείο διακοπής.
Δείτε τα σε δράση και συγκρίνετε τα στο παράδειγμά μας Grid .
Εξαιρετικά μικρό <576 px |
Μικρό ≥576 px |
Μεσαίο ≥768 px |
Μεγάλο ≥992 px |
X-Large ≥1200 px |
XX-Large ≥1400 px |
|
---|---|---|---|---|---|---|
.container |
100% | 540 εικονοστοιχεία | 720 εικονοστοιχεία | 960 εικονοστοιχεία | 1140 εικονοστοιχεία | 1320 εικονοστοιχεία |
.container-sm |
100% | 540 εικονοστοιχεία | 720 εικονοστοιχεία | 960 εικονοστοιχεία | 1140 εικονοστοιχεία | 1320 εικονοστοιχεία |
.container-md |
100% | 100% | 720 εικονοστοιχεία | 960 εικονοστοιχεία | 1140 εικονοστοιχεία | 1320 εικονοστοιχεία |
.container-lg |
100% | 100% | 100% | 960 εικονοστοιχεία | 1140 εικονοστοιχεία | 1320 εικονοστοιχεία |
.container-xl |
100% | 100% | 100% | 100% | 1140 εικονοστοιχεία | 1320 εικονοστοιχεία |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320 εικονοστοιχεία |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Προεπιλεγμένο κοντέινερ
Η προεπιλεγμένη .container
κλάση μας είναι ένα κοντέινερ σταθερού πλάτους με απόκριση, που σημαίνει ότι οι max-width
αλλαγές του σε κάθε σημείο διακοπής.
<div class="container">
<!-- Content here -->
</div>
Αποκριτικά δοχεία
Τα αποκριτικά κοντέινερ σάς επιτρέπουν να καθορίσετε μια κλάση που έχει πλάτος 100% μέχρι να επιτευχθεί το καθορισμένο σημείο διακοπής, μετά από το οποίο εφαρμόζουμε max-width
s για καθένα από τα υψηλότερα σημεία διακοπής. Για παράδειγμα, .container-sm
είναι 100% πλάτος για να ξεκινήσε�� μέχρι να φτάσει το sm
σημείο διακοπής, όπου θα κλιμακωθεί με md
, lg
, xl
και xxl
.
<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>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Δοχεία υγρών
Χρησιμοποιήστε .container-fluid
το για ένα κοντέινερ πλήρους πλάτους, που εκτείνεται σε όλο το πλάτος της θύρας προβολής.
<div class="container-fluid">
...
</div>
Sass
Όπως φαίνεται παραπάνω, το Bootstrap δημιουργεί μια σειρά από προκαθορισμένες κλάσεις κοντέινερ για να σας βοηθήσει να δημιουργήσετε τις διατάξεις που επιθυμείτε. Μπορείτε να προσαρμόσετε αυτές τις προκαθορισμένες κατηγορίες κοντέινερ τροποποιώντας τον χάρτη Sass (που βρίσκεται στο _variables.scss
) που τις τροφοδοτεί:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Εκτός από την προσαρμογή του Sass, μπορείτε επίσης να δημιουργήσετε τα δικά σας κοντέινερ με τη μίξη Sass.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Για περισσότερες πληροφορίες και παραδείγματα σχετικά με τον τρόπο τροποποίησης των χαρτών και των μεταβλητών Sass, ανατρέξτε στην ενότητα Sass της τεκμηρίωσης Grid .