O twitter bootstrap é um framework para web. Desenvolvido pelos próprios funcionários do twitter, ele é elegante, intuitivo e foi feito para o desenvolvimento web fosse mais facilitado.
Ok, ok… Mas como eu uso essa maravilhosa ferramenta??????
Galera, é simples demais! Só ter uma base de HTML, como essa mais abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Usando o Bootstrap</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<h1>Olá, mundo!</h1>
<script src=”http://code.jquery.com/jquery.js”></script>
<script src=”js/boostrap.min.js”></script>
</body>
</html>
Depois disso, é só ir acrescentando com os componentes lá da documentação (que tem disponibilizado no próprio site).
Alguns componentes:
- Menu dropdown;
- Agrupamento de botões de ações;
- Barras de navegação + breadcrumb;
- Tipografia personalizada;
- Thumbnails;
- Barras de progressos;
- Galeria de imagens;
- Modais;
- etc.
Porque o Bootstrap???
Além de ter uma inferface bem agradável aos olhos, o framework também é responsivo (veja logo depois um exemplo) e também trabalha com grids!
Design Responsivo
O framework também conta com design responsivo. Basta, apenas, adaptar as classes dos containers. MAS COMO FAZ ISSO??? Calma, calma… O Bootstrap funciona com duas divisórias-mães: a container e row. Para torná-las responsivas, só é colocar “-fluid” no final, como um sufixo. Veja no exemplo:
<!– Container não responsivo –>
<div>
<div>
<p>Olá.</p>
</div>
</div>
<!– Container responsivo –>
<div>
<div>
<p>Olá.</p>
</div>
</div>
Bem, é isso aí, galera! Bom trabalho com o bootstrap.
Fala a ninguém não, mas, acessa o http://globocom.github.io/bootstrap/ que a documentação está em português!
Até mais!
