# Twitter Bootstrap

> Twitter Bootstrap: o framework front-end mais popular do mundo. Grid system flexível, componentes prontos e desenvolvimento rápido de interfaces responsivas!

URL: https://dpw.dev/miscelanea/twitter-bootstrap/  
Publicado em: 2012-10-31  
Categoria: miscelanea  
Tags: interface, layout, tipografia, web-design  
Autor: Tárcio Zemel

Twitter Bootstrap já não é nenhuma novidade para os desenvolvedores que conseguem acompanhar as melhores tendências e ferramentas lançadas "lá fora" por conseguirem ler em inglês e, apesar de a popularidade do **Twitter Bootstrap** (TB) poder contar com uma curva crescente de uso em solo brasuca, um artigo sobre este fantástico framework vem, sim, em um bom momento. Se quiser saber mais sobre o Twitter Bootstrap, continue lendo!

## O que é o Twitter Bootstrap

[Se você acompanha os artigos do desenvolvimento para web](/feed), deve se lembrar que em março deste ano, [no artigo que comentava sobre o novo tema do blog](/miscelanea/dpw2012-novo-tema-do-desenvolvimento-para-web/), que uma das tecnologias usadas por aqui é o [Twitter Bootstrap](http://twitter.github.com/bootstrap/). Entretanto, foi só um comentário "por alto" e, neste artigo você encontrará mais informações sobre o TB.

Idealmente e [tecnicamente]( http://codeigniterbrasil.com/passos-iniciais/o-que-e-um-framework-definicao-e-beneficios-de-se-usar-frameworks/), o Twitter Bootstrap pode ser considerado um framework. Ele é um projeto que nasceu dentro do Twitter pelas mãos dos desenvolvedores [@mdo](http://twitter.com/mdo) and [@fat](http://twitter.com/fat). Fato curioso é que, inicialmente, tratava-se de um esforço para documentar determinados padrões de design e UI dentro do Twitter, mas a coisa tomou proporções maiores e seus autores decidiram virar amigos da garotada, disponibilizando o [Twitter Bootstrap no Github](https://github.com/twitter/bootstrap) (que, por sinal, é um dos projetos mais populares de lá).

Grosso modo, o TB é um conjunto de HTML, CSS e JavaScript que proporciona uma maneira ultra-rápida, eficiente e profissional de planejar e desenvolver o front-end de web sites, aplicações, sistemas e produtos web através de seus elementos de UI e interações. Na prática, isso quer dizer que você pode "dar vida" a seus sites e produtos web em apenas algumas horas!

Através do uso de HTML5 e CSS3, os projetos feitos com TB são modernos e garantidos de serem "duráveis". Para melhorar, o CSS é feito com [LESS](http://lesscss.org/)! E, para constar, no momento da descrita deste artigo, a versão do Twitter Bootstrap é a 2.2.0.

## Principais características do Twitter Bootstrap

Como citado, o Twitter Bootstrap possui um conjunto incrível de elementos de marcação, estilo e comportamento para que dar a início a projetos de características profissionais seja uma tarefa bem simples para os desenvolvedores web.

### Scafolding

Sua poderosa estrutura conta com:

- Estilos globais que servem para todos os navegadores modernos
- Sistema de grid
- Sistema de grid fluido
- Layout fixo
- Layout fluido para [web design responsivo](/miscelanea/livro-web-design-responsivo/ "Livro "Web Design Responsivo"")

Projetar estruturas de layout com o TB é extremamente simples e muito rápido, já que ele já conta com alguns tipos de grid, layouts e exemplos de marcação para se começar com seu uso imediatamente! Por exemplo, ao se conhecer suas classes, ter um layout fluido é tão simples quanto:

### CSS

Com o poder das classes pré-definidas do TB, é possível ter um visual incrível dos elementos de marcação mais básicos e contar com elementos de UI fantásticos. O CSS do Twitter Bootstrap abrange:

- Tipografia
- Código
- Tabelas
- Formulários
- Botões
- Imagens
- Icon Fonts

Por exemplo, veja como é simples apresentar botões bonitos e funcionais apenas usando algumas classes pré-definidas:

| Botões | class="" |
| --- | --- |
| Padrão | `btn` |
| Primário | `btn btn-primary` |
| Informações | `btn btn-info` |
| Sucesso | `btn btn-success` |
| Aviso | `btn btn-warning` |
| Perigo | `btn btn-danger` |

### Componentes

Provavelmente você nunca criou componentes tão funcionais em seus sites usando uma marcação tão simples e bem pensada, com características cross-browser e visual de encher os olhos. São eles:

- Dropdowns
- Grupos de botões
- Dropdown de botões
- Navegações
- Barra de navegação
- Breadcrumbs
- Paginação
- Rótulos e emblemas
- Tipografia
- Thumbnails
- Alertas
- Barras de progresso
- E mais!

### JavaScript

E, além de prover toda a parte visual para sua aplicação web, o TB também oferece a parte de interação destes componentes visuais! Através de seus plugins próprios para jQuery, é possível obter interações como:

- Transições
- Modais
- Dropdowns
- Scrollspys
- Abas
- Tooltips
- Popovers
- Alertas
- Botões
- Colapsáveis
- Carrosséis
- Autocompletes

É bom demais ou não é? ;-)

## Recursos para Twitter Bootstrap

E, se não fosse bom o suficiente, existem diversos projetos complementares ao Twitter Bootstrap para que sua força e poder de desenvolvimento seja ainda mais potencializado!

- [Globo Bootstrap](http://globocom.github.com/bootstrap/). É fácil traduzir um projeto de sucesso no mundo inteiro e colocar o nome da sua marca... De qualquer maneira, está aí o Globo Bootstrap, que é a tradução do TB para a Língua Portuguesa (sinceramente, a qualidade não está tão boa e não há garantias que acompanhe as atualizações do projeto original Segundo [Alexandre Magno](http://blog.alexandremagno.net/), toda a comunidade web é bem vinda a contribuir com o projeto, inclusive traduções, e a ideia é continuar na ativa)
- [Built With Bootstrap](http://builtwithbootstrap.com/). Uma galeria com sites feitos com Twitter Bootstrap que mostra todo o potencial do framework
- [Bootswatch](http://bootswatch.com/). Algumas pessoas criticam que os sites feitos com o TB se parecem demais. Para os que compartilham desta opinião, não tem mais o que reclamar com o Bootswatch, que é uma coletânea de estilos para o Twitter Bootstrap
- [WrapBootstrap](https://wrapbootstrap.com/). Se quiser investir em templates prontos feitos com TB, esse é o lugar!
- [Font Awesome](http://fortawesome.github.com/Font-Awesome/). Com Font Awesome é possível estender os ícones-fonte do Bootstrap, ficando com uma gama de possibilidades bem maior para compor o visual do seu site.
- [Bootsnipp](http://bootsnipp.com/). Snippets HTML grátis para várias situações comuns de UI para Bootstrap.
- [Fuel UX](http://exacttarget.github.com/fuelux/). Fuel UX estende o Twitter Bootstrap com controles JavaScript adicionais. Complemente as interações de seus projetos em TB com combobox, datagrid, pillbox, busca e spinner.
- [X-editable](http://vitalets.github.com/x-editable/). Se você precisa de um "_edit in place_" em seus projetos, o X-editable vai servir perfeitamente. Ele é um _edit in place_ para se trabalhar com Twitter Bootstrap (e possui versões para jQuery UI e jQuery puro).
- [Bootstrap Shortcodes](http://wp-snippets.com/freebies/shortcodes-for-twitter-bootstrap/). Para os que adoram usar WordPress (eu!), eis uma coletânea de shortcodes para implementar facilmente os elementos visuais do TB.
- [Datepicker for Bootstrap](http://www.eyecon.ro/bootstrap-datepicker/). Se faltava um datepicker para o seu projeto com Bootstrap, agora não falta mais!

## Conclusão

Com **Twitter Bootstrap** é possível dar vida a um projeto em poucas horas, já que sua curva de aprendizado é curtíssima. À medida em que se o vai usando, mais e mais prática é adquirida e, cada vez mais, a produtividade e agilidade em desenvolver o front-end é alcançada. Este é um projeto realmente diferenciado no mundo do desenvolvimento web e seus autores, definitivamente, contribuíram de forma positiva para a melhoria e facilitação do trabalho de seus pares.

Se o objetivo é ter um site bem apresentado, que funcione em todos os browsers modernos e que seja rápido de produzir, então você estava procurando pelo Twitter Bootstrap e não sabia. Agora que sabe, entre no [site oficial do Twitter Bootstrap](http://twitter.github.com/bootstrap/) e comece a estudar e a desenvolver já!

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml