Bootstrap 3

Twitter Bootstrap j no nenhuma novidade para os desenvolvedores que conseguem acompanhar as melhores
tendncias e ferramentas lanadas l fora por conseguirem ler em ingls e, apesar de a popularidade do Twitter
Bootstrap (TB) poder contar com uma curva crescente de uso em solo brasuca, um artigo sobre este fantstico
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, deve se lembrar que em maro deste ano, no artigo que
comentava sobre o novo tema do blog, que uma das tecnologias usadas por aqui o Twitter Bootstrap. Entretanto, foi s
um comentrio por alto e, neste artigo voc encontrar mais informaes sobre o TB.

Idealmente e tecnicamente, o Twitter Bootstrap pode ser considerado um framework. Ele um projeto que nasceu
dentro do Twitter pelas mos dos desenvolvedores @mdo and @fat. Fato curioso que, inicialmente, tratava-se de um
esforo para documentar determinados padres de design e UI dentro do Twitter, mas a coisa tomou propores
maiores e seus autores decidiram virar amigos da garotada, disponibilizando o Twitter Bootstrap no Github (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-rpida, eficiente e
profissional de planejar e desenvolver o front-end de web sites, aplicaes, sistemas e produtos web atravs de seus
elementos de UI e interaes. Na prtica, isso quer dizer que voc pode dar vida a seus sites e produtos web em
apenas algumas horas!

Atravs do uso de HTML5 e CSS3, os projetos feitos com TB so modernos e garantidos de serem durveis. Para
melhorar, o CSS feito com LESS! E, para constar, no momento da descrita deste artigo, a verso do Twitter Bootstrap
a 2.2.0.
Principais caractersticas do Twitter Bootstrap

Como citado, o Twitter Bootstrap possui um conjunto incrvel de elementos de marcao, estilo e comportamento para
que dar a incio a projetos de caractersticas 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

Projetar estruturas de layout com o TB extremamente simples e muito rpido, j que ele j conta com alguns tipos de
grid, layouts e exemplos de marcao para se comear com seu uso imediatamente! Por exemplo, ao se conhecer suas
classes, ter um layout fluido to simples quanto:

1
2
3
4
5
6
7
8
9
10

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>

CSS

Com o poder das classes pr-definidas do TB, possvel ter um visual incrvel dos elementos de marcao mais bsicos
e contar com elementos de UI fantsticos. O CSS do Twitter Bootstrap abrange:

Tipografia

Cdigo

Tabelas

Formulrios

Botes

Imagens

Icon Fonts

Por exemplo, veja como simples apresentar botes bonitos e funcionais apenas usando algumas classes pr-definidas:

Botes

class=

Padro

btn

Primrio

btn btn-primary

Informaes

btn btn-info

Sucesso

btn btn-success

Botes

class=

Aviso

btn btn-warning

Perigo

btn btn-danger

Componentes

Provavelmente voc nunca criou componentes to funcionais em seus sites usando uma marcao to simples e bem
pensada, com caractersticas cross-browser e visual de encher os olhos. So eles:

Dropdowns

Grupos de botes

Dropdown de botes

Navegaes

Barra de navegao

Breadcrumbs

Paginao

Rtulos e emblemas

Tipografia

Thumbnails

Alertas

Barras de progresso

E mais!

JavaScript

E, alm de prover toda a parte visual para sua aplicao web, o TB tambm oferece a parte de interao destes
componentes visuais! Atravs de seus plugins prprios para jQuery, possvel obter interaes como:

Transies

Modais

Dropdowns

Scrollspys

Abas

Tooltips

Popovers

Alertas

Botes

Colapsveis

Carrossis

Autocompletes

bom demais ou no ? ;-)

Recursos para Twitter Bootstrap

E, se no fosse bom o suficiente, existem diversos projetos complementares ao Twitter Bootstrap para que sua fora e
poder de desenvolvimento seja ainda mais potencializado!

Globo Bootstrap. fcil 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 traduo do TB para a Lngua Portuguesa (sinceramente, a
qualidade no est to boa e no h garantias que acompanhe as atualizaes do projeto
original Segundo Alexandre Magno, toda a comunidade web bem vinda a contribuir com o projeto, inclusive
tradues, e a ideia continuar na ativa)

Built With Bootstrap. Uma galeria com sites feitos com Twitter Bootstrap que mostra todo o potencial do
framework

Bootswatch. Algumas pessoas criticam que os sites feitos com o TB se parecem demais. Para os que
compartilham desta opinio, no tem mais o que reclamar com o Bootswatch, que uma coletnea de estilos
para o Twitter Bootstrap

{wrap}bootstrap. Se quiser investir em templates prontos feitos com TB, esse o lugar!

Font Awesome. Com Font Awesome possvel estender os cones-fonte do Bootstrap, ficando com uma gama
de possibilidades bem maior para compor o visual do seu site.

Bootsnipp. Snippets HTML grtis para vrias situaes comuns de UI para Bootstrap.

Fuel UX. Fuel UX estende o Twitter Bootstrap com controles JavaScript adicionais. Complemente as interaes
de seus projetos em TB com combobox, datagrid, pillbox, busca e spinner.

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 verses para jQuery UI e jQuery puro).

Bootstrap Shortcodes. Para os que adoram usar WordPress (eu!), eis uma coletnea de shortcodes para
implementar facilmente os elementos visuais do TB.

Datepicker for Bootstrap. Se faltava um datepicker para o seu projeto com Bootstrap, agora no falta mais!

Concluso

Com Twitter Bootstrap possvel dar vida a um projeto em poucas horas, j que sua curva de aprendizado
curtssima. medida em que se o vai usando, mais e mais prtica adquirida e, cada vez mais, a produtividade e
agilidade em desenvolver o front-end alcanada. Este um projeto realmente diferenciado no mundo do

desenvolvimento web e seus autores, definitivamente, contriburam de forma positiva para a melhoria e facilitao do
trabalho de seus pares.

Fonte: http://desenvolvimentoparaweb.com/miscelanea/twitter-bootstrap/