Πεδίο δοκιμών πλέγματος Bootstrap
Δημιουργήστε responsive διατάξεις πλέγματος Bootstrap 5.3 οπτικά και αντιγράψτε τις ακριβείς κλάσεις — row, col, μετατοπίσεις, σειρά, αποστάσεις και στοίχιση.
—
Όλα εκτελούνται στο πρόγραμμα περιήγησής σας — τίποτα δεν μεταφορτώνεται.
Οι κλάσεις που ορίζετε εφαρμόζονται από αυτό το σημείο διακοπής και πάνω. Εναλλάξτε σημεία διακοπής για να δημιουργήσετε responsive διατάξεις.
Σχετικά με το Πεδίο δοκιμών πλέγματος Bootstrap
Το Bootstrap Grid Playground δημιουργεί responsive διατάξεις γραμμών-και-στηλών με το πραγματικό σύστημα grid του Bootstrap 5.3. Προσθέστε έως 12 στήλες σε μια γραμμή, κάντε κλικ σε οποιαδήποτε στήλη για να ορίσετε το πλάτος, το offset και τη σειρά της, και προσαρμόστε τα gutters και τη στοίχιση στη γραμμή — η προεπισκόπηση και η παραγόμενη σήμανση ενημερώνονται ζωντανά με κάθε αλλαγή.
Επειδή τα grid του Bootstrap είναι mobile-first, ο εναλλάκτης σημείων διακοπής είναι κεντρικός: ορίστε μια στήλη ως col-6 στη βάση και col-md-4 στο md, και έχετε δημιουργήσει το κλασικό μοτίβο στοίβαξης σε κινητά, τριών-δίπλα-δίπλα σε desktop χωρίς να γράψετε ούτε μία γραμμή κώδικα. Τα offsets, η σειρά και οι κλάσεις gutter δέχονται όλα τα ίδια responsive προθέματα.
Το αποτέλεσμα είναι καθαρό HTML έτοιμο για αντιγραφή-επικόλληση — ένα div γραμμής με τα παιδιά-στήλες του και ακριβώς τις κλάσεις που έχετε ρυθμίσει. Αντιγράψτε ολόκληρο το απόσπασμα ή μόνο τις κλάσεις της γραμμής· όλα εκτελούνται τοπικά στον browser σας.
Πώς να χρησιμοποιήσετε το Πεδίο δοκιμών πλέγματος Bootstrap
- Προσθέστε στήλες στη γραμμή — έως 12 — και κάντε κλικ σε μία για να την επιλέξετε.
- Ρυθμίστε το εύρος, το offset και τη σειρά της επιλεγμένης στήλης για το τρέχον σημείο διακοπής.
- Αλλάξτε σημεία διακοπής (από sm έως xxl) για να ορίσετε πώς αναδιατάσσεται η διάταξη σε μεγαλύτερες οθόνες.
- Προσαρμόστε τα gutters της γραμμής και τα utility στοίχισής της.
- Εξετάστε τη ζωντανή προεπισκόπηση, και μετά αντιγράψτε το παραγόμενο HTML ή τις κλάσεις της γραμμής.