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

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

Σε αυτήν την σελίδα

Πως δουλεύει

Αλλάξτε την αξία της displayιδιότητας με τις αποκριτικές κατηγορίες βοηθητικών προγραμμάτων προβολής. Υποστηρίζουμε σκόπιμα μόνο ένα υποσύνολο όλων των πιθανών τιμών για display. Τα μαθήματα μπορούν να συνδυαστούν για διάφορα εφέ όπως χρειάζεστε.

Σημειογραφία

Εμφάνιση κλάσεων βοηθητικού προγράμματος που ισχύουν για όλα τα σημεία διακοπής , από xsέως xxl, δεν έχουν συντομογραφία σημείου διακοπής. Αυτό συμβαίνει επειδή αυτές οι κλάσεις εφαρμόζονται από min-width: 0;και πάνω, και επομένως δεν δεσμεύονται από ένα ερώτημα μέσων. Τα υπόλοιπα σημεία διακοπής, ωστόσο, περιλαμβάνουν μια συντομογραφία σημείου διακοπής.

Ως εκ τούτου, οι τάξεις ονομάζονται χρησιμοποιώντας τη μορφή:

.d-{value}Γιαxs
.d-{breakpoint}-{value}για sm, md, lg, xlκαι xxl.

Όπου η τιμή είναι ένα από:

none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex

Οι τιμές εμφάνισης μπορούν να τροποποιηθούν αλλάζοντας τις displayτιμές που ορίζονται στο $utilitiesSCSS και μεταγλωττίζοντας εκ νέου το SCSS.

Τα ερωτήματα πολυμέσων επηρεάζουν τα πλάτη οθόνης με το δεδομένο σημείο διακοπής ή μεγαλύτερο . Για παράδειγμα, .d-lg-noneρυθμίζει display: none;στα lg, xl, και xxlοθόνες.

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

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-block d-block

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Απόκρυψη στοιχείων

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

Για να αποκρύψετε στοιχεία, απλώς χρησιμοποιήστε την .d-noneκλάση ή μία από τις .d-{sm,md,lg,xl,xxl}-noneκλάσεις για οποιαδήποτε παραλλαγή οθόνης με απόκριση.

Για να εμφανίσετε ένα στοιχείο μόνο σε ένα δεδομένο διάστημα μεγεθών οθόνης, μπορείτε να συνδυάσετε μια .d-*-noneκλάση με μια .d-*-*κλάση, για παράδειγμα .d-none .d-md-block .d-xl-none .d-xxl-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`
Κρυφό μόνο σε xxl	`.d-xxl-none .d-xxl-block`
Ορατό σε όλα	`.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 .d-xxl-none`
Ορατό μόνο σε xxl	`.d-none .d-xxl-block`

απόκρυψη σε lg και ευρύτερες οθόνες

απόκρυψη σε οθόνες μικρότερες από την lg

html

<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-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

Οι τάξεις εκτύπωσης και προβολής μπορούν να συνδυαστούν.

Μόνο οθόνη (Απόκρυψη μόνο στην εκτύπωση)

Μόνο εκτύπωση (Απόκρυψη μόνο στην οθόνη)

Απόκρυψη σε μεγάλο μέγεθος στην οθόνη, αλλά πάντα εμφάνιση στην εκτύπωση

html

<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>

Sass

Utilities API

Τα βοηθητικά προγράμματα εμφάνισης δηλώνονται στο API βοηθητικών προγραμμάτων μας σε scss/_utilities.scss. Μάθετε πώς να χρησιμοποιείτε το API βοηθητικών προγραμμάτων.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),