Bootstrap Flex Playground

Σχετικά με το Bootstrap Flex Playground

Το Bootstrap Flex Playground σάς επιτρέπει να δημιουργείτε διατάξεις flexbox με πραγματικές κλάσεις utility του Bootstrap 5.3 αντί για ακατέργαστο CSS. Ρυθμίστε τον container — κατεύθυνση, αναδίπλωση, justify-content, align-items, gap — με τμηματοποιημένα στοιχεία ελέγχου, κάντε κλικ σε οποιοδήποτε στοιχείο για να ορίσετε το δικό του align-self, order, grow και shrink, και παρακολουθήστε τη ζωντανή προεπισκόπηση να αναδιατάσσεται αμέσως.

Ο εναλλάκτης σημείων διακοπής είναι αυτό που το κάνει κάτι περισσότερο από παιχνίδι: επιλέξτε sm, md, lg, xl ή xxl και οι κλάσεις που ορίζετε από εκείνο το σημείο και μετά αποκτούν το responsive πρόθεμα — justify-content-md-between, flex-lg-row — ακριβώς όπως το σύστημα mobile-first του Bootstrap τις εφαρμόζει από εκείνο το σημείο διακοπής και πάνω. Προσθέστε έως 12 στοιχεία για να προσομοιώσετε ένα ρεαλιστικό συστατικό.

Όταν η διάταξη φαίνεται σωστή, αντιγράψτε το παραγόμενο HTML ή μόνο τις κλάσεις του container και επικολλήστε τις απευθείας στο έργο σας. Όλα εκτελούνται στον browser σας και τίποτα δεν ανεβαίνει.

Πώς να χρησιμοποιήσετε το Bootstrap Flex Playground

1. Ρυθμίστε τα utility του container — κατεύθυνση, αναδίπλωση, justify-content, align-items και gap — με τα τμηματοποιημένα στοιχεία ελέγχου.
2. Προσθέστε ή αφαιρέστε στοιχεία (2 έως 12) για να ταιριάξετε το πραγματικό σας συστατικό.
3. Κάντε κλικ σε ένα στοιχείο για να του δώσετε δικό του align-self, order ή utility μεγέθους flex.
4. Αλλάξτε σημεία διακοπής για να προσθέσετε responsive παραλλαγές που εφαρμόζονται από sm, md, lg, xl ή xxl και πάνω.
5. Ελέγξτε τη ζωντανή προεπισκόπηση, και μετά αντιγράψτε το παραγόμενο HTML ή τις κλάσεις του container.

Συχνές ερωτήσεις