bootstrap 02

Log In / Cadastre-se

Desenvolvimento - CSS

Twitter Bootstrap: utilizando o framework para criar sites

elegantes e responsivosNeste tutorial vamos aprender um pouco sobre o framework Twitter Bootstrap. Um timo framework desenvolvido

pela equipe do Twitter e que est disponvel para todos utilizarem.

por Marcus Vinicius Silva

Ol, pessoal, este o meu primeiro tutorial para o Linha de Cdigo e eu quero apresentar queles que

ainda no conhecem, o framework de desenvolvimento front-end desenvolvido pela equipe do Twitter, o

Twitter Bootstrap.

O material completo para pesquisa e estudo est disponvel em

http://twitter.github.com/bootstrap/index.html; entretanto, eu trago um passo-a-passo para podermos

colocar as mos na massa e criarmos nossa primeira pgina utilizando o framework, ok?

importante ressaltar alguns pr-requisitos a fim de possibilitar maior compreenso desse tutorial:

Conhecimentos de HTML/HTML5

Conhecimentos de CSS

Antes de comearmos, algumas informaes importantes sobre esse poderoso e elegante framework:

Completamente compatvel com HTML5 e CSS3;

Utiliza sistema de grades (grid), com 12 colunas, em modelo fixo ou fluido, completamente

controlvel atravs do CSS base do framework;

Possibilita a criao de uma poderosa UI, com botes, dropdowns, barras de navegao, barras

de progresso, modais e mais uma infinidade de componentes atravs dos plugins javascript

embutidos juntamente com o jQuery;

Responsivo! Precisa falar mais alguma coisa?

Ento, mos obra!

Para fins didticos, falarei apenas das classes CSS que vamos utilizar e personalizar para a criao da

pgina inicial de nosso site.

Tal pgina ter uma barra de navegao principal horizontal no topo, que ser fixa (estar visvel o tempo

inteiro, no importando o tamanho da pgina e a utilizao da barra de rolagem vertical).

Abaixo da barra de navegao, teremos um hero-unit, uma classe do CSS base do framework que

permite darmos destaque a alguma informao, um display (se preferirem), no qual podemos colocar

uma imagem de fundo, ou um gradiente e texto/imagem.

Depois, teremos uma pequena barra cinza, que poderemos utilizar mais tarde como navegao

secundria ou mesmo para breadcrumbs.

Publicidade

Siga @linhadecodigo 2.500

Pesquisar

HOME DESENVOLVIMENTO FRONT-END BANCO DE DADOS EM DESTAQUE TODOS PUBLIQUE

15

.net Mag 115 Easy .net mag 36

ASSINEVER TODAS

REVISTAS DEVMEDIA

1 HTML Bsico

2 Menu em CSS - Menu dropdown horizontal com HTML5 e CSS3

3 Comandos bsicos em SQL - insert, update, delete e select

4 Acessibilidade: Aumentando e Diminuindo Tamanho de Letra em seu site

5 Apostila HTML - Guia para iniciantes

6 Excel: Como verificar se existe valores duplicados

7 Alert em Javascript

TOP 10 - ARTIGOS TOP 10 - AUTORES

211 62 5 7

Pgina 1 de 6Twitter Bootstrap: utilizando o framework para criar sites elegantes e responsivos

04/07/2014http://www.linhadecodigo.com.br/artigo/3575/twitter-bootstrap-utilizando-o-framework-para-criar-sites-eleg...

Logo abaixo teremos trs colunas com ttulo, texto e boto de saiba mais e finalizaremos com um

rodap de quatro colunas para colocarmos links e citao da semana.

Listagem 1: cabealho:

Como podem notar, fizemos as declaraes formas de doctype, meta tag viewport para habilitar os

recursos de responsividade contidos no CSS base do framework (bootstrap.css), o jQuery, o modernizr,

que vai possibilitar browsers mais antigos a visualizar corretamente tags HTML5 e recursos de CSS3.

Inclumos tambm um CSS personalizado, o main.css, no qual sobrescreveremos algumas regras do

CSS base.

Listagem 2: barra de navegao:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

PrimeirapginautilizandooframeworkTwitterBootstrap

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Vocestusandoumbrowerdesatualizado.

Seunome

8 Cdigo para background HTML e CSS

9 Boto com CSS 3: Como criar um boto sem imagens

10 Criando um sistema de cadastro e login com PHP e MySql

VER TODOS



Aqui temos um primeiro contato com os nomes das classes utilizadas pelo CSS base do bootstrap.css;

tais classes esto assinaladas no referido CSS base e contm todas as regras de como sua aparncia

padro.

A primeira delas, navbar, refere-se s barras de navegao, sua posio, cor de fundo, cores dos links,

etc. Possui vrias subclasses, para possibilitar a distribuio correta das regras para cada componente

que necessitamos.

No caso acima, uma barra de navegao fixa no topo, determinado pela classe: navbar-fixed-top.

Listagem 3: o hero-unit:

Aqui temos um container, uma classe no CSS base que serve de caixa para organizao do layout e

possui a largura de nossa grade, seja no sistema fixo ou fluido. Neste caso, estamos utilizando o fluido.

Adicionei a ela, para personalizao, a classe hero, descrita no CSS main.css:

Listagem 4: add classe hero

Assim, nosso hero-unit ter largura total da pgina e uma imagem de background (inclusa no cdigo-

fonte ao final deste artigo); adicionei tambm as regras para o ttulo e pargrafos neste container, pois no

CSS base as cores esto definidas como brancas e sem sombra.

Listagem 5: submenu ou breadcrumbs:

Aqui adicionamos uma pequena barra cinza, para colocarmos uma navegao secundria ou mesmo a

utilizao de breadcrumbs, se desejarmos. O mais importante, porm, que aqui temos o primeiro

contato com o sistema de grid do framework. Tal sistema baseado no uso das classes row e span.

1

2

3

4

5

6

7

8

9

10

11

Ttulo

Loremipsumdolorsitamet,consecteturadipisicingelit,seddo eiu

Saibamais

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.hero{

width:auto;

backgroundimage:url(../img/header.jpg);

}

.herounith1{

margintop:0;

paddingtop:0;

color:#000000;

textshadow:1px1px2px #ffffff;

}

.herounitp{

textalign:justify;

color:#000000;

textshadow:1px1px2px #ffffff;

}

1

2

3

4

5

6

7

Aquipodemoscolocarumsubmenu,ouatmesmoutilizarBreadcrumbs!



A classe row a responsvel por criar uma nova linha que conter X colunas, representadas pela classe

span.

Vlido relembrar que o sistema construdo para ter 12 colunas. Assim, se desejarmos que uma linha

tenha 3 blocos de informao, tais blocos sero constitudos por 3 divs com a classe span4; 4 x 3 = 12

colunas.

Listagem 6: Exemplo

No cdigo do submenu acima, temos uma linha com apenas um bloco de informao perfazendo as 12

colunas, por isso span12.

Listagem 7: 3 blocos de informao:

Aqui esto nossos 3 grandes blocos de informao, cada um contendo 4 colunas, fazendo sempre o total

de 12. Dentro de cada bloco, colocamos um ttulo e algum texto, para melhor vizualizar como vai ficar.

Tambm, um boto de saiba mais, j personalizado com a classe btn do CSS base.

Listagem 8: o rodap:

1

2

3

4

5

6

7

8

9

10

11

Loremipsumdolorsitamet,consecteturadipisicingelit,seddo eiusmodtem



1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

Ttulo

Loremipsumdolorsitamet,consecteturadipisicingelit,seddo

Vejamais

Ttulo


Vejamais

Ttulo


Vejamais

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Links

LinhadeCdigo

jQuery

LESSCSS

Wordpress

Joomla

Links



Como podem notar, no rodap, preferi a utilizao de 4 blocos de informao, com 3 colunas cada,

totalizando as 12 do nosso sistema de grid. Para isso, bastou utilizarmos a classe span3.

No cdigo fonte abaixo, todos os arquivos para a construo deste tutorial esto disponveis e vocs

podem alter-lo conforme desejarem para testar os conhecimentos aqui adquiridos.

Download do cdigo fonte do tutorial

Lembrem-se, caso precisem de aumentar ou diminuir o nmero de colunas em determinada diagramao

s utilizarem as classes spanXX; onde XX o nmero de colunas que vocs desejam.

No se esqueam de colocar os blocos dentro de uma div com a classe row. Ela a linha que vai conter

os blocos de informao de vocs, ok?

Espero que tenham gostado e, nos prximos artigos, vamos nos aprofundar nesse framework, com novos

exemplos, deixem seus comentrios, dvidas e sugestes que, o mais breve possvel, respondo a vocs.

Grande abrao a todos e at a prxima!

Marcus Vinicius Silva - Especialista em Comunicao Contempornea e

Informao Visual e Especialista em Desenvolvimento de Sistemas para Web,

ambos pela Pontifcia Universidade Catlica de Minas Gerais. Professor no

ensino superior dos cursos de Sistemas para Internet, Banco de Dados, Redes

de Computadores e Gesto de Marketing. Tenho experincia nas reas de

Comunicao Institucional, Webdesign, Desenvolvimento Web, Projeto e Anlise de Interfaces,

Multimdia Web, Marketing e criao de Identidade Visual.

Leia tambm

CSS3 Animations: Criando animaes com CSSCSS

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

W3C

W3Schools

PHP.net

MySQL

Bootstrap

Links

Link

Link

Link

Link

Link

Citaodasemana

"Dsemuitaatenoaocustodeserealizaralgo.Enenhumaaocustodenorealiz

15211 62 5 7



Entendendo o atributo box-shadow nas CSS3CSS

Cdigo CSS - Entendendo a folha de estilosCSS

Bordas Arredondadas CSS3: Estilizando bordasCSS

CSS3 Gradient Criando planos de fundo com efeito degradCSS

Linha de Cdigo faz parte do grupo Web-03 Poltica de privacidade e de uso | Anuncie | Cadastre-se | Fale conosco

Acesso Negado!!!

Acesso no autorizado a este site!

2014 Linha de Cdigo. Todos os direitos reservados

Estamos aqui:



bootstrap 02

Documents