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

Πώς λειτουργούν

Τα κοντέινερ είναι το πιο βασικό στοιχείο διάταξης στο 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>

Αποκριτικά δοχεία

Τα αποκριτικά κοντέινερ σάς επιτρέπουν να καθορίσετε μια κλάση που έχει πλάτος 100% μέχρι να επιτευχθεί το καθορισμένο σημείο διακοπής, μετά από το οποίο εφαρμόζουμε max-widths για καθένα από τα υψηλότερα σημεία διακοπής. Για παράδειγμα, .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 .