Σύστημα πλέγματος

Παράδειγμα

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

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

Πως δουλεύει

Αναλύοντας το, δείτε πώς συνδυάζεται το σύστημα πλέγματος:

• Το πλέγμα μας υποστηρίζει έξι σημεία διακοπής απόκρισης . Τα σημεία διακοπής βασίζονται σε min-widthερωτήματα πολυμέσων, που σημαίνει ότι επηρεάζουν αυτό το σημείο διακοπής και όλα αυτά που βρίσκονται πάνω από αυτό (π.χ. .col-sm-4ισχύει για sm, md, lg, xlκαι xxl). Αυτό σημαίνει ότι μπορείτε να ελέγξετε το μέγεθος και τη συμπεριφορά του κοντέινερ και της στήλης για κάθε σημείο διακοπής.

• Τα κοντέινερ κεντράρουν και τοποθετούν οριζόντια το περιεχόμενό σας. Χρησιμοποιήστε .containerτο για ένα αποκριτικό πλάτος εικονοστοιχείων, .container-fluidγια width: 100%όλες τις θύρες προβολής και τις συσκευές ή ένα αποκριτικό κοντέινερ (π.χ. .container-md) για έναν συνδυασμό πλάτους ρευστού και εικονοστοιχείων.

• Οι σειρές είναι περιτυλίγματα για στήλες. Κάθε στήλη έχει οριζόντια padding(που ονομάζεται υδρορροή) για τον έλεγχο του χώρου μεταξύ τους. Στη paddingσυνέχεια, αυτό αντισταθμίζεται στις σειρές με αρνητικά περιθώρια για να διασφαλιστεί ότι το περιεχόμενο στις στήλες σας είναι οπτικά ευθυγραμμισμένο στην αριστερή πλευρά. Οι σειρές υποστηρίζουν επίσης κατηγορίες τροποποιητών για την ομοιόμορφη εφαρμογή του μεγέθους στηλών και κλάσεων υδρορροής για αλλαγή της απόστασης του περιεχομένου σας.

• Οι στήλες είναι απίστευτα ευέλικτες. Υπάρχουν 12 στήλες προτύπων διαθέσιμες ανά σειρά, επιτρέποντάς σας να δημιουργήσετε διαφορετικούς συνδυασμούς στοιχείων που εκτείνονται σε οποιοδήποτε αριθμό στηλών. Οι τάξεις στηλών υποδεικνύουν τον αριθμό των στηλών προτύπου που θα εκτείνονται (π.χ. col-4εκτείνεται σε τέσσερα). widthΤα s ορίζονται σε ποσοστά, ώστε να έχετε πάντα το ίδιο σχετικό μέγεθος.

• Οι υδρορροές αποκρίνονται επίσης και προσαρμόζονται. Οι τάξεις υδρορροής είναι διαθέσιμες σε όλα τα σημεία διακοπής, με όλα τα ίδια μεγέθη με το περιθώριο και την απόσταση πλήρωσης . Αλλάξτε οριζόντιες υδρορροές με .gx-*κλάσεις, κάθετες υδρορροές με .gy-*ή όλες τις υδρορροές με .g-*κλάσεις. .g-0διατίθεται επίσης για την αφαίρεση υδρορροών.

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

Λάβετε υπόψη τους περιορισμούς και τα σφάλματα γύρω από το flexbox , όπως η αδυναμία χρήσης ορισμένων στοιχείων HTML ως flex κοντέινερ .

Επιλογές πλέγματος

Το σύστημα πλέγματος του Bootstrap μπορεί να προσαρμοστεί και στα έξι προεπιλεγμένα σημεία διακοπής και σε τυχόν σημεία διακοπής που προσαρμόζετε. Τα έξι προεπιλεγμένα επίπεδα πλέγματος είναι τα εξής:

• Εξαιρετικά μικρό (xs)
• Μικρό (sm)
• Μεσαίο (md)
• Μεγάλο (lg)
• Εξαιρετικά μεγάλο (xl)
• Εξαιρετικά πολύ μεγάλο (xxl)

Όπως σημειώθηκε παραπάνω, καθένα από αυτά τα σημεία διακοπής έχει το δικό του κοντέινερ, μοναδικό πρόθεμα κλάσης και τροποποιητές. Δείτε πώς αλλάζει το πλέγμα σε αυτά τα σημεία διακοπής:

Αυτόματη διάταξη στηλών

Χρησιμοποιήστε κατηγορίες στηλών για συγκεκριμένα σημεία διακοπής για εύκολο προσδιορισμό μεγέθους στηλών χωρίς ρητή αριθμημένη κλάση όπως .col-sm-6.

Ίσο πλάτος

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

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Ρύθμιση ενός πλάτους στήλης

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

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Περιεχόμενο μεταβλητού πλάτους

Χρησιμοποιήστε col-{breakpoint}-autoκλάσεις για το μέγεθος των στηλών με βάση το φυσικό πλάτος του περιεχομένου τους.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Ανταποκρινόμενες τάξεις

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

Όλα τα σημεία διακοπής

Για πλέγματα που είναι ίδια από τη μικρότερη συσκευή έως τη μεγαλύτερη, χρησιμοποιήστε τις κλάσεις .colκαι . .col-*Καθορίστε μια αριθμημένη κλάση όταν χρειάζεστε μια στήλη ειδικού μεγέθους. Διαφορετικά, μη διστάσετε να εμμείνετε στο .col.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Στοιβάζονται σε οριζόντια

Χρησιμοποιώντας ένα ενιαίο σύνολο .col-sm-*κλάσεων, μπορείτε να δημιουργήσετε ένα βασικό σύστημα πλέγματος που ξεκινάει στοιβαγμένο και γίνεται οριζόντιο στο μικρό σημείο διακοπής ( sm).

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Ανακατεψε και ταιριαξε

Δεν θέλετε οι στήλες σας απλώς να στοιβάζονται σε ορισμένες βαθμίδες πλέγματος; Χρησιμοποιήστε έναν συνδυασμό διαφορετικών κλάσεων για κάθε επίπεδο, όπως απαιτείται. Δείτε το παρακάτω παράδειγμα για μια καλύτερη ιδέα για το πώς λειτουργούν όλα.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Στήλες σειρών

Χρησιμοποιήστε τις αποκριτικές .row-cols-*κλάσεις για να ορίσετε γρήγορα τον αριθμό των στηλών που αποδίδουν καλύτερα το περιεχόμενο και τη διάταξή σας. Ενώ οι κανονικές .col-*κλάσεις ισχύουν για τις μεμονωμένες στήλες (π.χ. .col-md-4), οι κατηγορίες στηλών γραμμής ορίζονται στη γονική .rowως προεπιλογή για τις περιεχόμενες στήλες. Με .row-cols-autoμπορείτε να δώσετε στις στήλες το φυσικό τους πλάτος.

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

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

Μπορείτε επίσης να χρησιμοποιήσετε το συνοδευτικό Sass mixin, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Φωλιάζοντας

Για να ενσωματώσετε το περιεχόμενό σας με το προεπιλεγμένο πλέγμα, προσθέστε ένα νέο .rowκαι σύνολο .col-sm-*στηλών σε μια υπάρχουσα .col-sm-*στήλη. Οι ένθετες σειρές πρέπει να περιλαμβάνουν ένα σύνολο στηλών που αθροίζονται έως 12 ή λιγότερες (δεν απαιτείται να χρησιμοποιήσετε και τις 12 διαθέσιμες στήλες).

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass

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

Μεταβλητές

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Μίξεις

Οι μίξεις χρησιμοποιούνται σε συνδυασμό με τις μεταβλητές πλέγματος για τη δημιουργία σημασιολογικού CSS για μεμονωμένες στήλες πλέγματος.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Παράδειγμα χρήσης

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Προσαρμογή του πλέγματος

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

Στήλες και υδρορροές

Ο αριθμός των στηλών πλέγματος μπορεί να τροποποιηθεί μέσω μεταβλητών Sass. $grid-columnsχρησιμοποιείται για να δημιουργήσει τα πλάτη (σε ποσοστά) κάθε μεμονωμένης στήλης ενώ $grid-gutter-widthορίζει το πλάτος για τις υδρορροές στηλών.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Επίπεδα πλέγματος

Προχωρώντας πέρα ​​από τις ίδιες τις στήλες, μπορείτε επίσης να προσαρμόσετε τον αριθμό των επιπέδων πλέγματος. Εάν θέλατε μόνο τέσσερις βαθμίδες πλέγματος, θα ενημερώσατε το $grid-breakpointsκαι $container-max-widthsσε κάτι σαν αυτό:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Όταν κάνετε οποιεσδήποτε αλλαγές στις μεταβλητές ή τους χάρτες Sass, θα πρέπει να αποθηκεύσετε τις αλλαγές σας και να κάνετε εκ νέου μεταγλώττιση. Με αυτόν τον τρόπο θα βγει ένα ολοκαίνουργιο σύνολο προκαθορισμένων κατηγοριών πλέγματος για πλάτη στηλών, μετατοπίσεις και παραγγελία. Τα αποκριτικά βοηθητικά προγράμματα ορατότητας θα ενημερωθούν επίσης για να χρησιμοποιούν τα προσαρμοσμένα σημεία διακοπής. Βεβαιωθείτε ότι έχετε ορίσει τιμές πλέγματος στο px(όχι rem, em, ή %).