Bootstrap CSS Class D-*-Nessuno

Un'ampia varietà di elementi e classi pre-progettati è fornita da Bootstrap. Gli sviluppatori li usano per creare siti Web visivamente accattivanti e reattivi rapidamente. I siti Web reattivi creano il loro layout in base alle dimensioni dello schermo del dispositivo. Uno di questi è il "d-*-nessuno"Classe, che viene utilizzata per nascondere elementi in base alla dimensione dello schermo.

Questo articolo descriverà la classe Bootstrap CSS "d-*-nessuno".

• Che cos'è la classe Bootstrap CSS: "D-*-nessuno"?
• Come nascondere gli elementi su uno schermo extra-large?
• Come nascondere gli elementi su un grande schermo?
• Come nascondere elementi sullo schermo di medie dimensioni?
• Come nascondere gli elementi su un piccolo schermo?

Che cos'è la classe Bootstrap CSS: "D-*-nessuno"?

IL "d-*-nessuno"La classe è una delle classi di utilità reattive bootstrap utilizzate per controllare la visibilità dell'elemento in base alla dimensione dello schermo. Il CSS "Schermo"La proprietà per queste classi di utilità è impostata su"nessuno.". IL "D"Indica la proprietà" display "e"*"Simboleggia i punti di interruzione delle dimensioni dello schermo, i.e., "XS","XL","MD", E "Lg". IL "nessuno"Alla fine indica che l'elemento sarà nascosto quando viene applicata questa classe.

Per nascondere l'elemento su tutti gli schermi, il “D-None"La classe verrà utilizzata. Implettiamo le lezioni nelle sezioni seguenti per vedere come funzionano.

Come nascondere gli elementi su uno schermo extra-large?

IL "D-XL-None"La classe viene utilizzata per nascondere gli elementi su uno schermo extra-large. Questa classe ha un CSS predefinito di query multimediale "@media (larghezza min: 1200px)"Il che significa che questa classe si applica alle schermate con una larghezza maggiore di 1200px.

Esempio

Dai un'occhiata all'esempio implementando le seguenti istruzioni:

• Innanzitutto, aggiungi un ""Elemento con"P-4" E "BG-Light" classi.
• All'interno di questo tag "", includi il "

  "E" "elementi per l'intestazione e un po 'di testo.

• Assegna l'elemento ""carta","bianco-bianco","P-2","BG-PRIMARY", E "D-XL-None" classi.

Html

questo è principale div

Mostrami sulla larghezza dello schermo inferiore a 1200px

Produzione

Come nascondere gli elementi HTML su un grande schermo?

IL "D-LG-None"Classe nasconde i componenti su grande schermo. Questa classe ha un CSS predefinito di query multimediale "@media (larghezza min: 992px)"Il che significa che questa classe si applica agli schermi con una larghezza maggiore di 992px.

Esempio

Nell'esempio in corso, aggiungi il "D-LG-None"Classe per l'elemento" ".

Html

Mostrami sulla larghezza dello schermo inferiore a 992px

Vedi, la proprietà "Display: nessuna" è stata applicata correttamente fino allo schermo in 992px:

Come nascondere elementi sullo schermo di medie dimensioni?

IL "D-MD-None"La classe può essere utilizzata per nascondere la visibilità dell'elemento sullo schermo di medie dimensioni. Questa classe ha un CSS predefinito di query multimediale "@media (larghezza min: 768px)"Il che significa che questa classe si applica agli schermi con una larghezza maggiore di 768px.

Esempio

Aggiungi la classe "D-MD-None" all'elemento "".

Html

Mostrami sulla larghezza dello schermo inferiore a 768px

Produzione

Come nascondere gli elementi su un piccolo schermo?

IL "D-SM-None"La classe nasconde la visibilità dell'elemento su un piccolo schermo. Questa classe ha un CSS predefinito di query multimediale "@media (larghezza min: 576px)"Il che significa che questa classe si applica agli schermi con una larghezza maggiore di 576px.

Esempio

Nell'esempio in corso, aggiungi la classe "D-SM-None" all'elemento "".

Html

Mostrami sulla larghezza dello schermo inferiore a 576px

Produzione

Nota importante

IL "d-*-nessuno"La classe viene utilizzata per nascondere solo gli elementi. Altri elementi o layout non sono influenzati. L'elemento viene completamente rimosso dal layout quando il CSS "Schermo" è impostato per "nessuno".

Conclusione

IL "d-*-nessuno"La classe viene utilizzata per nascondere la visibilità dell'elemento su varie dimensioni dello schermo. L'asterisco "*"Indica il"Lg","XL","SM", E "MD"Che indica gli schermi grandi, extra grandi, piccoli e medi. Più specificamente, il CSS "Schermo"Proprietà con il valore"nessuno"Viene utilizzato per eliminare l'elemento dal layout. Questo articolo ha descritto la classe Bootstrap “D-*-None” con esempi.