in English

Εμφάνιση ιδιοκτησίας

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

Πως δουλεύει

Αλλάξτε την αξία της 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οθόνες.

Παραδείγματα

d-inline
d-inline
<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>
d-block d-block
<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
απόκρυψη σε lg και ευρύτερες οθόνες
απόκρυψη σε οθόνες μικρότερες από την lg
<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>