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 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;
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: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jquery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 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
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
<div class="container"> <!-- Conteúdo da página --> 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
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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </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 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
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
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
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
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 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 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
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
<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
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
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
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: https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp Outros exemplos: https://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp 18
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
<form action="/action_page.php"> Formulários Exemplo de formulário vertical <div class="form-group"> <label for="email">email:</label> <input type="email" class="form-control" id="email" name="email"> <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
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="email">email:</label> <input type="email" class="form-control" id="email" name="email"> <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
Formulários 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. Adaptado de w3schools.com 22
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 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
<!-- Botão para abrir a janela modal --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" datatarget="#mymodal">abrir Modal</button> <!-- Div definindo o conteúdo da janela modal --> <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: http://www.tutorialrepublic.com/twitter-bootstraptutorial/bootstrap-modals.php Adaptado de w3schools.com 25
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 Muitos Outros Recursos 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.
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: https://www.w3schools.com/howto/
Referências www.w3schools.com/bootstrap/ getbootstrap.com developer.mozilla.org 29