Quando vamos desenvolver um projeto web, um sistema por exemplo, é importante pensar em navegação, desenvolver padrões e estar preparado para novas telas e mudanças. A solução é criar um "tema" para sua interface, ou seja, criar todos os elementos ( botões, formulários.. ) e chama-los quando necessário. Isso permite que novas telas sejam criadas com facilidade e também torna seu trabalho mais produtivo. O Twitter Bootstrap entra ai para te ajudar a ter produtividade, de maneira bonita e flexível, eliminando processos trabalhosos permitindo que você tenha mais foco no que está desenvolvendo.
O Twitter Bootstrap foi projetado para auxiliar pessoas de todos os níveis, seja você um desenvolvedor client-side ou back-end. Ele foi desenvolvido para navegadores modernos, mas os antigos não ficam de fora não, ele funciona do Internet Explorer 7 em diante.
Responsive web design, ótima documentação, dezenas de componentes funcionais totalmente pronto para uso, sem falar nos plugins em jQuery. É interessante dizer também que ele é amigável com a tecla delete.
E tem mais, o projeto é open-source, o que significa que você pode colaborar para torna-lo cada vez melhor.
Veja um Tumblr (não oficial) com sites que foram desenvolvidos com auxilio do Twitter Bootstrap
Desvantagens?
Muita gente pode não concordar com a ideia de ter componentes “prontos” em um projeto, eu também concordo... Porém o Twitter Bootstrap de “segunda impressão” se mostrou muito eficiente e sem desvalorizar o trabalho de um UX Designer.
A desvantagem é que querendo ou não você precisa se basear na documentação dele, e isso pra muita gente pode ser uma barreira, vamos ver em seguida exemplos práticos e tudo ficará claro.
Começando a usar
A parte mais interessante do artigo, vamos começar a usar!
Primeiro vou mostrar um exemplo prático que com simples passos já nos permite criar belas interfaces. Em seguida vamos falar sobre a personalização dos componentes através do lessCSS.
1) Baixando o arquivo no github: http://twitter.github.com/bootstrap/assets/bootstrap.zip
2) Vamos conhecer os diretórios:
- Pasta CSS: encontra-se os arquivos de estilo.
- Pasta JS: contem os arquivos bootstrap.js e bootstrap_min.js que são todos os componentes js.
- Pasta IMG: onde fica os sprites de ícones
Até ai nada feito, mas você já tem sua interface 50% pronta!
Crie um arquivo HTML (índex.html) chamando os arquivos js (inclua o jQuery) e css:
Listagem 1: Arquivo index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Twitter Bootstrap</title>
<!-- JQUERY -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
<!-- TWITTER BOOTSTRAP CSS -->
<link "css/bootstrap.css" rel="stylesheet" type="text/css" />
<!-- TWITTER BOOTSTRAP JS -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- CLASSE QUE DEFINE O CONTAINER COMO FLUIDO (100%) -->
<div class="container-fluid">
<!-- CLASSE PARA DEFINIR UMA LINHA -->
<div class="row-fluid">
<!-- COLUNA OCUPANDO 2 ESPAÇOS NO GRID -->
<div class="span2">
Side bar
</div>
<!-- COLUNA OCUPANDO 10 ESPAÇOS NO GRID -->
<div class="span10">
Conteúdo Geral
</div>
</div>
</div>
</body>
</html>
Agora já temos uma estrutura pronta, com sidebar e container geral. Perceba que o código está comentado, e foi
...
Exibição do post interrompida. Para ler conteúdo completo,
clique aqui
27/06/2012 11:53:00
2012
2012
6
0
