5

Do ponto de vista de performance da aplicação, como funciona as classes hidden-** e visible-** ?

Se eu colocar uma div com hidden-xs ela será carregada em um dispositivo xs e não será visível, ou o bootstrap faz essa verificação antes de carregar - poupando recursos e dados da rede - ?

1
  • 2
    Na source da versão 3 só vi display:none sendo aplicado. O mesmo pra versão 4 (em desenvolvimento). Se essas classes fazem somente isso, só não vai deixar o navegador renderizar/mostrar o conteúdo, "por baixo dos panos" ele vai ser carregado normalmente. Como não uso esse framework não sei responder com detalhes, mas aparentemente não faz nenhuma mágica para poupar recursos. :) 27/10/2015 às 22:19

1 Resposta 1

5

Se você der uma olhada no css do bootstrap notará o seguinte código:

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table !important;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}

Pelo que você pode ver não há muito segredo, as classes visible-* recebem display: block e as hidden-* recebem display: none, a diferença é a utilização de @media que verificam qual resolução especifica para ser acionado a classe.

Existe também a classe hidden, que age em todas as resoluções.

Alguns exemplos de como elas são executadas:Jsfiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .