Resumo Bootstrap

Prévia do material em texto

Layout 
Seção 1, aula 5 
Layout - Containers 
São os elementos de layout mais básico no ​Bootstrap​​ e são necessários 
ao usar o sistema de ​grid ​​padrão do Framework. Você pode Escolher 
Usar ​fixed-width container​​ (ou seja, a Propriedade ​max-width​​ muda em 
cada breakpoint) ou​ fluid-width​​ (o que significa que é 100% de largura o 
tempo todo). 
Exemplos: 
 
<div​ class=​"container"​> 
 ​<!-- Content here --> 
</div> 
 
<div​ class=​"container-fluid"​> 
 ... 
</div> 
 
Responsive breakpoints 
Uma vez que o ​Bootstrap ​​é desenvolvido para ser ​Mobile first​​, é usado 
um punhado de media queries para criar breakpoints sensíveis para 
nossos layouts e interfaces. Esses breakpoints são principalmente 
baseados nas larguras mínimas de viewport existentes e nos permitem 
realizar diversas mudanças. 
O ​Bootstrap ​​usa principalmente os seguintes intervalos de media queries 
- ou breakpoints: 
// Extra small devices (Celulares na Vertical, menor que 576px) 
// Nenhuma consulta de mídia, pois este é o padrão no Bootstrap 
 
// Small devices (Celulares na Horizontal, maior que 576px) 
@media (min-width: 576px) { ... } 
 
// Medium devices (Tablets, maior que 768px) 
@media (min-width: 768px) { ... } 
 
// Large devices (Desktops, maior que 992px) 
@media (min-width: 992px) { ... } 
 
// Extra large devices (Desktops com tela grande, maior que 1200px) 
@media (min-width: 1200px) { ... } 
Uma vez que escrevemos o nosso CSS de origem no Sass, todas as 
nossas consultas de mídia estão disponíveis via Sass: 
@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) { ... } 
 
// Exemplo de Uso: 
@include media-breakpoint-up(sm) { 
 .some-​class​ { 
 display: block; 
 } 
} 
O Bootstrap também pode fazer o contrário em algumas situações e fazer 
a consulta de mídia da seguinte forma: 
// Extra small devices (Celulares na Vertical, menor que 576px) 
@media (max-width: 575px) { ... } 
 
// Small devices (Celulares na Horizontal, menor que 768px) 
@media (max-width: 767px) { ... } 
 
// Medium devices (Tablets, menor que 992px) 
@media (max-width: 991px) { ... } 
 
// Large devices (Desktops, menor que 1200px) 
@media (max-width: 1199px) { ... } 
 
// Extra large devices (Desktops com tela grande) 
// Nenhuma consulta de mídia, uma vez que o breakpoint extra grande não tem limite 
superior em sua largura 
Mais uma vez, essas consultas de mídia também estão disponíveis via 
Sass: 
@include media-breakpoint-down(xs) { ... } 
@include media-breakpoint-down(sm) { ... } 
@include media-breakpoint-down(md) { ... } 
@include media-breakpoint-down(lg) { ... } 
Também pode ocorrer uma consulta de media query para segmentar um 
único tamanho de tela usando as larguras mínima e máxima do breakpoint. 
// Extra small devices (Celulares na Vertical, menor que 576px) 
@media (max-width: 575px) { ... } 
 
// Small devices (Celulares na Horizontal, entre 576px e 768px) 
@media (min-width: 576px) ​and​ (max-width: 767px) { ... } 
 
// Medium devices (Tablets, entre 768px e 992px) 
@media (min-width: 768px) ​and​ (max-width: 991px) { ... } 
 
// Large devices (Desktops, entre 992px e 1200px) 
@media (min-width: 992px) ​and​ (max-width: 1199px) { ... } 
 
// Extra large devices (Desktop com tela grande, maior que 1200px) 
@media (min-width: 1200px) { ... } 
Essas consultas também estão disponíveis via Sass: 
@include media-breakpoint-only(xs) { ... } 
@include media-breakpoint-only(sm) { ... } 
@include media-breakpoint-only(md) { ... } 
@include media-breakpoint-only(lg) { ... } 
@include media-breakpoint-only(xl) { ... } 
Também da mesma forma, as consultas podem abranger várias larguras 
de breakpoints: 
// Exemplo 
// Aplicar estilos a partir de dispositivos médios e até dispositivos extra grandes 
@media (min-width: 768px) ​and​ (max-width: 1199px) { ... } 
Via Sass: 
@include media-breakpoint-between(md, xl) { ... } 
Z-index 
Vários componentes do Bootstrap usam o Z-index, Esta propriedade CSS 
ajuda a controlar o layout fornecendo um terceiro eixo para organizar o 
conteúdo. 
Não incentivo a personalização desses valores, pois se você mudar um, é 
provável que você terá que mudar todos. 
$zindex-dropdown-backdrop: 990 ! ​default​; 
$zindex-dropdown: 1000 !​default​; 
$zindex-​fixed​: 1030 !​default​; 
$zindex-sticky: 1030 !​default​; 
$zindex-modal-backdrop: 1040 ! ​default​; 
$zindex-modal: 1050 !​default​; 
$zindex-popover: 1060 !​default​; 
$zindex-tooltip: 1070 !​default​; 
Lembrando que este artigo é para caso você necessite realizar alguma 
personalização extra ao Framework, seu uso deve ser feito com todo 
cuidado e se feito deve ser testado em diversos dispositivos a fim de 
garantir que não haja bugs. 
 
 
 
Tipografia 
Seção 2, aula 8 
O Bootstrap possui uma tipografia simples e de facilmente personalização 
para títulos, textos corporativos, listas e muito mais. Para um controle 
ainda maior, confira a sessão de ​Utilitários ​​deste curso. 
Configurações Globais 
O Framework define os estilos básicos de exibição e tipografia da seguinte 
forma: 
● Usa uma pilha de fontes nativas (​Helvetica Neue, Helvetica e Arial​​) e seleciona 
a melhor fonte de acordo com o sistema operacional e/ou dispositivo. 
● Para mais inclusão e acessibilidade, assume o ​font-size​ padrão do navegador 
(geralmente 16px) para que os visitantes possam personalizar os padrões 
conforme necessário. 
Principais Tipografias 
● Cabeçalhos 
Todos os cabeçalhos HTML, ​<h1>​ ao ​<h6>​ , estão disponíveis. 
 
<h1>​h1. Bootstrap heading​</h1> 
<h2>​h2. Bootstrap heading​</h2> 
<h3>​h3. Bootstrap heading​</h3> 
<h4>​h4. Bootstrap heading​</h4> 
<h5>​h5. Bootstrap heading​</h5> 
<h6>​h6. Bootstrap heading​</h6> 
Você também pode usar as classes .​h1​​ a ​.h6​​, para quando você deseja 
combinar o estilo de fonte de um título, mas não pode usar o elemento 
HTML por questões de semântica. 
 
<p​ class=​"h1"​> ​h1. Bootstrap heading​</p> 
<p​ class=​"h2"​> ​h2. Bootstrap heading​</p> 
<p​ class=​"h3"​> ​h3. Bootstrap heading​</p> 
<p​ class=​"h4"​> ​h4. Bootstrap heading​</p> 
<p​ class=​"h5"​> ​h5. Bootstrap heading​</p> 
<p​ class=​"h6"​> ​h6. Bootstrap heading​</p> 
 
● Cabeçalhos Customizados 
Você pode usar as classes utilitárias para recriar um pequeno subtitulo. 
 
<h3> 
 Título de exibição normal 
 ​<small​ class=​"text-muted" ​>​Com texto secundário desbotado​</small> 
</h3> 
 
● Cabeçalhos em Display 
Tradicionalmente os títulos na página principal de um site são projetados 
para se destacar na primeira parte de seu site. Quando for esta sua 
necessidade, considere usar um cabeçalho em display - um estilo de título 
maior, um pouco mais extravagante. 
 
<h1​ class=​"display-1"​>​Display 1​</h1> 
<h1​ class=​"display-2"​>​Display 2​</h1> 
<h1​ class=​"display-3"​>​Display 3​</h1> 
<h1​ class=​"display-4"​>​Display 4​</h1> 
 
● Lead 
Faça um parágrafo com destaque adicionando a classe ​.lead​. 
 
 
<p​ class=​"lead"​> 
 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non 
commodo luctus. 
</p> 
 
● Elementos de texto em linha 
Você também pode usar elementos comuns da HTML5. 
 
<p>​Você pode usar a ​<mark>​marca​</mark>​ para realçar o texto.​</p> 
<p><del>​Esta linha de texto deve ser tratada como texto excluído.​</del></p> 
<p><s> ​Esta linha de texto deve ser tratada como texto não utilizado.​</s></p> 
<p><ins>​Estalinha de texto deve ser tratada como algo além do documento.​</ins></p> 
<p><u>​Esta linha de texto será renderizada como sublinhada​</u></p> 
<p><small>​Esta linha de texto deve ser tratada como impressão fina.​</small></p> 
<p><strong> ​Esta linha foi processada como texto em negrito.​</strong></p> 
<p><em>​Esta linha foi processada em um texto itálico.​</em></p> 
As classes​ .mark​​ e ​.small ​​também estão disponíveis para aplicar os 
mesmos estilos que​ <mark>​ e ​<small>​ , evitando quaisquer implicações 
semânticas indesejadas que as tags trariam. 
Embora não seja mostrado acima, sinta-se livre para usar ​<b>​ e ​<i>​ no 
HTML5.​ <b​ > destina-se a destacar palavras ou frases sem transmitir 
importância adicional enquanto ​<i>​ é principalmente utilizado para fala, 
termos técnicos, etc. 
 
● Abreviações 
Use o elemento ​<abbr> ​ do HTML para abreviaturas e siglas, para mostrar 
a versão expandida quando o cursor estiver sobre a abreviação. As 
abreviaturas têm um sublinhado padrão da ​Normalize.css ​​e ganham um 
cursor para fornecer um contexto adicional em usuários de tecnologias de 
assitiva. 
Adicione a classe ​.initialism​ a uma abreviatura para obter uma 
tamanho de letra um pouco menor. 
 
<p><abbr​ title= ​"Brasil"​> ​BR​</abbr></p> 
<p><abbr​ title= ​"HyperText Markup Language"​ class=​"initialism"​>​HTML​</abbr></p> 
 
● Layout inverso 
Adicione ​.blockquote-reverse​ para um ​blockquote​ com conteúdo 
alinhado à direita. 
 
 
<blockquote​ class= ​"blockquote blockquote-reverse"​> 
 ​<p ​ class= ​"mb-0"​>​Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 
posuere erat a ante. ​</p> 
 ​<footer​ class= ​"blockquote-footer"​>​Alguém famoso no ​<cite​ title=​"Titulo do 
Código"​>​Titulo do Código​</cite></footer> 
</blockquote> 
Mudanças na Versão Beta 2 
Você agora deve utilizar utilitários de texto para modificar o alinhamento 
dos Blockquotes, a classe ​blockquote-reverse​​ foi retirada da versão Beta 
2 e agora devemos utilizar da seguinte forma: 
<blockquote​ class= ​"blockquote text-right"​> 
 ​<p ​ class= ​"mb-0"​>​Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 
posuere erat a ante. ​</p> 
 ​<footer​ class= ​"blockquote-footer"​>​Uma citação famosa no​<cite​ title=​"Titulo do 
Código"​>​Título do Código​</cite></footer> 
</blockquote> 
 
● Listas 
Unstyled 
Remova o estilo e a margem esquerda nos itens da lista (apenas nos filhos 
imediatos), o que significa que você precisará adicionar a classe para 
todas as listas aninhadas também. 
 
 
<ul​ class=​"list-unstyled"​> 
 ​<li>​Lorem ipsum dolor sit amet​</li> 
 ​<li>​Consectetur adipiscing elit​</li> 
 ​<li>​Integer molestie lorem at massa​</li> 
 ​<li>​Facilisis in pretium nisl aliquet​</li> 
 ​<li>​Nulla volutpat aliquam velit 
 ​<ul> 
 ​<li> ​Phasellus iaculis neque​</li> 
 ​<li> ​Purus sodales ultricies​</li> 
 ​<li> ​Vestibulum laoreet porttitor sem​</li> 
 ​<li> ​Ac tristique libero volutpat at​</li> 
 ​</ul> 
 ​</li> 
 ​<li>​Faucibus porta lacus fringilla vel​</li> 
 ​<li>​Aenean sit amet erat nunc​</li> 
 ​<li>​Eget porttitor lorem​</li> 
</ul> 
Inline (em linha) 
Remove os bullets da lista e aplica uma margem com a combinação de 
duas classes ​.list-inline ​ e ​.list-inline-item​. 
 
 
<ul​ class=​"list-inline"​> 
 ​<li​ class= ​"list-inline-item"​> ​Lorem ipsum​</li> 
 ​<li​ class= ​"list-inline-item"​> ​Phasellus iaculis​</li> 
 ​<li​ class= ​"list-inline-item"​> ​Nulla volutpat​</li> 
</ul> 
 
Códigos 
Seção 2, aula 9 
O Bootstrap 4 permite que você utilize estilos para trechos de código em 
linha, códigos longos e blocos de código multilinhas. 
Exemplos de uso: 
● Código Inline 
Envolva os fragmentos de código com a tag ​<code>​ . Certifique-se de usar 
os escapes HTML. 
 
 
● Blocos de Código Multilinhas 
 
Use ​<pre> ​ para múltiplas linhas de código. Mais uma vez, certifique-se de 
usar os escapes HTML para renderização correta do seu destaque. 
Opcionalmente você pode utilizar a classe ​.pre-scrollable​ , para definir 
uma altura máxima ao seu bloco de 350px e oferecer uma barra de 
rolagem no eixo y. 
 
● Variáveis 
Para variáveis o indicado é usar a tag ​<var>​ . 
 
● Inputs do Usuário 
A tag ​<kbd>​ pode ser usada para indicar ações e teclas que devem ser 
utilizadas pelo usuário. 
 
● Amostra 
Para indicar o resultado de uma amostra de um programa, use a tag 
<samp> ​. 
 
 
 
Sempre que precisar exibir um pedaço de texto junto a uma imagem, como 
por exemplo em uma legenda, considere usar uma tag ​<figure>​ . 
Use as classes ​.figure​ , ​.figure-img​ e ​.figure-caption ​ para fornecer 
estilos do Bootstrap as tags ​<figure>​ e ​<figcaption>​ do HTML5. 
As imagens constantes na tag figure não possuem um tamanho pré 
determinado, portanto certifique-se de usar a classe ​.img-fluid ​ no 
elemento ​<img>​ para obter a responsividade nas imagens. 
Exemplos de uso: 
 
<figure​ class=​"figure"​> 
 ​<img​ src=​"..."​ class=​"figure-img img-fluid rounded"​ alt=​"Uma imagem de espaço 
reservado quadrada, genérica e com cantos arredondados."​> 
 ​<figcaption ​ class= ​"figure-caption"​>​Uma legenda para a imagem acima.​</figcaption> 
</figure> 
 
Você também pode mudar o alinhamento da legenda através de um 
Utilitário de Texto​​. 
 
<figure​ class=​"figure"​> 
 ​<img​ src=​"..."​ class=​"figure-img img-fluid rounded"​ alt=​"Uma imagem de espaço 
reservado quadrada, genérica e com cantos arredondados."​> 
 ​<figcaption ​ class= ​"figure-caption text-right"​>​Uma legenda para a imagem 
acima.​</figcaption> 
</figure> 
Saiba mais sobre o alinhamento de texto na sessão​ Utilitários​​.