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á disponível para todos utilizarem.
por Marcus Vinicius SilvaOlá, pessoal, este é o meu primeiro tutorial para o Linha de Código e eu quero apresentar àqueles que ainda não conhecem, o framework de desenvolvimento front-end desenvolvido pela equipe do Twitter, o Twitter Bootstrap.
O material completo para pesquisa e estudo está disponível em http://twitter.github.com/bootstrap/index.html; entretanto, eu trago um passo-a-passo para podermos colocar as mãos na massa e criarmos nossa primeira página utilizando o framework, ok?
É importante ressaltar alguns pré-requisitos a fim de possibilitar maior compreensão desse tutorial:
- Conhecimentos de HTML/HTML5
- Conhecimentos de CSS
Antes de começarmos, algumas informações importantes sobre esse poderoso e elegante framework:
- Completamente compatível com HTML5 e CSS3;
- Utiliza sistema de grades (grid), com 12 colunas, em modelo fixo ou fluido, completamente controlável através do CSS base do framework;
- Possibilita a criação de uma poderosa UI, com botões, dropdowns, barras de navegação, barras de progresso, modais e mais uma infinidade de componentes através dos plugins javascript embutidos juntamente com o jQuery;
- Responsivo! Precisa falar mais alguma coisa?
Então, mãos à obra!
Para fins didáticos, falarei apenas das classes CSS que vamos utilizar e personalizar para a criação da página inicial de nosso site.
Tal página terá uma barra de navegação principal horizontal no topo, que será fixa (estará visível o tempo inteiro, não importando o tamanho da página e a utilização da barra de rolagem vertical).
Abaixo da barra de navegação, teremos um ‘hero-unit’, uma classe do CSS base do framework que permite darmos destaque a alguma informação, 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 navegação secundária ou mesmo para ‘breadcrumbs’.
Logo abaixo teremos três colunas com título, texto e botão de ‘saiba mais’ e finalizaremos com um rodapé de quatro colunas para colocarmos links e ‘citação da semana’.
Listagem 1: cabeçalho:
<!DOCTYPE html><!-- doctype do HTML5 -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="pt-BR" class="no-js"><!-- A classe 'no-js' é reconhecida pelo javascript modernizr, permitindo que browsers antigos reconheçam corretamente nossas tags -->
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Importante para habilitar os recursos de Responsividade em conjunto com o CSS -->
<title>Primeira página utilizando o framework Twitter Bootstrap</title>
<script src="js/jquery-1.8.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
Como podem notar, fizemos as declarações 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. Incluímos também um CSS personalizado, o main.css, no qual sobrescreveremos algumas regras do CSS base.
Listagem 2: barra de navegação:
<body>
<!--[if lt IE 7]>
<p class="chromeframe">Você está usando um brower desatualizado. <a href="http://browsehappy.com/">Atualize seu browser</a> ou <a href="http://www.google.com/chromeframe/?redirect=true">instale Google Chrome Frame</a> para melhor visualizar este site.</p>
<![endif]-->
<!-- Código retidado de http://twitter.github.com/bootstrap/examples/hero.html -->
<!-- Início da barra de navegação -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Seu nome</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="index.html" title="Página inicial">Home</a></li>
<li><a href="#" title="">Link 1</a></li>
<li><a href="#" title="">Link 2</a></li>
<li><a href="#" title="">Link 3</a></li>
<li><a href="#" title="#">Contato</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Fim da barra de navegação -->
Aqui temos um primeiro contato com os nomes das classes utilizadas pelo CSS base do bootstrap.css; tais classes estão assinaladas no referido CSS base e contém todas as regras de como é sua aparência padrão.
A primeira delas, ‘navbar’, refere-se às barras de navegação, sua posição, cor de fundo, cores dos links, etc. Possui várias subclasses, para possibilitar a distribuição correta das regras para cada componente que necessitamos.
No caso acima, é uma barra de navegação fixa no topo, determinado pela classe: navbar-fixed-top.
Listagem 3: o ‘hero-unit’:
<!-- Início do container para a classe 'hero-unit' -->
<div class="container-fluid hero">
<!-- Hero unit para o showcase -->
<div class="hero-unit">
<h1>Título</h1>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="#" class="btn btn-primary btn-large" rel="" title="">Saiba mais »</a></p>
</div>
</div> <!-- /container hero -->
Aqui temos um ‘container’, uma classe no CSS base que serve de ‘caixa’ para organização 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 personalização, a classe ‘hero’, descrita no CSS main.css:
Listagem 4: add classe hero
.hero{
width:auto;
background-image:url(../img/header.jpg);
}
.hero-unit h1{
margin-top:0;
padding-top:0;
color:#000000;
text-shadow:1px 1px 2px #ffffff;
}
.hero-unit p{
text-align:justify;
color:#000000;
text-shadow:1px 1px 2px #ffffff;
}
Assim, nosso ‘hero-unit’ terá largura total da página e uma imagem de background (inclusa no código-fonte ao final deste artigo); adicionei também as regras para o título e parágrafos neste container, pois no CSS base as cores estão definidas como brancas e sem sombra.
Listagem 5: submenu ou breadcrumbs:
<div class="container-fluid submenu"><!-- Submenu --> <div class="row-fluid"> <div class="span12"> <p>Aqui podemos colocar um submenu, ou até mesmo utilizar Breadcrumbs!</p> </div> </div> </div><!-- /Submenu -->
Aqui adicionamos uma pequena barra cinza, para colocarmos uma navegação secundária ou mesmo a utilização de breadcrumbs, se desejarmos. O mais importante, porém, é que aqui temos o primeiro contato com o sistema de grid do framework. Tal sistema é baseado no uso das classes ‘row’ e ‘span’.
A classe ‘row’ é a responsável por criar uma nova linha que conterá X colunas, representadas pela classe ‘span’.
Válido relembrar que o sistema é construído para ter 12 colunas. Assim, se desejarmos que uma linha tenha 3 blocos de informação, tais blocos serão constituídos por 3 divs com a classe ‘span4’; 4 x 3 = 12 colunas.
Listagem 6: Exemplo
<div class=‘row’> <div class=‘span4’><!-- Primeiro bloco de conteúdo --> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class=‘span4’><!-- Segundo bloco de conteúdo --> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class=‘span4’><!-- Terceiro bloco de conteúdo --> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div><!-- Fim da linha -->
No código do submenu acima, temos uma linha com apenas um bloco de informação perfazendo as 12 colunas, por isso ‘span12’.
Listagem 7: 3 blocos de informação:
<!-- Aqui colocaremos nosso container e uma linha com 3 colunas -->
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<h2>Título</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a class="btn" href="#" title="">Veja mais »</a></p>
</div>
<div class="span4">
<h2>Título</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a class="btn" href="#" title="">Veja mais »</a></p>
</div>
<div class="span4">
<h2>Título</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a class="btn" href="#" title="">Veja mais »</a></p>
</div>
</div>
</div> <!-- /container-->
Aqui estão nossos 3 grandes blocos de informação, cada um contendo 4 colunas, fazendo sempre o total de 12. Dentro de cada bloco, colocamos um título e algum texto, para melhor vizualizar como vai ficar. Também, um botão de ‘saiba mais’, já personalizado com a classe ‘btn’ do CSS base.
Listagem 8: o rodapé:
<div class="container-fluid rodape"> <div class="row-fluid"> <div class="span3 footer"> <h4>Links</h4> <ul> <li><a href="" title="Ruby on Rails" rel="nofollow">Linha de Código</a></li> <li><a href="" title="jQuery" rel="nofollow">jQuery</a></li> <li><a href="" title="LESS CSS" rel="nofollow">LESS CSS</a></li> <li><a href="" title="Wordpress" rel="nofollow">Wordpress</a></li> <li><a href="" title="Joomla" rel="nofollow">Joomla</a></li> </ul> </div> <div class="span3 footer"> <h4>Links</h4> <ul> <li><a href="" title="W3C" rel="nofollow">W3C</a></li> <li><a href="" title="W3schools" rel="nofollow">W3Schools</a></li> <li><a href="" title="PHP Oficial" rel="nofollow">PHP.net</a></li> <li><a href="" title="MySQL" rel="nofollow">MySQL</a></li> <li><a href="" title="Bootstrap" rel="nofollow">Bootstrap</a></li> </ul> </div> <div class="span3 footer"> <h4>Links</h4> <ul> <li><a href="" title="" rel="nofollow">Link</a></li> <li><a href="" title="" rel="nofollow">Link</a></li> <li><a href="" title="" rel="nofollow">Link</a></li> <li><a href="" title="" rel="nofollow">Link</a></li> <li><a href="" title="" rel="nofollow">Link</a></li> </ul> </div> <div class="span3 footer"> <h4>Citação da semana</h4> <cite class="pull-right">"Dá-se muita atenção ao custo de se realizar algo. E nenhuma ao custo de não realizá-lo."<br />Philip Kotler</cite> </div> </div> </div>
Como podem notar, no rodapé, preferi a utilização de 4 blocos de informação, com 3 colunas cada, totalizando as 12 do nosso sistema de grid. Para isso, bastou utilizarmos a classe ‘span3’.
No código fonte abaixo, todos os arquivos para a construção deste tutorial estão disponíveis e vocês podem alterá-lo conforme desejarem para testar os conhecimentos aqui adquiridos.
Download do código fonte do tutorial
Lembrem-se, caso precisem de aumentar ou diminuir o número de colunas em determinada diagramação é só utilizarem as classes ‘spanXX’; onde XX é o número de colunas que vocês desejam.
Não se esqueçam de colocar os blocos dentro de uma div com a classe ‘row’. Ela é a linha que vai conter os blocos de informação de vocês, ok?
Espero que tenham gostado e, nos próximos artigos, vamos nos aprofundar nesse framework, com novos exemplos, deixem seus comentários, dúvidas e sugestões que, o mais breve possível, respondo a vocês.
Grande abraço a todos e até a próxima!
