Este artigo é um artigo espelhado de tradução automática, por favor clique aqui para ir para o artigo original.

Architect_Programmer_Code Rede Agrícola»Arquiteto › Design front-end & web › Quadro frontal › Como mostrar e esconder elementos usando o Bootstrap4
Vista: 12583|Resposta: 0

[Bootstrap] Como mostrar e esconder elementos usando o Bootstrap4

[Copiar link]
Publicado em 04/04/2019 10:46:25 | | | |
Como mostrar e esconder elementos usando o Bootstrap4

Para um desenvolvimento mais rápido de dispositivos móveis, use classes de exibição responsivas para mostrar e esconder elementos por dispositivo. Evite criar versões completamente diferentes do mesmo site, mas esconda elementos para cada tamanho de tela de acordo.

Para esconder elementos, basta usar.d-nenhumou uma delas.d-{sm,md,lg,xl}-nenhumpara fazer qualquer alteração responsiva na tela.

Para exibir elementos apenas em um determinado intervalo de tamanho de tela, você pode definir um.d-*-nenhumClasse e um.d-*-*As classes são agrupadas, por exemplo,.d-nenhum .d-md-bloco .d-xl-nenhumElementos de todos os tamanhos de tela ficarão ocultos, exceto para dispositivos médios e grandes.

Renderings:



Mostre/esconda para breakpoint e down:

  • Hidden-xs-Down (Hidden-Xs) = d-nenhum d-sm-block
  • Hidden-SM-Down (Hidden-SM Hidden-Xs) = D-Nenhum D-Md-Bloco
  • hidden-md-down (hidden-md hidden-sm hidden-xs) = d-nenhum d-lg-block
  • Hidden-lg-down = d-nenhum d-xl-bloco
  • Hidden-XL-Down (N/D 3.x) = D-None (igual a Hidden)


Mostre/esconda para pontos de quebra e acima:

  • Hidden-xs-up = D-Nenhum (igual a Hidden)
  • Hidden-sm-up = d-sm-nenhum
  • hidden-md-up = d-md-nenhum
  • Hidden-LG-up = d-lg-nenhum
  • Hidden-XL-UP (n/A 3.x) = D-XL-Nenhum


Mostre/esconda apenas um ponto de quebra:

  • Hidden-xs (apenas) = D-None D-Sm-Block (Igual a Hidden-Xs-Down)
  • Oculto-SM (apenas) = bloco D d-SM-nenhum D-bloco MD
  • Hidden-MD (apenas) = D-Block d-MD-Nenhum D-Lg-Block
  • Hidden-LG (apenas) = bloco D d-lg-nenhum bloco D-XL
  • Hidden-XL (N/D 3.x) = D-bloco D-XL-Nenhum
  • Visible-Xs (apenas) = Bloco D D-SM-Nenhum
  • Visível-SM (apenas) = D-Nenhum D-Bloco D-MD-Nenhum
  • Visible-MD (Apenas) = D-Nenhum D-MD-Bloco D-LG-Nenhum
  • Visible-LG (apenas) = d-nenhum d-lg-bloco d-xl-nenhum
  • Visible-XL (N/D 3.x) = D-Nenhum D-XL-Bloco


Visualização:



Links de referência:https://getbootstrap.com/docs/4.0/utilities/display/





Anterior:Quais qualidades um arquiteto de software deve ter?
Próximo:Não é possível injetar @Autowired no Listener

Posts Relacionados
Disclaimer:
Todo software, material de programação ou artigos publicados pela Code Farmer Network são apenas para fins de aprendizado e pesquisa; O conteúdo acima não deve ser usado para fins comerciais ou ilegais, caso contrário, os usuários terão todas as consequências. As informações deste site vêm da Internet, e disputas de direitos autorais não têm nada a ver com este site. Você deve deletar completamente o conteúdo acima do seu computador em até 24 horas após o download. Se você gosta do programa, por favor, apoie um software genuíno, compre o registro e obtenha serviços genuínos melhores. Se houver qualquer infração, por favor, entre em contato conosco por e-mail.
Mail To:help@itsvse.com