Formas de se trabalhar com Bootstrap 5

Existem diferentes formas de se trabalhar com Bootstrap em nossos projetos. Hoje vamos descobrir que maneiras são essas.

Muito diferente do que se imagina, o Bootstrap pode ser adicionado de diversas formas. Logo abaixo veremos em detalhes cada uma dessas opções, porém, muitas pessoas ainda não gostam de trabalhar com Bootstrap em seus projetos, por falta de conhecimento em relação ao framework, ou, por acreditar que todos os componentes disponíveis ficarão iguais em todos os sites. Vamos quebrar esse tabu e aprender a trabalhar com o framework. Vamos saber também todos as maneiras possíveis.

Curso Bootstrap - Primeiros passos

Conhecer o curso

Bootstrap via CDN

Primeiramente, precisamos saber o que é “CDN”, a sigla vem de Content Delivery Network, que nada mais é, do que um conjunto de servidores espalhados pelo mundo, para que seu conteúdo seja acessado de uma forma estável. Caso queira aprender em mais detalhes sobre CDN’s, recomendo a leitura do artigo O que é CDN? que temos aqui no nosso blog.

Agora que temos essa informação, vamos entender essa forma de importação. Quando usamos o Bootstrap dessa forma, todas às vezes que alguém carregar o nosso site, o servidor mais próximo da localidade de quem está acessando, irá fornecer os estilos para a página. Independentemente de você fazer uso, se é apenas do sistema de grid, ou de algum componente específico. Logo, seu carregamento irá carregar estilos desnecessários. Causando lentidão dependendo da velocidade da internet do usuário.

Outro ponto importante é que, neste caso, não é possível a alteração de nenhuma variável, ou classe do Bootstrap. Você terá que utiliza-lo da maneira com que aparecerem de exemplo no seu site oficial. Sendo possível, eventualmente, sobrescrever as classes se quiser alterar alguma cor, borda ou espaçamento. Ainda assim, é uma prática não recomendada, pelo fato da possibilidade de causar conflitos entre as classes.

Certamente, essa é uma forma de se utilizar bem simples. Não requer nenhuma habilidade especial para efetuar esse procedimento. O desenvolvedor consegue fazer o uso de todas as classes necessárias sem nenhum problema. Justo da alta estabilidade dos servidores, torna a implementação via CDN a forma mais comum do uso do Bootstrap.

Curso Bootstrap - Conhecendo os Utilities e Helpers

Conhecer o curso

Download Manual dos estilos Bootstrap

Outra forma de uso do framework é o download manual, sendo outra maneira também muito simples de se trabalhar com Boostrap. Quando fazermos download dos estilos recebemos quatro arquivos CSS separados, e outras quatro sub separações, dando um total de 16 arquivos diferentes. Recebemos os: reboot, utilities, grid e CSS completo. Todos esses arquivos possuem, como disse anteriormente, quatro arquivos separados, que são os: arquivos CSS minificados, rtl (right to left), rtl minificado e o CSS normal como conhecemos. Arquivos minificados são utilizados para produção, são os mesmos estilos CSS, só que de uma forma que o computador leia mais rápido. Já os rtl é uma implementação que existe apenas na versão 5 do framework. Ela serve para pessoas que utilizam esse tipo de escrita, da direita para a esquerda.

Essa forma de trabalhar com Boostrap nos deixa com um pouco mais de liberdade, pois, se estamos trabalhando apenas com o sistema de grid, podemos utilizar o arquivo bootstrap-grid.css, e assim conforme nossa necessidade.

Entretanto, essa forma também não nos dá total manipulação da ferramenta. Novamente ficamos presos aos estilos definidos por eles, é claro, que como o CDN, podemos sobrescrever classes. Porem também vamos estar propícios aos mesmos problemas.

Essa forma nos assegura de que caso aconteça algo com os servidores Bootstrap, não ficamos sem os estilos. Pois, iremos utilizar os arquivos que fizemos download, da mesma forma que utilizamos nossos estilos.

Curso Bootstrap - Layout e Grid System

Conhecer o curso

Instalação via Package managers dos estilos Boostrap

Essa é a forma de se trabalhar com Bootstrap que nos proporciona total manipulação de todas as variáveis, direto na raiz das estilizações. Ou seja, dessa forma você consegue deixar seu arquivo de estilo consideravelmente mais leve. Trazendo apenas o que utilizar, como, por exemplo, você pode importar apenas um estilo de componente, sem a necessidade de importação de inúmeras classes sem uso.

Como nem tudo são flores, implementar via package managers, tem sua consideração, pois se torna mais complexa de se utilizar, principalmente para uma pessoa que está começando e não possui muita experiência. Nesse caso você precisará ter um conhecimento prévio de Sass. Também é importante conhecer o gerenciador de pacotes que estiver utilizando. Bastante utilizado em projetos grandes, que precisam de alta performance.

Temos aqui no blog o artigo Como instalar e utilizar o Bootstrap via npm ensinando o passo a passo dessa instalação. Usando um dos gerenciadores de pacotes mais conhecidos o npm.

Curso Bootstrap - Trabalhando com formulários

Conhecer o curso

Conclusão

Agora que você tem o conhecimento de todas as diferentes formas de utilização do Bootstrap, fica muito mais fácil de decidir como utilizar. Afinal, não existe uma maneira absoluta de usar, e sim a forma que mais se adéqua a nossa necessidade.

Por fim, caso queira aprender mais sobre o Bootstrap e sua infinidade de recursos saiba que aqui na Treinaweb temos o curso Bootstrap - Primeiros passos que possui 03h20 de vídeo e um total de 15 exercícios. Conheça também nossos outros cursos de Bootstrap.

Veja quais são os tópicos abordados durante o curso de Bootstrap - Primeiros passos:

• Conhecerá a estrutura do framework e seus conceitos essenciais;
• Entenderá as diferentes maneiras de incorporar o Bootstrap a uma aplicação web;
• Compreenderá o Grid System e o Flexbox incorporados ao Bootstrap;
• Conseguirá criar interfaces responsivas e adaptativas de maneira muito simples.