Bootstrap – O Framework criado pelo Twitter
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.
Como trabalho muito com o Bootstrap, gostaria de falar bastante dele ao decorrer, apresentando truques, máscaras e aplicações intuitivas.
Comentários
Postar um comentário