Início
phpBB3 
PunBB
Invision
BOOTSTRAP TWITTER
Olá, venho hoje trazer um tutorial tentando ensinar a vocês a usar o framework bootstrap twitter
Trata-se de uma ferramenta extremamente útil para desenvolvedores, principalmente para aqueles que atuam na área de front-end. Ele facilita muito as coisas, fazendo com que você apenas tenha que adicionar ou retirar elementos HTML da sua página, além é claro de deixar o seu site totalmente responsivo (ou seja você consegue visualizar o site em todos os dispositivos sem perder nada de conteúdo ou design).
Vamos ver sua técnica de uso a seguir:
A primeira coisa a se fazer é acessar o site do bootstrap que se encontrar atualmente neste link ( http://getbootstrap.com )
Ao acessar a página você terá a opção download bootstrap é nela que você deve clicar.
Ao baixar o bootstrap você vai ter acesso a 3 pastas
Pasta de download
- CSS - Que é onde estão contidos os arquivos de design do FW (FW = FrameWork).
- FONTS - Onde fica a fonte que é padrão dele.
- JS - É onde ficam os scripts do FW
Dentro de cada pasta você terá acesso aos arquivos necessários para que seu FW funcione corretamente, o bootstrap libera duas versões de cada a padrão e a minificada.
A padrão é usada para desenvolvimento, no caso quem deseja modificar alguma coisa nos códigos e tal, porque fica de fácil entendimento por humanos.
A minificada é para produção, no caso quem ja vai querer usar tudo pronto não modificando nada. Lembrando que é sempre bom minificar seus arquivos após o término da edição.
No site do Bootstrap temos um tutorial super completo de como usar cada elemento com detalhes para desenvolvedores.
Vou tentar especificar o máximo que eu puder aqui.
Estrutura do site
- http://getbootstrap.com - Página de acesso ao download do bootstrap e demais informações (em inglês)
- http://getbootstrap.com/getting-started/ - Página que especifica como é o uso básico do FW e disponibiliza alguns templates ja prontos para uso caso você não deseje ter tanto trabalho.
- http://getbootstrap.com/css/ - Página ensinando a usar os elementos de CSS do FW
- http://getbootstrap.com/components/ - Página que ensina a respeito dos componentes do FW
- http://getbootstrap.com/javascript/ - Página que especifica os plugins Javascript disponíveis para uso.
- http://getbootstrap.com/customize/ - E por último mas não menos importante temos a possibilidade de customizar o que nós queremos ou não no FW.
Agora vamos ver cada um destes tópicos:
Na página getting started temos acesso ao seguinte código
Template base
- Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Caso deseje ver alguns exemplos de templates com o bootstrap desça a página e procure por Examples la existem diversos templates prontos para uso.
Caso queira ler as informações contidas nesta página fique a vontade, eu vou prosseguir a próxima página (CSS).
CSS
Aqui temos informações a respeito de Media queries e tudo mais, vou fazer um tutorial mais completo a respeito disso em outro tópico..
Grid system
A parte que nos interessa é a partir do sistema de grid, vou tentar especificar como funciona um sistema de grid aqui:
Vamos trabalhar aqui com apenas uma div para tentar explicar isso.
Crie um documento .html e abra ele em seu navegador para visualizar as informações.
Dentro do documento adicione as seguintes informações:
- Código:
<style>.grid{
width: 80%;
background: #ccc;
padding: 2px;
overflow: hidden;
height: auto;
text-align: center;
}
.gridLeft{
width: 40%;
height: 50px;
float: left;
background: #aaa;
}
.gridRight{
width: 60%;
height: 50px;
float: left;
background: #bbb;
}
.gridLeftBottom{
width: 60%;
height: 50px;
float: left;
background: #ccc;
}
.gridRightBottom{
width: 40%;
height: 50px;
float: left;
background: #ddd;
}</style>
<div class="grid">
<div class="gridLeft">Coluna esquerda superior</div>
<div class="gridRight">Coluna direita superior</div>
<div class="gridLeftBottom">Coluna esquerda inferior</div>
<div class="gridRightBottom">Coluna direita inferior</div>
</div>
Se você tiver feito tudo certo você vai notar um retângulo que engloba 4 divs, e é assim basicamente que funciona um sistema de grids, é um sistema onde são dispostas colunas dentro de uma div que engloba todo o conteúdo necessário.
O bootstrap só permite que sejam usadas 12 colunas em nosso documento porém isso é mais do que suficiente para criarmos um template básico.
Precisaríamos basicamente de:
- Uma linha com uma div de 1 coluna para englobar o nosso header com o logotipo do site
- Uma linha com uma div de 1 coluna para adicionarmos o nosso menu.
- Uma linha com 2 colunas para englobarmos um main com uma área de conteúdos e outra área para os widgets laterais
- E por ultimo uma div com 1 coluna para englobar nosso rodapé
Você pode adicionar colunas dentro de outras colunas para pode por exemplo em seu rodapé ter uma área com dois conteúdos, um que fique a direita e outro a esquerda do rodapé, o que por exemplo pode ser um lado para uma lista de formas de contato com o administrador do site e uma lista de tópicos interessantes.
Mas como usar o sistema de grids do bootstrap?
É bem simples, como eu disse a cima, ele só aceita 12 colunas, no caso você deve adicionar colunas que a soma fique 12, para ficar mais fácil de entender vamos estruturar o site que foi citado logo acima com um header, um menu, um main com um lado para os widgets e outro para o conteúdo e o rodapé com dois lados também.
Vejam vou estruturar ja usando o sistema do bootstrap e os exemplos que eles tem no site deles:
- Código:
<section class="header row col-lg-12">
<div class="col-md-12">LOGOTIPO</div>
</section>
<section class="main row col-lg-12">
<div class="col-md-9">CONTEÚDO</div>
<div class="col-md-3">LATERAL</div>
</section>
<section class="footer row col-lg-12">
<div class="col-md-6">RODAPÉ ESQUERDA</div>
<div class="col-md-6">RODAPÉ DIREITA</div>
</section>
Vou explicar o que foi feito no código acima.
A classe row é usada para criar uma nova linha (não é necessário seu uso).
A classe col-md-NÚMERO é o que define o tamanho da nossa coluna, lembra que eu disse a soma das colunas deve ser 12? Então isso pode ser facilmente notado no código veja em nosso main por exemplo temos um section que engloba todo nosso conteúdo o tamanho dele é 12 (que é o máximo) e mais duas divs internas uma com 9 de tamanho, ai basta somar o que falta para 12, que no caso é 3 então esse é o valor da outra coluna.
Temos outro exemplo em nosso rodapé que adiciona duas colunas do mesmo tamanho na página, ambas receberam o valor 6 que é a metade de 12, o que faz com que as duas divs tenham o mesmo tamanho.
Existem mais opções de uso que podem ser observadas no site do bootstrap.
É tudo de uso extremamente simples, basta adicionar as classes, eu poderia explicar um por um mais não vejo muita necessidade, vendo que no site esta tudo muito bem explicado com vários exemplos de como fazer tabelas, formulários botões e tudo com mais fácil visualização do que por aqui.
Vou citar um único exemplo para que vocês possam entender como funciona, posteriormente basta olhar os site do bootstrap.
Vamos criar um botão
- Código:
<button type="button">Sucesso</button>
Para que ele funcione corretamente basta que adicionemos duas classes que são btn para dizer ao FW que aquilo é um botão e o tipo de botão que no nosso caso será um botão de sucesso que é na cor verde (no site tem a lista completa de opções de configuração e cores disponíveis).
Ficando assim nosso código
- Código:
<button class="btn btn-success" type="button">Sucesso</button>
Simples não? basta usar o guia do site.
Componentes
A parte de componentes é o mesmo esquema (atenção para que os menus de navegação fiquem responsivos é necessário uma leitura bem feita no site deles, ou mesmo pegar um ja pronto de algum daqueles templates citados no inicio do tutorial).
Nessa parte vou citar como usar ícones em seus botões
Vejam o exemplo
- Código:
<button type="button" class="btn btn-default btn-lg">Configurações</button>
Estilizamos o como mostrado acima e então basta adicionar algum elemento com uma classe que ja vou citar e pronto temos nosso botão pronto para uso. Vejam:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-cog"></span> Configurações
</button>
Com isso criamos um botão com um ícone de configuração para usarmos em qualquer parte do site
A classe glyphicon indica que isso é um ícone e glyphicon-cog diz qual ícone será usado (logo na entrada da página temos um tabela com todos os ícones disponíveis).
Javascript
Essa parte é uma das mais fáceis, basta pegar os exemplos do site e modificar a gosto, vou usar um slider como exemplo
Para adicionar o slider precisamos usar o seguinte código
- Código:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Onde repetimos essa parte para adicionarmos mais imagens
- Código:
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
E essa para adicionarmos mais daqueles botões de navegação (coloque o número referente ao número de imagens no slider)
- Código:
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
Customize
Essa última aba é para adicionarmos somente o que desejamos usar no CSS e no jQuery, porém é recomendado para quem ja conhece ao menos o minimo do FW.
Não quero me alongar mais no tutorial para não ficar muito cansativo de ler. Espero que seja útil a todos, fiquem a vontade para postar dúvidas, criticas ou sugestões. Até breve
