Bootstrap é um Framework CSS para o desenvolvimento e prototipação
de aplicações Web. Inclui uma gama de elementos já prontos além de
um sistema de gird que permite trabalhar com layouts de maneira
simplificada.
Download do framework
Para esta aula utilizaremos o Bootstrap v4. No momento do curso o
Bootstrap estava na versão 5, assim no site do framework procurar
pela versão anterior para evitar problemas de compatibilidade.
Primeiramente configuramos o Bootstrap no projeto via link externo
(CDN?), copiando os links do CSS e JS para a página do projeto.
Em seguida fizemos o download do Bootstrap na versão local. No curso
foi feito o dowload das bibliotecas do jQuery
Download jQuery e do
Pooper Download do Pooper. Não
localizei os arquivos do Popper para download como na aula.
Analisando a documentação do Bootstrap percebi que o arquivo
bootstrap.bundle.min.js inclui o Popper, mas não o jQuery, portanto
não há a necessidade de incluir o Popper separadamente.
Aplicando diversas classes para a criação de uma navbar. Não há
nenhuma explicação do porque utilizar cada classe. Para entender o
melhor é pesquisar no próprio site do Bootstrap.
Classes utilizadas nesta parte:
navbar navbar-expand-lg nav-light bg-light
navbar-brand
class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbar"
navbar-toggler-icon
id="navbar" class="collapse navbar-collapse" A 'id'
aplicada aqui faz referencia ao
data-target='#navbar' utilizada na tag <button>
navbar-nav ml-auto O ml-auto diz respeito a
marginleft-auto
nav-item
nav-link
Para criar um menu do tipo dropdown utilizamos algumas
classes que funcionam graças ao complemento popper.
Esse menu foi criado como um item da <li> do menu navbar.
As classes utilizadas para esse menu são:
nav-item dropdown
class="nav-link dropdown-toggle" data-toggle="dropdown"
dropdown-menu
dropdown-item
O sistema de grids no Bootstrap é modulado da seguinte forma:
Inicialmente criamos uma classe container. Dentro desse
container inserimos um elemento com a classe row. A partir
dessa divisão começamos a definir as colunas que são divididas em 12
partes.
As quebras de tela horizontais são divididas com as seguintes
nomenclaturas de acordo com o tamanho da tela do dispositivo:
Extra small: .col- Largura: 576px
Small: .col-sm Largura >=576px
Medium: .col-md Largura >=768px
Large: .col-lg Largura >=992px
Extra Large: .col-xl Largura >=1200px
A partir dessa informação podemos definir as classes conforme o
tamanho de tela em que queremos redefinir o grid. Por exemplo se
quisermos 4 colunas quando a tela estiver grande, 2 colunas quando
estiver média e 1 coluna quando estiver pequena definimos as três
opções na classe da seguinte forma:
class="col-sm-12 col-md-6 col-lg-3.
Assim teremos 12 partes no modo small, 6 partes no modo medium e 3
partes no modo large.
O breakpoints do Bootstrap funciona como o @media no CSS.
Quando não definimos os breakpoints nem o numero de colunas o
Bootstrap irá considerar a classe row e dividir os
elementos se possível em partes iguais independentemente do tamanho
da tela.
Outra classe utilizada nessa aula foi a classe
img-fluid que ajusta o tamanho de uma imagem de acordo com
o espaço disponível, tornando-a responsiva.
Utilizamos ainda a classe m que se refere as margens (top:
mt-valor, bottom: mb-valor, left: ml-valor,
right: mr-valor).
Por padrão o Bootstrap aplica ainda um padding em cada coluna
chamado gutter. Para remover esse padding devemos inserir na
classe que define o row a classe no-gutters
Podemos alinhar os elementos verticalmente utilizando tag que está
definido o row a classe aligns-items-start para o
topo, align-items-center para centro e
align-items-end para o bottom.
Para aplicar esse alinhamento em cada item da coluna podemos
utilizar nas tags de coluna a classe
align-self-start / center / bottom.
O alinhamento horizontal é feito com as classes
justify-content-start / center / end / between / around.
Podemos ainda fazer o posicionamento das colunas com as propriedades
de offset, que movimentam as colunas através de margens. O offset
pode ser ajustado com a classe
offset-tamanho_de_dispositivo-valor
Para a diagramação de formulários utilizamos, além do
container com row e col criamos a tag
<form> e uma <div> com a classe form-group.
A classe que estiliza o campo do formulário é a
form-control. Essa <div class:"form-group"> deve ser
criada para cada elemento do formulário.
No exemplo utilizamos uma tag <small> com o texto de explicação
do campo do formulário (helper text). PAra ele utilizamos as classes
form-text text-muted sendo que a text-muted tem a
função de converter a fonte para uma cor mais thin & clear.
Todos os demais campos do formulário podem ser estilizados da mesma
forma.
Podemos por fim fazer a divisão de colunas utilizando as
propriedades já estudadas.
Temos ainda classes especiais para entradas do tipo
checkbox e radio. Para esses casos podemos utilizar a
classe form-check, form-check-input e
form-check-label.
Para redefinir o tamanho dos campos do formulário podemos utilizar
no lugar da classe form-control as dimensões
form-control-lg ou form-control-sm, sendo que a
primeira (sem dimensão) é o padrão.
Para os botões aplicamos primeiramente a classe btn. Em
seguida para estilizarmos os botões utilizamos as classes
btn-estilo, onde o estilo pode ser:
primary, secondary, warning,
danger, success, info, light e
dark. Temos ainda o btn-link.
Outro tipo de estilo de botões é o outline, que segue os mesmos
padrões do btn- mas com a classe btn-outline-estilo.
O ajuste de tamanho é feito com a classe btn-lg / sm.
Podemos também utilizar o btn-block que faz o botão ocupar
toto o espaço do elemento pai.
A criação de cards é feita com as classes card,
card-header, card-body e card-footer. As
classes não são obrigatórias. Podemos aplicar estilos inline para
remover as bordas padrão do Bootstrap e podemos utilizar a classe
text-center para alinhar os textos.
O Bootstrap v4 não possui uma biblioteca de ícones interna, mas tem
algumas recomendações como por exemplo o site
Open Iconic. Esse site
disponibiliza uma biblioteca de icones que deve ser baixada e
incoporada ao CSS através do arquivo open-iconic.min.css e da
pasta fonts que também deve ser incorporada ao projeto.
Com os icones instalados no projeto podemos consultar a página do
Open Iconic e escolher os
ícones a serem incorporados à página. Selecionado o ícone basta
copiar o link do tipo de inserção que será utilizado.
Após isso podemos aplicar os estilos conforme desejado.
Aplicando uma série de ajustes de estilo, todos de modo inline.
Aula 11 - Listas
Criação de lista para o footer utilizando as classes list-group e list-group-item
Aula 12 - Popover modal e finalizando
Criação de outra lista no footer desta vez inline utilizando as
classes
list-inline e list-inline-item.
Criação de um quadro popover com as seguintes propriedades:
class="list-inline-item" style="color: white;"
data-container="body" data-toggle="popover" data-placement="top"
data-content="This is my popover" data-trigger="hover".
Para ativar esta implementação precisamos criar a seguinte função em
Javascript que será incluida em uma tag <script> em seguida dos
apontamentos de arquivos.
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover()
})
</script>
Perceba que nas propriedades inseridas na <li> foi utilizada a
propriedade data-trigger='hover' ou seja o 'disparador' é o
hover.
Em seguida fizemos a criação de um modal (tela do tipo popup).
Para criar esse modal primeiro criamos um <button> com as
seguintes propriedades:
class="btn btn-secondary" data-toggle="modal"
data-target="#modal"
Veja que o data-target chama o elemento com a
id modal. Em seguida foi criada a estrutura do modal, que
deve ficar fora do documento principal, entre a última tag do
documento e as chamadas de script.
a estrutura para o modal é a seguinte:
<div id="modal" class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">This is my title</h4>
</div>
<div class="modal-body">
Modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Desse código podemos verificar que o modal é construido utilizando
as classes modal, modal-dialog,
modal-content, modal-header, modal-title,
modal-body e modal-footer.
Outra propriedade é a role (preciso sasber como essa
propriedade funciona) e a data-dismiss que indica, no botão
de 'Cancel' quem deve ser dispensado.