Bootstrap CSS Classe D - * - Aucun

Une grande variété d'éléments et classes pré-conçus sont fournis par bootstrap. Les développeurs les utilisent pour créer rapidement des sites Web attrayants et réactifs. Les sites Web réactifs font leur disposition en fonction de la taille de l'écran de l'appareil. L'un d'eux est le «D - * - Aucun”Classe, qui est utilisée pour cacher des éléments en fonction de la taille de l'écran.

Cet article décrira la classe Bootstrap CSS "D - * - Aucun".

• Qu'est-ce que Bootstrap CSS Classe: «D - * - Aucun»?
• Comment cacher des éléments sur un écran extra-large?
• Comment cacher des éléments sur un grand écran?
• Comment masquer les éléments sur un écran de taille moyenne?
• Comment cacher des éléments sur un petit écran?

Qu'est-ce que Bootstrap CSS Classe: «D - * - Aucun»?

Le "D - * - Aucun"La classe est l'une des classes d'utilité réactives bootstrap utilisées pour contrôler la visibilité de l'élément en fonction de la taille de l'écran. Le CSS "afficher«La propriété de ces classes de services publics est définie sur«aucun.". Le "d»Indique la propriété« Affichage »et«*»Symbolise les points d'arrêt de la taille de l'écran, je.e., "XS","xl","Maryland", et "LG". Le "aucun"À la fin, indique que l'élément sera caché lorsque cette classe sera appliquée.

Pour cacher l'élément sur tous les écrans, le «D-None"La classe sera utilisée. Implémentez les classes dans les sections ci-dessous pour voir comment ils fonctionnent.

Comment cacher des éléments sur un écran extra-large?

Le "d-xl-none"La classe est utilisée pour cacher les éléments sur un écran extra-large. Cette classe a un CSS prédéfini des requêtes médiatiques "@Media (Min-largeth: 1200px)», Ce qui signifie que cette classe s'applique aux écrans ayant une largeur supérieure à 1200px.

Exemple

Consultez l'exemple en implémentant les instructions suivantes:

• Tout d'abord, ajoutez un ""Élément ayant"P-4" et "Bg-Light" Des classes.
• À l'intérieur de cette balise «», incluez le «

  »Et« »Éléments pour la rubrique et un texte.

• Attribuez l'élément "" "carte","blanc","P-2","bg-primaire", et "d-xl-none" Des classes.

Html

Ceci est Div principal

Montrez-moi sur la largeur de l'écran moins de 1200px

Sortir

Comment masquer les éléments HTML sur un grand écran?

Le "d-lg-none»La classe cache les composants sur le grand écran. Cette classe a un CSS prédéfini des requêtes médiatiques "@Media (Min-largeur: 992px)», Ce qui signifie que cette classe s'applique aux écrans ayant une largeur supérieure à 992px.

Exemple

Dans l'exemple en cours, ajoutez le "d-lg-none«Classe à l'élément« ».

Html

Montrez-moi sur la largeur de l'écran moins de 992px

Voir, la propriété «Affichage: aucun» a été appliquée avec succès jusqu'à l'écran en 992px:

Comment masquer les éléments sur un écran de taille moyenne?

Le "d-md-none"La classe peut être utilisée pour masquer la visibilité de l'élément sur l'écran de taille moyenne. Cette classe a un CSS prédéfini des requêtes médiatiques "@Media (Min-Width: 768px)"Ce qui signifie que cette classe s'applique aux écrans ayant une largeur supérieure à 768px.

Exemple

Ajoutez la classe «d-md-none» à l'élément «».

Html

Montrez-moi sur la largeur de l'écran moins de 768px

Sortir

Comment cacher des éléments sur un petit écran?

Le "d-sm-none"La classe cache la visibilité de l'élément sur un petit écran. Cette classe a un CSS prédéfini des requêtes médiatiques "@Media (Min-largeur: 576px)"Ce qui signifie que cette classe s'applique aux écrans ayant une largeur supérieure à 576px.

Exemple

Dans l'exemple en cours, ajoutez la classe «d-sm-none» à l'élément «».

Html

Montrez-moi sur la largeur de l'écran moins de 576px

Sortir

Note importante

Le "D - * - Aucun"La classe est utilisée pour cacher les éléments uniquement. D'autres éléments ou dispositions ne sont pas affectés. L'élément est complètement supprimé de la disposition lorsque le CSS "afficher" est réglé sur "aucun".

Conclusion

Le "D - * - Aucun"La classe est utilisée pour masquer la visibilité de l'élément sur différentes tailles d'écran. L'astérisque «*"Désigne le"LG","xl","sm", et "Maryland”Qui indique les grands, extra grandes, petits et moyens écrans. Plus précisément, le CSS "afficher«Propriété avec la valeur»aucun”Est ​​utilisé pour éliminer l'élément de la disposition. Cet article a décrit la classe Bootstrap «D - * - Aucun» avec des exemples.