Programação para Internet

Transcrição

1 Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Curso de Sistemas de Informação Prof. Dr. Daniel A. Furtado Módulo 6 Introdução ao Framework Bootstrap

2 2 Bootstrap Introdução 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;

3 Como Utilizar 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:  <link rel="stylesheet" href="  <script src="  <script src=" Repare que o framework Bootstrap requer um arquivo de estilos CSS, a biblioteca jquery e um arquivo de código JavaScript. Ref: adaptado de w3schools.com 3

4 Como Utilizar 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: <meta name="viewport" content="width=device-width, initial-scale=1"> 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. Ref: adaptado de w3schools.com Ref: developer.mozilla.org 4

5 <div class="container">  Como Utilizar 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. 5

6 Exemplo <!DOCTYPE html> <html lang="en"> <head> <title>bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" <script src=" <script src=" </head> <body> <div class="container"> <h1>my First Bootstrap Page</h1> <p>this is some text.</p> </body> </html> Ref: adaptado de w3schools.com 6

7 7 Bootstrap Grid System 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 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 Bootstrap Grid System 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: <div class="row"> <div class="col-sm-12"> <div class="row"> <div class="col-sm-3"> <div class="col-sm-6"> <div class="col-sm-3"> <div class="row">... Ref: w3schools.com 8

9 Bootstrap Grid System - Exemplo 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 <div class="container"> <div class="row"> <! - Primeira linha --> <div class="col-sm-6"> <label>primeiro Nome</label><br> <input type="text" style="width: 100%"> <div class="col-sm-6"> <label>último Nome</label><br> <input type="text" style="width: 100%"> <div class="row"> <! - Segunda linha --> <div class="col-sm-8"> <label>cidade</label><br> <input type="text" style="width: 100%"> <div class="col-sm-4"> <label>estado</label><br> <input type="text" style="width: 100%"> Ref: adaptado de w3schools.com 9

10 Bootstrap Grid System vs Tabelas 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.). Ref: adaptado de w3schools.com 10

11 Cores Contextuais As seguintes classes estão disponíveis para prover melhor significado ao texto através de cores: Classe Bootstrap.text-muted.text-primary.text-success.text-info.text-warning.text-danger Cor do texto This text is muted. This text is important. This text indicates success. This text represents some information. This text represents a warning. This text represents danger. Ref: adaptado de w3schools.com 11

12 12 Tabelas Bootstrap oferece diversas classes que possibilitam formatar rapidamente as tabelas HTML com estilos pré-definidos. Algumas delas são: Classe Bootstrap.table.table-striped.table-bordered.table-hover Significado Classe principal. Tabela com divisões horizontais Adiciona cores alternadas às linhas Adiciona bordas em todas as células Adiciona cor à linha quando apontada pelo mouse 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"> Ref: adaptado de w3schools.com

13 13 Tabelas 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: <div style="overflow-x:auto;"> <table>... </table> Ref: adaptado de w3schools.com

14 Botões Bootstrap disponibiliza classes para definir rapidamente a aparência de botões de acordo o seu propósito; Estilos Tamanhos Outros.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link.btn-lg.btn-md.btn-sm.btn-xs.btn-block.active.disabled A classe.btn-block faz com que o botão ocupe toda a largura disponível. Exemplo: <button class="btn btn-success btn-block">sucesso</button> Adaptado de w3schools.com 14

15 <nav class="navbar navbar-inverse"> <div class="container-fluid"> Barra de Navegação Barras de navegação podem ser criadas facilmente utilizando a classe.navbar Exemplo: <div class="navbar-header"> <a class="navbar-brand" href="#">nome do Website</a> <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> </nav> Ref: adaptado de w3schools.com 15

16 Barra de Navegação É possível inserir menus suspensos na barra de navegação por meio da classe.dropdown-menu Ver exemplo: Anexos/Exemplo-Bootstrap-Navbar-Submenu.html Ref: adaptado de w3schools.com 16

17 Barra de Navegação É possível inserir conteúdo alinhado à direita na barra de navegação por meio da classe.navbar-right Exemplo: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">websitename</a> <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> </nav> Ref: adaptado de w3schools.com 17

18 Bootstrap Glyphicons 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: <span class="glyphicon glyphicon-nomedoicone"></span> Veja a lista de ícones no endereço: Outros exemplos: 18

19 19 Formulários 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) Adaptado de w3schools.com

20 <form action="/action_page.php"> Formulários Exemplo de formulário vertical <div class="form-group"> <label for=" "> </label> <input type=" " class="form-control" id=" " name=" "> <div class="form-group"> <label for="pwd">password:</label> <input type="password" class="form-control" id="pwd" name="pwd"> <div class="checkbox"> <label><input type="checkbox" name="remember"> Remember me</label> <button type="submit" class="btn btn-default">submit</button> </form> Adaptado de w3schools.com 20

21 Formulários Para um formulário inline, basta utilizar a classe form-inline no elemento form <form action="/action_page.php" class="form-inline"> <div class="form-group"> <label for=" "> </label> <input type=" " class="form-control" id=" " name=" "> <div class="form-group"> <label for="pwd">password:</label> <input type="password" class="form-control" id="pwd" name="pwd"> <div class="checkbox"> <label><input type="checkbox" name="remember"> Remember me</label> <button type="submit" class="btn btn-default">submit</button> </form> Adaptado de w3schools.com 21

22 Formulários Exercício: estudar formulários horizontais em: Exemplo: anexos/exemplo-bootstrap-form-horizontal.html OBS: formulários horizontais são convertidos em formulários verticais quando visualizados em telas pequenas. Adaptado de w3schools.com 22

23 Formulários Botões do tipo radio, um abaixo do outro <div class="radio"> <label><input type="radio" name="optradio">option 1</label> <div class="radio"> <label><input type="radio" name="optradio">option 2</label> Botões do tipo radio, um na frente do outro <label class="radio-inline"><input type="radio" name="optradio">option 1</label> <label class="radio-inline"><input type="radio" name="optradio">option 2</label> Adaptado de w3schools.com 23

24 24 Modal 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 Adaptado de w3schools.com

25  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" datatarget="#mymodal">abrir Modal</button>  <div class="modal fade" id="mymodal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <! 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> <! Corpo da janela modal --> <div class="modal-body"> <p>some text in the modal.</p> Modal - Exemplo <! Rodapé da janela modal --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> Mais informações sobre modais: Adaptado de w3schools.com 25

26 Abrindo e Fechando um Modal pelo Código Caso seja necessário abrir ou fechar uma janela modal pelo código JavaScript, pode-se utilizar jquery: $('#iddomodal').modal('show'); $('#iddomodal').modal('hide'); 26

27 27 Muitos Outros Recursos Bootstrap Affix Plugin. Permite manter a barra de navegação visível, mesmo quando o usuário rola a tela: Acesse e explore outros recursos, estilos e templates do Bootstrap.

28 28 W3 How TO 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 animações, slideshow de imagens, janelas popup, etc. Visite o endereço a seguir e explore alguns desses recursos:

29 Referências getbootstrap.com developer.mozilla.org 29