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 bootstrapbower install bootstrapSistema de Grids - Overview
Column 8
Column 4
12 columns
12 columns
column 3
LOGOTIPO
column 9
NAVBAR
column 10
ARTICLE
column 2
ASIDE
column 12
FOOTER
Sistema de Grids - Gutter
column 6
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
By Keven Jesus
Introdução ao bootstrap apresentando suas grids
