Bootstrap 5: Grid Basic

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Bootstrap 5 Grid System

Το σύστημα πλέγματος του Bootstrap είναι κατασκευασμένο με flexbox και επιτρέπει έως και 12 στήλες σε όλη τη σελίδα.

Εάν δεν θέλετε να χρησιμοποιήσετε και τις 12 στήλες μεμονωμένα, μπορείτε να ομαδοποιήσετε τις στήλες μαζί για να δημιουργήσετε ευρύτερες στήλες:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

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

Βεβαιωθείτε ότι το άθροισμα είναι 12 ή λιγότερο (δεν απαιτείται χρησιμοποιήστε και τις 12 διαθέσιμες στήλες).

Τάξεις πλέγματος

Το σύστημα πλέγματος Bootstrap 5 έχει έξι κατηγορίες:

  • .col- (εξαιρετικά μικρές συσκευές - πλάτος οθόνης μικρότερο από 576 εικονοστοιχεία)

  • .col-sm- (μικρές συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 576 εικονοστοιχεία)

  • .col-md- (μεσαίες συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 768 pixel)

  • .col-lg- (μεγάλες συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 992 pixel)

  • .col-xl- (xlarge συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 1200 px)

  • .col-xxl- (xxlarge συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 1400 px)

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

Συμβουλή: Κάθε τάξη κλιμακώνεται, οπότε αν θέλετε να ορίσετε τα ίδια πλάτη για sm και md, χρειάζεται μόνο να καθορίσετε sm.

Βασική δομή ενός πλέγματος Bootstrap 5

Ακολουθεί μια βασική δομή ενός πλέγματος Bootstrap 5:

  <!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Πρώτο παράδειγμα: δημιουργήστε μια σειρά:

<div class="row">

Στη συνέχεια, προσθέστε τον επιθυμητό αριθμό στηλών (ετικέτες με κατάλληλες κλάσεις .col-*-*). Το πρώτο αστέρι (*) αντιπροσωπεύει την ανταπόκριση: sm, md, lg, xl ή xxl, ενώ το δεύτερο αστέρι αντιπροσωπεύει έναν αριθμό, ο οποίος θα πρέπει να αθροίζεται σε 12 για κάθε σειρά.

Δεύτερο παράδειγμα: αντί να προσθέτετε έναν αριθμό σε κάθε col, αφήστε το bootstrap να χειριστεί τη διάταξη, για να δημιουργήσει στήλες ίσου πλάτους: δύο " col" στοιχεία=50% πλάτος σε κάθε στήλη, ενώ τρεις στήλες=33,33% πλάτος σε κάθε στήλη. Τέσσερα cols=25% πλάτος κ.λπ. Μπορείτε επίσης να χρησιμοποιήσετε το .col-sm|md|lg|xl|xxl για να κάνετε τις στήλες να αποκρίνονται.

Παρακάτω έχουμε συλλέξει μερικά παραδείγματα βασικών διατάξεων πλέγματος Bootstrap 5.

Τρεις ίσες στήλες

.col
.col
.col

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

Παράδειγμα

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Three equal width columns</h1>
  <p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
  <div class="row">
    <div class="col p-3 bg-primary text-white">.col</div>
    <div class="col p-3 bg-dark text-white">.col</div>
    <div class="col p-3 bg-primary text-white">.col</div>
  </div>
</div>

</body>
</html>

Αποκριτικές στήλες

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3

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

Παράδειγμα

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  
  <div class="col-sm-3">.col-sm-3</div>
</div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
  </div>
</div>

</body>
</html>

Δύο άνισες αποκριτικές στήλες

.col-sm-4
.col-sm-8

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

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Two Unequal Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-4 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-8 p-3 bg-dark text-white">.col</div>
  </div>
</div>

</body>
</html>

Συμβουλή: Θα μάθετε περισσότερα για το σύστημα πλέγματος αργότερα σε αυτόν τον οδηγό.