Εμφάνιση ιδιοκτησίας
Εναλλάξτε γρήγορα και με απόκριση την τιμή εμφάνισης των στοιχείων και πολλά άλλα με τα βοηθητικά προγράμματα εμφάνισης. Περιλαμβάνει υποστήριξη για ορισμένες από τις πιο κοινές τιμές, καθώς και ορισμένα πρόσθετα για τον έλεγχο της οθόνης κατά την εκτύπωση.
Αλλάξτε την αξία της display
ιδιότητας με τις αποκριτικές κατηγορίες βοηθητικών προγραμμάτων προβολής. Υποστηρίζουμε σκόπιμα μόνο ένα υποσύνολο όλων των πιθανών τιμών για display
. Τα μαθήματα μπορούν να συνδυαστούν για διάφορα εφέ όπως χρειάζεστε.
Εμφάνιση κλάσεων βοηθητικού προγράμματος που ισχύουν για όλα τα σημεία διακοπής , από xs
έως xl
, δεν έχουν συντομογραφία σημείου διακοπής. Αυτό συμβαίνει επειδή αυτές οι κλάσεις εφαρμόζονται από min-width: 0;
και πάνω, και επομένως δεν δεσμεύονται από ένα ερώτημα μέσων. Τα υπόλοιπα σημεία διακοπής, ωστόσο, περιλαμβάνουν μια συντομογραφία σημείου διακοπής.
Ως εκ τούτου, οι τάξεις ονομάζονται χρησιμοποιώντας τη μορφή:
.d-{value}
Γιαxs
.d-{breakpoint}-{value}
γιαsm
,md
,lg
, καιxl
.
Όπου η τιμή είναι ένα από:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Τα ερωτήματα πολυμέσων επηρεάζουν τα πλάτη οθόνης με το δεδομένο σημείο διακοπής ή μεγαλύτερο . Για παράδειγμα, .d-lg-none
σετ display: none;
και στις δύο lg
και στις xl
οθόνες.
Για ταχύτερη ανάπτυξη φιλική προς κινητά, χρησιμοποιήστε κλάσεις απόκρισης οθόνης για εμφάνιση και απόκρυψη στοιχείων ανά συσκευή. Αποφύγετε τη δημιουργία εντελώς διαφορετικών εκδόσεων του ίδιου ιστότοπου, αντίθετα, αποκρύψτε το στοιχείο με απόκριση για κάθε μέγεθος οθόνης.
Για να αποκρύψετε στοιχεία, απλώς χρησιμοποιήστε την .d-none
κλάση ή μία από τις .d-{sm,md,lg,xl}-none
κλάσεις για οποιαδήποτε παραλλαγή οθόνης με απόκριση.
Για να εμφανίσετε ένα στοιχείο μόνο σε ένα δεδομένο διάστημα μεγεθών οθόνης, μπορείτε να συνδυάσετε μια .d-*-none
κλάση με μια .d-*-*
κλάση, για παράδειγμα .d-none .d-md-block .d-xl-none
θα αποκρύψετε το στοιχείο για όλα τα μεγέθη οθόνης εκτός από μεσαίες και μεγάλες συσκευές.
Μέγεθος οθόνης | Τάξη |
---|---|
Κρυμμένο σε όλα | .d-none |
Κρυφό μόνο στο xs | .d-none .d-sm-block |
Κρυμμένο μόνο σε sm | .d-sm-none .d-md-block |
Κρυμμένο μόνο σε md | .d-md-none .d-lg-block |
Κρυφό μόνο στο lg | .d-lg-none .d-xl-block |
Κρυφό μόνο σε xl | .d-xl-none |
Ορατό σε όλα | .d-block |
Ορατό μόνο σε xs | .d-block .d-sm-none |
Ορατό μόνο σε sm | .d-none .d-sm-block .d-md-none |
Ορατό μόνο σε md | .d-none .d-md-block .d-lg-none |
Ορατό μόνο σε lg | .d-none .d-lg-block .d-xl-none |
Ορατό μόνο σε xl | .d-none .d-xl-block |
Αλλάξτε την display
τιμή των στοιχείων κατά την εκτύπωση με τις κατηγορίες βοηθητικών προγραμμάτων προβολής εκτύπωσης. Περιλαμβάνει υποστήριξη για τις ίδιες display
τιμές με τα .d-*
βοηθητικά προγράμματα που αποκρίνονται.
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex
Οι τάξεις εκτύπωσης και προβολής μπορούν να συνδυαστούν.