Como criar sites responsivos com Bootstrap

O Bootstrap � um framework de front-end para a cria��o de websites responsivos.
Bootstrap � um produto de c�digo aberto criado por Mark Otto e Jacob Thornton,
ambos funcion�rios do Twiter quando o Bootstrap foi inicialmente lan�ado.
A biblioteca surgiu atrav�s da necessidade de padronizar os conjuntos de
ferramentas frontend em toda a empresa.
Bootstrap � ideal para qualquer tipo de aplica��o. Sua combina��o de HTML, CSS e
JavaScript torna f�cil construir sites robustos sem adicionar um monte de c�digo.
Com um sistema de grid padr�o, os layouts se ajustam com facilidade, e o estilo dos
bot�es, navs e tabelas com uma marca��o b�sica j� s�o suficientes para tor�-los
muito elegantes.
1. Come�ando
Primeiramente devemos baixar o Bootstrap em http://getbootstrap.com/

Ap�s isso, basta clicar no bot�o "Download Bootstrap" e escolher a op��o para
baixar o Bootstrap, tamb�m h� a op��o para
baixar o c�digo-fonte, caso seja necess�rio recompilar o c�digo ou fazer uma
customiza��o na biblioteca.
2. Estrutura
A estrutura do Bootstrap � dada conforme abaixo:
bootstrap/
|-- css/
| |-- bootstrap.css
| |-- bootstrap.min.css
|-- js/
| |-- bootstrap.js
| |-- bootstrap.min.js
|-- img/
| |-- glyphicons-halflings.png
| |-- glyphicons-halflings-white.png
|-- README.md
Ap�s descompactar o Bootstrap verifica-se que o Bootstrap includes three folders:

css, js, and img. For simplicity, add these
to the root of your project.
Dentro das pastas CSS e JS podemos observar que h� algumas vers�es de cada um.
Existe a vers�o completa e uma vers�o mini de cada um. A
vers�o mini � uma vers�o menor da vers�o completa, caso o desenvovedor n�o ir�
utilizar coisas muito complexas.
3. Adicionando Bootstrap
Um template HTML comum seria conforme abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
With Bootstrap, we include the link to the CSS stylesheet and the JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
4. Default Grid System
O sistema de grid do Bootstrap trabalha com 12 colunas na p�gina. N�o � obrigat�rio

utilizar as 12 colunas, podemos agrup�-las para criar
colunas mais largas. Segue abaixo um exemplo
FIGURA 1 AQUI.
Bootstrap's grid system is responsive, and the columns will re-arrange depending on
the screen size: On a big screen it might look better with the content organized in
three columns, but on a small screen it would be better if the content items were
stacked on top of each other.
Lembre-se de que as colunas da grid devem somar at� doze para uma linha. Mais do
que isso, as colunas ser�o empilhadas n�o importa a viewport, ficando
bem desajustado.
5. Basic Grid HTML
To create a simple layout, create a container with a <div> that has a class of .row
and
add the appropriate amount of .span* columns.
Since we have a 12-column grid, we

just need the amount of .span* columns to equal 12. We could use a 3-6-3 layout, 4-
8,
3-5-4, 2-8-2� we could go on and on, but I think you get the gist.
The following code shows .span8 and .span4, which adds up to 12:
<div class="row">
<div class="span8">...</div>
</div>
Ou seja, temos uma div que usa as 8 primeiras colunas, e a pr�xima utilizar� as
pr�ximas 4 colunas.
5.1. Offsetting Columns
� poss�vel mover as colunas para direita usando a classe ".offset".

Cada classe de offset move o span sobre a largura.
Dessa forma, um .offset2 moveria um .span7 sobre duas colunas conforme abaixo:
<div class="row">
<div class="span7 offset2">...</div>
</div>
figura 2 aqui
Veja que ao inv�s de fazer um span das sete primeitas colunas, ele deslocou para a
segunda parte que possui sete colunas.
Na figura tamb�m temos na segunda linha um span2 com offset1, deslocando um span2
uma coluna para direita e mais um span3 mais uma coluna para direita.
5.2. Aninhando Columns
Para aninhar o conte�do com o grid default, apenas adicionamos um .row � classe
".span".
Veja o exemplo abaixo:
<div class="row">
<div class="span9">
Level 1 of column
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
Segue a figura 3 que exemplifica o c�digo acima.

Pode-se verificar que "Level 1 of column" ficou em um primeiro n�vel com span9
(nove colunas).
Ap�s isso, temos mais uma class row que vai aninhar as pr�ximas colunas. Dessa
forma, tem-se um span com 6 colunas e um com 3 colunas aninhados.
6. Fluid Grid System

O sistema de Grid Flu�do usa percentagem ao inv�s de pixels para a largura das
colunas.
Ele tem as mesmas capacidades de resposta que o nosso sistema de grid fixa,
garantindo propor��es adequadas para resolu��es de tela e dispositivos.
Para utilizar o sistema flu�do basta alterar de .row para .row-fluid. O restante
das classes utilizadas pelas colunas podem ficar extamente iguais, isso torna
a mudan�a de um sistema para o outro bastante flex�vel.
Segue abaixo um exemplo:
<div class="row-fluid">
<div class="span8 offset2">...</div>
</div>
A diferen�a fica quanto ao aninhamento, visto que estamos usando porcentagens, Cada
.row redefine a contagem de colunas para 12.
Por exemplo, se estivermos em um .span8, ao inv�s de dois .span4 para dividir o
conte�do pela metade, utiliza-se dois span6, assim preenchemos 100% do container.
7. Container Layouts
Para adicionar um layout de largura fixa e centrada � sua p�gina, envolva

simplesmente o conte�do em <div class="container">...</div>.
Para utilizar um layout flu�do basta utilizar a classe <div class="container-
fluid">...</div>.
8. Responsive Design
Design Responsivo � uma t�cnica de estrutura��o HTML e CSS, em que o site se adapta
ao browser do usu�rio sem precisar definir diversas folhas de estilos para cada
resolu��o. Isso � importante principalmente nos dias de hoje em que se tem um
cen�rio completamente diferente de antigamente que t�nhamos um site que funcionava
no Internet Explorer com uma resolu��o m�xima de 1024�768 pixels, e isso era
suficiente. Claro existiam outras caracter�sticas como o browser Mozilla Firefox
que exigiam algumas configura��es a mais, mas a grande maioria estava nesse mesmo
grupo. Hoje tudo mudou, temos as TVs de 50 e 60 polegadas acessando internet, temos
celulares que possuem telas variadas de 2 at� 5 polegadas, os tablets de 6 at� 14
polegadas (ou at� mais) e sem contar os pr�prios computadores, que tem telas de
netbook variando de 11 at� mais de 26 polegadas.
Para ativar os recursos responsivos do Bootstrap, � preciso apenas adicionar uma

tag <meta> � <head> da sua p�gina da web.
Segue abaixo um exemplo da utiliza��o da tag <meta>:
<!DOCTYPE html>
<html>
<head>
<title>My amazing Bootstrap site!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
</head>
Para segmentar essas diferentes larguras, o Bootstrap usa a classe media do CSS
para medir a largura da janela de visualiza��o do navegador e, em seguida, usando
condicionais, altera quais partes das folhas de estilo s�o carregadas.
Usando a largura da janela de visualiza��o do navegador, o Bootstrap pode otimizar
o conte�do usando uma combina��o de propor��es ou larguras, mas depende
principalmente das propriedades min-width and max-width.
No seu n�cleo, o Bootstrap suporta cinco layouts diferentes, cada um dependendo das
consultas realizadas no browser pelo media do CSS.
O maior layout tem colunas com 70 pixels de largura, contrastando com os 60 pixels
do layout normal. O layout do tablet traz as colunas para 42 pixels de largura, e
quando mais estreito, cada coluna vai fluido, ou seja, as colunas s�o empilhadas
verticalmente e cada coluna � a largura total do dispositivo (consulte a Tabela 1-
1).
Table 1-1. Responsive media queries

Label Layout width Column width Gutter width
----- ------------ ------------ ------------
Large display 1200px and up 70px 30px
Default 980px and up 60px 20px
Portrait tablets 768px and up 42px 20px
Phones to tablets 767px and below Fluid columns, no fixed widths
Phones 480px and below Fluid columns, no fixed widths
Para adicionar CSS personalizado com base na tag de m�dia, voc� pode incluir todas
as regras em um arquivo CSS conforme abaixo ou usar arquivos CSS diferentes:
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
Para um site maior, voc� pode dividir cada media em um arquivo CSS separado. No
arquivo HTML, voc� pode cham�-los com a tag <link> no head do documento.
Isso � �til para manter o tamanho dos arquivos menores, mas potencialmente aumenta
os pedidos HTTP se o site for responsivo. Se voc� estiver usando LESS para compilar
o CSS, voc� pode processar todos eles em um arquivo:
<link rel="stylesheet" href="base.css" />

<link rel="stylesheet" media="(min-width: 1200px)" href="large.css" />
<link rel="stylesheet" media="(min-width: 768px) and (max-width: 979px)"
href="tablet.css" />
<link rel="stylesheet" media="(max-width: 767px)" href="tablet.css" />
<link rel="stylesheet" media="(max-width: 480px)" href="phone.css" />
8.1 Classes do Bootstrap
O Bootstrap tamb�m inclui um punhado de classes auxiliares para fazer o

desenvolvimento responsivo (veja Tabela 1-2).
Segue abaixo os elementos disponibilizados pelo Bootstrap
Class Phones Tablets Desktops

.visible-phone Visible Hidden Hidden
.visible-tablet Hidden Visible Hidden
.visible-desktop Hidden Hidden Visible
.hidden-phone Hidden Visible Visible
.hidden-tablet Visible Hidden Visible
.hidden-desktop Visible Visible Hidden
Veja pela tabela acima que � poss�vel utilizar um elemento que seja responsivo para
mais de um dispositivo.

Como criar sites responsivos com Bootstrap

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Como criar sites responsivos com Bootstrap

Enviado por

Direitos autorais:

Formatos disponíveis

O Bootstrap � um framework de front-end para a cria��o de websites responsivos.

Primeiramente devemos baixar o Bootstrap em http://getbootstrap.com/

A estrutura do Bootstrap � dada conforme abaixo:

Ap�s descompactar o Bootstrap verifica-se que o Bootstrap includes three folders:

Um template HTML comum seria conforme abaixo:

4. Default Grid System

O sistema de grid do Bootstrap trabalha com 12 colunas na p�gina. N�o � obrigat�rio

5. Basic Grid HTML

Since we have a 12-column grid, we

5.1. Offsetting Columns

� poss�vel mover as colunas para direita usando a classe ".offset".

5.2. Aninhando Columns

Segue a figura 3 que exemplifica o c�digo acima.

6. Fluid Grid System

Para adicionar um layout de largura fixa e centrada � sua p�gina, envolva

Para ativar os recursos responsivos do Bootstrap, � preciso apenas adicionar uma

Table 1-1. Responsive media queries

<link rel="stylesheet" href="base.css" />

8.1 Classes do Bootstrap

O Bootstrap tamb�m inclui um punhado de classes auxiliares para fazer o

Class Phones Tablets Desktops

Você também pode gostar