História

Os Desenvolvedores Front-end da Editora Abril historicamente tem usado quase qualquer estrutura/biblioteca que eles estavam familiarizados para atender requisitos de interface.

O Abril Bootstrap tem como desafio padronizar esta estrutura/bibliotecas para atender os requisitos de um Responsive Website e Performance.

Browsers suportados

Abril Bootstrap é testado e suportado nos principais navegadores modernos.

Browsers
  • Google Chrome 4+
  • Safari 3+
  • Firefox 4+
  • Internet Explorer 7+
  • Opera 11+

O que está incluso

  • O Abril Bootstrap inclui uma completa estrutura HTML5, CSS3 e Media Queries para Tablets e Celulares.
  • jQuery JavaScript Library
  • Plugins Javascript (modernizr, selectivizr, css3-mediaqueries)
  • Documentação de estilo completa
  • Responsive design (1020px, 730px, 640 fluid)

Grid System

Crie poderosos layouts multi-device de 12 Colunas com rapidez e facilidade.


Como funciona?

O grid foi construido com dois elementos chave: .linha e .coluna. Para funcionar corretamente, sempre coloque as Colunas dantro de uma Linha.

Obs: Não é necessário fixar uma largura (width) na coluna.

<div class="linha">
  <div class="oito colunas">
    Conteudo principal...
  </div>
  <div class="quatro colunas">
    Sidebar...
  </div>
</div>

Nesting Suporte

O grid permite que você crie vários níveis uma estrutura (grid) dentro dela. Você pode usar esse "nesting suporte" para criar layouts bem complexos.

<div class="linha">
  <div class="oito colunas">
    <div class="linha">
      <div class="seis colunas">
        Seis colunas (nested)
      </div>
      <div class="seis colunas">
        Seis colunas (nested)
      </div>
    </div>
  </div>
  <div class="quatro colunas">
    Sidebar...
  </div>
</div>

Examples

Veja abaixo um exemplo visível do grid system. Cada bloco de coluna é dimensionada com base nas 12 colunas.

.quatro.colunas
.quatro.colunas
.quatro.colunas
.tres.colunas
.seis.colunas
.tres.colunas
.duas.colunas
.oito.colunas
.duas.colunas
.uma
.onze.colunas
.duas.colunas
.dez.colunas
.tres.colunas
.nove.colunas
.quatro.colunas
.oito.colunas
.cinco.colunas
.sete.colunas
.seis.colunas
.seis.colunas
.sete.colunas
.cinco.colunas
.oito.colunas
.quatro.colunas
.nove.colunas
.tres.colunas
.dez.colunas
.duas.colunas
.onze.colunas
.uma
.doze.colunas

Note: Com a finalidade de contornar comportamentos diferentes entre Linhas e 'arredondamento' a coluna sempre irá ser alinhar à esquerda. Se a sua Linha não tem uma contagem que chegue até 12 Colunas, você pode marcar a última Coluna com a class="fim", a fim de substituir esse comportamento.

.quatro.colunas
.quatro.colunas
.quatro.colunas
.quatro.colunas.fim

Deslocar

Deslocamentos permitem que você crie espaço adicional entre as Colunas em uma Linha. Os deslocamentos executado a partir de .deslocar-uma até .deslocar-onze.

.uma
.onze.colunas
.uma
.dez.colunas.deslocar-uma
.uma
.nove.colunas.deslocar-duas
.uma
.oito.colunas.deslocar-tres
.sete.colunas.deslocar-cinco
.seis.colunas.deslocar-seis
.cinco.colunas.deslocar-sete
.quatro.colunas.deslocar-oito
.tres.colunas
.tres.colunas.deslocar-seis

Colunas Centralizadas

Colunas centralizadas são colocados no meio da Linha. Esta é uma maneira conveniente para certificar-se que um bloco está centralizado, mesmo se você alterar o número de Colunas. Nota: Não pode haver quaisquer outros blocos na Coluna para que isso funcione.

.uma.coluna.centralizada
.duas.colunas.centralizadas
.tres.colunas.centralizadas
.quatro.colunas.centralizadas
.cinco.colunas.centralizadas
.seis.colunas.centralizadas
.sete.colunas.centralizadas
.oito.colunas.centralizadas
.nove.colunas.centralizadas
.dez.colunas.centralizadas
.onze.colunas.centralizadas
.doze.colunas.centralizadas

Empurrar/Puxar Colunas

Às vezes dentro da grade que você deseja inverter a ordem das colunas e para isso você pode usar as classe .empurrar-[numero] e .puxar-[numero]. Você pode mudar as Colunas de desktops para tablet por exemplo.

.duas.colunas
.dez.colunas
.tres.colunas.empurrar-nove
.nove.colunas.puxar-tres
.quatro.colunas
.oito.colunas
.cinco.colunas
.sete.colunas
.seis.colunas
.seis.colunas
.sete.colunas
.cinco.colunas
.oito.colunas
.quatro.colunas
.nove.colunas
.tres.colunas
.dez.colunas
.duas.colunas

A sintaxe suporta para empurrar e puxar de três colunas e nove colunas.

<div class="linha">
  <div class="tres colunas empurrar-nove">
    Sidebar...
  </div>
  <div class="nove colunas puxar-tres">
    Conteudo principal...
  </div>
</div>

Mobile Grid (4 colunas)

Quando você está criando o layout que você pode, opcionalmente, anexar classes para adaptar seu layout para Mobile. O Mobile grid é de quatro colunas.

.quatro.colunas.mobile-uma
.oito.colunas.mobile-tres
.seis.colunas.mobile-duas
.seis.colunas.mobile-duas
.nove.colunas.mobile-tres
.tres.colunas.mobile-uma
<div class="linha">
  <div class="quatro colunas mobile-uma">
    Sidebar...
  </div>
  <div class="oito colunas mobile-tres">
    Conteudo principal...
  </div>
</div>
Empurrar/Puxar Colunas Mobile

Você pode usar as classes de .puxar-uma-mobile, .puxar-duas-mobile, .puxar-tres-mobile, bem como as .empurrar-uma-mobile, .empurrar-duas-mobile, .empurrar-tres-mobile para as quatro colunas mobile.


Block Grids

Block grids são ul com as classes .duas-col, .tres-col, .quatro-col and .cinco-col. Desta forma você pode bloquear as colunas em um número fixo.

Essas colunas ficarão bloqueadas independente da visualização (mobile ou tablet).

.duas-col
  • duas-col
  • duas-col
  • duas-col
  • duas-col
  • duas-col
.tres-col
  • tres-col
  • tres-col
  • tres-col
  • tres-col
  • tres-col
.quatro-col (Mobile)
  • quatro-col
  • quatro-col
  • quatro-col
  • quatro-col
  • quatro-col
  • quatro-col
.cinco-col
  • cinco-col
  • cinco-col
  • cinco-col
  • cinco-col
  • cinco-col
  • cinco-col
  • cinco-col

Tipografia

Títulos, parágrafos, listas, e outros elementos do tipo "em linha"


h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
H6. HEADING 6

<p> Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

<p class="texto-centro"> Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

<p class="texto-direita"> Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Outros elementos

Texto com a tag em

Texto com a tag strong

Texto com a tag code


Listas

<ul>

  • Lorem ipsum dolor
  • Consectetur adipiscing
  • Integer molestie lorem
  • Facilisis in pretium
  • Nulla volutpat aliquam
    • Phasellus iaculis
    • Purus sodales
    • Vestibulum laoreet
    • Ac tristique libero
  • Faucibus porta lacus
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

<ul class="disco">

  • Lorem ipsum dolor
  • Consectetur adipiscing
  • Integer molestie lorem
  • Facilisis in pretium
  • Nulla volutpat aliquam
    • Phasellus iaculis
    • Purus sodales
    • Vestibulum laoreet
    • Ac tristique libero
  • Faucibus porta lacus
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

<ul class="quadrado">

  • Lorem ipsum dolor
  • Consectetur adipiscing
  • Integer molestie lorem
  • Facilisis in pretium
  • Nulla volutpat aliquam
    • Phasellus iaculis
    • Purus sodales
    • Vestibulum laoreet
    • Ac tristique libero
  • Faucibus porta lacus
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

<ul class="circulo">

  • Lorem ipsum dolor
  • Consectetur adipiscing
  • Integer molestie lorem
  • Facilisis in pretium
  • Nulla volutpat aliquam
    • Phasellus iaculis
    • Purus sodales
    • Vestibulum laoreet
    • Ac tristique libero
  • Faucibus porta lacus
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Imagens

As imagens podem ser alinhadas à .esquerda ou a .direita. Este comportamento funciona apenas para imagens dentro da tag <p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Imagem Imagem 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.

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.

Tabela

As tabelas .tabela são automaticamente "decoradas" de forma simples para garantir a leitura e manter a estrutura. Com a opção .listrada a cor de fundo das linhas "ímpares" ficarão cinza claro.

# Lorem Ipsum Twitter
1 Exercitation Ullamco @laboris
2 Voluptate Velit @ssecillum
3 Aliquipex Commodo @consequat