Twitter Bootstrap_ Aumentando Sua Produtividade

8/17/2019 Twitter Bootstrap_ Aumentando Sua Produtividade

1/12

8/14/2014 Twitter Bootstrap: Aumentando sua produtividade

http://www.devmedia.com.br/tw itter-bootstrap-aumentando-sua-produtividade/24967 1/12

Gostei (8) (0)

Buscar

comentários post favorito (5)

Twitter Bootstrap:Aumentando suaprodutividade

Veja nesse artigo como aumentar sua produtividade emprojetos web com a ajuda do Twitter Bootstrap. Frameworkque tornou diversas tarefas dos desenvolvedores, muitomais fáceis de serem executadas.

Quando vamos desenvolver um projeto web, um sistema por exemplo, é importante

10 1Curtir 1

LOGIN

http://www.devmedia.com.br/favorite/addfavorite.asp?comp=24967http://www.devmedia.com.br/http://www.devmedia.com.br/favorite/addfavorite.asp?comp=24967


2/12



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 queestá 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” semostrou 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!

http://en.wikipedia.org/wiki/User_experience_designhttp://builtwithbootstrap.tumblr.com/http://www.devmedia.com.br/curso/curso-criando-um-website-com-bootstrap/366http://twitter.github.com/bootstrap/


3/12



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

Twitter Bootstrap

http://twitter.github.com/bootstrap/assets/bootstrap.ziphttp://lesscss.org/


4/12



Side bar

Conteúdo Geral

Agora já temos uma estrutura pronta, com sidebar e container geral. Perceba que o

código está comentado, e foi baseado em um exemplo da própria documentação que

pode ser encontrada aqui: http://twitter.github.com/bootstrap/scaffolding.html. O

sistema de grids dele é bem simples e fácil de usar.

Os elementos de texto (h1, h2, parágrafos) já estão definidos e vamos usá-los agora:

Listagem 2: Usando títulos

Menu

Página Inicial

Vamos criar um menu agora:

Listagem 3: Criando um menu

Menu

http://twitter.github.com/bootstrap/scaffolding.html


5/12



Lorem ipsum

Lorem ipsum

Lorem ipsum

No menu foram usados os estilos de navegação e perceba que o segundo item da lista

recebe uma classe chamada ‘active’ que deixa ele em destaque. Coloquei tambémícones para ilustrar o menu.

Fácil?

Veja o que podemos fazer em poucos minutos:

Listagem 4: Exemplo completo

Twitter Bootstrap


6/12




7/12




8/12



Gostei (8) (0)

O que você achou deste post?

Dá para fazer muita coisa e maneira simples e rápida!

Colaboração e Personalização

É claro que você pode e deve colaborar com o projeto. O link para o github é

https://github.com/twitter/bootstrap/. E no mesmo local você consegue baixar o

Twitter Bootstrap em lessCSS a href="http://lesscss.org"

target="_blank">http://lesscss.org>! O que permite uma personalização completa de

todo o estilo do site, grids e todos os componentes. Caso você deseje ver mais

exemplos de uso, visite http://twitter.github.com/bootstrap/examples.html.

Agradeço a oportunidade de escrever aqui e continuem acompanhando que falaremos

mais sobre Twitter Bootstrap!

Enrique Marques Junior

Front-end Developer na GetNinjas Linkedin: http://br.linkedin.com/in/enriquesaid

Comentário | Tire sua dúvida

http://www.devmedia.com.br/rte3/addcomment.asp?idcomp=24967http://www.devmedia.com.br/autor/enrique-marques-junior/305360http://www.devmedia.com.br/autor/enrique-marques-junior/305360http://twitter.github.com/bootstrap/examples.htmlhttps://github.com/twitter/bootstrap/


9/12



Dreyfi Maicon

Cara parabéns pelo post. Seu código é extremamente organizado, com os devidos

comentários. Sem dúvida me será útil.

[há +1 ano] - Responder

Josias Rodrigues

Excelente trabalho amigo, tudo muitíssimo bem explicado, parabéns.[há +1 ano] - Responder

Uéder Juarez

Um exce lente conteúdo,

mais tira mim uma duvida é possível

usar o Bootstrap sem que seja Responsivo em vez de usar

o grid 960 queria padronizar o meu trabalho usando somente o Bootstrap.

Att: Uéder

[há +1 mês] - Responder

[autor] Enrique Marques Junior

Uéder, beleza?

Então cara, da para usar só o que você deseja do bootstrap, basta entrar no site

deles (http://getbootstrap.com/) e clicar na aba "Customize", lá você pode escolher

o que usar.

Valeu, abss![há +1 mês] - Responder

Publicidade

Serviços

Inclua um comentário

http://www.devmedia.com.br/rte3/addcomment.asp?idcomp=24967http://www.devmedia.com.br/rte3/addcomment.asp?idcomp=24967&idco_pai=39048http://www.devmedia.com.br/rte3/addcomment.asp?idcomp=24967&idco_pai=39038http://www.devmedia.com.br/rte3/addcomment.asp?idcomp=24967&idco_pai=27364http://www.devmedia.com.br/rte3/addcomment.asp?idcomp=24967&idco_pai=24519


10/12



Adicionar aos Favoritos

Marcar como lido/assistido

Incluir anotação pessoal

+Front-end web

Mais postsVideo aula

Restringindo valores não numéricos - Curso de jQuery Básico -

Aula 34

Video aula

Acessando valores via frames - Curso de jQuery Básico - Aula

33

Pocket Video

Desenvolvendo um chat usando NodeJS, Socket.io e jQuery

Artigo

Interface Metro: Criando um Menu Metro com HTML e CSS

Artigo

Programando em HTML5

Artigo

HTML5 Audio Tag: Crie um player de Áudio com HTML5

http://www.devmedia.com.br/html5-audio-tag-crie-um-player-de-audio-com-html5/31039http://www.devmedia.com.br/programando-em-html5/31040http://www.devmedia.com.br/interface-metro-criando-um-menu-metro-com-html-e-css/31041http://www.devmedia.com.br/desenvolvendo-um-chat-usando-nodejs-socket-io-e-jquery/31082http://www.devmedia.com.br/acessando-valores-via-frames-curso-de-jquery-basico-aula-33/31097http://www.devmedia.com.br/restringindo-valores-nao-numericos-curso-de-jquery-basico-aula-34/31098http://www.devmedia.com.br/front-end-webhttp://www.devmedia.com.br/anotacoes/add/?idcomp=24967http://www.devmedia.com.br/favorite/add_finished.asp?comp=24967http://www.devmedia.com.br/favorite/addfavorite.asp?comp=24967


11/12



Artigo

NodeJS: Criando uma Rede Social

Artigo

JavaScript Blog: Criando serviço de microblog com NodeJS

Artigo

Nashorn: Desenvolvendo JavaScript na JVM

Artigo

Padronização com IIFE, AMD e RequireJS

Listar mais conteúdo

Anuncie | Loja | Publique | Assine | Fale conosco

DevMedia

27.838 pessoas curtiram DevMedia.

Plug-in social do Facebook

Curtir

https://www.facebook.com/help/?page=209089222464503https://www.facebook.com/help/?page=209089222464503https://www.facebook.com/help/?page=209089222464503https://www.facebook.com/DevmediaWeb03https://www.facebook.com/l.f.t.assumpcaohttps://www.facebook.com/danillosghttps://www.facebook.com/nany.sendrahttps://www.facebook.com/wagner.coelho.988https://www.facebook.com/hailton.luis.1https://www.facebook.com/fredinho.laffittehttps://www.facebook.com/IsmaelRamosMoraesTecFloripahttps://www.facebook.com/help/?page=209089222464503https://www.facebook.com/DevmediaWeb03https://www.facebook.com/DevmediaWeb03https://www.facebook.com/help/?page=209089222464503https://www.facebook.com/DevmediaWeb03http://www.devmedia.com.br/fale-conosco/http://www.devmedia.com.br/mvp/http://www.devmedia.com.br/seja-um-autor-devmedia/28103http://www.devmedia.com.br/shop/http://www.web-03.net/devmedia.asphttp://www.devmedia.com.br/feed/https://plus.google.com/101753743720604160232?prsrc=3http://twitter.com/devmediahttp://www.facebook.com/pages/DevMedia/144522665592650http://www.devmedia.com.br/front-end-webhttp://www.devmedia.com.br/padronizacao-com-iife-amd-e-requirejs/31031http://www.devmedia.com.br/nashorn-desenvolvendo-javascript-na-jvm/31033http://www.devmedia.com.br/javascript-blog-criando-servico-de-microblog-com-nodejs/31036http://www.devmedia.com.br/nodejs-criando-uma-rede-social/31037

Documents

Twitter Bootstrap_ Aumentando Sua Produtividade