Fala, galera! Tranquilo?

Bom este é um assunto que estão me pedindo bastante para voltar a falar no canal da Fala Ti no Youtubee 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" />
    <!-- Carregando o CSS do Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" /></pre>
<h1>Olá, mundo!</h1>
<pre>
    <!-- jQuery (plugins em JavaScript) -->
<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.

Quer saber mais sobre Bootstrap acesse meu canal no Youtube aqui e veja as aulas grátis.

Sobre o Autor

Jeferson Filipe
Jeferson Filipe

Graduado em Analise e Desenvolvimento de Sistemas, viciado em tecnologia, consultor em informática, desenvolvedor web com php e mysql. Sempre buscando conhecimento e compartilhando ideias.

Este site utiliza Cookies e Tecnologias semelhantes para melhorar a sua experiência. Ao utilizar nosso site você concorda que está de acordo com a nossa Política de Privacidade.