Desenvolvimento de sites e sistemas com Bootstrap

Fala, galera! Tranquilo?

Bom este é um assunto que estão me pedindo bastante para voltar a falar no canal da Fala Ti no Youtube, e resolvi fazer um post sobre o Bootstrap para quem esta começando neste Framework.

Apresentação

O Bootstrap foi desenvolvido pelo pessoal do Twitter, é um framework para designer front-end de sistemas e sites, sendo ele de código aberto (Open Source) que facilita muito o desenvolvimento de interfaces web.

Feito para ser compativel com HTML5 e CSS3, utiliza sistema de criação de layout em grid de 12 colunas facilitando sua organização e comportamento em diversas telas.

Porque usar

Uma excelente documentação, que ajuda bastante quem está aprendendo.
Funciona em diversas telas
Possui todos os requisitos para criar sites e sistemas web com uma interface bem simples e agradável.
Ajuda na criação de layouts por manter padrões.
Funciona em qualquer navegador atual.
Agilidade na manutenção

Porque Não Usar

Terá que seguir os padrões para desenvolvimento.

Seu projeto se torna muito parecido com outros já existentes.

Estrutura do Bootstrap

A estrutura é entendida facilmente pois se em cotra com três pastas distintas, JS, Fontes e CSS, criando um layot em poucos minutos.

Sistemas de Grid

O uso das grids no Bootstrap é fundamental para um bom projeto, e entender sua lógica é simples.O sistema de grids possibilita a divisão em até 12 colunas de mesma largura facilitando o ajuste do layout:

Caso deseja utilizar toda a largura em seu conteúdo, basta criar uma coluna com largura de 12.

Agora se quiser utilizar seu conteúdo dividido em 2 partes iguais, de mesma largura, é só criar 2 colunas com a largura 6 cada uma.

Mas se você deseja dividir o conteúdo em 4 partes iguais, de mesma largura, basta criar 4 colunas com a largura de 4 cada uma.

Veja o exemplo:

Da mesma forma serve para qualquer divisão e posição que quiser colocar o seu conteúdo, desde que o resultado das somas da largura seja sempre igual a 12.

Utilizando grids possibilita mudar o visual de um site ou sistema web de maneira fácil e rápida, alterando apenas o valor da largura das colunas que deseja editar.

E o melhor de tudo você poderá definir diferentes grids para cada tipo de resolução. Esses comportamentos são definidos através das classes xs (dispositivos muito pequenos), sm (dispositivos pequenos), md (dispositivos médios) e lg (dispositivos grandes).

Criando o Primeiro Projeto

Faça o download do Bootstrap no site oficial e descompacte os arquivos para iniciar seu projeto. Crie um arquivo HTML (na raíz da pasta) utilizando a estrutura básica abaixo:

<meta charset="utf-8" />

Bootstrap Template

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

    

        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" /></pre>

<h1>Olá, mundo!</h1>

<pre>

    

<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script>

Este código declara o HTML5 e carrega os principais arquivos que são necessarios como CSS e JS definindo a estrutura básica do projeto.

Conclusão

Pronto! O Bootstrap está configurado e pronto para receber o restante de seu código!

O site oficial tem alguns templates de exemplo que são bastante úteis, principalmente para quem está começando agora no framework.

Apesar de ter suas desvantagem, (que são poucas) recomendo a utilização caso você queira criar sistemas web com rapidez e um ótimo designer, sem falar que facilita muito na manutenção do sistema. Bom esta é minha opinião, use ou de uma olhada na documentação e tire suas próprias conclusões.