Bootstrap – O Framework criado pelo Twitter

0
863

Olá, senhores! Sou o sumido co-fundador, Gustavo (eu não sei fazer apresentações, logo ignorem isto e partam para o conteúdo).

Enfim… O Bootstrap é um framework front-end para desenvolvimento web. Ele foi criado pela equipe de desenvolvimento do Twitter e conta com uma série de itens (isto inclui CSS3 em inputs e efeitos jQuery).

O framework é tão potente que alguns sites bem conhecidos o usam, como exemplo o Kippt,JSHint, SoundReady etc.

Certo, mas o que eu preciso para utilizar o Bootstrap?

Bem simples. Basta você utilizar uma base HTML e ir incrementando com os componentes. Mas antes, obviamente, é necessário realizar o download do Bootstrap.
A base HTML deve ser semelhante a esta:

<!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>

O Bootstrap conta com design responsivo, bastando adaptar as classes dos containers. Como assim? O Boostrap funciona com duas divisórias-mães: a container e row. Para torná-las responsivas, basta acrescentar o sufixo “-fluid” (sem aspas).

Exemplo:
<!-- Container não responsivo -->
<div class="container">
<div class="row">
<p>Olá.</p>
</div>
</div>
<!-- Container responsivo -->
<div class="container-fluid">
<div class="row-fluid">
<p>Olá.</p>
</div>
</div>

Para mais exemplos de estruturação, acesse a página scaffolding.

Componentes

O framework ainda conta com uma série de componentes. Entre eles:

  • 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.

Para utilização e adaptação destes e outros componentes, acesse as páginas components e javascript.

Como trabalho muito com o Bootstrap, gostaria de falar bastante dele ao decorrer, apresentando truques, máscaras e aplicações intuitivas.

RECEBA NOSSAS ATUALIZAÇÕES GRÁTIS
Enviamos nossos novos posts por e-mail para que você não perca nenhuma novidade!