Desenvolvimento GSI019 - Programação para Internet
Web no lado cliente Prof. Dr. Rafael D. Araújo
– Bootstrap e jQuery [Link]@[Link]
2023/1 [Link]
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Introdução ao Framework Bootstrap
• É um framework front-end muito popular
• Gratuito e de código aberto
• Utiliza HTML, CSS e JavaScript
• Foco em páginas responsivas, mobile-first
• Lançado em 2011 pelo Twitter
• Atualmente, se encontra na versão 5.3
• Documentação: [Link]
2
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Introdução ao Framework Bootstrap
• Disponibiliza uma coleção de classes CSS
• Melhoria de layouts, botões, formulários etc.
• Disponibiliza uma coleção de ícones e templates
3
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Como usar o Bootstrap 5
• Tag de responsividade (<meta name="viewport" ...>)
• Arquivo CSS do Boostrap
• Arquivo JavaScript do Bootstrap
• Arquivo JavaScript da biblioteca Popper (opcional)
• Caso for utilizar menus suspensos (dropdowns), popovers e tooltips
Nota: antes da versão 5, o Bootstrap
também utilizava a biblioteca jQuery. 4
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Como usar
Duas formas de incluir os arquivos:
1. Via CDN
<link href="[Link]
rel="stylesheet" integrity="sha384-
4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<script
src="[Link]
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
2. Download dos arquivos
• [Link]
5
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
“Hello, world!” com Bootstrap
• Utilize o código disponível em
[Link]
getting-started/introduction/
• Crie um container básico com a
classe container do Bootstrap
• Essa classe possibilita que o conteúdo apareça
centralizado em telas largas e expandido em
telas estreitas
• Inclua 3 parágrafos com qualquer
texto
• Utilize a ferramenta [Link]
6
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Sistema de grades (grids)
• O Bootstrap possibilita a divisão da página HTML em até 12 colunas de
mesma largura
• Baseado no módulo flexbox da CSS e em media queries
Grid Grid Grid Grid Grid Grid Grid Grid Grid Grid Grid Grid
1 2 3 4 5 6 7 8 9 10 11 12
7
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Sistema de grades (grids)
• Com os grids, é possível criar colunas de diferentes tamanhos
• Ideia central: colunas na horizontal para telas grandes e colunas
empilhadas na vertical para telas estreitas
COLUNA DE LARGURA 12
COLUNA DE LARGURA 6 COLUNA DE LARGURA 6
COLUNA DE LARGURA 4 COLUNA DE LARGURA 4 COLUNA DE LARGURA 4
Grid1 Grid2 Grid3 Grid4 Grid5 Grid6 Grid7 Grid8 Grid9 Grid10 Grid11 Grid12
8
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Sistema de grades (grids)
• Classes adicionadas a containers, como o <div>
• A classe CSS container é um componente necessário para habilitar o
sistema de grids
• .container = largura fixa
• .container-fluid = largura total do viewport
• Dentro de um container pode ter várias
linhas (classe CSS row)
• As colunas (classe CSS col) são
colocadas dentro de cada linha
9
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Breakpoints (grid tiers) col{-breakpoint}{-largura}
opcional opcional
• Definem um limiar para ajuste do layout das colunas
• As colunas aparecem na horizontal em viewports com largura igual ou
superior ao breakpoint
• As colunas aparecem empilhadas na vertical em viewports com largura
inferior ao breakpoint (ponto de quebra) <div class="container">
• xs (dispositivos muito pequenos): <576px <div class="row">
• sm (dispositivos pequenos): ≥576px <div class="col-lg-4">Coluna 1</div>
<div class="col-lg-4">Coluna 2</div>
• md (dispositivos médios): ≥768px <div class="col-lg-4">Coluna 3</div>
• lg (dispositivos grandes): ≥992px </div>
• xl (dispositivos muito grandes): ≥1200px </div>
• xxl (dispositivos extremamente grandes): ≥1400px Por padrão, a classe col sem
indicação de breakpoint utiliza a
configuração de colunas na
horizontal. 10
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Gutters
• Espaçamentos na grade entre colunas ou linhas
• Classes CSS no Bootstrap 5
• gx-* ➔ gutter horizontal (espaçamento entre as colunas)
• gy-* ➔ gutter vertical (espaçamento entre as linhas)
• g-* ➔ gutter horizontal e vertical
• * pode ser valores de 0 a 5
11
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Navbar responsiva
• As barras de navegação e seu conteúdo são fluid por padrão
<nav class="navbar navbar-expand-sm">
...
</nav>
[Link] 12
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Botões contextuais
• Classes CSS
.btn
.btn-primary
.btn-secondary
.btn-success
.btn-danger
.btn-warning
.btn-info <button type="button" class="btn btn-primary">Primary</button>
.btn-light
.btn-dark
.btn-link
13
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
<table class="table table-striped table-hover">
Tabelas …
</table>
Classe Bootstrap Descrição
.table Classe principal. Tabela com divisões horizontais
.table-striped Adiciona cores alternadas às linhas
.table-bordered Adiciona bordas em todas as células
.table-hover Adiciona cor à linha quando apontada pelo mouse
14
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Formulários
Classe Bootstrap Descrição
.form-group Para qualquer agrupamento de campos de formulário
.form-control Para campos textuais - input e textarea
.form-control-lg: mais largo
.form-control-sm: mais fino
.form-label Para rótulos (label) desses campos
.form-select Para o elemento <select>
.form-file Para campo do tipo file
.form-check Para grupos de checkboxes e rádios
.form-check-input Para campos input do tipo checkbox e radio
.form-check-label: para rótulos (label) desses campos
.form-switch: exibição estilo chave liga/desliga
15
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Formulários
16
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Campos com Rótulos Flutuantes no Bootstrap 5
• O container do campo/rótulo deve usar a classe form-floating
• O label deve ser inserido depois do input
• É obrigatório o atributo placeholder com um valor qualquer diferente
de vazio
• O conteúdo do label é utilizado como rótulo flutuante (e não o
placeholder)
17
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Campos com Rótulos Flutuantes no Bootstrap 5
18
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Alertas
• Classe CSS geral: <div class="alert alert-success" role="alert">
.alert Operação realizada com sucesso!
</div>
• Classes CSS
.alert-primary
.alert-secondary
.alert-success
.alert-danger
.alert-warning
.alert-info
.alert-light
.alert-dark
Classe .alert-dismissible
19
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Modal
• É uma caixa de diálogo (popup) para realizar interações com o usuário
• As janelas modais são construídas com HTML, CSS e JavaScript
• São posicionadas sobre todo o resto do documento e removem a
rolagem do <body> para que o conteúdo modal role
20
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery id="meuModal"
Modal class="modal"
Uso dos seguintes atributos no botão que vai abrir a modal
(também é possível via JavaScript):
data-bs-toggle="modal“
data-bs-target="#myModal"
21
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Modal - observações
• Atributos da div principal da janela modal
• class="modal"
• id="meuModal"
• Atributos do botão para abrir a janela modal
• data-bs-target="#meuModal"
• data-bs-toggle="modal"
• Atributos do botão interno para fechar a janela modal
• data-bs-dismiss="modal"
22
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Exercício
• Implemente uma página que contenha os seguintes elementos
estilizados com bootstrap:
a) Um menu de navegação com navbar
b) Uma tabela
c) Um formulário com campos input com rótulos flutuantes,
checkbox, radiobutton, caixa de seleção (dropdown) e um botão
d) Uma div de mensagens de alerta
• No clique do botão, deve abrir uma janela modal.
23
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Introdução à biblioteca jQuery
• jQuery é uma biblioteca de funções feita para facilitar o
trabalho em JavaScript
• Conjunto de classes e funções JavaScript
• Simplifica a manipulação dos elementos da página
• Grande parte dos websites atuais utilizam jQuery
• Suporte para múltiplos navegadores (cross-browser)
• Adiciona efeitos visuais e animações
24
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Como instalar
• Basta fazer o download da última versão da biblioteca
[Link]
• Incluir o script na página HTML
<script src="[Link]"></script>
• Também é possível utilizar via CDN
25
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Notação
• Duas notações: $(seletor) ou jQuery(seletor)
• $ : indica a utilização da biblioteca jQuery
• seletor : elemento da página a ser recuperado
(suporta a maioria dos seletores existentes no CSS)
• A partir desta notação é possível acessar elementos do
DOM e chamar métodos para operar sobre eles
26
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Exemplos
• $("p") : seleciona todos os elementos <p> da página
• $("div") : seleciona todos os elementos <div> da
página
27
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Funções
• Uma vez selecionados os elementos desejados, existem
várias funções que podem ser utilizadas
Função Descrição Exemplo
.html() Obter ou inserir conteúdo HTML. O mesmo que var teste = $(“#titulo”).html();
.innerHTML em JS. $(“#titulo”).html(“<i>novo título</i>”);
.text() Obter ou inserir conteúdo de texto no elemento. $(“#titulo”).text(“novo título”);
.val() Obter ou inserir o valor de um elemento de var teste = $(“#cpf”).val();
formulário. O mesmo que .value em JS.
.attr() Obter ou modificar o valor de um atributo. var figura = $("img").attr(“src“);
$("img").attr(“src",“[Link]");
.width() Obter ou modificar a largura em pixels do primeiro var larg = $("div").width();
elemento da seleção. $("div").width(“50px”);
.height() Obter ou modificar a altura em pixels do primeiro var altura = $("div").height();
elemento da seleção $("div").height(“50px”); 28
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Observação
• Para evitar que o jQuery inicie a execução antes de carregar
todo o documento HTML, é necessário indicar explicitamente:
$(document).ready(function(){
//script aqui
});
OU
$(function() {
//script aqui
});
29
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Modificando propriedades CSS
• $(seletor).css("propriedade", "valor");
• Exemplos:
• $("#id").css("width", "100px");
• $("div").css("color", "red");
• É possível adicionar e remover classes CSS de elementos
• $("#id").addClass("nomeClasse");
• $("#id").removeClass("nomeClasse");
30
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Eventos
• No lugar de definir os eventos no HTML, podemos
definir o evento e a sua ação diretamente no JavaScript
• Alguns eventos:
Mouse Events Keyboard Events Form Events
click keypress submit
mouseenter keydown change
mouseleave keyup focus
hover blur
31
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Efeitos
Função Descrição Exemplo
.hide() Esconde o elemento selecionado. $(“#div1").hide();
$(“#div1").hide(1000); //tempo em
milissegundos pode ser passado como
parâmetro.
.show() Mostra o elemento selecionado. $(“#div1").show();
.fadeIn() Mostra o elemento gradualmente $(“#div1").fadeIn();
(ofuscamento).
.fadeOut() Esconde o elemento gradualmente. $(“#div1").fadeOut();
.slideDown() Mostra o elemento com um efeito de slide. $(“#div1").slideDown();
.slideUp() Esconde o elemento com um efeito de slide. $(“#div1").slideUp();
.slideToggle() Alterna entre os efeitos slideDown e slideUp. $(“#div1").slideToggle();
32
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Exemplo 1
• No HTML:
<input type="button" id="botao1" value="clique
aqui"></input>
• No JavaScript:
$(function(){
$("#botao1").click(function(){
alert("botão clicado");
});
});
33
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Exemplo 2
• No HTML:
<input type="button" id="botao1" value="clique
aqui"></input>
• No JavaScript:
$(function(){
$("#botao1").click(function(){
$(“body").css(“background-color", "blue");
});
});
34
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Exercício 1
• Crie uma página que contém uma janela modal Bootstrap.
• Implemente a abertura da janela modal com jQuery.
• Crie um botão dentro da janela modal para alterar a cor do fundo da
página (body). Implemente o evento associado utilizando jQuery.
• Exemplo: [Link]
utilizar-em-seus-projetos/37426
35
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Exercício 2
• Crie uma página com o seguinte layout • Implemente as funções
dos botões utilizando
jQuery e Bootstrap
Obs: utilize as funções
fadeIn() e fadeOut() para os
botões e slideToggle() para os
• Ao clicar no botão “Aparecer div”
links.
36
GSI019 - Programação para Internet
Desenvolvimento Web no lado cliente – Bootstrap e jQuery
Referências
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• Jon Duckett. JavaScript and JQuery: Interactive Front-End Web
Development.
• Agradecimento especial ao Prof. Daniel Furtado pela disponibilização do
material: [Link]
37