Estou postando conteúdos sobre Bootstrap e achei interessante postar também sobre os erros comuns no Bootstrap que muitos desenvolvedores cometem.
Para quem começa a usar Bootstrap o acha fantástico pois ele economiza no tempo que “perderíamos” se estivéssemos usando CSS puro. Sim, se você não sabe, Bootstrap é um framework para o CSS, é um conjunto de componentes ou classes prontas e pré-definidas para usarmos e termos rápidos resultados.
À primeira vista, Bootstrap parece bastante simples. E, de fato, não é difícil começar a usar o Bootstrap. Há muito conteúdo disponível na internet. Essa facilidade geralmente é uma armadilha pois por parecer (e realmente ser) muito simples e fácil de usar, muitos desenvolvedores estão entrando, iniciando com tudo, sem preliminares e, assim, erros acontecem.
Vamos ver alguns erros mais comuns que muitos desenvolvedores cometem ao usar Bootstrap.
#1 Bootstrap não fará tudo de CSS para você
Bootstrap tem muita coisa, mas não é “tudo” ou o super deus que muitos pensam. Bootstrap vem com modelos básicos de design HTML e CSS que incluem muitos componentes de UI comuns:
- Tipografia,
- tabelas,
- formulários,
- botões,
- glifos,
- menus suspensos,
- botões e grupos de entrada,
- navegação,
- paginação,
- rótulos e emblemas,
- alertas,
- barras de progresso,
- modais,
- guias,
- acordeões,
- carrosséis.
E ainda muito mais! Sim até eu escrevendo esse pouco de itens da lista acho muita coisa e olha que nem listei tudo. Mas não se empolgue exageradamente e pense que sua vida será um mar de rosas na estilização das suas pagínas.
O Bootstrap fornece sim um conjunto de itens razoáveis para você escolher e o ajudará a se concentrar mais no trabalho de desenvolvimento do que no design. Mas teremos um site bonito em funcionamento rapidamente 🙂
#2 Não preciso saber CSS para usar Bootstrap
Estaremos bem errados ao pensar que para usar Bootstrap não precisaremos saber CSS. Qualquer desenvolvedor front-end precisa aprender CSS e HTML5. São o feijão com arroz do mundo front-end da programação.
Coloque na sua mente isso: Bootstrap não foi feito para ensinar CSS!
Além de saber CSS, talvez precise de um designer para ajudar em seu layout. Sim, isso evitará que seu site fique igual ao de milhares existentes e construídos com Bootstrap. Muitos desenvolvedores reclamam que sites em Bootstrap são parecidos. Isso não quer dizer que Bootstrap é limitado, mas sim que o desenvolvedor não desenvolveu de forma caprichada o front-end. Clique aqui e veja no próprio site do bootstrap o tanto de modelos diferentes que existem e milhares de possibilidades de criar layouts com Bootstrap.
#3 Modificar o arquivo bootstrap.css
Nunca modifique o arquivo bootstrap.css! Esse arquivo é um dos principais arquivos do Bootstrap. Ele contém todas as regras de estilo e formatação que são aplicadas aos elementos HTML quando o Bootstrap é utilizado em um projeto. O arquivo “bootstrap.css” define estilos para tipografia, cores, layout responsivo, componentes e muito mais.
Se você fizer alterações no arquivo bootstrap.css, as coisas irão piorar e ficarem complicadas muito antes do que você imagina. Não há necessidade de tocar na folha de estilo bootstrap.css.
Se realmente precisar criar seus próprios estilos CSS a melhor forma é criar seu próprio arquivo .css de folha de estilo. Crie seu novo seletor CSS, use-o no HTML e, contanto que você declare suas classes CSS após os estilos Bootstrap, suas definições substituirão os padrões do Bootstrap.
Veja também: O que são LESS e SASS em CSS?
#4 Exagerar no uso dos recursos do Bootstrap
Não é porque Bootstrap tem muitas coisas que precisamos usar todas! Por exemplo, não precisa usar muitos plugins, isso fará seu site ficar sobrecarregado.
#5 Usando de forma errada o plugin Modal do Bootstrap
O Modal do Bootstrap é um componente que exibe uma janela modal na tela com um formulário de entrada. Ele permite que o usuário insira informações ou faça uma escolha antes de continuar a interação com o site ou aplicativo. O modal prompt é útil para exibir mensagens importantes, solicitar confirmação ou coletar dados adicionais dos usuários.
Embora o modal seja fácil de usar e ofereça ampla personalização, há algumas coisas que precisamos ter em mente para evitar usos indevidos comuns.
Evite,
- Mostrar mais de um prompt modal ao mesmo tempo. Bootstrap não oferece suporte a modais sobrepostos. Apenas um modal por vez pode estar visível.
- O modal Bootstrap aparecer em segundo plano: Certifique-se sempre de que o contêiner modal e seus elementos pai não tenham nenhum posicionamento especial aplicado. Se o contêiner modal ou seu elemento pai tiver uma posição fixa ou relativa, o modal não será exibido corretamente. A melhor prática é colocar o HTML de um modal logo antes da tag de fechamento </body>, ou melhor ainda, em uma posição de nível superior no documento logo após a tag de abertura <body>. Esta é a melhor maneira de evitar que outros componentes afetem a aparência e funcionalidade do modal.
- Não saber do bug do Modal nos dispositivos móveis: Principalmente em iOS, há alguns alertas que precisamos estar cientes trabalharmos com modais em dispositivos móveis com teclados virtuais. Por exemplo, no iOS há um bug de renderização que não atualiza a posição dos elementos fixos quando o teclado virtual é acionado.
#6 Problema no componente do botão envio de arquivo
Bootstrap não possui um componente designado para um botão de upload de arquivo. Mas há muitos códigos CSS que você pode pegar pela internet para resolver essa carência; um exemplo é o site de Cory LaViska.
#7 Usar javaScript quando não deve
Saiba que todos os plugins do Bootstrap podem ser usados sem escrever uma única linha de JavaScript. Você pode usar as marcações(palavras) da própria API do plugin.
Usar JavaScript quando não se deve ou não é necessário poderá complicar muito mais que ajudar. Faça o simples e pronto!
#8 Não usar Bootlint para facilitar o uso do Bootstrap
Bootlint é uma ferramenta que verifica automaticamente as páginas criadas com Bootstrap em busca de erros básicos. Ele pode ser usado no navegador ou via linha de comando com Node.js
usar BootLint pode evitar que muitos erros comuns ocorram e que fariam retardar o desenvolvimento de um projeto.
#9 Fazer Menu Abrir ao Posar o Cursor do Mouse – “Hover”
Como configurar Bootstrap para fazer com que o menu suspenso seja aberto ao passar o mouse, em vez de clicar? Isso foi feito propositalmente, pois é uma decisão tomada pela equipe de desenvolvimento do Bootstrap.
O raciocínio por trás desse problema específico é que fazer as coisas funcionarem ao passar o mouse não ajuda os usuários de dispositivos sensíveis ao toque. Nesses dispositivos não há mouse, logo, não existe como hover(passar mouse em cima). Há apenas eventos de toque. Portanto, isso não funcionará corretamente em nenhum dispositivo habilitado para toque.
Bom, esses foram erros mais comuns no BootStrap que muitos cometem. Se quiser saber mais sobre Bootstrap acesse os outros posts clicando aqui.
Fonte: getbootstrap