Βοηθητικά προγράμματα για διάταξη

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

Αλλαγήdisplay

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

Επιλογές Flexbox

Το Bootstrap 4 είναι κατασκευασμένο με flexbox, αλλά δεν displayέχουν αλλάξει όλα τα στοιχεία, display: flexκαθώς αυτό θα πρόσθετε πολλές περιττές παρακάμψεις και θα άλλαζε απροσδόκητα τις βασικές συμπεριφορές του προγράμματος περιήγησης. Τα περισσότερα από τα εξαρτήματά μας είναι κατασκευασμένα με ενεργοποιημένο το flexbox.

Εάν χρειαστεί να προσθέσετε display: flexσε ένα στοιχείο, κάντε το με .d-flexή μία από τις αποκριτικές παραλλαγές (π.χ., .d-sm-flex). Θα χρειαστείτε αυτήν την κλάση ή displayτην τιμή για να επιτρέψετε τη χρήση των επιπλέον βοηθητικών προγραμμάτων flexbox για το μέγεθος, την ευθυγράμμιση, την απόσταση και άλλα.

Περιθώριο και επένδυση

Χρησιμοποιήστε τα βοηθητικά προγράμματαmargin και Spacing για να ελέγξετε τον τρόπο με τον οποίο τα στοιχεία και τα στοιχεία είναι τοποθετημένα σε απόσταση και μεγέθη. Το Bootstrap 4 περιλαμβάνει μια κλίμακα πέντε επιπέδων για βοηθητικά προγράμματα απόστασης, με βάση μια προεπιλεγμένη μεταβλητή τιμής. Επιλέξτε τιμές για όλες τις θύρες προβολής (π.χ. για ) ή επιλέξτε παραλλαγές που αποκρίνονται για να στοχεύσετε συγκεκριμένες θύρες προβολής (π.χ. για έναρξη από το σημείο διακοπής).padding 1rem$spacer.mr-3margin-right: 1rem.mr-md-3margin-right: 1remmd

Μεταβάλλωvisibility

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