Bootstrap em 10 minutos

Criar tudo do zero é bom. No entanto, às vezes encontramos clientes que desejam uma resposta rápida e eficiente às suas necessidades: Uma página da Web responsiva em um curto espaço de tempo com dropdowns, spinners, login, navbar, footer interativo, slidebars... Neste tutorial você encontrará que o Bootstrap oferece uma dúzia de elementos que tornarão cada trabalho de desenvolvimento de frontend mais eficiente.

Sejamos honestos: CSS pode causar problemas e dores de cabeça, então eles finalmente consertaram com o Bootstrap, uma biblioteca feita por dois ex-desenvolvedores do Twitter.

Eles, Mark Otto e Jacob Thornton, estavam na mesma situação que você e eu, lidando com problemas de HTML e CSS. Exaustos com a situação, decidiram construir uma folha CSS básica desenhada e que pudesse ser importada para qualquer site. Parece ótimo, certo? É exatamente o que o Bootstrap faz.

Agora, como isso facilita a nossa vida, especialmente no desenvolvimento frontend? A resposta está nos sistemas de design, porque com o Bootstrap você não precisa fazer tudo do zero.

Os sistemas de design possuem um conjunto de regras sobre espaçamento, tipografia, recuo e divisão da tela em 12 espaços (ou 6 se forem dispositivos móveis), entre outras. As equipes de design elaboram todos os detalhes harmoniosos para o site e são os desenvolvedores que devem se encarregar de transformar esses designs em uma linguagem de programação para que permaneçam os mesmos, o que pode exigir longas horas de trabalho.

Se as propriedades CSS não forem usadas corretamente, podemos facilmente quebrar ou quebrar o design. É aí que entra esta biblioteca, que nos oferece uma série de novos elementos que não existem em CSS+HTML ou que levariam muito tempo para escrever o código. Veja como o Bootstrap ajuda?

Na web existem diversas ferramentas para desenhar seu projeto, onde você irá apreciar como são os sistemas de desenho, o sombreamento, a cor, as formas, os botões, os dropdowns, os controles liga e desliga, entre outros. Cada detalhe e cada componente requer código CSS. Como atualmente estamos focados em ser mais produtivos e eficazes, não tenha medo de usar essas ferramentas se o fim permitir que você seja mais produtivo e eficaz.

Devemos começar por desenhar o que pretendes alcançar e como queres que o site fique, seja porque tens clientes ou porque queres fazer os teus próprios projetos. Para isso podemos usar Figma, Canva, Sketch ou Excalidraw. Depois de ter o design ou desenho dos componentes de sua página da Web, você pode visitar diretamente a página do Bootstrap  e criar um arquivo HTML com sua estrutura básica.

Vamos bem aqui? Vamos continuar então. Sabemos que trabalhar com float, display e position é algo que falha em CSS, mas o Bootstrap resolveu. Os desenvolvedores e criadores desta biblioteca replicaram o conceito de <table>, só que em vez de usar tabelas, eles usaram <div> (contêineres em caixa). No Bootstrap, os contêineres são denotados com a classe contêiner e servem para se referir a um elemento que conterá muitos outros dentro dele.

Bootstrap tem conteúdo interessante. Você se lembra que eu falei acima sobre responsividade? Responsividade é que nosso código já renderizado fica bonito e bonito em diferentes tamanhos de tela sem ponto de quebra. Com Bootstrap salvamos  media queries, aquela funcionalidade HTML/CSS que permite que o conteúdo de uma página web se adapte ao tipo de mídia em que a página é representada. Isso é fornecido pelo Bootstrap com sua capacidade de resposta.

Bootstrap divide a largura da tela em 12 slots, onde o tamanho de 1 coluna estaria entre 1 e 12 slots. Na mesma ordem, as colunas foram criadas para viver dentro das linhas, assim como <td> e <tr> fazem. Uma linha sempre precisará ser aberta antes que uma coluna possa ser aberta, e todas as colunas em uma linha devem somar no máximo 12 espaços.

Não fique entediado/a, a parte divertida está chegando, eu prometo! O Bootstrap é 100% responsivo, pois é muito fácil decidir como você deseja renderizar um site em diferentes tamanhos de tela. Ao adicionar cada coluna às linhas, você deve atribuir uma classe no seguinte formato:

Muito bem. Agora eu explico os detalhes acima.

Col significa que este elemento deve se comportar como uma coluna Bootstrap. Por sua vez, md refere-se ao tamanho médio da tela, portanto, apenas dispositivos com esse recurso serão aplicados. Por fim, especifica quantos espaços a coluna irá ocupar, lembrando que podem ser ocupados no máximo 12 espaços por linha.

Os tamanhos dos dispositivos Bootstrap são os seguintes:

Telefones: Nothing.

Telefone grande / tablet pequenha: sm.

Tablets: md.

Computador do escritório: lg.

Computadores de mesa extragrandes: xl.

Extra extra grande: xxl.

Estrutura Básica do Bootstrap 5

Se você está assistindo a este tutorial é porque, possivelmente, já sabe como é a estrutura HTML5 que todo site deve ter. Então, o próximo passo é que uma vez que tenhamos nossa estrutura, teríamos que adicionar algumas linhas de código para que, desta forma, fossem compatíveis com o Bootstrap.

Essas linhas serão encontradas no site oficial do Bootstrap. Descemos para a seção onde diz Include via CDN, que nada mais é do que incluir esta biblioteca através de CDN (Content Delivery Network) ou, em espanhol, uma rede de entrega de conteúdo. Isso significa que é um grupo de servidores distribuídos geograficamente que armazenam conteúdo em cache próximo aos usuários finais.

Um CDN permitirá uma transferência rápida de ativos necessários para fazer upload de conteúdo para a Internet. Estão incluídas páginas HTML, folhas de estilo, imagens, vídeos, entre outros. Este Bootstrap que importamos está hospedado na internet e podemos acessá-lo como um recurso de nuvem.

A seguir faremos um Hello World e depois nos aprofundaremos em alguns dos componentes que esta ferramenta nos oferece.

Devemos lembrar que o Bootstrap é apenas uma folha de estilo. Por esse motivo, é fácil incluí-lo em seu site (como fizemos na imagem anterior). Neste ponto, use a tag <link> para incluir os estilos.

Os sites de hoje têm ícones, barras de carregamento, barras de navegação, rótulos, menus suspensos, spinners, modais, carrosséis e muito mais. Sabemos que o HTML tem poucas tags e para fazer uso de menus, ícones ou tags teríamos que usar HTML + CSS. É por isso que o Bootstrap está aqui para nos ajudar e evitar o uso de CSS. Ao importar o Bootstrap para o seu site, você terá um grande portfólio de novos conjuntos de componentes.

Os componentes mais importantes e usados

NavBar

Em quase todos os sites, você obterá uma Navbar. Dependendo do design e da lógica comercial de cada site, o NavBar é onde normalmente estarão o logotipo da empresa, links, menus suspensos, opção de Login e Sign Up.

Vejamos um exemplo de como pode ser a aparência de uma barra de navegação em um site.

O código feito nas imagens anteriores corresponde ao Navbar mostrado acima. Podemos observar tanto no código quanto na renderização do código a distribuição do conteúdo, utilizando as classes que o componente Navbar gera para nós.

Card

Card ou o cartão é um dos componentes mais usados. Os cartões são perfeitos para dar harmonia aos artigos. Pode ver alguns exemplos de Cartões ou cartas no Pinterest ou no feed de qualquer rede social como Instagram, Facebook ou Twitter.

Vejamos um exemplo de Card ou Cartão em um site.

Um Card ou cartão é um contêiner de conteúdo flexível e expansível. Um cartão inclui opções para cabeçalhos, rodapés, cores de fundo e variedade de conteúdo. Nestes cartões poderíamos facilmente colocar um produto (se aplicável), a sua descrição e um botão que nos leva a uma ação como comprar, adquirir, obter mais informações ou outra.

Carrossel

O carrossel é um componente de apresentação de slides para percorrer os elementos (imagens ou slides de texto). O carrossel geralmente é usado abaixo da navbar para informar ao usuário mais informações sobre sua página da Web e o que ele encontrará nela.

Vejamos um exemplo:

Agora vamos ver como o carrossel se parece quando renderizamos nosso código. Os componentes mostrados aqui podem ser estudados em profundidade na página oficial do Bootstrap.

Conclusión

Agora que você conhece o básico do Bootstrap, é hora de se aprofundar um pouco mais e tornar suas páginas da Web mais dinâmicas, responsivas e em pouco tempo. Como experiência pessoal, esta ferramenta tem feito parte dos meus projetos, por isso a recomendo a você. Se você quiser praticar, acesse um site de sua preferência e tente desenhá-lo com o Bootstrap. Assim você aprenderá muito mais.

A documentação do Bootstrap é bastante compreensível. O ideal é começar sem copiar e colar os componentes, mas entendê-los e tirar o melhor proveito deles. Por isso te convido que se você tem interesse em aprender, pode ler alguns tópicos como: Formulários de estilo, sistema de grade, lista de componentes disponíveis para usar seu site, aulas auxiliares, etc. Estes últimos são muito úteis porque são constantemente usados ​​para questões como centralizar texto, centralizar um container ou coluna, adicionar fundos, entre outros.

Bootstrap tem muitas versões. Certifique-se sempre de usar o mais recente em seu projeto, pois, às vezes, quando há uma nova atualização, alguns componentes já foram removidos ou modificados.

Até logo!