Bootstrap

E técnicas para detonar em um hackathon

Quem sou eu?
Fernando Freitas Alves (@ffreitasalves)

- 16 anos codando (Metade da minha vida)

- ~7 anos empreendendo

- CTO @ Tikal Tech

- Alguns hackathons na bagagem

- 1º Lugar API Hack Day

- 1º Lugar - Educação - Hackathon FIESP

- Best Use of Concur API - TechCrunch Disrupt SF

O que é Bootstrap?
(Twitter) Bootstrap
- Criado pelo twitter em 2011

- É o segundo projeto com mais * no GitHub

- Framework (HTML/CSS/JS) de Desenv. Web Responsivo

Por Quê usar o bootstrap?
O Bootstrap já tem tudo que você precisa pra fazer o front

Hackathon é jogo rápido!

Faça “feio” e se der tempo deixe bonito

Existem vários layouts gratuitos para Bootstrap

USE um Exemplo Pronto pra começar

https://getbootstrap.com/docs/4.0/examples/

https://bootstraptaste.com/

Toca Bilu

http://tocabilu.freitas.webfactional.com/
GRID System
Media Queries
Aplica o CSS de acordo com a dimensão do dispositivo do
usuário.

@include media-breakpoint-up(xs) { ... }

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
Containers, Linhas e Colunas
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Exemplo

<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
Media Objects
Alinhamento fácil e rápido de imagens e textos
<div class="media">
<img src="..." alt="Minha Imagem">
<div class="media-body">
<h5>Título</h5>
Texto
</div>
</div>
Reboot - Mudanças no CSS
O Bootstrap por padrão muda o CSS de vários elementos para
que eles tenham consistência e elegância

Margens

Fontes

Headers

Listas

Forms
Exemplo
Componentes
O Bootstrap vem com muitos componentes que combinal
funcionalidade JS e aparência CSS
Alerts
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>
Badges

<h1>Example heading <span class="badge badge-secondary">New</span></h1>

<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
Variações
Badge dentro de um botão

Badges Coloridos
BreadCrumbS
Botões
Variações
Variações de tamanho
Large - lg

Small - sm
Block level
Botão fica do tamanho do elemento pai
Cards
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to
build on the card title and make up the bulk of the
card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Variação (Card com navegação)
CAROUSEL
Collapse
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false"
aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-
target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
Collapse

Depois que clicar:

Menu Dropdown
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Forms
Classes para dar vida aos forms

Form-groups para posicionar elementos

Form-control pra dar estilo aos campos de input

● Para File Input use form-control-file

Form Típico
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Form Típico
Form control Large e Small
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
Use Grids para posicionar forms mais complexos
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>

Outra Variação de estilo é o .form-row

Form com grid
Código do form
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4" class="col-form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4" class="col-form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2" class="col-form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity" class="col-form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
Input groups
Classes que vão dar ainda mais flexibilidade nos seus inputs
Input groups
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-
describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
Variação
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." aria-label="Search
for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
JumboTron
Jumbotron
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra
attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger
container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
List group
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Modal
<div class="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Pra chamar o modal
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
Navs e Navbar
Elementos para vocẽ criar barras de navegação no site ou em
um lugar específico
Paginação
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
Tooltip
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right"
title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom"
title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left"
title="Tooltip on left">
Tooltip on left
</button>
Tooltip
Popover
Colocar alguns atributos no seu elemento HTML que ele ganha
um popover

data-toggle=”popover”

data-content=”seu conteúdo”

data-placement = bottom, top, right ou left

Title = “Seu Popover com título”

Popover
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title"
data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle
popover</button>
Barra de Progresso
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-
valuemin="0" aria-valuemax="100"></div>
</div>
Não é só isso
Isso é só o básico!

Todos os componentes tem muitas outras variações.

Dicas - Procure coisas prontas
Procure por Snippets prontos no https://bootsnipp.com/
Dica - Google Developer Tools
Seu melhor amigo na hora desenvolver um front

Pressione F12 e Abuse e use do Console com Javascript

Inspecione elementos de outro site pra saber como eles foram

feitos
Dica - Trabalhe bem a ideia no Hackathon
Gaste um bom tempo pesquisando

Integrações são as chaves dos hackathons

Dica - Chegue com seu ambiente pronto
Tenha suas ferramentas de trabalho já instaladas

- IDE ou Editor de Texto

- Pacotes instalados

- Se certifique de que tudo está funcionando

Dica - Corte requisitos
Trabalhe com o conceito

Não crie todo um sistema de Login, Recuperar Senha, Email de

Boas Vindas antes de ter o PRINCIPAL funcionando

Construa o seu projeto em torno da PRINCIPAL FEATURE

Dica - Faça Perguntas
Alugue os Juízes, Patrocinadores e Mentores durante o Evento

Troque ideias com os outros participantes, isso é a melhor

parte!
Dica - Faça Funcionar, no matter what!!!
Divulgue - Crie uma marca no seu produto
Obrigado!

Fernando Freitas Alves (@ffreitasalves)

ffreitasalves@gmail.com
https://fernandofreitasalves.com