Um guia para iniciantes para criar um site responsivo com Bootstrap – Parte 1

Última atualização em 5 de junho de 2019

Este artigo destina-se a educar os desenvolvedores da Web sobre como usar os princípios básicos do Bootstrap Framework para criar sites responsivos de forma rápida e eficaz. Isso reduz o custo de produção e permite que as empresas capacitem seus desenvolvedores para gerenciar e construir sites e páginas com facilidade. Vou passar pelo processo de download do framework Bootstrap e as vantagens de usar este framework para seus empreendimentos de desenvolvimento web.

O que é Bootstrap?

De acordo com o site oficial do Bootstrap (getbootstrap.com), “Bootstrap é o framework HTML, CSS e JavaScript mais popular para desenvolvimento responsivo e primeiro projeto móvel na web”. Em termos mais simples, o Bootstrap é uma estrutura excepcionalmente simples para ajudar a tornar o desenvolvimento web front-end mais rápido e atraente para desenvolvedores de vários níveis de habilidade.

Por que usar o Bootstrap?

O potencial para projetar sites da Web para vários meios, incluindo telas grandes, telas regulares, telefones e tablets, tornam o Bootstrap incrivelmente atraente e uma escolha inteligente para produzir conteúdo da Web. Uma estrutura como o Bootstrap fornece funcionalidade genérica que pode ser alterada facilmente para otimizar o site para uma variedade de funções e capacidade de resposta que não requer codificação. É em suma, uma das formas mais simples de construir um site e ainda ter a possibilidade de customização, ao contrário de um site WordPress.

Como começar

Para começar a usar o Bootstrap, você deve visitar o site oficial do Bootstrap (http://getbootstrap.com/). Bootstrap é um projeto de código aberto e é hospedado, desenvolvido e mantido no GitHub; isso permite que os usuários tenham acesso ao código-fonte e compreendam todo o escopo do framework como uma ferramenta para construção de sites.

Existem três maneiras de baixar a versão atual do Bootstrap (v3.3.6): você pode baixar uma versão compatível do Bootstrap, baixar o código-fonte do Bootstrap e portar a estrutura do Bootstrap de Less para Sass. Neste caso, se você é iniciante, sugiro apenas baixar a versão compilada do Bootstrap. Se você deseja integrar o framework Bootstrap em projetos Rails, Compass ou Sass-only, é quando você deve portar o download de Less para Sass.

Depois de baixar o arquivo Boostrap, você deve descompactar a pasta compactada para ver a estrutura do framework Bootstrap compilado. Veja abaixo a estrutura do arquivo:

Agora você pode simplesmente soltar esses arquivos no sistema de arquivos de qualquer projeto da Web em que esteja trabalhando e começar a trabalhar com o Bootstrap para projetar e construir o projeto desejado. Para obter mais informações sobre a funcionalidade do Bootstrap, que abordaremos mais na Parte 2 deste post, sinta-se à vontade para visitar o site getboostrap.com para ver os componentes, recursos CSS e funções JavaScript que são acessíveis com o framework.

Design responsivo

O design responsivo é uma das características marcantes do framework Bootstrap; a capacidade de desenvolver de forma responsiva com o Bootstrap permite que os desenvolvedores possam desenvolver um único site que pode ser formatado corretamente em todas as plataformas de visualização. Muitas vezes, um site pode ser bem projetado e a experiência do usuário é ideal em apenas uma plataforma ou tamanho de tela específico. O Bootstrap faz um trabalho incrível para combater esses problemas, permitindo que os desenvolvedores atribuam certas colunas da página da Web a determinados tamanhos quando lidas em uma tela menor. Existem quatro tipos de dispositivos que o Bootstrap considera ao criar sites responsivos:

• Dispositivos extra pequenos (smartphones <768px)
• Dispositivos pequenos (tablets >= 768px)
• Dispositivos médios (computadores >= 992px)
• Dispositivos grandes (computadores >= 1200px)

O desenvolvedor pode adicionar tags a essas classes acima para definir determinado conteúdo da Web para diminuir, expandir, ocultar ou ficar visível em determinadas plataformas. Isso é extremamente útil para simplificar o processo de construção da aparência do site.

Sistema de rede

O Bootstrap possui um sistema de grade que é o principal recurso que permite que o framework seja usado para projetar sites responsivos. Todas as linhas no Bootstrap devem ser colocadas em uma classe de contêiner e, em seguida, as linhas subsequentes podem ser definidas como determinados tamanhos.

Aqui está um exemplo de uma notação para o sistema de grade:

• A classe de linha predefinida produz uma linha
• Dentro dessa linha, a segunda classe especifica “col-md-6”
• Isso significa que a classe está produzindo uma coluna que abrange 6 colunas na página da web
• O “md” especifica que isso ocorrerá apenas em dispositivos médios ou desktops menores ou iguais a 768 px.
• A classe “offset” significa que essas colunas serão deixadas em branco. Nesse caso, o deslocamento é 3, portanto, três colunas ficarão com espaço em branco para preencher parte do conteúdo.
  Esse sistema de grade permite que os desenvolvedores definam rapidamente seções de conteúdo e tenham o espaçamento apropriado entre o conteúdo para ter um design limpo e responsivo.

Desafios com Bootstrap

Os tamanhos dos arquivos JavaScript e CSS são grandes ao baixar diretamente todos os arquivos Bootstrap. Isso pode levar a alguns desafios ao criar uma página rápida. Isso ocorre porque todos os arquivos dentro dos arquivos do Bootstrap não são completamente usados ​​e isso pode significar que o download de dados desnecessários pode ser um problema. Isso pode afetar a experiência do usuário, portanto, sinta-se à vontade para verificar isso com mais profundidade visitando a postagem Como usar o básico do Bootstrap para aprimorar a experiência do usuário (https://moz.com/ugc/how-to-use-bootstrap- básico para aprimorar a experiência do usuário).

Espero que todos experimentem o Bootstrap, pois é uma estrutura fantástica para criar designs de sites responsivos e limpos. Fique atento para o próximo post da série abordando mais conceitos iniciais sobre o Bootstrap.

Autor: Esme Vazquez, Desenvolvedor Web Júnior

Um criador, artista, jogador, codificador, desenvolvedor web e blogueiro; Esme é a criadora da recente publicação do blog Indiellect no site de blog de gerenciamento de conteúdo, Medium. Sua experiência atual está em desenvolvimento web e desenvolvimento de jogos; ela está atualmente trabalhando e sendo treinada em SEO na That! Empresa em Leesburg, FL como seu desenvolvedor web júnior. Ela aspira a fazer videogames no futuro que retratem a beleza da humanidade. Se houver alguma dúvida, sinta-se à vontade para twittar para ela em @EsmeVazquez18 e/ou adicioná-la no LinkedIn.