Εμφάνιση ιδιοκτησίας
Εναλλάξτε γρήγορα και με απόκριση την τιμή εμφάνισης των στοιχείων και πολλά άλλα με τα βοηθητικά προγράμματα εμφάνισης. Περιλαμβάνει υποστήριξη για ορισμένες από τις πιο κοινές τιμές, καθώς και ορισμένα πρόσθετα για τον έλεγχο της οθόνης κατά την εκτύπωση.
Πως δουλεύει
Αλλάξτε την αξία της 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
Οι τιμές εμφάνισης μπορούν να τροποποιηθούν αλλάζοντας τη $displays
μεταβλητή και μεταγλωττίζοντας εκ νέου το SCSS.
Τα ερωτήματα πολυμέσων επηρεάζουν τα πλάτη οθόνης με το δεδομένο σημείο διακοπής ή μεγαλύτερο . Για παράδειγμα, .d-lg-none
σετ display: none;
και στις δύο lg
και στις xl
οθόνες.
Παραδείγματα
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
Απόκρυψη στοιχείων
Για ταχύτερη ανάπτυξη φιλική προς κινητά, χρησιμοποιήστε κλάσεις απόκρισης οθόνης για εμφάνιση και απόκρυψη στοιχείων ανά συσκευή. Αποφύγετε τη δημιουργία εντελώς διαφορετικών εκδόσεων του ίδιου ιστότοπου, αντίθετα, αποκρύψτε στοιχεία με απόκριση για κάθε μέγεθος οθόνης.
Για να αποκρύψετε στοιχεία, απλώς χρησιμοποιήστε την .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 |
<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Εμφάνιση σε εκτύπωση
Αλλάξτε την 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
Οι τάξεις εκτύπωσης και προβολής μπορούν να συνδυαστούν.
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>