Μάθετε το Bootstrap 4 Grid System σε 10 λεπτά

Το Bootstrap 4 Grid System χρησιμοποιείται για αποκριτικές διατάξεις.

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

Ας αρχίσουμε!

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

  • Bootstrap 4 εμπορευματοκιβώτια
  • Bootstrap 4 σειρές
  • Bootstrap 4 στήλες
  • Περαιτέρω ανάγνωση

Το πλέγμα Bootstrap 4 αποτελείται από κοντέινερ, σειρές και στήλες. Θα τα πάρουμε ένα προς ένα και θα τα εξηγήσουμε.

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

Ένα κοντέινερ Bootstrap 4 είναι ένα στοιχείο με την κλάση .container. Το κοντέινερ είναι η ρίζα του συστήματος πλέγματος Bootstrap 4 και χρησιμοποιείται για τον έλεγχο του πλάτους της διάταξης.

Το κοντέινερ Bootstrap 4 περιέχει όλα τα στοιχεία μιας σελίδας. Αυτό σημαίνει ότι η σελίδα σας θα πρέπει να έχει την ακόλουθη δομή: πρώτα το σώμα της σελίδας HTML, στο εσωτερικό της θα πρέπει να προσθέσετε το κοντέινερ και όλα τα άλλα στοιχεία μέσα στο κοντέινερ.

 ... 

Η απλή .containerκατηγορία ορίζει το πλάτος της διάταξης ανάλογα με το πλάτος της οθόνης. Τοποθετεί το περιεχόμενο στη μέση της σελίδας ευθυγραμμίζοντας το οριζόντια. Υπάρχει ίσος χώρος μεταξύ του κοντέινερ Bootstrap 4 και του αριστερού και του δεξιού άκρου της σελίδας.

Το .containerπλάτος μειώνεται καθώς το πλάτος της οθόνης μειώνεται και γίνεται πλήρες πλάτος στο κινητό. Το πλάτος του κοντέινερ καθορίζεται μέσα στη βιβλιοθήκη Bootstrap 4 για κάθε μέγεθος οθόνης. Μπορείτε να δείτε τα ακριβή μεγέθη εδώ.

Ένα κοντέινερ πλήρους πλάτους παίρνει το 100% του μεγέθους της οθόνης ανεξάρτητα από το πλάτος της οθόνης. Για να το χρησιμοποιήσετε πρέπει να προσθέσετε την τάξη. container-fluid.

 Hello! I am in a simple container. Hello! I am in a full-width container. 

Μπορείτε να δείτε το CodePen εδώ.

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

Bootstrap 4 σειρές

Το Bootstrap 4 σειρές είναι οριζόντιες φέτες της οθόνης. Χρησιμοποιούνται μόνο ως περιτυλίγματα για στήλες. Για να τα χρησιμοποιήσετε, χρειάζεστε την .rowτάξη.

 ... 

Εδώ είναι τα πιο σημαντικά πράγματα που πρέπει να θυμάστε για τις γραμμές Bootstrap 4:

  • Χρησιμοποιούνται μόνο για να περιέχουν στήλες. Εάν τοποθετήσετε άλλα στοιχεία μέσα στη σειρά μαζί με στήλες δεν θα λάβετε το αναμενόμενο αποτέλεσμα.
  • Πρέπει να τοποθετηθούν σε δοχεία. Εάν δεν το κάνετε αυτό, θα εμφανιστεί μια οριζόντια κύλιση στη σελίδα σας. Αυτό συμβαίνει επειδή οι σειρές έχουν αρνητικά αριστερά και δεξιά περιθώρια 15. Το κοντέινερ έχει 15px παραγέμισμα έτσι αντισταθμίζει τα περιθώρια.
  • Οι στήλες πρέπει να είναι παιδιά της σειράς. Διαφορετικά δεν θα ευθυγραμμιστούν. Οι σειρές και οι στήλες δημιουργούνται για να συνεργαστούν σε αυτήν την αυστηρή ιεραρχία.

Bootstrap 4 στήλες

Μπορούμε τώρα να φτάσουμε στο ωραίο μέρος αυτού του σεμιναρίου, τις στήλες Bootstrap 4. Οι στήλες είναι υπέροχες! Σας βοηθούν να διαιρέσετε την οθόνη οριζόντια.

Εάν τοποθετήσετε μία στήλη στη σειρά σας, θα καταλάβει όλο το πλάτος. Εάν προσθέσετε δύο στήλες, κάθε μία θα πάρει 1/2 από το πλάτος. Και έτσι ισχύει για οποιονδήποτε αριθμό στηλών.

 ... ... ... ... ... ... ... ... 

Μπορείτε να δείτε τον κώδικα ζωντανά στο CodePen.

Πλευρική σημείωση: Οι στήλες δεν είναι χρωματισμένες. Μόλις πρόσθεσα χρώματα για μια πιο οπτικά ελκυστική περιγραφή / έτσι φαίνονται όμορφα.

Ρύθμιση μεγεθών για στήλες

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

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

Από προεπιλογή, το πλέγμα Bootstrap 4 αποτελείται από 12 στήλες. Μπορείτε να επιλέξετε οποιοδήποτε μέγεθος από 1 έως 12 για τη στήλη σας. Εάν θέλετε 3 ίσες στήλες, μπορείτε να χρησιμοποιήσετε .col-4για κάθε μία (επειδή 3 * 4 στήλες η καθεμία = 12). Ή μπορείτε να ορίσετε διαφορετικά μεγέθη για αυτά. Ορίστε μερικά παραδείγματα:

 ... ... ... ... ... ... ... ... 

Μπορείτε να δείτε τον κώδικα ζωντανά στο CodePen.

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

Ρύθμιση σημείων διακοπής για στήλες

Εάν ακολουθήσετε το παραπάνω παράδειγμα και θέλετε να το εμφανίσετε σε κινητό, ενδέχεται να αντιμετωπίσετε ορισμένα προβλήματα. Η εμφάνιση πέντε στηλών σε κινητά θα κάνει το περιεχόμενο δυσανάγνωστο.

Εδώ μπαίνει ένα από τα πιο ισχυρά στοιχεία Bootstrap 4. Για να έχετε διαφορετικές διατάξεις σε διαφορετικές οθόνες δεν θα χρειαστεί να γράψετε ερωτήματα πολυμέσων, αντί να μπορείτε να χρησιμοποιήσετε τα σημεία διακοπής της στήλης.

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

Η απλούστερη τάξη για την οποία θα μάθουμε είναι η .col-[breakpoint]τάξη. Όταν χρησιμοποιείτε αυτήν την τάξη, ορίζετε τη συμπεριφορά για τις στήλες μόνο όταν εμφανίζονται σε συσκευές που έχουν ανάλυση τουλάχιστον του καθορισμένου σημείου διακοπής. Μέχρι το δεδομένο σημείο διακοπής, οι στήλες σας θα ευθυγραμμίζονται κατακόρυφα από προεπιλογή. Και μετά το σημείο διακοπής σας, θα ευθυγραμμιστούν οριζόντια λόγω της τάξης.

Το Bootstrap έχει 4 σημεία διακοπής που μπορείτε να χρησιμοποιήσετε:

  • .col-sm για μεγαλύτερα κινητά τηλέφωνα (συσκευές με ανάλυση 6 576 εικονοστοιχεία).
  • .col-md για δισκία (≥768 εικονοστοιχεία);
  • .col-lg για φορητούς υπολογιστές (≥992 εικονοστοιχεία);
  • .col-xl για επιτραπέζιους υπολογιστές (≥1200px)

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

Στο παράδειγμά μας θα χρησιμοποιήσουμε το .col-lgσημείο διακοπής και θα δούμε πώς φαίνονται οι στήλες σε διαφορετικές οθόνες. Για αναλύσεις που είναι χαμηλότερες από το δεδομένο σημείο διακοπής (<992 εικονοστοιχεία), οι στήλες θα εμφανίζονται κάθετα. Αυτό σημαίνει ότι σε κινητές συσκευές και tablet, οι στήλες θα έχουν την εξής μορφή:

Και για συσκευές που έχουν ανάλυση υψηλότερη ή ίση με το σημείο διακοπής (2992 εικονοστοιχεία), οι στήλες θα πάνε στην ίδια σειρά. Αυτό σημαίνει ότι σε φορητούς υπολογιστές και επιτραπέζιους υπολογιστές θα έχετε αυτό το αποτέλεσμα:

 ... ... 

Μπορείτε να δείτε τον κώδικα ζωντανά στο CodePen.Εάν ανοίξετε το Codepen σε άλλο παράθυρο και δείτε τη σελίδα σε διαφορετικές αναλύσεις, θα δείτε τις στήλες να αλλάζουν τη θέση τους.

Αν θέλετε οι 2 στήλες να συνεχίσουν στην ίδια γραμμή ξεκινώντας από μεγαλύτερα κινητά τηλέφωνα που θα χρησιμοποιούσατε .col-sm, για tablet .col-mdκαι για πολύ μεγάλες οθόνες .col-xl.

Ρύθμιση μεγεθών και σημείων διακοπής για στήλες

Μπορείτε να συνδυάσετε τα μεγέθη και τα σημεία διακοπής και να χρησιμοποιήσετε μία κλάση με τη μορφή .col-[breakpoint]-[size].

Για παράδειγμα, εάν θέλετε τρεις στήλες διαφορετικών μεγεθών να ευθυγραμμιστούν σε μια σειρά ξεκινώντας με την ανάλυση φορητού υπολογιστή, πρέπει να το κάνετε αυτό:

 ... ... ... 

Θα λάβετε αυτό το αποτέλεσμα σε αναλύσεις <992 εικονοστοιχεία:

Και για οθόνες ≥992 εικονοστοιχεία:

Και πάλι, μπορείτε να δείτε τον κώδικα ζωντανά στο CodePen.

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

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

 ... ... ... ... 

Το αποτέλεσμα θα εμφανίζεται έτσι σε tablet:

Και έτσι σε φορητούς υπολογιστές και υψηλότερες αναλύσεις:

Αυτό το παράδειγμα είναι επίσης ζωντανό στο CodePen.

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

Στήλες αντιστάθμισης

Εάν δεν θέλετε οι στήλες σας να βρίσκονται δίπλα στην άλλη, μπορείτε να χρησιμοποιήσετε την τάξη .offset-[breakpoint]-[size]μαζί με το .col-[breakpoint]-[size].

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

 ... ... 

Μπορείτε να δείτε τον κώδικα ζωντανά στο CodePen.

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

 ... ... ... ... ... 

Στήλες ένθεσης

Αυτό μπορεί να αποτελεί έκπληξη, αλλά μπορείτε να προσθέσετε μια σειρά μέσα σε μια στήλη!

Στη συνέχεια, η εν λόγω σειρά (η οποία θα έχει το πλάτος της μητρικής στήλης της) θα χωριστεί σε 12 (μικρότερες) στήλες που μπορείτε να αναφέρετε μέσω των .col-* κλάσεων.

Ας ρίξουμε μια ματιά στο τι συμβαίνει όταν εισάγουμε μια νέα σειρά μέσα σε μια στήλη:

 ... ... ... ... 

Μπορείτε να δείτε τον κώδικα ζωντανά στο CodePen.

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

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

Περαιτέρω ανάγνωση

Εάν έχετε περισσότερο χρόνο, ακολουθούν ορισμένοι χρήσιμοι πόροι:

  • Επίσημη τεκμηρίωση πλέγματος από το GetBootstrap
  • Εκπαιδευτικό βίντεο από τη Scrimba

Αυτό το άρθρο δημοσιεύτηκε αρχικά στο BootstrapBay Blog. Είναι μέρος μιας μεγαλύτερης σειράς εκπαιδευτικών προγραμμάτων Bootstrap 4 που ονομάζονται 14 Days of Bootstrap 4. Εάν θέλετε να συνεχίσετε να μαθαίνετε για τα στοιχεία Bootstrap 4, αυτά τα άρθρα είναι ένα καλό μέρος για να ξεκινήσετε.

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

Αλλά πριν εξερευνήσετε βαθύτερα, αφιερώστε λίγο χρόνο για να γιορτάσετε τις πρόσφατα αποκτηθείσες δεξιότητές σας !;