BootStrap 02

Log In / Cadastre-se
Desenvolvimento - CSS
Twitter Bootstrap: utilizando o framework para criar sites
elegantes e responsivos
Neste 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
ASSINE VER 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 6 Twitter Bootstrap: utilizando o framework para criar sites elegantes e responsivos
04/07/2014 http://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
<!DOCTYPEhtml><! doctypedo HTML5>
<![if ltIE7]><htmlclass="nojsltie9ltie8ltie7"><![endif]>
<![if IE7]><htmlclass="nojsltie9ltie8"><![endif]>
<![if IE8]><htmlclass="nojsltie9"><![endif]>
<![if gtIE8]><!>
<htmllang="ptBR" class="nojs"><! Aclasse'nojs' reconhecidapelojavascriptmodernizr,permitindoquebrowsersantigosreconheamcorretamentenossastags
<!<![endif]>
<head>
<metacharset="utf8">
<metaname="viewport" content="width=devicewidth,initialscale=1.0"><! ImportanteparahabilitarosrecursosdeResponsividadeemconjuntocomoCSS
<title>PrimeirapginautilizandooframeworkTwitterBootstrap</title>
<scriptsrc="js/jquery1.8.1.js"></script>
<scriptsrc="js/bootstrap.js"></script>
<scriptsrc="js/modernizr2.6.1.min.js"></script>
<linkrel="stylesheet" href="css/bootstrap.css">
<linkrel="stylesheet" href="css/main.css">
</head>
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
<body>
<![if ltIE7]>
<pclass="chromeframe">Vocestusandoumbrowerdesatualizado.<ahref="
<![endif]>
<! Cdigoretidadodehttp://twitter.github.com/bootstrap/examples/hero.html
<! Inciodabarradenavegao>
<divclass="navbarnavbarinversenavbarfixedtop">
<divclass="navbarinner">
<divclass="containerfluid">
<aclass="btnbtnnavbar" datatoggle="collapse" datatarget=".nav
<spanclass="iconbar"></span>
</a>
<aclass="brand" href="#">Seunome</a>
<divclass="navcollapsecollapse">
<ulclass="nav">
<liclass="active"><ahref="index.html" title="Pginainicial"
<li><ahref="#" title="">Link1</a></li>
<li><ahref="#" title="#">Contato</a></li>
</ul>
</div><!/.navcollapse>
</div>
</div>
</div>
<! Fimdabarradenavegao>
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
<! Inciodo containerparaaclasse'herounit' >
<divclass="containerfluidhero">
<! Herounitparaoshowcase>
<divclass="herounit">
<h1>Ttulo</h1>
<br/>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddo eiu
<p><ahref="#" class="btnbtnprimarybtnlarge" rel="" title="">Saibamais
</div>
</div><! /containerhero>
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
<divclass="containerfluidsubmenu"><! Submenu>
<divclass="rowfluid">
<divclass="span12">
<p>Aquipodemoscolocarumsubmenu,ouatmesmoutilizarBreadcrumbs!</p>
</div>
</div>
</div><! /Submenu>
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
<divclass=row>
<divclass=span4><! Primeiroblocodecontedo >
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddo eiusmodtem
</div>
<divclass=span4><! Segundoblocodecontedo >
</div>
<divclass=span4><! Terceiroblocodecontedo >
</div>
</div><! Fimdalinha>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<! Aquicolocaremosnossocontainereumalinhacom3colunas>
<divclass="containerfluid">
<divclass="span4">
<h2>Ttulo</h2>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddo
<p><aclass="btn" href="#" title="">Vejamais</a></p>
</div>
<divclass="span4">
<h2>Ttulo</h2>
</div>
<divclass="span4">
<h2>Ttulo</h2>
</div>
</div>
</div><! /container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<divclass="containerfluidrodape">
<divclass="span3footer">
<h4>Links</h4>
<ul>
<li><ahref="" title="RubyonRails" rel="nofollow">LinhadeCdigo</a></li>
<li><ahref="" title="jQuery" rel="nofollow">jQuery</a></li>
<li><ahref="" title="LESSCSS" rel="nofollow">LESSCSS</a></li>
<li><ahref="" title="Wordpress" rel="nofollow">Wordpress</a></li>
<li><ahref="" title="Joomla" rel="nofollow">Joomla</a></li>
</ul>
</div>
<h4>Links</h4>
<ul>
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 CSS
CSS
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<li><ahref="" title="W3C" rel="nofollow">W3C</a></li>
<li><ahref="" title="W3schools" rel="nofollow">W3Schools</a></li>
<li><ahref="" title="PHPOficial" rel="nofollow">PHP.net</a></li>
<li><ahref="" title="MySQL" rel="nofollow">MySQL</a></li>
<li><ahref="" title="Bootstrap" rel="nofollow">Bootstrap</a></li>
</ul>
</div>
<h4>Links</h4>
<ul>
<li><ahref="" title="" rel="nofollow">Link</a></li>
</ul>
</div>
<h4>Citaodasemana</h4>
<citeclass="pullright">"Dsemuitaatenoaocustodeserealizaralgo.Enenhumaaocustodenorealiz
</div>
</div>
</div>
15 211 62 5 7
Entendendo o atributo box-shadow nas CSS3
CSS
Cdigo CSS - Entendendo a folha de estilos
CSS
Bordas Arredondadas CSS3: Estilizando bordas
CSS
CSS3 Gradient Criando planos de fundo com efeito degrad
CSS
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

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

BootStrap 02

Transféré par

Droits d'auteur :

Formats disponibles

Log In / Cadastre-se

Vous aimerez peut-être aussi