Programação para Internet

(1)

Programação para Internet

Curso de Sistemas de Informação Prof. Dr. Daniel A. Furtado

Módulo 6

Introdução ao Framework Bootstrap Universidade Federal de Uberlândia

Faculdade de Computação

(2)

 Bootstrap é um framework para desenvolvimento front-end (lado cliente do website);

 Bootstrap disponibiliza uma série de recursos, estilos e templates para tornar o desenvolvimento Web mais rápido e mais fácil;

 Bootstrap fornece recursos que facilitam a criação de interfaces responsivas, ou seja, interfaces que se ajustam automaticamente para uma boa exibição em diferentes dispositivos (seja um

desktop, um smartphone ou um tablet)

 Bootstrap pode ser baixado e utilizado de forma gratuita;

Bootstrap – Introdução

(3)

 Para utilizar Bootstrap no website, há duas opções:

1. Baixar os arquivos do site getbootstrap.com e incluir as devidas referências no HTML;

2. Incluir as referências diretamente de redes CDN:

Repare que o framework Bootstrap requer um arquivo de estilos CSS, a biblioteca jQuery e um arquivo de código JavaScript.

Como Utilizar

Ref: adaptado de w3schools.com

(4)

<meta name="viewport" content="width=device-width, initial-scale=1">

 A versão de referência neste material (Bootstrap 3) foi desenvolvida para ser responsiva em dispositivos móveis;

 Para que o website possa usufruir de tal capacidade é necessário incluir na página HTML o seguinte código:

 A propriedade width controla o tamanho da viewport;

 A propriedade initial-scale controla a escala de exibição (zoom) em que a página deve ser exibida quando carregada pela

primeira vez.

Como Utilizar

Ref: adaptado de w3schools.com

Ref: developer.mozilla.org

(5)

…

</div>

…

 Bootstrap requer um container para que o conteúdo da página seja exibido adequadamente;

 O container pode ser definido utilizando um <div> e uma classe css do framework, que pode ser .container ou .container-fluid

 Com a opção container-fluid, a página ocupará toda a largura disponível na tela.

Como Utilizar

(6)

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

</head>

<body>

<div class="container">

<h1>My First Bootstrap Page</h1>

<p>This is some text.</p>

</div>

</body>

</html>

Exemplo

Ref: adaptado de w3schools.com

(7)

 O sistema de grade do Bootstrap permite organizar os elementos da página (imagens, botões, campos de formulário, etc.) em linhas e colunas, de maneira responsiva;

 Uma linha pode ser subdividida em até 12 colunas;

 Caso não haja necessidade de utilizar as 12 colunas individualmente, elas podem ser agrupadas para formarem colunas mais largas. Exemplo:

 Classes Bootstrap para o sistema de grade

Bootstrap Grid System

Código Tipo de Tela Melhor Dispositivo

xs

extra small screen Smartphones

sm

small screens Tablets

md

medium screens Laptops, desktops pequenos

lg

large screens Desktops grandes

(8)

 Cada linha é definida utilizando <div class="row">

 Cada coluna na linha é definida utilizando <div class="col-d-c">

onde d é um dos valores xs, sm, md, lg e c é o número de colunas que devem ser agrupadas (a soma de tais colunas, para uma mesma linha, deve ser 12)

 Exemplo de uso de uma grade Boostrap:

Bootstrap Grid System

<div class="row">

<div class="col-sm-12"></div>

</div>

<div class="row">

<div class="col-sm-3"></div>

<div class="col-sm-6"></div>

<div class="col-sm-3"></div>

</div>

<div class="row">

...

</div> Ref: w3schools.com

(9)

<div class="col-sm-6">

<label>Primeiro Nome</label><br>

<input type="text" style="width: 100%">

</div>

<label>Último Nome</label><br>

</div>

</div>

<label>Cidade</label><br>

</div>

<label>Estado</label><br>

</div>

</div>

 O exemplo a seguir cria uma grade com duas linhas

 A primeira linha tem duas colunas de mesma largura

 A segunda linha tem duas colunas de larguras diferentes

Bootstrap Grid System - Exemplo

Ref: adaptado de w3schools.com

(10)

 Em muitas situações, utilizar o sistema de grade Bootstrap pode ser mais apropriado do que utilizar tabelas HTML;

 Uma das vantagens do sistema de grade com relação às tabelas é o fato dele ser responsivo. Assim, o conteúdo pode ser

automaticamente ajustado para exibição ótima em dispositivos com diferentes tamanhos de telas (desktops, tablets,

smartphones, etc.).

Bootstrap Grid System vs Tabelas

Ref: adaptado de w3schools.com

(11)

As seguintes classes estão disponíveis para prover melhor significado ao texto através de cores:

Cores Contextuais

Classe Bootstrap Cor do texto

.text-muted This text is muted.

.text-primary This text is important.

.text-success This text indicates success.

.text-info This text represents some information.

.text-warning This text represents a warning.

.text-danger This text represents danger.

Ref: adaptado de w3schools.com

(12)

Bootstrap oferece diversas classes que possibilitam formatar rapidamente as tabelas HTML com estilos pré-definidos.

Algumas delas são:

OBS: para obter o estilo completo, pode ser necessário referenciar a classe principal .table juntamente com as demais. Exemplo: <table class="table table-striped">

Tabelas

Classe Bootstrap Significado

.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

Ref: adaptado de w3schools.com

(13)

Para tornar uma tabela responsiva, para melhor visualização em dispositivos móveis, pode-se colocá-la dentro de um

elemento <div> com o devido estilo CSS:

Tabelas

Ref: adaptado de w3schools.com

<div style="overflow-x:auto;">

<table>

...

</table>

</div>

(14)

 Bootstrap disponibiliza classes para definir rapidamente a aparência de botões de acordo o seu propósito;

Exemplo:

Botões

.btn-lg .btn-md .btn-sm .btn-xs

.btn

.btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link

.btn-block .active .disabled

Estilos Tamanhos Outros

Adaptado de w3schools.com

<button class="btn btn-success btn-block">Sucesso</button>

A classe .btn-block faz com que o botão

ocupe toda a largura disponível.

(15)

<nav class="navbar navbar-inverse">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#">Nome do Website</a>

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">Page 1</a></li>

<li><a href="#">Page 2</a></li>

<li><a href="#">Page 3</a></li>

</ul>

</div>

</nav>

 Barras de navegação podem ser criadas facilmente utilizando a classe .navbar

 Exemplo:

Barra de Navegação

Ref: adaptado de w3schools.com

(16)

 É possível inserir menus suspensos na barra de navegação por meio da classe .dropdown-menu

 Ver exemplo: Anexos/Exemplo-Bootstrap-Navbar-Submenu.html

Barra de Navegação

Ref: adaptado de w3schools.com

(17)

<nav class="navbar navbar-inverse">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#">WebSiteName</a>

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">Page 1</a></li>

<li><a href="#">Page 2</a></li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>

<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

</ul>

</div>

</nav>

 É possível inserir conteúdo alinhado à direita na barra de navegação por meio da classe .navbar-right

 Exemplo:

Barra de Navegação

Ref: adaptado de w3schools.com

(18)

 No exemplo anterior utilizamos dois ícones da coleção Glyphicons Halflings;

 É uma maneira prática e rápida de adicionar ícones em botões, textos, menus, listas, etc.;

 Pode-se utilizar, através do Bootstrap, centenas de ícones diferentes;

 Basta fazer referência à devida classe:

 Veja a lista de ícones no endereço:

https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

 Outros exemplos:

https://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp

Bootstrap Glyphicons

…

<span class="glyphicon glyphicon-nomeDoIcone"></span>

…

(19)

 Bootstrap fornece três tipos de layouts para formulários:

• Vertical (padrão)

• Horizontal

• Inline

 Independentemente do layout, recomenda-se:

• Agrupar cada par rótulo/campo em um

<div class="form-group"> (para espaçamento ótimo)

• Adicionar a classe .form-control para todos os campos textuais (<input>, <textarea>, <select>, etc)

Formulários

Adaptado de w3schools.com

(20)

<form action="/action_page.php">

<div class="form-group">

<label for="email">Email:</label>

<input type="email" class="form-control" id="email" name="email">

</div>

<div class="form-group">

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd" name="pwd">

</div>

<div class="checkbox">

<label><input type="checkbox" name="remember"> Remember me</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

Exemplo de formulário vertical

Formulários

Adaptado de w3schools.com

(21)

<form action="/action_page.php" class="form-inline">

<div class="form-group">

<label for="email">Email:</label>

<input type="email" class="form-control" id="email" name="email">

</div>

<div class="form-group">

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd" name="pwd">

</div>

<div class="checkbox">

<label><input type="checkbox" name="remember"> Remember me</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

Para um formulário inline, basta utilizar a classe form-inline no elemento form

Formulários

Adaptado de w3schools.com

(22)

Exercício: estudar formulários horizontais em:

https://www.w3schools.com/bootstrap/bootstrap_forms.asp

Exemplo: anexos/Exemplo-Bootstrap-Form-Horizontal.html

OBS: formulários horizontais são convertidos em formulários verticais quando visualizados em telas pequenas.

Formulários

Adaptado de w3schools.com

(23)

<div class="radio">

<label><input type="radio" name="optradio">Option 1</label>

</div>

<div class="radio">

<label><input type="radio" name="optradio">Option 2</label>

</div>

Botões do tipo radio, um abaixo do outro

Formulários

Adaptado de w3schools.com

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>

<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>

Botões do tipo radio, um na frente do outro

(24)

 Uma janela modal é uma janela que é exibida em cima das

outras para apresentação ou coleta de informações de maneira conveniente, sem que o usuário seja redirecionado para uma nova página;

 Bootstrap fornece recursos para exibir modais de maneira fácil

Modal

Adaptado de w3schools.com

(25)

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data- target="#myModal">Abrir Modal</button>

<div class="modal-dialog">

<!– Cabeçalho da janela modal -->

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">×</button>

<h4 class="modal-title">Modal Header</h4>

</div>

<!– Corpo da janela modal -->

<div class="modal-body">

<p>Some text in the modal.</p>

</div>

<!– Rodapé da janela modal -->

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</div>

Modal - Exemplo

Adaptado de w3schools.com

Mais informações sobre modais: http://www.tutorialrepublic.com/twitter-bootstrap- tutorial/bootstrap-modals.php

(26)

$('#idDoModal').modal('show');

$('#idDoModal').modal('hide');

Caso seja necessário abrir ou fechar uma janela modal pelo código JavaScript, pode-se utilizar jQuery:

Abrindo e Fechando um Modal pelo Código

(27)

 Bootstrap Affix Plugin. Permite manter a barra de

navegação visível, mesmo quando o usuário rola a tela:

https://www.w3schools.com/bootstrap/bootstrap_affix.asp

 Acesse https://www.w3schools.com/bootstrap/ e explore outros recursos, estilos e templates do Bootstrap.

Muitos Outros Recursos

(28)

 O portal w3schools.com disponibiliza uma série de tutoriais que ensinam passo a passo como inserir recursos que são frequentemente utilizados nas página Web, tais como