Desenvolvimento Web Cliente vol3

Prévia do material em texto

- -1
DESENVOLVIMENTO WEB CLIENTE
UNIDADE 3 - COMO MELHORAR A 
APARÊNCIA DOS COMPONENTES EM UMA 
PÁGINA WEB E VIABILIZAR A SUA 
VISUALIZAÇÃO EM DIFERENTES 
DISPOSITIVOS?
Katia Cristina Lage dos Santos
- -2
Introdução
Já vimos que as Folhas de Estilo em Cascata ou CSS têm o objetivo específico de cuidar da estilização da página
HTML. Para isso, ela faz uso de uma sintaxe própria para a definição das regras de estilização que contemplam
um determinado seletor.
Ficou claro que a declaração do conteúdo (HTML) e a definição do estilo (CSS) podem ser feitas separadamente e
que o estilo de um sistema pode ser atribuído em diferentes escopos: externo, interno e em linha. Contudo, será
possível conseguir construir esse estilo em um menor espaço de tempo e sem demandar tanto conhecimento de
detalhes da sintaxe CSS?
Com o intuito de aumentar a produtividade no desenvolvimento, hoje, no mercado, há uma série de ferramentas
que já implementam grande parte das funcionalidades associadas a uma finalidade em comum.
No caso da estilização, o mais utilizado no mercado hoje em dia é denominado Bootstrap, mas alémframework
da implementação em si de funcionalidades relacionadas com a estilização, será que com o Booststrap é possível
construir componentes com melhorar qualidade visual? E o CSS? Será que ele não será mais necessário?
Veremos nessa unidade alguns desses componentes e poderemos conferir se a qualidade visual deles é melhor
do que o uso do HTML com o CSS 3. Além disso, veremos que o Boostrap traz um conceito importante que é o de
responsividade, ou seja, o sistema passa agora a ser ajustável a dispositivos de diferentes tamanhos, mas oweb
que será preciso para utilizar o Bootstrap? Será preciso aprender uma nova sintaxe?
Vamos iniciar o estudo do Boostrap que viabiliza incluir a estilização de um sistema , auxiliandoframework web
as folhas de estilo em cascata definidas.
3.1 O BootstrapFramework
Se você fez os exercícios propostos até então, foi possível ver que é bem trabalhoso construir um sistema e
definir um estilo do jeito que esperamos. Essa questão foi constatada por alguns desenvolvedores, em 2011,
liderados por Mark Otto, do Twitter, que buscaram elaborar uma solução durante uma competição de
programação chamada . Dessa iniciativa surgiu o que, posteriormente,Hack Week Twitter Blueprint to Bootstrap
foi transformado em um projeto de código aberto denominado apenas Bootstrap.
Em 2012 foi lançada a versão 2 do Bootstrap contemplando o responsivo de doze colunas, suportelayout grid
interno para Glyphicons, vários novos componentes, bem como as alterações para muitos dos componentes
existentes. Em 2013, o Bootstrap 3 foi lançado e foi o responsável por redesenhar componentes para uso flat
 e por apresentar uma abordagem para dispositivos móveis. Em 2014, Mark Otto anunciou que odesign
Bootstrap 4 estava em desenvolvimento. A primeira versão do Bootstrap foi lançada em 2015 e a primeiraalpha
versão beta foi lançada em 2017.
Nas próximas seções vamos aprender a trabalhar com o Bootstrap e a primeira coisa que precisamos entender é
VOCÊ O CONHECE?
Ricardo Sanches é diretor de criação e . Além disso, ele tem um curso gratuito deweb designer
Bootstrap 4 e outras tecnologias . Acesse o canal no Youtube e mantenha-se em contatoweb
constante com essas tecnologias. Acesse o canal em:
https://www.youtube.com/channel/UCxsjItE8ek_KG21BClqBo7Q.
https://www.youtube.com/channel/UCxsjItE8ek_KG21BClqBo7Q
- -3
Nas próximas seções vamos aprender a trabalhar com o Bootstrap e a primeira coisa que precisamos entender é
que ele é um . Assim, apresentaremos seus principais componentes e uma característica muitoframework
interessante dele: a responsividade.
3.1.1 O que é um framework
Um é uma versão inicial ou associado com um escopo bem definido e com diversas funçõesframework template
que podem ser usadas diretamente ou estendidas pelo desenvolvedor. Por extensão entende-se como a
modificação ou a customização com um determinado fim. Com ele, é desnecessário gastar tempo para reproduzir
a mesma função em diferentes projetos, auxiliando em um gerenciamento ágil de projetos.
Em outras palavras, ele é uma estrutura base, uma plataforma de desenvolvimento, como uma espécie de
arcabouço. Ele contém ferramentas, guias, sistemas e componentes que agilizem o processo de desenvolvimento
de soluções, auxiliando os especialistas de TI em seus trabalhos.
Associado com o também tem definido um conjunto de bibliotecas, que permitem aosframework
desenvolvedores trabalharem sobre eles para operações maiores. Além disso, é o responsável por gerenciar a
execução da solução criada, por assim dizer.
Assim, para que seu desenvolvido com um funcione, é preciso escolher um bom software framework framework
de trabalho, principalmente, por gerar todo o fluxo de controle da aplicação. Isso também é importante, pois os 
 fazem com que você não tenha que se preocupar em ficar reescrevendo códigos, podendo focarframeworks
somente na resolução de problemas, ou seja, direcionando seus esforços para o objetivo final. Uma boa
comparação é a da caixa de ferramentas, só que, em vez de chaves de fenda e martelos, há bases para formulários
de , validação de campos e conexão com bancos de dados.login
Nesse sentido, como parte da tendência de buscar reduzir custos e aumentar a produtividade, o uso desse
recurso tem se tornado cada vez mais popular. Hoje, já existe uma grande variedade de soluções disponíveis
para as mais diversas linguagens, com comunidades que testam e criam diferentes funções. O seu emprego
somado às metodologias ágeis têm proporcionado uma mudança substancial no mercado de desenvolvimento de 
.software
3.1.2 Diferença entre framework e biblioteca (API)
A criação de funções e a modularização também existem fora dos , o que pode causar certa confusão.frameworks
Nesse sentido, é importante diferenciar esses conceitos do de bibliotecas de classes ou API.
A sigla API refere-se ao termo em inglês , que significa “Interface deApplication Programming Interface
Programação de Aplicativos”, na tradução para o português. Podemos dizer que a API é a documentação que
determina como um programador pode realizar uma tarefa através de uma biblioteca. API é um conjunto de
rotinas e padrões de programação para acesso a um aplicativo de software ou plataforma baseado na Web. Uma
VOCÊ QUER VER?
O desenvolvimento ágil surgiu dentro da indústria de com a necessidade de darsoftware
maior celeridade na criação de novos produtos. É uma metodologia bastante empregada no
mercado hoje e o conhecimento das principais características é necessário para todos aqueles
que desejam trabalhar na área. No canal do Youtube de Andriele Ribeiro é possível
acompanhar uma série de vídeos que tratam desse assunto. Para ter acesso, utilize o endereço:
https://www.youtube.com/watch?v=efZlpew90Nk/
https://www.youtube.com/watch?v=efZlpew90Nk
http://www.jlgregorio.com.br/2018/04/15/a-verdadeira-historia-da-internet-documentario/
- -4
determina como um programador pode realizar uma tarefa através de uma biblioteca. API é um conjunto de
rotinas e padrões de programação para acesso a um aplicativo de software ou plataforma baseado na Web. Uma
API costuma ser estável, especialmente quando ela é de livre uso publicamente. Apesar de incomum, ela pode ter
partes documentadas como instáveis (mutáveis), o que exige muito cuidado no seu uso. Exemplos de APIs
utilizadas no dia a dia são a das redes sociais (Facebook, Twitter etc.), Google e de operadoras de cartões de
crédito.
Bibliotecas de classes, ou , são uma implementação em que as funções podem ser importadas para usolibraries
em diversos projetos. Em outras definições pode-se dizer que as bibliotecas são implementações reais de uma
API ou ferramentas em que o desenvolvedor pode escolher qual delas ele quer escolher. Para as diferentes
linguagens, existem bibliotecas de manipulação , de expressões regulares, de coleções de dados, destrings
manipulação de arquivos, acesso a um banco de dados, manipulaçãode imagens etc. As bibliotecas também
podem ser externas, que é o caso de serviços .web
A grande diferença do é a integração entre suas diferentes funções. Enquanto em bibliotecas deframework
classes as funções operam de forma relativamente independente, em um há relações já embutidas deframework
dependência entre os componentes. Outro diferencial é a forma como o programa flui. No caso das bibliotecas,
por exemplo, é o programa que controla o fluxo e faz as importações. Já quando se usa um , é ele queframework
acessa as funções criadas pelo usuário.
Muitos famosos no Brasil e no exterior utilizam o Bootstrap como . Fora do país,sites framework front-end
podemos citar o da NBA, da Target e da Walmart. No mercado nacional, a grande maioria dos da Globosite sites
utilizam o , o que explica o excelente padrão visual que eles possuem.framework
3.1.3 O Framework Bootstrap
Apesar do Bootstrap ser uma ferramenta de desenvolvimento recente, o termo tem uma origemFramework web
mais antiga e se referia aos processos realizados sem ajuda externa, mas com uma facilitação interna. Por
exemplo, um empreendedor que inicia seu negócio com seus próprios recursos em vez de fazer um empréstimo
é considerado como alguém que utilizou uma técnica Bootstrap.
Com o passar dos anos, o termo se tornou bastante usado na computação e hoje é reconhecido como um 
 para desenvolvimento . Este termo foi criado em meados de 2010 por Mark Otto eframework front-end web
Jacob, funcionários do Twitter. Na época de criação, a ideia era padronizar as interfaces gráficas do parasite
evitar inconsistências diversas. Lançado no segundo semestre de 2011, o logo ganhou fama, sendoframework
uma das ferramentas mais populares no Github já no começo de 2012.
O Bootstrap conta com uma série de classes em CSS prontas, além de em JavaScript (jQuery)framework plugins
para implementar recursos como , carrosséis e de maneira fácil e com pouco código. Maisdropdowns slideshows
do que outros , o Bootstrap tem se tornado, ao longo dos anos, uma das ferramentas maisframework front-end
importantes para a criação de sistemas e isso porque seus padrões seguem os princípios de usabilidade e asweb
tendências de design para interfaces.
Além disso, a padronização do Bootstrap permite que os sistemas tenham um melhor aspecto, sendo umaweb
VOCÊ QUER LER?
A documentação do Bootstrap está disponível por completo no do desenvolvedor,site
inclusive em português. A URL para acesso é essa: . Interessantehttps://getbootstrap.com.br/
observar que dentre as opções há um da comunidade com várias informaçõesblog
interessantes das últimas da ferramenta. Acesse: .releases https://blog.getbootstrap.com.br/
https://getbootstrap.com.br/
https://blog.getbootstrap.com.br/
- -5
Além disso, a padronização do Bootstrap permite que os sistemas tenham um melhor aspecto, sendo umaweb
forma de criar páginas esteticamente agradáveis. Aliás, quanto melhor o de uma página, maior a taxa dedesign
satisfação dos usuários.
3.1.4 Vantagens e Desvantagens
Dentre as vantagens que podem ser apontadas pelo uso do Bootstrap, podemos citar a vasta biblioteca de
componentes, a possibilidade de reuso de código e a vasta documentação gerada por uma comunidade bastante
ativa.
Uma das características mais interessantes deste é o fato dele possuir uma extensa biblioteca deframework
componentes, como ícones, caixas de texto, painéis e cores em . Veja um exemplo abaixo. Somente com olinks
trecho extraído da página do desenvolvedor é possível criar uma caixa de alerta em vermelho, incluindo os
atributos e para a <div> onde o conteúdo da caixa de alerta foi apresentado:class role tag
Figura 1 - Exemplo de componente de caixa de alerta no Bootstrap.
Fonte: Elaborado pela autora, 2019.
Assim como é objetivo de todo , o Bootstrap permite que menos código possa ser escrito, já que eleframework
entrega uma série de formatações visuais prontas. A única necessidade do desenvolvedor é saber qual a classe
ele deve chamar. Como mostrado no exemplo da figura anterior, a classe “alert alert-danger” por si só consegue
mudar não apenas as cores de fundo do texto, mas também criar uma borda para o painel e a cor da fonte. Tudo
isso com uma simples linha de código com 26 caracteres.
Quando se trabalha com livre, os aspectos relacionados com documentação são de grande relevância, jásoftware
que o entendimento do depende justamente dessa fonte. No caso do Bootstrap, a documentação éframework
sempre atualizada e de fácil acesso, assim, tirar dúvidas da ferramenta é extremamente fácil.
Além disso, pelo fato da documentação ser constantemente atualizada, isso permite que as melhores práticas de
programação com o sejam conhecidas. Assim, aumenta-se a chance de novos projetos serem feitosframework
com qualidade visual e técnica, o que é ótimo para o valor final do produto.
Ao apresentar o conceito de e das características e vantagens do Bootstrap poderíamos ser levados aframework
pensar que ele é a única ferramenta utilizada a partir de agora. Infelizmente, devido às próprias características
da ferramenta, isso não é verdade. Nesse sentido, em termos de desvantagens ao utilizar o Bootstrap, temos
como exemplo o excesso de padronização e o fato dele não ser indicado para todos os cenários.
Por mais que a padronização seja algo buscado com o Bootstrap, o resultado pode acabar sendo muito parecido
com demais . Existem muitas opções de botões, painéis e ícones, mas, ainda assim, é comum ver os mesmossites
elementos em diferentes portais. Isso acontece porque o é muito popular. A solução para isso éframework
investir um tempo de desenvolvimento para customizar o Bootstrap, em vez de simplesmente chamar seus
elementos. Para isso, o conhecimento em CSS e JavaScript será essencial.
Programadores experientes em costumam não gostar do Bootstrap porque ele entrega muito códigofront-end
que não será usado, o que pode deixar os sistemas lentos. Dessa forma, eles acabam preferindo desenvolver
soluções próprias, codificando todo o estilo com CSS. A decisão de trabalhar ou não com o vaiframework
depender do escopo do projeto e do nível de exclusividade dado aos componentes implementados.
- -6
3.1.5 Sistema web responsivo
Além de padronizar uma série de parâmetros, o Bootstrap é uma das formas mais fáceis de deixar um sistema 
 responsivo. A responsividade significa que o sistema é adaptável a diferentes tipos de tela, comoweb web
diferentes , ou computadores.smartphones tablet
Hoje, indica-se que todos os sistemas sejam responsivos por dois motivos: para melhorar a experiência doweb
usuário e para trazer benefícios para o posicionamento em ferramentas de busca na , como o Google. Com oweb
Bootstrap, isso é algo extremamente facilitado, uma vez que com apenas uma linha de código é possível deixar
todo o projeto responsivo e melhorar a exibição do conteúdo de acordo com específicas.tags
3.2 Utilizando os recursos e componentes do Bootstrap
Existem duas maneiras de utilizar o Bootstrap. Clique nos itens.framework
1. realizar o download do framework a partir da página do desenvolvedor.
2. utilizar uma réplica do framework disponibilizado em um servidor na rede.
A página inicial do desenvolvedor na língua portuguesa pode ser acessado a partir do endereço: 
https://getbootstrap.com.br/. Já na tela inicial é apresentada a opção para “Baixar” o em um formatoframework
compactado. Após fazer o , é necessário descompactar a pasta. Dentro da pasta descompactada há, pelodownload
menos, uma subpasta denominada CSS e que contém as folhas de estilo base do e uma subpasta JSframework
com os dos componentes já implementados no Bootstrap.scripts
O código do sistema geralmente, fica dentro do diretório base, ou seja, no mesmo nível das subpastas CSS eweb, 
JS. Por meio da <link> deve ser lincadas as suas páginas HTML com as folhas de estilo que estão na páginatag
CSS. O próprio desenvolvedor desencoraja o do , pois se houver atualizações, serádownload framework
necessário fazer novo para sobrescrevera versão baixada anteriormente. A vantagem do uso dessadownload
opção é que você pode trabalhar no desenvolvimento do seu sistema sem necessitar de acesso à .web Internet
A segunda opção, indicada na documentação do Bootstrap, é fazer a importação dos arquivos do framework
através do recurso de CDNs. CDN é abreviação de (ou Rede de Distribuição deContent Delivery Network
Conteúdo). É uma rede de servidores (pontos de presença) que armazenam réplicas do conteúdo de outros sites
na memória ( ) e depois os entrega aos visitantes, baseando-se na localização geográfica para conectá-los aocache
servidor mais próximo e mais rápido, reduzindo o tempo de transferência dos dados (latência). Os paralinks
utilização podem ser vistos abaixo:
VOCÊ SABIA?
Que as CDNs mais modernas contam também com recursos como de ConteúdoCache
Dinâmico, para aliviar o processamento do servidor e acelerar ainda mais as páginas, e o Web
 (WAF), para dar mais segurança aos e . Para saber maisApplication Firewall sites e-commerces
do assunto acesse o artigo: .https://www.gocache.com.br/cdn/12-motivos-para-usar-cdn/
https://getbootstrap.com.br/
https://getbootstrap.com.br/
https://www.gocache.com.br/cdn/12-motivos-para-usar-cdn/
- -7
Figura 2 - Comandos para inclusão das folhas de estilo e scripts do Bootstrap.
Fonte: Elaborado pela autora, 2019.
Observe nos da figura anterior que cada um se refere à sua versão minificada, porém, é possível acessarmoslinks
a versão não minificada dos . Para isto, basta removermos a extensão min do nome do arquivo. links
3.2.1 Painéis
Veja a seguir um exemplo simples:
Figura 3 - Exemplo do componente painel no Bootstrap.
Fonte: Elaborado pela autora, 2019.
Os painéis funcionam como boxes que podemos guardar/agrupar alguns elementos. Este componente deixa o
sistema web com uma melhor organização e aparência mais profissional.
3.2.2 Classes de imagem
Utilizando a classe é possível fazer com que as imagens de nosso sistema se adaptem aoimg-responsive web
tamanho da tela do dispositivo que o usuário estiver utilizando. Veja o exemplo a seguir sobre o seu uso.
Figura 4 - Exemplo do uso da classe img-responsive no Bootstrap.
Fonte: Elaborado pela autora, 2019.
Este é um recurso muito bom para os desenvolvedores, mas é importante ter em mente que em se tratando do
conceito responsivo, ou seja, se adaptar em quaisquer dispositivos, não basta apenas utilizar no caso das
imagens, o “redimensionamento”. É ainda necessário levar em consideração o tamanho desta imagem em relação
à conexão do usuário, analisar se determinada imagem em determinada resolução ficará com um mínimo de
entendimento para o usuário.
- -8
Além da classe “img-responsive”, é interessante conhecer outros dois valores possíveis. Clique nos itens.
img-rounded Essa classe inclui um arredondamento nas quatros extremidades ou “pontas” da imagem.
img-circle
Essa classe já insere a imagem dentro de um circular, similar a uma moldura emconteiner
formato oval.
3.2.3 Tabelas
Veja o exemplo a seguir:
VAMOS PRATICAR?
Acesse o endereço: dahttps://www.w3schools.com/bootstrap/bootstrap_images.asp
w3schools com as classes do Bootstrap para manipulação de imagens. Logo abaixo do primeiro
código fonte há um botão escrito “Try it Yourself”, que significa “tente você mesmo”.
Inicialmente, observe como está sendo exibida a imagem e qual o valor do atributo class
associado. Altere o valor de para os demais apresentados na unidade: class-circle e class-class
responsive. Em seguida, clique no botão “Run” para visualizar como ficou a imagem.
https://www.w3schools.com/bootstrap/bootstrap_images.asp
- -9
Figura 5 - Exemplo da classe table no Bootstrap.
Fonte: Elaborado pela autora, 2019.
Para criar uma tabela com a aparência ( ) similar dos demais componentes do Bootstrap, bastalook and feel
adicionar a classe “table” em qualquer <table>. Todos os estilos de tabelas são herdados no Bootstrap 4,tag
significando que qualquer tabela aninhada vai se comportar do mesmo modo que seus pais.
3.2.4 Listas
Veja na figura a seguir um exemplo básico da utilização de :list groups
- -10
Figura 6 - Exemplo da classe list-group no Bootstrap.
Fonte: Elaborado pela autora, 2019.
O componente de listas do Bootstrap tem a classe denominada “list-group”. Ele permite dar ao usuário uma
exibição mais organizada e elegante de listas de elementos. Podemos também combiná-lo com uma série de
outros componentes conforme a necessidade.
3.2.5 Barras de navegação
A navegação disponível no Bootstrap compartilha várias marcações e estilos, desde a classe base “nav” até os
estados ativo e desativo. Troque de classes modificadoras para mudar de estilo. Veja o exemplo abaixo em que é
criada uma barra de navegação com 4 elementos: Ativo, Link 1, Link 2 e Link desativado.
Figura 7 - Exemplo da classe nav no Bootstrap.
Fonte: Elaborado pela autora, 2019.
Cada um dos tem um valor de atributo indicando se o é o atualmente ativo (Ativo), se estálinks class link
clicável, mas não está ativo (Link 1 e Link 2), ou se é um não clicável (Link desativado). O atributo href develink
conter a página ou seção dentro da página corrente para onde o fluxo será redirecionado quando a pessoa clicar
na opção correspondente.
3.2.6 Sobre recursos responsivos
A recursividade que está associada com o Boostrap exige uma série de passos que o desenvolvedorframework
deve seguir quando o utiliza:
a) incluir a <meta name=”viewport”>;tag
- -11
Figura 8 - Declaração da tag meta para atribuir responsividade ao sistema com Bootstrap.
Fonte: Elaborado pela autora, 2019.
Não utilizar essa inibe a função responsiva do documento HTML.tag
b) não fazer um da propriedade da classe container no próprio arquivo .css do ou emoverride width framework
outro arquivo .css. Veja no exemplo a seguir:
Figura 9 - Declaração da tag width para sobrescrever a responsividade do conteiner.
Fonte: Elaborado pela autora, 2019.
c) utilizar classes que tenham comportamento expansível, por exemplo, o navbar-collapse.
1.3 Grids com Bootstrap
O sistema Bootstrap usa vários containers, linhas e colunas para arranjar e alinhar conteúdo. Ele é feito com grid
 e é totalmente responsivo. Abaixo, temos um exemplo e um aprofundamento sobre como o funciona.flexbox grid
VOCÊ SABIA?
Você sabia que é possível testar todos os componentes do Bootstrap vistas nessa unidade em
uma ferramenta e gratuita? Para isso, basta acessar o do w3cschool e selecionar aonline site
tecnologia Bootstrap. Esse recurso pode ser utilizado por outras tecnologias. Os exemplos
podem ser alterados e verificada a visualização pelo próprio renderizador dentro do .site
Acesse o direto e comece a praticar tudo o que você tem aprendido no curso: link https://www.
.w3schools.com/bootstrap/
https://www.w3schools.com/bootstrap/
https://www.w3schools.com/bootstrap/
- -12
Figura 10 - Exemplo de grids com Bootstrap.
Fonte: Elaborado pela autora, 2019.
O exemplo acima cria três colunas de larguras idênticas em dispositivos pequenos, médios, grandes e
extragrandes, usando as classes pré-definidas no Bootstrap. Estas colunas são centralizadas na página,grid
usando o elemento pai “container”. Containers criam meios para centralizar e, horizontalmente, preencher os
conteúdos de seu . Use a classe “container” para ter uma largura responsiva em pixel ou “container-fluid”site
para ter uma largura completa em todas as páginas (width: 100%).
As <div> com atributo “class=rowns” são elementos para envolver colunas. Cada coluna tem tags padding
(distância entre o conteiner e o conteúdo da coluna) horizontal ( ) para controlar o espaço entre elas.gutter
Depois, este é cancelado com usando margens negativas. Assim, todo conteúdo em suas colunas épadding rows
visualmente alinhado à esquerda.
Em um , o conteúdo deve ser posicionado dentro de colunas e só elas podem ser filhos imediatos delayout grid
tags <div> com atributo igual a “rows”. Graças ao , colunas sem declarado vão,class flexbox grid width
automaticamente, se dimensionarcom larguras iguais. Assim, seguindo o exemplo anterior, quatro exemplos de
“col-sm” vão, automaticamente, ter 25% de largura.
Classes de colunas indicam o número de colunas que você quer usar dentro de uma possibilidade de 12 por .row
Se você quiser três colunas de larguras idênticas, pode usar “col-4”, por exemplo. Larguras de colunas são
definidas em porcentagem para que, então, elas sejam sempre fluidas e dimensionadas com relação a seus
elementos pais.
Colunas possuem horizontal para criar , entre cada coluna. No entanto, você pode remover a padding gutters
 das e das colunas, usando .no-gutters na .row. Para fazer o responsivo, existem cinco margin rows padding grid
, um para cada breakpoint responsivo: (implícito), , , e .breakpoints extra small small medium large extra large
Breakpoints grid são baseados em media , significando que elas aplicam estilos para o dado queries min-width
 e outros maiores. Por exemplo, “col-sm-4” aplica ao , , e , mas não aobreakpoint small medium large extra large
primeiro . Você pode usar classes pré-definidas (como .col-4) ou com umabreakpoint xs grid mixins Sass
marcação mais semântica. Fique atento as limitações e , a exemplo da impossibilidade de usarbugs flexbox
alguns elementos HTML como container .flex
- -13
3.4 Componentes avançados do Bootstrap
Existem várias construções interessantes com o uso do Bootstrap e muitas delas são apresentadas no próprio site
da (w3sSchools https://www.w3schools.com/bootstrap/ ). Nessa seção vamos apresentar dois exemplos muito
utilizados de forma recorrente: um carrossel de imagens e uma janela modal.
3.4.1 Carrossel de imagens
Um carrossel de imagens consiste em um conjunto de imagens que podem ser visualizadas como uma
apresentação ou . É um tipo de componente muito utilizado para dar dinamicidade ao sistema .slide show web
Abaixo é apresentado o código desse componente e em seguida cada uma das partes é explicada com detalhes.
https://www.w3schools.com/bootstrap/
https://www.w3schools.com/bootstrap/
- -14
Figura 11 - Exemplo de um carrossel de imagens com Bootstrap.
Fonte: Elaborado pela autora, 2019.
Para funcionar corretamente, um carrossel de imagens necessita do uso de um atributo id. Neste caso, o id
utilizado na mais externa tem valor "myCarousel". A classe class="carousel" especifica que nesta <div>div tag
tem um carrossel. A classe “slide” adiciona uma transição CSS e um efeito de animação, responsável pelo
comportamento das imagens ao irem passando. Essa classe pode ser omitida. O atributo data-ride="carousel" diz
ao Bootstrap para iniciar a animação do carrossel imediatamente quanto uma página é carregada.
Os indicadores do número de imagens e da imagem corrente, indicados por pontos na parte de baixo do
componente de carrossel, são especificados por uma lista ordenada com o uso da classe “carousel-indicators”. O
atributo “data-target” indica o id do carrossel. O atributo “data-slide-to” indica qual imagem deve ser exibida
quando o usuário clica em um ponto.
As imagens são especificadas por uma <div> com o atributo “class=carousel-inner”. O conteúdo de cada imagem
é definido em uma <div> com a classe igual a “item”. Interessante observar que o carrossel, inclusive, pode ser de
texto, ao invés de imagem. A classe “active” precisa ser atribuída a uma das imagens, caso contrário, o carrossel
- -15
texto, ao invés de imagem. A classe “active” precisa ser atribuída a uma das imagens, caso contrário, o carrossel
ficará invisível.
O código adiciona os botões da esquerda ("left") e da direita ("right"), que permitem que o usuário navegue
manualmente para frente e para trás entre as imagens. O atributo “data-slide” aceita os valores anterior (“prev")
ou próximo ("next"), os quais alteram a posição relativa para o item do carrossel atual.
3.4.2 Janela Modal
Um recurso de interface muito útil em programas gráficos baseados em janelas é o de se recorrer a uma janela
secundária, “filha” da janela/tela principal, para solicitar determinadas informações ao usuário do sistema,
geralmente, complementares à parte. Este tipo de janela é denominada “caixa de diálogo” ( ).dialog
Existem dois tipos de associação entre uma janela de diálogo e a janela principal à qual está associada: modal,
quando a abertura da janela de diálogo bloqueia qualquer interação na janela principal, até que o diálogo seja
encerrado; ou não modal, em que pode haver interação concomitante nas duas janelas, principal e diálogo, ou
seja, o diálogo não bloqueia a janela principal. O caso mais comum é do diálogo modal. Nesta seção vamos ver o
desenvolvimento de uma janela modal. O código é apresentado na figura a seguir:
VAMOS PRATICAR?
Acesse o endereço direto para o componente de carrossel da w3schools e vamos fazer algumas
alterações no código e ver o seu funcionamento. Acesse então o endereço <https://www.
>. Logo abaixo o código fonte há um botãow3schools.com/bootstrap/bootstrap_carousel.asp
escrito “Try it Yourself”, que significa “tente você mesmo”. Observe inicialmente como foi feita
a lincagem com o Boostrap na seção <head> do documento. Altere o valor da tagframework
<h2>Carousel Example</h2> para <h2>Meu carrosel</h2>. Em seguida, clique no botão “Run”
para ver o resultado. Agora, acesse os itens que declaram as imagens no carrossel (<img src="
la.jpg" alt="Los Angeles" style="width:100%;">) e altere o valor dos atributos href e alt para
outras imagens na . Clique novamente no botão “Run” para ver o resultado.Internet
https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
- -16
Figura 12 - Exemplo de uma janela modal com Bootstrap.
Fonte: Elaborado pela autora, 2019.
Para abrir uma janela modal é necessário incluir um componente que vai funcionar como um gatilho ("trigger"),
podendo este ser um botão ( ) ou um link ( <a>). Inclua, então, dois atributos do tipo “data-*”. Cliquebutton tag
nos itens e veja.
data-toggle="modal" abre a janela modal.
data-target="#myModal" indica o atributo id associado ao modal.
A <div> pai da janela modal deve ter um valor de id com o mesmo valor do atributo “data-target” utilizado natag
janela modal (no exemplo, "myModal"). A classe “modal” identifica o conteúdo da <div> como uma janelatag
modal e traz o foco para ela. A classe ‘fade” adiciona um efeito de transição quando a janela é aberta ou fechada.
Remova essa classe se você não deseja esse tipo de efeito. O atributo “role="dialog"” melhora a acessibilidade
para pessoas que utilizam leitores de telas. A classe “modal-dialog” define as propriedades de largura e margem
da janela modal.
- -17
A <div> com class="modal-content" estiliza a janela modal em termos de borda ( ), cor de fundo (border
) etc. Dentro dessa <div>, é possível adicional o título da janela modal, assim como o seubackground-color tag
corpo ( ) e rodapé ( ). A classe “modal-header” é utilizada para definir o estilo do cabeçalho da janelabody footer
modal. O botão ( <button>) dentro do cabeçalho tem o atributo data-dismiss="modal" que fecha a janelatag
modal se for realizado um clique sobre ela.
A classe “close” estiliza o botão e a classe “modal-title” configura o cabeçalho com uma espessura de linha (line-
). A classe “modal-body” é utilizada para definir a aparência do corpo da janela modal. Aqui é possívelheight
adicionar qualquer HTML: parágrafos, imagens etc. Por fim, a classe “modal-footer” é utilizada para definir otag
rodapé da janela modal. Observe que essa área fica alinha da direita, em relação à definição padrão adotada na
janela modal.
3.4.3 Exemplo prático
Como foi apresentado, existem vários exemplos na de uso do Boostrap e, por isso, éInternet framework
importante saber acessar esse repositório de código disponível. Por isso, nessa seção acessaremos um exemplo
disponível no do Bootstrap para criar uma página de autenticação em um sistema por meio de e senha.site login
A seguir são enumeradas as tarefas a fazer:
a) Acesse o endereço: https://getbootstrap.com.br/docs/4.1/examples/sign-in/;b) Clique com o botão direto em cima da página aberta e acesse a opção “Exibir código fonte da página”:
VAMOS PRATICAR?
Acesse o endereço direto para o componente de janela modal da e vamos fazerw3schools
algumas alterações no código e ver o seu funcionamento: https://www.w3schools.com
. Logo abaixo o código fonte há um botão escrito “Try it/bootstrap/bootstrap_modal.asp
Yourself”, que significa “tente você mesmo”. Altere o valor da <h2>Modal Example</h2>tag
para <h2>Minha janela modal</h2>. Em seguida, clique no botão “Run” para ver o resultado.
Vamos fazer algumas outras alterações: (1) Altere o título do botão “Open modal” (<button
type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
</button>) para “Abrir janela modal”; (2) insira uma imagem dentro da janelaOpen Modal
modal, alterando o componente parágrafo (<p>Some text in the modal.</p>) por um
componente do tipo img. Utilize, no atributo href, o endereço de uma imagem na .Internet
Clique novamente no botão “Run” para ver o resultado.
https://getbootstrap.com.br/docs/4.1/examples/sign-in/
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
- -18
Figura 13 - Exemplo de código para tela de autenticação.
Fonte: Elaborado pela autora, 2019.
c) Copie o conteúdo apresentado e cole em um arquivo com extensão .html. Esse código pode ser adaptado por
você e utilizado em projetos futuros;
d) Agora, clique duas vezes no arquivo HTML com o conteúdo extraído. Será exibido o mesmo conteúdo
renderizado da página inicial. Agora, selecione as opções “CTRL” +”SHIFT”+ “letra i”, ao mesmo tempo. Será
aberta uma aba a esquerda conforme apresentado a seguir na figura. Acesse o ícone destacado à esquerda, no
formato de um celular. Veja que nesse momento foi inserido um menu acima do conteúdo renderizado com o
texto “Galaxy S5”.
- -19
Figura 14 - Acessando os recursos do navegador para teste em diferentes dispositivos.
Fonte: Elaborado pela autora, 2019.
d) Clique nas diferentes opções de dispositivos e veja o comportamento da aplicação nos diferentes formatos.
Agora você pode testar todos os seus sistemas e ver qual a responsabilidade deles frente a dispositivos de
diferentes tamanhos.
Síntese
O uso de s de desenvolvimento de é extremamente comum hoje em dia. Se olharmos osframework software
requisitos de vagas interessantes para trabalhar com Desenvolvimento , certamente são esperadasWeb
atribuições de ou de e, logo, o domínio do Bootrap é um dos requisitos solicitados.front-end full stack developer
Entretanto, somente o domínio do não é suficiente. O entendimento e domínio do HTML e do CSSframework
também são solicitados. Isso porque apesar de no Bootstrap termos vários componentes disponíveis para uso,
com acesso dos exemplos com alta documentação no do desenvolvedor, as customizações ainda sãosite
necessárias. Isso só é possível com o domínio das tecnologias básicas citadas anteriormente. Aproveite todos os
recursos apresentados e pratique. O conteúdo é vasto, mas somente com a prática ficará mais fácil a você
memorizar os componentes. Além disso, o entendimento sobre como tudo isso se encaixa vai fazer de você um
profissional diferenciado. 
Bibliografia
BOOTSTRAP. , 2019. Disponível em: . Acesso em: 18 jul. 2019.Get Bootstrap https://getbootstrap.com.br/
BOOTSTRAP. , 2019. Disponível em: . Acesso em: 18 jul.Blog Bootstrap Brasil https://blog.getbootstrap.com.br/
https://getbootstrap.com.br/
https://blog.getbootstrap.com.br/
- -20
BOOTSTRAP. , 2019. Disponível em: . Acesso em: 18 jul.Blog Bootstrap Brasil https://blog.getbootstrap.com.br/
2019.
INSTITUTO NUPEF. , Rio de Janeiro, n. 26, out. 2017. Disponível em: PoliTICs https://politics.org.br/sites/default
/files/downloads/politics26-versao-web.pdf. Acesso em: 26 jun. 2019.
LEMAY, L.; COLBURN, R.; TYLER, D. . São Paulo:Aprenda a criar páginas Web com HTML e XHTML em 21 dias
Pearson Education do Brasil, 2002. Disponível em: http://aulaaberta.bv3.digitalpages.com.br/users/publications
/9788534614283. Acesso em: 26 jun. 2019.
MILETTO, E. M. - Introdução ao Desenvolvimento Web com HTML, CSS,Desenvolvimento de software II 
Javascript e PHP. Porto Alegre: Bookman 2014.
RIBEIRO, A. Decifrando Agile 1 - Por que e quando usar Métodos Ágeis? , 17 set. 2018. Youtube Disponível em: 
https://www.youtube.com/watch?v=efZlpew90Nk/. Acesso em: 18 jul. 2019.
SANCHES, R. Ricardo Sanches. , 2019. Youtube Channel Disponível em: https://www.youtube.com/channel
. Acesso em: 18 jul. 2019./UCxsjItE8ek_KG21BClqBo7Q
TELLINI, A. 12 bons motivos para você usar uma CDN (parte 1). , 10 out. 2016. Disponívele-commercebrasil
em: . Acesso em: 18 jul. 2019.https://www.gocache.com.br/cdn/12-motivos-para-usar-cdn/
TERUEL, E. C. . 2. São Paulo: Érica, 2014.HTML 5 - Guia prático
W3Schools. , 2019. Disponível em: . Acesso em:HTML Element Reference https://www.w3schools.com/tags/
25 jun. 2019.
W3Schools. , 2019. Disponível em: Bootstrap Images https://www.w3schools.com/bootstrap/bootstrap_images.
. Acesso em: 18 jul. 2019.asp
W3Schools. , 2019. Disponível em: Bootstrap Carousel Plugin https://www.w3schools.com/bootstrap
/bootstrap_carousel.asp. Acesso em: 18 jul. 2019.
https://blog.getbootstrap.com.br/
https://politics.org.br/sites/default/files/downloads/politics26-versao-web.pdf
https://politics.org.br/sites/default/files/downloads/politics26-versao-web.pdf
https://politics.org.br/sites/default/files/downloads/politics26-versao-web.pdf
http://aulaaberta.bv3.digitalpages.com.br/users/publications/9788534614283
http://aulaaberta.bv3.digitalpages.com.br/users/publications/9788534614283
http://aulaaberta.bv3.digitalpages.com.br/users/publications/9788534614283
https://www.youtube.com/watch?v=efZlpew90Nk
https://www.youtube.com/watch?v=efZlpew90Nk
http://www.jlgregorio.com.br/2018/04/15/a-verdadeira-historia-da-internet-documentario/
https://www.youtube.com/channel/UCxsjItE8ek_KG21BClqBo7Q
https://www.youtube.com/channel/UCxsjItE8ek_KG21BClqBo7Q
https://www.gocache.com.br/cdn/12-motivos-para-usar-cdn/
https://www.w3schools.com/tags/
https://www.w3schools.com/bootstrap/bootstrap_images.asp
https://www.w3schools.com/bootstrap/bootstrap_images.asp
https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
	Introdução
	3.1 O Framework Bootstrap
	3.1.1 O que é um framework
	3.1.2 Diferença entre framework e biblioteca (API)
	3.1.3 O Framework Bootstrap
	3.1.4 Vantagens e Desvantagens
	3.1.5 Sistema web responsivo
	3.2 Utilizando os recursos e componentes do Bootstrap
	3.2.1 Painéis
	3.2.2 Classes de imagem
	3.2.3 Tabelas
	3.2.4 Listas
	3.2.5 Barras de navegação
	3.2.6 Sobre recursos responsivos
	1.3 Grids com Bootstrap
	3.4 Componentes avançados do Bootstrap
	3.4.1 Carrossel de imagens
	3.4.2 Janela Modal
	3.4.3 Exemplo prático
	Síntese
	Bibliografia