Trabalhar com páginas web requer muito mais do que apenas saber as linguagens que devemos usar, há uma série de marcos que devemos cumprir para desenvolver um produto com um resultado excepcional. Um desses marcos é o design e a organização dos elementos que serão exibidos na tela.
Vamos imaginar que devemos projetar uma página da web, se começarmos do zero devemos levar em consideração como o menu, as tabelas, os botões devem ser, coisas tão simples como os ícones que colocaremos em alguns botões de ação, etc.
Como podemos ver, é um trabalho árduo, principalmente se quisermos que tenha uma aparência ótima e tenha um apelo, também devemos ser detalhados para dar um toque pessoal ao site, agora, e se não formos designers? Esta é a grande questão, existem desenvolvedores que fazem vista grossa quando se trata de bom gosto e design, e esses tipos de perfis são inibidos de fazer aparições de qualidade na web. Ou se tivermos bom gosto, mas pouco tempo para projetar?
Para resolver esses dois grandes requisitos, temos Bootstrap que nada mais é do que um Framework CSS que nos permite obter o aspecto básico da nossa página de uma vez sem ter que sofrer com o design, mas além disso também nos ajuda com os efeitos básicos, e uma forma muito especial de estruturar o conteúdo que vamos apresentar.
Vantagens do bootstrapNós já sabemos disso Bootstrap é um Framework CSS e isso nos ajuda a estabelecer os aspectos básicos do nosso site, mas além de ter algumas vantagens em termos de utilização, veremos a seguir alguns dos aspectos positivos que nos traz. Bootstrap:
1. ReutilizarCom Bootstrap Temos muitos componentes feitos por padrão, para que possamos utilizá-los sem modificações em várias partes do nosso site, reduzindo assim o tempo e a quantidade de código que usamos. Isso também favorece o desenvolvimento modular de nossas aplicações.
2. ConsistênciaGraças ao fato de termos muitos componentes feitos de forma genérica, o código é consistente, ou seja, lida com estruturas muito semelhantes, então na hora da leitura, ou da manutenção da aplicação, já saberemos como funciona de forma bem mais simples.
3. Design flexívelO design móvel é muito importante e Bootstrap leva isso em consideração desde o início, temos a flexibilidade de que nosso site se adapta a várias resoluções e layouts de tela automaticamente, poupando muito trabalho de ter que projetar visualizações móveis do zero.
4. ComunidadeOutro aspecto a ter em conta é a documentação, quando utilizamos um framework de terceiros é muito importante ter a quem nos dirigir quando temos dúvidas e neste sentido Bootstrap Não há comparação, pois podemos obter quase todas as respostas às nossas dúvidas sem muito esforço.
Desvantagens do BootstrapEmbora quase tudo seja bom, devemos também falar sobre as desvantagens ou aspectos não tão bons que enfrentamos quando usamos este Framework CSSVamos ver alguns de seus pontos fracos abaixo.
1. Pequeno originalSe não tomarmos um pouco de tempo para fazer nosso design, podemos permanecer tão pouco originais se usarmos Bootstrap sem mais, embora este framework seja desenhado para isso, devido à grande adoção que tem tido, temos que trabalhar um pouco mais para não parecermos a cópia da cópia.
2. Curva de aprendizadoComo tudo, temos que passar por uma curva de aprendizado se quisermos aproveitá-la ao máximo, o problema é que se queremos passar do básico para o avançado, o choque é um pouco forte.
3. Má compatibilidade entre as versõesQuando há uma mudança de versão, a versão anterior perde muita validade e se quisermos atualizá-la vai nos custar caro, principalmente se tivermos feito mudanças importantes para que nosso site fique diferente.
InstalaçãoUma vez que sabemos o que é Bootstrap, e as vantagens e desvantagens de usá-lo em nossos projetos, devemos ir para a parte prática do tutorial, agora vamos aprender de onde podemos obter esse framework e como podemos incluí-lo em nosso projeto.
Obtendo BootstrapA primeira coisa que devemos fazer é obter os arquivos necessários para incluir Bootstrap em nosso projeto, é por isso que devemos visitar o site getbootstrap.com e baixar os arquivos necessários ou, em alternativa, usar um CDN para evitar hospedar os arquivos em nosso servidor e reduzir o uso de nossa largura de banda.
Seja qual for a opção, devemos estar em uma página semelhante à seguinte se clicarmos no botão de download inicial ao visitar a página do framework:
PROLONGAR
Para facilitar o trabalho, vamos supor que baixamos o projeto, ele vem em um arquivo compactado que devemos extrair em um local que possamos usar e que deve ser algo semelhante ao seguinte:
Como podemos ver, dentro do nosso projeto deve haver três pastas, uma para o CSS, outro para as fontes que são usadas e finalmente um para o JS necessário. Com isso já temos disponível Bootstrap, que nada mais é do que copiar o projeto para nossa pasta de recursos.
Comece com o BootstrapComo temos todos os recursos em nossa posse, devemos incluí-los em nosso projeto, para isso podemos criar um arquivo HTML e aí fazer as inclusões necessárias, podemos ver isso com mais detalhes no código a seguir:
Instalando BootstrapComo podemos ver, a única coisa que fizemos foi incluir três arquivos, especificamente dois .css e um .js, é disso que precisamos para começar a usar toda a estrutura, se agora abrirmos nosso arquivo com um navegador, veremos como a fonte das letras é diferente do que normalmente veríamos com um rótulo H1:
A grade de bootstrapPara conseguir a organização de nossos projetos, Bootstrap usar uma grade ou rede, esta é composta por 12 colunas, portanto tudo o que vemos em nossa tela deve estar organizado desta forma, com isso consegue-se que a página possa ser estruturada de tal forma que possamos fazer uso das ferramentas que nos são oferecidas de uma forma muito transparente.
Claro que é um processo de adaptação, mas o importante é que podemos fazer colunas que agrupem vários, assim como quando trabalhamos com as tabelas de HTML que podemos fazer colunas com várias junções com a propriedade span. Para criar um site que use esta estrutura, só precisamos ter o seguinte:
Um div com a classe recipiente, dentro deste um div com a classe fileirae, finalmente, dentro de um ou mais div com a classe repolho, vamos ver no código a seguir um exemplo de uma página com 3 colunas, para isso cada coluna deve agrupar 4 para adicionar um total de 12 que é o que explicamos é o valor padrão de Bootstrap.
Colunas no BootstrapIsso resulta em uma página onde os três divs internos estão em uma única linha dividida em três colunas iguais, como podemos ver na imagem a seguir:Exemplo de como usar colunas no bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilita meu in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Aliquet inteiro metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Por exemplo, pedido de eficácia vel, placerat sit amet purus. Cras id sempre felis. Seja ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilita meu in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Aliquet inteiro metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Por exemplo, pedido de eficácia vel, placerat sit amet purus. Cras id sempre felis. Seja ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilita meu in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Aliquet inteiro metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Por exemplo, pedido de eficácia vel, placerat sit amet purus. Cras id sempre felis. Seja ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.
PROLONGAR
Essa estrutura, apesar de parecer um pouco quadrada, é muito flexível, pois basta fazer uma espécie de jogo com os containers e suas colunas, para alcançar os resultados que desejamos. Com isso, terminamos este tutorial, efetivamente demos nossos primeiros passos com Bootstrap e agora podemos começar a tirar proveito de suas vantagens mais diretamente em nossos projetos ou aplicações web.
