Bootstrap - Grid System

BOOTSTRAP 3

Framework - Front End

getbootstrap.com

Keven Jesus

Encantador de usuários

github.com/kevenjesus

facebook.com/kevenjesus

Era uma vez ...

Mark e Jacob dois funcionários do Twitter resolveram ter um bebê. Após um longo tempo de preparo nasce o Bootstrap em meados de 2010

Você precisa saber

Primary Info Warning Danger Success

Obtendo

getbootstrap.com/customize

npm install bootstrap

bower install bootstrap

Sistema de Grids - Overview

Column 8

Column 4

12 columns

column 3

LOGOTIPO

column 9

NAVBAR

column 10

ARTICLE

column 2

ASIDE

column 12

FOOTER

Sistema de Grids - Gutter

column 6

Default 30px

Sistema de Grids - Devices

col-xs

col-sm

col-lg

col-md

Extra small devices phone (até 480px)

small devices tablet (maior ou igual a 768px)

Medium devices desktop (maior ou igual a 998px)

Large devices desktop (maior ou igual a 1200px)

Sistema de Grids - Exemplos

<!-- container -->
<div class="container">
    <h1>My container fixed</h1>
</div>

Container fixed

My container fixed

Sistema de Grids - Exemplos

<!-- container -->
<div class="container-fluid">
    <h1>My container fluid \o/</h1>
</div>

Container fluid

My container fluid \o/

Sistema de Grids - Exemplos

<!-- container -->
<div class="container-fluid">
    <!-- row -->
    <div class="row">
        <!-- aside -->
        <aside class="col-md-4"> 
            is aside 
        </aside>
        <!-- article -->
        <article class="col-md-8"> 
            my article 
        </article>
    </div>
</div>

Row and columns

Sistema de Grids - Exemplos

Row and columns - view

is aside

My article

Obrigado \o/

Dúvidas ? consulte nosso grupo

facebook.com/groups/twitter.bootstrap.brasil/

Receba dicas sobre bootstrap

bootstraptotal.com.br/informativo