Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Classe Bootstrap para esconder div

Referente ao curso Bootstrap: criação de uma single-page responsiva

por Diego Hennrich
| 246.5k xp | 80 posts
Programador

Olá Pessoal,

durante o curso vimos questões como o GRID para ajustar nossa webapp em diferentes resoluções. Minha dúvida é a seguinte:

  • Existe uma class nativa do bootstrap para esconder conteúdo dependendo a resolução ? Ou eu teria que criar isso manualmente no css ?

Exemplo: no projeto do curso TopCasaFina, na aba de projetos temos 5 ou 6 projetos sendo exibidos. Eu gostaria de exibir todos eles se a resolução fosse para desktop. Porém, se fosse aberto o site pelo mobile, gostaria de exibir apenas 2 ou 3 para não ficar muito extenso na vertical. Então, gostaria de aplicar essa class para sumir determinado conteúdo dependendo a resolução.

Existe ?

Obrigado.

2 respostas
solução!
por João Vitor
| 78.7k xp | 6 posts

Olá Diego!

O Bootstrap oferece sim esse recurso através das classes .d-*-{valor}

Para isso, você substitui {valor} pelo tipo de display que deseja que o elemento tenha dentre os possíveis no CSS, ou seja, none, inline, inline-block, block, table, table-cell, table-row, flex ou inline-flex.

Para definir os tamanhos de tela, você deve substituir o * pelos tamanhos existentes no Bootstrap (sm, md, lg e xl). Para aplicar há todos os tamanhos, use apenas d-{valor}.

Por exemplo, o elemento

<div class="d-none d-md-block"> conteúdo </div>

não será exibido em telas menores que md, ou seja, sm e xs.

Funciona da mesma forma que as classes .col-, o efeito é aplicado para o tamanho de tela especificado e "para cima".

Referência: Bootstrap - Display utilities

Espero ter ajudado, qualquer dúvida estou a disposição.

JVM

por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Diego, Atributo HTML5 [hidden] HTML5 acrescentou um novo atributo global denominado [hidden], o qual é estilizado como display: none, por padrão. Pegando uma ideia emprestada do PureCSS, nós aprimoramos esse valor padrão fazendo com que tenha a flag !important, previnindo que sua propriedade display seja sobrescrita, acidentalmente. Além do mais, o atributo [hidden] não é suportado nativamente no IE10 e esta declaração no nosso CSS contorna esse problema.

Incompatibilidade jQuery O atributo [hidden] não é compatível com os métodos JQuery $(...).hide() e $(...).show(). Portanto, atualmente, nós não usamos [hidden] no lugar de outras técnicas para gerenciar o display de elementos.

Para a simples troca de visibilidade de um elemento, sem modificar o valor do display e continuar permitindo que o elemento tenha efeito no fluxo do documento, use a class .invisible.

Espero ter ajudado, bons estudos.