Os 10 erros de bootstrap mais comuns que os desenvolvedores cometem

À primeira vista, o Bootstrap parece bastante simples. E, de fato, não é difícil começar a usar o Bootstrap. Existe uma documentação do Bootstrap muito bem escrita com muitos exemplos de código HTML, CSS e JavaScript. A maioria das armadilhas importantes são mencionadas lá, mas ainda assim alguns erros são bastante sutis ou têm causas ambíguas. Como o Bootstrap parece muito simples e fácil de usar, muitos desenvolvedores estão correndo para o framework e, portanto, erros acontecem.

Vamos dar uma olhada em 10 dos erros, problemas e equívocos mais comuns do Bootstrap quando os desenvolvedores começarem a usá-lo.

Erro comum do Bootstrap nº 1: equívocos básicos sobre o framework

Existem alguns equívocos básicos sobre o framework Bootstrap que as pessoas têm. Isso pode ser porque não está claramente anunciado no site do Bootstrap, ou porque as pessoas não levam tempo suficiente para ler a documentação. O fato é que às vezes os desenvolvedores acabam no canto fazendo coisas erradas e culpam o framework. Então vamos esclarecer alguns fatos básicos.

Bootstrap é abrangente, mas não é enorme nem enorme. O Bootstrap vem com modelos básicos de design HTML e CSS que incluem muitos componentes comuns de interface do usuário. Isso inclui Tipografia, Tabelas, Formulários, Botões, Glyphicons, Dropdowns, Botões e Grupos de Entrada, Navegação, Paginação, Etiquetas e Emblemas, Alertas, Barras de Progresso, Modais, Guias, Acordeões, Carrosséis e muito mais. Você pode escolher e escolher alguns deles e, com sua configuração padrão, gerar rapidamente uma interface do usuário que lida com vários navegadores, dispositivos e resoluções com formato agradável.

O Bootstrap não fará tudo por você, mas fornece um conjunto de padrões razoáveis ​​para escolher e ajudará os desenvolvedores a se concentrar mais no trabalho de desenvolvimento do que se preocupar com o design, e os ajudará a obter um site com boa aparência e funcionando rapidamente. Ele permite a prototipagem rápida, mas não limita os desenvolvedores no caminho.

É extensível o suficiente para que qualquer pessoa possa ajustá-lo para atender às suas necessidades. No início, o Bootstrap tinha algumas limitações, e naquela época era complicado estender os estilos padrão. Mas à medida que a estrutura amadureceu, a extensibilidade também melhorou.

Erro comum do Bootstrap nº 2: pensar que você não precisa saber CSS para usar o Bootstrap e que não precisa de um designer

Se você está pensando que se estiver usando Bootstrap não precisará conhecer CSS, está muito enganado. Qualquer desenvolvedor front-end precisa aprender CSS e HTML5. O Bootstrap está removendo muitas partes complicadas do CSS dos ombros dos desenvolvedores (como prefixos específicos do fornecedor) e está oferecendo um estilo padrão básico, mas você ainda precisa entender o CSS. Você não precisa saber como as consultas de mídia funcionam, mas precisa entender como o design responsivo funciona. O Bootstrap não foi feito para ensinar CSS, mas pode ajudar se você quiser. Examinar o código-fonte em LESS ou SASS é um ótimo ponto de partida.

Em um tópico semelhante, você não precisa ser um designer e pode argumentar que não precisa de um designer com o Bootstrap. No entanto, se possível, use a ajuda de um designer. Uma reclamação comum contra o Bootstrap é que todos os sites do Bootstrap são parecidos, e é fácil acabar com um site que se parece com qualquer outro site do Bootstrap. Mas isso não precisa ser verdade. Milhões de sites na web estão sendo construídos com Bootstrap. Grandes vitrines de como diferentes designs podem ser alcançados podem ser encontradas na Bootstrap Expo, que coleta sites que são construídos com Bootstrap. Dê uma olhada, inspire-se e comece a criar sua própria variação de design.

Erro comum do Bootstrap nº 3: Alterando o arquivo CSS do Bootstrap

Para torná-lo claro e simples: Não modifique o arquivo bootstrap.css .

Se você fizer alterações no arquivo bootstrap.css , as coisas ficarão complicadas muito rápido. Todo o design será interrompido quando você quiser atualizar os arquivos do Bootstrap. Você pode sobrescrever em suas próprias cores de bootstrap padrão de folha de estilo, estilos, margens, preenchimentos, tudo. Não há necessidade de tocar na folha de estilo bootstrap.css .

Não sabe LESS ou SASS? Sem problemas, você pode criar seu próprio arquivo CSS e sobrescrever o que quiser da folha de estilo bootstrap.css original. Assim como mencionamos no erro anterior, conhecer CSS é obrigatório. Crie seu novo seletor CSS, use-o no HTML e, desde que você declare suas classes CSS após os estilos do Bootstrap, suas definições substituirão os padrões do Bootstrap.

Ainda quer saber mais e mergulhar mais fundo? Eu sugiro fortemente e encorajo você a fazê-lo. Use o código-fonte do Bootstrap MENOS. Você entenderá melhor o que está acontecendo e onde está se você usar a fonte LESS e não o CSS estático.

Erro comum do Bootstrap nº 4: usando tudo o que o Bootstrap oferece

Como mencionado anteriormente, o Bootstrap é abrangente. Ele oferece muitos componentes de interface do usuário, modelos de design HTML e CSS e plugins JavaScript. Mas, por favor, seja seletivo. Você não precisa usar todos os recursos do Bootstrap.

Isso é especialmente verdadeiro para plugins. Escolha apenas plugins que façam sentido e não use tudo porque parece legal e legal. Seu site pode ser facilmente exagerado. Considere para começar que você não inclua o arquivo bootstrap.js e crie um site usando apenas HTML e CSS simples. E, em seguida, adicione componentes apenas conforme necessário para funções específicas, um por um.

Erro comum de Bootstrap nº 5: uso indevido de um prompt modal

Os modais de bootstrap oferecem prompts de diálogo flexíveis com a funcionalidade mínima necessária e vêm com padrões inteligentes. Embora o modal seja fácil de usar e ofereça uma personalização rica, há algumas coisas que precisamos ter em mente para evitar usos indevidos comuns.

Mostrando mais de um prompt modal ao mesmo tempo

Bootstrap não suporta modais sobrepostos. Apenas um modal no momento pode ser visível. Mostrar mais de um modal por vez pode ser alcançado, mas requer que um código personalizado seja escrito para lidar com isso corretamente.

O modal de bootstrap aparece em segundo plano

Se o contêiner modal ou seu elemento pai tiver uma posição fixa ou relativa, o modal não será exibido corretamente. Sempre certifique-se de que o contêiner modal e seus elementos pai não tenham nenhum posicionamento especial aplicado. A melhor prática é colocar o HTML de um modal logo antes da tag de fechamento </body> , ou ainda melhor em uma posição de nível superior no documento logo após a tag de abertura <body> . Essa é a melhor maneira de evitar que outros componentes afetem a aparência e a funcionalidade do modal.

Modal nos dispositivos móveis

Existem algumas advertências que os desenvolvedores precisam estar cientes ao lidar com modais em dispositivos móveis com teclados virtuais. Isso é especialmente verdadeiro para dispositivos iOS, onde existe um bug de renderização que não atualiza a posição dos elementos fixos quando o teclado virtual é acionado. Isso não é tratado pelo Bootstrap, portanto, cabe ao desenvolvedor lidar com essas situações no código da melhor maneira para a aplicação em questão.

Erro comum de Bootstrap nº 6: problema no componente do botão de entrada de arquivo

O Bootstrap não possui um componente designado para um botão de upload de arquivo. Uma solução simples e elegante usando apenas HTML e CSS pode ser obtida com o seguinte código de exemplo:

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>

 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

Existem muitos exemplos de como obter um efeito semelhante. Este exemplo de código é emprestado de Cory LaViska, e em seu site você pode ler uma explicação mais detalhada deste problema. Há também um exemplo estendido com mais funcionalidades que está usando código JavaScript adicional.

Erro comum de bootstrap nº 7: complicar demais com JavaScript e ignorar atributos “data-”

Designers, ou apenas desenvolvedores iniciantes de JavaScript, podem facilmente mergulhar no desenvolvimento da Web e criar páginas da Web usando apenas HTML, CSS e Bootstrap. Se eles não forem muito bons em codificação, podem cair na armadilha de usar mal o JavaScript ou simplesmente complicar demais. É importante afirmar que todos os plugins do Bootstrap podem ser usados ​​puramente através da API de marcação, sem escrever uma única linha de JavaScript. Esta é a API de primeira classe do Bootstrap e deve ser sua primeira consideração ao usar plugins.

Por exemplo, podemos ativar uma caixa de diálogo modal sem escrever nenhum JavaScript apenas definindo data-toggle="modal" em um elemento do controlador como um botão ou âncora, e passar parâmetros adicionais usando atributos de data- . No código abaixo, estamos segmentando o código HTML com o ID #myModal . Especificamos que o modal não será fechado quando o usuário clicar fora do modal usando a opção data-backdrop e desabilitamos o evento de chave de escape que fecha um modal com a opção data-keyboard . Tudo em uma linha de código HTML:

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

Erro comum do Bootstrap nº 8: Ignorando ferramentas que facilitam o desenvolvimento do Bootstrap

Erros acontecem, e todo desenvolvedor os comete ocasionalmente. Isso é inevitável, mas é como você lida com o erro que importa. A equipe do Bootstrap percebeu, observando o rastreador de problemas, que as pessoas estão cometendo alguns erros com mais frequência. É por isso que eles tentaram automatizar o processo de desenvolvimento. O resultado é o Bootlint, uma ferramenta de linting HTML para projetos Bootstrap. O Bootlint pode ser usado no navegador ou na linha de comando via Node.js, e ele verificará automaticamente as páginas da Web do Bootstrap quanto a muitos erros comuns de uso do Bootstrap. Adicionar Bootlint à sua cadeia de ferramentas de desenvolvimento web pode eliminar muitos erros comuns que geralmente retardam o desenvolvimento de um projeto.

Caso você queira contribuir com o projeto Bootstrap, vale a pena conferir o Rorschach. Rorschach é um bot verificador de sanidade de solicitação de pull do Bootstrap, que executa algumas verificações em cada nova solicitação de pull. Se uma verificação de sanidade falhar, ele deixa um comentário informativo sobre a solicitação pull explicando o erro e como corrigi-lo e, em seguida, fecha a solicitação pull.

Erro comum de Bootstrap nº 9: IE8 e problemas de incompatibilidade de navegadores mais antigos

O Bootstrap foi desenvolvido para funcionar da melhor maneira possível nos mais recentes navegadores para desktop e dispositivos móveis. Os navegadores mais antigos podem exibir componentes e elementos com estilos diferentes, mas tudo deve ser totalmente funcional. O suporte inclui o Internet Explorer 8 e 9, com uma observação importante de que algumas propriedades CSS3 e elementos HTML5 não são totalmente suportados por esses navegadores.

Para obter suporte completo para o Internet Explorer 8 e outros navegadores mais antigos, você precisa usar um polyfill para CSS3 Media Queries Respond.js, HTML 5 shim que permite o uso de elementos HTML5 e uma tag <meta> apropriada do IE no cabeçalho HTML para certifique-se de que o IE não esteja sendo executado no modo de compatibilidade. Sua cabeça HTML no final deve ser algo assim:

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

No caso de Respond.js , tome cuidado com as seguintes advertências nos ambientes de desenvolvimento e produção.

Erro comum de bootstrap nº 10: ignorando as práticas recomendadas

Uma das perguntas comuns no Stack Overflow é como fazer com que o menu suspenso do Bootstraps seja aberto ao passar o mouse, em vez de clicar. Embora a solução para essa questão não seja complicada e possa ser feita usando apenas CSS, ela não é recomendada. Esse recurso foi deixado de fora da estrutura de propósito, e esta é uma decisão de design feita pela equipe de desenvolvimento. Novamente, isso pode ser feito, mas é preciso entender as repercussões e entender que as melhores práticas existem, especialmente para frameworks mobile first. O raciocínio por trás desse problema específico é que fazer com que as coisas funcionem ao passar o mouse não ajuda os usuários que possuem dispositivos de toque. Nesses dispositivos, não há foco, apenas eventos de toque. Assim, isso não funcionará corretamente em nenhum dispositivo habilitado para toque.

Conclusão de erros de bootstrap

Espero que este pequeno guia do Bootstrap o ajude a evitar alguns dos erros comuns, esclarecer os equívocos usuais e ajudá-lo a obter a maior parte do framework. Tenha em mente que o Bootstrap não é para todos, nem é adequado para todos os projetos. Ao escolher um framework, você precisa de algum tempo para ler a documentação, e você precisa passar algum tempo brincando com o framework para ter uma melhor noção e imagem de como ele funciona. Isso também é válido para o Bootstrap.

Leia a documentação, jogue e experimente as amostras, aprenda o básico e divirta-se criando designs novos e bonitos.