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