Como ocultar elementos em layouts responsivos com Bootstrap?
Publicado em 2024-12-21
Navegar:239
Ocultando elementos em layouts responsivos com Bootstrap
Ao projetar layouts responsivos, gerenciar o espaço se torna crucial, especialmente em telas menores. Bootstrap fornece suporte para recolher itens da barra de menu para dispositivos móveis, mas e se você quiser ocultar outros elementos da página de forma semelhante?
Solução:
Bootstrap oferece classes que permitem para ocultar elementos com base no tamanho da tela:
- Dispositivos Extra Pequenos: Telefones (
- Dispositivos pequenos: Tablets (≥768px) - .visible-sm-* (mostrar), .hidden -sm (ocultar)
- Dispositivos médios: Desktops (≥992px) - .visible-md-* (mostrar), .hidden-md (ocultar)
- Dispositivos grandes: Desktops (≥1200px) - .visible-lg-* (mostrar), .hidden -lg (ocultar)
Exemplo de uso:
Para ocultar um elemento .nav-pills em telas pequenas:
Notas adicionais:
- Para Bootstrap 4, use hidden-*-up (oculta para pontos de interrupção maiores) ou hidden-*-down (oculta pontos de interrupção menores).
- Bootstrap 3.2.0 obsoleto .hidden-* em favor de .visible-*.
- Em versões mais antigas do Bootstrap, .hidden-phone e .hidden-tablet estão obsoletos.
Tutorial mais recente
Mais>
-
VariedadeMétodos são fns que podem ser chamados em objetos Arrays são objetos, portanto também possuem métodos em JS. slice(begin): extrai parte do arr...Programação Publicado em 2024-12-21 -
Como posso criar um iframe de tela inteira com 100% de altura e barras de rolagem ocultas?iframe de tela cheia com altura de 100%Consulta:A altura do iframe=100% é universalmente compatível entre navegadores? Ao usar XHTML1 como tipo de doc...Programação Publicado em 2024-12-21
-
Como combinar dois arrays associativos em PHP preservando IDs exclusivos e manipulando nomes duplicados?Combinando matrizes associativas em PHPEm PHP, combinar duas matrizes associativas em uma única matriz é uma tarefa comum. Considere a seguinte solici...Programação Publicado em 2024-12-21
-
Como resolver erros do vinculador LNK2001 em projetos mistos C e C++ no VS2010?Resolvendo erros de vinculador em projetos C e C mistos no VS2010Descrição do problemaA integração do código C em um projeto C em diferentes projetos ...Programação Publicado em 2024-12-21
-
Como habilitar variáveis definidas pelo usuário do MySQL no .NET MySqlCommand?Usando variáveis definidas pelo usuário do MySql no .NET MySqlCommandAo executar uma instrução MySQL envolvendo variáveis definidas pelo usuário n...Programação Publicado em 2024-12-21
-
Como atualizar PHP no XAMPP para Windows: um guia passo a passoAtualizando o PHP no XAMPP para Windows: um guia abrangenteAtualizar o PHP no XAMPP para Windows é crucial para manter a segurança, a funcionalidade e...Programação Publicado em 2024-12-21
-
Como posso determinar com segurança se meu script PHP está sendo executado na linha de comando ou via HTTP?Determinando linha de comando versus execução HTTP em PHPUma tarefa comum no desenvolvimento de scripts PHP é determinar o tipo de ambiente de execuçã...Programação Publicado em 2024-12-21
-
Além das instruções `if`: onde mais um tipo com uma conversão `bool` explícita pode ser usado sem conversão?Conversão contextual para bool permitida sem conversãoSua classe define uma conversão explícita para bool, permitindo que você use sua instância '...Programação Publicado em 2024-12-21
-
Como posso aumentar o tamanho máximo dos dados POST para meus formulários da Web?Maximizando o tratamento de dados de postagem para envios de formulários aprimoradosNo desenvolvimento web, é comum encontrar situações em que quantid...Programação Publicado em 2024-12-21
-
Como definir membros estáticos const std::string em C++?Definindo membros de dados estáticos do tipo const std::stringEm C , definindo um membro const estático privado do tipo std::string dentro de uma clas...Programação Publicado em 2024-12-21
-
Como posso evitar erros de “ConnectionClosed” ao fazer solicitações HTTP simultâneas no FastAPI usando Uvicorn?Fazendo solicitações HTTP em Uvicorn/FastAPIAo lidar com endpoints HTTP criados usando FastAPI e Uvicorn, é comum solicitar dados de APIs externas. No...Programação Publicado em 2024-12-21
-
Como corrigir “Configurado incorretamente: Erro ao carregar o módulo MySQLdb” no Django no macOS?MySQL configurado incorretamente: o problema com caminhos relativosAo executar python manage.py runserver no Django, você pode encontrar o seguinte er...Programação Publicado em 2024-12-21
-
Como estabelecer HTTPS em um servidor Web Go usando arquivos de certificado não padrão?Como estabelecer HTTPS em um servidor Web Go com arquivos de certificado não padrãoA documentação fornecida recomenda concatenar três arquivos .pem. N...Programação Publicado em 2024-12-21
-
Como posso lidar com segurança com eventos de mouseout em divs absolutamente posicionados com elementos filhos?Tratamento de eventos de mouseout em divs absolutas com elementos filhos sem jQueryAo lidar com divs absolutamente posicionados, lidar com eventos de ...Programação Publicado em 2024-12-21
-
Qual é a diferença entre os operadores `==` e `===` do PHP?Como as comparações de igualdade dupla (==) e tripla (===) do PHP diferem?Ao comparar valores em PHP, dois operadores distintos podem ser empregados: ...Programação Publicado em 2024-12-21
Estude chinês
- 1 Como se diz “andar” em chinês? 走路 Pronúncia chinesa, 走路 aprendizagem chinesa
- 2 Como se diz “pegar um avião” em chinês? 坐飞机 Pronúncia chinesa, 坐飞机 aprendizagem chinesa
- 3 Como se diz “pegar um trem” em chinês? 坐火车 Pronúncia chinesa, 坐火车 aprendizagem chinesa
- 4 Como se diz “pegar um ônibus” em chinês? 坐车 Pronúncia chinesa, 坐车 aprendizagem chinesa
- 5 Como se diz dirigir em chinês? 开车 Pronúncia chinesa, 开车 aprendizagem chinesa
- 6 Como se diz nadar em chinês? 游泳 Pronúncia chinesa, 游泳 aprendizagem chinesa
- 7 Como se diz andar de bicicleta em chinês? 骑自行车 Pronúncia chinesa, 骑自行车 aprendizagem chinesa
- 8 Como você diz olá em chinês? 你好Pronúncia chinesa, 你好Aprendizagem chinesa
- 9 Como você agradece em chinês? 谢谢Pronúncia chinesa, 谢谢Aprendizagem chinesa
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
Decodificação de imagem base64
pinyin chinês
Codificação Unicode
Compressão de criptografia de ofuscação JS
Ferramenta de criptografia hexadecimal de URL
Ferramenta de conversão de codificação UTF-8
Ferramentas online de codificação e decodificação Ascii
Ferramenta de criptografia MD5
Ferramenta on-line de criptografia e descriptografia de texto Hash/Hash
Criptografia SHA on-line