Παράδειγμα Δικτύου Bootstrap 5
- Προηγούμενη σελίδα BS5 Γραμμή XXL
- Επόμενη σελίδα BS5 Βασικό μοτίβο
Τα παρακάτω είναι μερικά παραδείγματα δίνοντας το grid layout του Bootstrap 5.
Τρεις ισόμετρα στήλες
Χρήση της κλάσης σε καθορισμένο αριθμό στοιχείων .col Η κλάση, η Bootstrap θα αναγνωρίσει πόσα στοιχεία υπάρχουν (και θα δημιουργήσει ισόπλασες στήλες). Στο παρακάτω παράδειγμα, χρησιμοποιήσαμε τρεις στοιχεία col, κάθε ένα με πλάση 33.33%%.
Παράδειγμα
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Τρεις ισόμετρα στήλες με αριθμούς
Μπορείτε επίσης να χρησιμοποιήσετε αριθμούς για να ελέγξετε την πλάση των στηλών. Βεβαιωθείτε ότι η συνολική τιμή είναι ή μικρότερη από 12 (δεν χρειάζεται να χρησιμοποιήσετε όλες τις διαθέσιμες στηλές):
Παράδειγμα
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Τρεις μη ισόμετρα στήλες
Για να δημιουργήσετε μη ισόμετρα στήλες, πρέπει να χρησιμοποιήσετε αριθμούς. Ο παρακάτω παράδειγμα θα δημιουργήσει μια διαίρεση 25%/50%/25%:
Παράδειγμα
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Ρύθμιση πλάσεως στήλης
Ωστόσο, η ρύθμιση της πλάσεως μιας στήλης είναι αρκετή, και τα αδελφά στοιχεία στηλών θα προσαρμόζονται αυτόματα γύρω από αυτήν. Ο παρακάτω παράδειγμα θα δημιουργήσει μια διαίρεση 25%/50%/25%:
Παράδειγμα
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Περισσότερες ισόμετρα στήλες
Παράδειγμα
<!-- δύο ισόμετρα στήλες --> <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 4</div> <div class="col">2 of 4</div> <div class="col">3 από 4</div> <div class="col">4 από 4</div> </div> <!-- έξι ισόμετρα στήλες --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
Μπορείτε επίσης να χρησιμοποιήσετε .row-cols-* Η κλάση ελέγχου πρέπει να εμφανίζεται στις στήλες που βρίσκονται δίπλα στις μιας στην άλλη (ανεξάρτητα από τον αριθμό των στηλών):
Παράδειγμα
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 από 4</div> <div class="col">4 από 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Περισσότερες μη ισόμετρα στήλες
Παράδειγμα
<!-- δυο μη ισόμετρα στήλες --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Τέσσερις διαφορετικές στήλες --> <div class="row"> <div class="col-2">1 από 4</div> <div class="col-2">2 από 4</div> <div class="col-2">3 από 4</div> <div class="col-6">4 από 4</div> </div> <!-- Ρύθμιση πλάτους δύο στήλων --> <div class="row"> <div class="col-4">1 από 4</div> <div class="col-6">2 από 4</div> <div class="col">3 από 4</div> <div class="col">4 από 4</div> </div>
Ισοψήφιος
Αν μια στήλη είναι ψηλότερη από την άλλη (υπό την επιρροή του κειμένου ή της ύψους CSS), οι υπόλοιπες θα ακολουθήσουν:
Παράδειγμα
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Νεώτερες στήλες
Η παρακάτω παράδειγμα δείχνει πώς να δημιουργήσετε διάταξη δυο στήλων, μια από τις οποίες περιέχει άλλες δύο στήλες:
Παράδειγμα
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Απανταγωνιστικές κλάσεις
Το σύστημα δίκτυα Bootstrap 5 έχει πέντε κλάσεις:
.col-(ultrasmall συσκευές - πλάτος οθόνης μικρότερο από 576px).col-sm-(small συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 576px).col-md-(medium συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 768 pixels).col-lg-(megagreat συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 992 pixels).col-xl-(megaxlarge συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 1200px).col-xxl-(megaxxlarge συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 1400px)
Μπορείτε να συνδυάσετε τις παραπάνω κλάσεις για να δημιουργήσετε πιο δυναμικές και ευελιξία διάταξης.
Σημείωση:Κάθε κλάση επεκτείνεται ανάλογα, οπότε αν θέλετε να δώσετε sm και md Αν θέλετε να ρυθμίσετε την ίδια πλάτος, θα πρέπει να καθορίσετε sm。
Από αναπαράσταση σε οριζόντια
Η παρακάτω παράδειγμα δείχνει πώς να δημιουργήσετε διάταξη στήλης, η οποία ξεκινά με το να παρατίθεται σε μικρά συσκευές και στη συνέχεια γίνεται οριζόντια διάταξη σε μεγαλύτερες συσκευές (sm, md, lg και xl):
Παράδειγμα
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</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>
Mix και Match
Παράδειγμα
<!-- Στις υπερμικρές συσκευές 50%/50% διαχωρισμός, στα μεγάλα συσκευές 75%/25% διαχωρισμός --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- Στις υπερμικρές, μικρές, μεσαίες συσκευές 58%/42% διαχωρισμός, στα μεγάλα και υπερμεγέθη συσκευές 66.3%/33.3% διαχωρισμός --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- Στα μικρά συσκευές 25%/75% διαχωρισμός, στα μεσαία συσκευές 50%/50% διαχωρισμός, στα μεγάλα και υπερμεγέθη συσκευές 33%/66% διαχωρισμός. Στις υπερμικρές συσκευές, θα τοποθετηθεί αυτόματα (100%). --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
χωρίς gutter
Για να αλλάξετε το διαστήματα μεταξύ των στήλων (πρόσθετο χώρο), χρησιμοποιήστε οποιοδήποτε .g-1|2|3|4|5 κλάση (.g-4 είναι προεπιλεγμένος).
Για να αφαιρεθεί πλήρως η σωλήνωση (gutter), χρησιμοποιήστε .g-0：
Παράδειγμα
<div class="row g-0">
- Προηγούμενη σελίδα BS5 Γραμμή XXL
- Επόμενη σελίδα BS5 Βασικό μοτίβο
