Bootstrap CSS Classe D-*-Nenhum

Uma grande variedade de elementos e classes pré-projetados é fornecida pela Bootstrap. Os desenvolvedores os usam para criar sites visualmente atraentes e responsivos rapidamente. Sites responsivos fazem seu layout de acordo com o tamanho da tela do dispositivo. Um deles é o “D-*-nenhum”Classe, que é utilizada para ocultar elementos com base no tamanho da tela.

Este artigo descreverá a classe CSS de Bootstrap “D-*-nenhum”.

• O que é o Bootstrap CSS Class: “D-*-nenhum”?
• Como ocultar elementos em uma tela extra grande?
• Como ocultar elementos em uma tela grande?
• Como ocultar elementos na tela de tamanho médio?
• Como ocultar elementos em uma tela pequena?

O que é o Bootstrap CSS Class: “D-*-nenhum”?

O "D-*-nenhum”. O CSS “mostrar”A propriedade para essas classes de utilidade está definida como“nenhum.”. O "d”Indica a propriedade“ Display ”e“*”Simboliza os pontos de interrupção do tamanho da tela, eu.e., ““xs","xl","MD", e "LG”. O "nenhum”No final, denota que o elemento estará oculto quando esta classe for aplicada.

Para esconder o elemento em todas as telas, o “D-None”A classe será usada. Vamos implementar as classes nas seções abaixo para ver como elas funcionam.

Como ocultar elementos em uma tela extra grande?

O "D-XL-None”A classe é utilizada para ocultar os elementos em uma tela extra grande. Esta classe tem um CSS predefinido de consulta de mídia “@media (largura min: 1200px)”, O que significa que essa classe se aplica às telas com uma largura maior que 1200px.

Exemplo

Confira o exemplo implementando as seguintes instruções:

• Primeiro, adicione um “”Elemento tendo“P-4" e "BG-Light" Aulas.
• Dentro desta tag "", inclua o "

  ”E“ ”elementos para o cabeçalho e algum texto.

• Atribua o "" elemento "cartão","Texto branco","P-2","BG-Primary", e "D-XL-None" Aulas.

Html

Este é o principal div

Mostre -me na largura da tela menor que 1200px

Saída

Como ocultar elementos HTML em uma tela grande?

O "D-LG-None”A classe oculta componentes na tela grande. Esta classe tem um CSS predefinido de consulta de mídia “@Media (Min-lar: 992px)”, O que significa que esta classe se aplica às telas com uma largura maior que 992px.

Exemplo

No exemplo em andamento, adicione o “D-LG-None”Classe para o elemento“ ”.

Html

Mostre -me na largura da tela menor que 992px

Veja, a propriedade "Display: Nenhum" foi aplicada com sucesso até a tela em 992px:

Como ocultar elementos na tela de tamanho médio?

O "D-md-None”A classe pode ser usada para ocultar a visibilidade do elemento na tela de tamanho médio. Esta classe tem um CSS predefinido de consulta de mídia “@Media (Min-lar: 768px)”O que significa que esta classe se aplica às telas com uma largura maior que 768px.

Exemplo

Adicione a classe "D-md-none" ao elemento "".

Html

Mostre -me na largura da tela menor que 768px

Saída

Como ocultar elementos em uma tela pequena?

O "D-Sm-None”Classe esconde a visibilidade do elemento em uma tela pequena. Esta classe tem um CSS predefinido de consulta de mídia “@Media (Min-lar: 576px)”O que significa que esta classe se aplica às telas com uma largura maior que 576px.

Exemplo

No exemplo em andamento, adicione a classe "d-sm-none" ao elemento "".

Html

Mostre -me na largura da tela menor que 576px

Saída

Nota importante

O "D-*-nenhum”A classe é utilizada para esconder apenas os elementos. Outros elementos ou layouts não são afetados. O elemento é completamente removido do layout quando o CSS “mostrar" está configurado para "nenhum”.

Conclusão

O "D-*-nenhum”A classe é utilizada para ocultar a visibilidade do elemento em vários tamanhos de tela. O asterisco “*"Indica o"LG","xl","sm", e "MD”, Que indica as telas grandes, extras grandes, pequenas e médias. Mais especificamente, o CSS “mostrar”Propriedade com o valor“nenhum”É utilizado para eliminar o elemento do layout. Este artigo descreveu a classe “D-*-NONE” com exemplos.