Design

Twitter bootstrap

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!

Clique aqui para comentar ( )