Tu d o o q u e v o c ê p r e c i s a s a b e r s o b r e o

Bootstrap v4.0
um e-book produzido por:

CodePrestige, _e,
Agradecimentos

Seja muito bem-vindo!

A pesar de todas as evol uções dos úl ti mos anos no desenvol vi mento w eb, como o surgi mento
das especi fi cações do F l exbox e o C S S Gri d, o B ootstrap ai nda é a sol ução favori ta de
mui tos profi ssi onai s de front-end. N este e-book, veremos as pri nci pai s funci onal i dades da
recém l ançada versão 4.0 da bi bl i oteca.

Boa leitura e bons códigos!

Diego Martins de Pinho Reinaldo Silotto

Fundador da Code Fundador do TekZoom
Prestige @DiegoPinho @tek zoom
Sumário

 Botões e alertas flat  Glyphicons eliminados

 Componentes em Flexbox  Do G ru n t a o n p m
scrip t s
 Media queries mais inteligentes
 Bootstrap 3 x
 De pixels para rems Bootstrap 4
 Cartões para todos  Outras melhorias
 Adeus Normalize.css, bem-vindo  Referências
Reboot.css
 Controle espaços com classes
Botões e alertas flat

A primeira mudança está no visual dos botões que hoje está muito mais próximo
do Material Design, apresentando formas mais limpas e planas ( flat ).

O mesmo aconteceu
com os alertas, que
agora estão mais
leves e agradáveis
aos olhos

CodePrestige - Ensino de programação | 01

Componentes em Flexbox

As famosas grades ( grids ) do Bootstrap foram

refeitas com o Flexbox. À primeira vista, isso não faz
uma grande diferença, já que a maioria dos layouts
de grade funciona exatamente da mesma maneira.
No entanto, agora temos muito mais possibilidades.

Por exemplo, antes precisávamos definir a

largura de
cada coluna ( column) (de 1 a 12) dentro de uma
linha
( row ). Agora podemos definir a largura de uma
coluna e deixar que as outras sejam
automaticamente definidas pelo Flexbox.

CodePrestige - Ensino de programação | 02

Media queries mais inteligentes
O Bootstrap agora possui mais pontos de quebra no seu sistema de grade (Grid System). Isso
significa
que o desenvolvedor tem mais liberdade para adaptar os seus layouts na grande diversidade de
resoluções
de aparelhos no mercado.

$grid-
breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;

CodePrestige - Ensino de programação | 03

De pixels para rems

O Bootstrap agora não é mais compatível

Com rems, todos os tamanhos de fonte são
com os sofríveis IE8 e IE9. Isso significa relativos ao elemento raiz (a tag html) e, por
que padrão, 1 rem é igual a 16px.
os designers agora podem aproveitar as
melhores partes do CSS sem serem
retidos
com hacks ou fallbacks de CSS. Com isso,
os
pixels agora foram trocados por rems para
tornar a tipografia responsiva e o
dimensionamento de componentes ainda
mais fácil, já que elas não são unidades
absolutas.

CodePrestige - Ensino de programação | 04

Cards para todos
Os cartões ( cards ) são componentes que agora substituem
os antigos painéis ( panels ) e poços ( we l s ) do Bootstrap 3.
Os cartões são definidos como um contêiner de conteúdo
flexível e extensível. Inclui opções para cabeçalhos e
rodapés, uma ampla variedade de conteúdo, cores de
fundo
contextuais e poderosas opções de exibição.

<div class="card" style="width: 18rem;">

<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">...</h5>
<p class="card-text">...</p>
<a href="#" class="btn btn-primary">...</a>
</div>
</div>

CodePrestige - Ensino de programação | 05

Adeus Normalize.css, bem-vindo Reboot.css

Até então, o Bootstrap usava o Normalize.css como

sua redefinição de CSS. O Normalize é um projeto
open source com mais de 30 mil estrelas no
GitHub. Com o Bootstrap 4, eles simplesmente
pegaram o normalize.css e adicionaram algumas
coisas do Bootstrap nele.

CodePrestige - Ensino de programação | 06

Controle espaços com classes

Agora é possível controlar o padding e as

margens dos elementos utilizando p-* e/ou m-*.
O alcance vai de 0.25 rem até 3 rem.

Também podemos utilizar as letras t,b,r e l para

definir lados específicos (top, bottom, right e
left
respectivamente).

<div class="d-flex p-5">elementos</div>

Exemplos: <div class="d-flex pl-5">elementos</div>

CodePrestige - Ensino de programação | 07

Glyphicons
eliminados
Algumas opções
bacanas:
1. Iconic
2. Octicons
3. IcoMoon
4. Font
Awesome
O Bootstrap agora não suporta mais os
Glyphicons. Ao invés disso, ele encoraja os 5. Captain Icon
desenvolvedores a encontrarem seu set de
ícones favoritos e inseri-los nos projetos. 6. Typicons
7. M a t e r i a l
Design Icons
CodePrestige - Ensino de programação | 08
Do Grunt ao npm
scripts
Versões anteriores do Bootstrap incluíam suporte ao
Grunt
para automatizar muitas das tarefas comuns; mas
agora não
mais. Em vez disso, o Bootstrap agora vem com uma
série
de scripts npm.

Podemos usá-los para fazer coisas como monitorar os

arquivos do Sass em busca de alterações, realizar
testes de
lint no JavaScript ou simplesmente usar o comando
npm dist
para fazer tudo e compilar uma versão de distribuição
do
site finalizado.
CodePrestige - Ensino de programação | 09
Bootstrap 3 x Bootstrap 4

Parâmetro Bootstrap 3 Bootstrap 4

Estrutura do Dropdown Pode ser criada com <ul> e <li> Pode ser criada com <ul> ou <div>

Imagens responsivas Aplicar classe .img-responsive Aplicar classe .img-fluid

Tabelas responsivas A classe .table-responsive deve A classe .table-responsive deve
ser aplicada na <div> pai do ser adicionado no elemento da
elemento própria tabela (<table>)

Paginação padrão .pagination precisa ser .page-item precisa ser adicionado

adicionada ao elemento <ul> a cada elemento e .page-link a
cada âncora (<a>)

Alinhamento da Navbar Coloque .navbar- Coloque espaços com os novos

right, .navbar-left para utilitários, tais como .mr-auto ou
alinhar os componentes elementos do Flexbox

CodePrestige - Ensino de programação | 10

Outras melhorias

Também vale mencionar que:

1. Todos os plugins foram reescritos: Cada plugin foi reescrito com ES6+ para aproveitar as
mais recentes melhorias do JavaScript. A versão 4 vem com suporte para Universal Module
Definition (UMD), métodos genéricos de subdivisão e verificação de tipo de opção, entre
outros.
2. Melhor documentação: Toda a documentação foi reescrita em Markdown; foram adicionados
alguns plugins úteis para simplificar os exemplos. Também foram colocados trechos de
códigos
para agilizar o trabalho.
3. Novas opções para personalização: Ao invés de separar gradientes, transições, sombras e
outras personalizações para uma folha de estilos à parte (como era na versão 3), todas essas
opções foram colocadas em variáveis Sass.

CodePrestige - Ensino de programação | 11

Referências

1. https://getbootstrap.com/
2. https://medium.freecodecamp.org/learn-bootstrap-4-in-5-minutes-
da94728efe41
3. https://scotch.io/bar-talk/whats-new-in-bootstrap-4
4. https://webdesign.tutsplus.com/articles/bootstrap-4-is-here-whats-new--cms-
30442
5. https://auth0.com/blog/whats-new-in-bootstrap4/
6. https://hackernoon.com/what-changed-in-bootstrap-4-0-ca3cbbf4f62f
7. https://tableless.com.br/bootstrap-4-alpha/

CodePrestige - Ensino de programação | 12

Conheça os nossos cursos online!

Entendendo o ECMAScript 6 React 16 Definitivo

Aprenda tudo sobre o ES6 no curso mais A última versão do React é uma reescritura do
completo do tema baseado no livro ECMAScript 6 core da biblioteca com uma série de novas
- Entre de cabeça no futuro do JavaScript funcionalidades, mais performance e melhorias.
publicado pela Casa do Código. Saiba como aproveitá-la ao máximo.

+900 alunos | +6 horas | Exercícios | Resumos +5500 alunos | Exercícios | Resumos | Certificado
Nos acompanhe nas redes sociais para mais conteúdo!

/CodePrestige /TekZoom

Confira outros e-books, vídeos e cursos nas nossas redes sociais!

E-book produzido em 28/03/2018. © 2018 Code Prestige.

TekZoom. Todos os direitos reservados.