Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Aula 06 - BootStrap
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
BootStrap
Aula 5: Apresentação de frameworks de front-end
Profa. Dra. Ana Patrícia F. Magalhães Mascarenhas
ANA.FONTES@UNIFACS.BR
ANAPATRICIAMAGALHAES@GMAIL.COM
Objetivo
Objetivo
Apresentar o framework Bootstrap como integração de alto nível entre HTML, CSS e JavaScript.
Destacar a diferença entre os atributos name, id e class.
Construir páginas com os componentes de Bootstrap.
Personalizar e modificar a partir do CSS e JavaScript com Bootstrap.
Recursos
Utilização da documentação do framework Bootstrap. Disponível em: http://getbootstrap.com/
Apresentação de modelos prontos em Bootstrap através do site: https://startbootstrap.com
Curso sobre a proposta e o uso de Bootstrap: https://www.w3schools.com/bootstrap/default.asp
Uso do portal CodePen para divulgar interfaces de front-end. Disponível em: https://codepen.io
Portal W3CSchools. Disponível em https://www.w3schools.com/bootstrap/default.asp
BootStrap
Framework HTML, CSS e JavaScript para desenvolvimento de sites responsivos.
Desenvolvido por Mark Otto e Jacob Thornton no Twitter
Versão 3: mais estavel
Versão 4: mais atual, mas não pode ser usada por IE9 e anteriores
Como usar o BootStrap
Existem duas maneiras de usar o BootStrap
Baixar do getbootstrap.com
Incluir o BootStrap do CDN (Content Delivery Network)
Usar o CDN pode ser mais rápido, pois muitos usuários já utilizam e já tem carregado no cache
Incluir também o Jquery caso deseje usar Plugins do JavaScript ex. modals, tootips, etc.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Criando um site com BootStrap
Usar doctype para HTML5
Usar Meta para definir o charset (“utf-8” para HTML5)
Usar o Meta para definir o site como responsivo (Viewport)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</html>
Criando um site com BootStrap (2)
BootStrap requer o uso de containers para acomodar o conteúdo
Temos dois tipos de container para dispositivos móveis
Usa-se a classe .container para container fixo e responsivo
Usa-se a classe .container-fluid para o container abrangendo toda a janela do dispositivo
Exemplos em https://www.w3schools.com/bootstrap/bootstrap_get_started.asp
BootStrap Grids
O BootStrap possibilita criar até 12 colunas na página
Pode-se agrupar colunas para ter colunas mais largas ou menos colunas
As colunas são rearrumadas de acordo com o dispositivo (responsivo)
BootStrap Grids (2)
A grid tem 4 classes
xs, para telefones (telas menores que 768px)
sm, para tablets (telas iguais ou superiores a 768px)
md, para laptops pequenos (telas iguais ou maiores que992px)
lg, para laptops e desktops (telas iguais ou maiores que 1200px)
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
Estrutura básica da grid
Cria uma linha
Cria as colunas (devem ser o total de 12)
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
textos
BootStrap tem um padrão de formatação para textos
Font-size = 14px
Line-height = 1.488
Para todos os elementos <body> e <p>
Para <p> a margem da base é metade da altura da linha
Alguns elementos do HTML tem formato (estilo) diferente no BootStrap.
Exemplos podem ser visualizados em https://www.w3schools.com/bootstrap/bootstrap_typography.asp
Tabelas
A tabela padrão do BootStrap tem somente linhas horizontais
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
https://www.w3schools.com/bootstrap/bootstrap_tables.asp
Tabelas – striped-rows
“Efeito zebra”
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Tabelas – bordered table
A tabela padrão do BootStrap tem somente linhas horizontais
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Tabelas – Hover Rows
(marca da linha quando passo o mouse)
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Mais recursos e exemplos em https://www.w3schools.com/bootstrap/bootstrap_tables.asp
Imagens
<img src="cinqueterre.jpg"
class="img-thumbnail">
<img src="cinqueterre.jpg"
class="img-circle" >
<img src="cinqueterre.jpg" class="img-rounded" >
Para imagem responsive, a imagem é escalada de forma amigável:
<img class="img-responsive" src="img_chania.jpg">
https://www.w3schools.com/bootstrap/bootstrap_images.asp
Vídeo responsivo
O vídeo responsivo deve ter uma boa proporção entre a largura e a altura da janela aonde o vídeo é apresentado. Esta proporção é determinada pelo “ascpect ratio” definhada pela tag embed-responsive
Aspect ratio consiste na relação entre a altura e a largura do vídeo apresentado. É comum usar 4:3 (formato universal)ou 16:9 (formato HDTV e europeu)
A classe embed-responsive pode ser usada nos elementos de containers <iframe>, <embed>, <video>, e <object>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Execute o teste em https://www.w3schools.com/bootstrap/bootstrap_images.asp
Wells
A classe well adiciona ao elemento uma borda e um background cinza com algum padding
<div class="well">Basic Well</div>
<div class="container">
<h2>Well Size</h2>
<div class="well well-sm">Small Well</div>
<div class="well">Normal Well</div>
<div class="well well-lg">Large Well</div>
</div>
https://www.w3schools.com/bootstrap/bootstrap_wells.asp
Mensagens de alerta
div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alertalert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
https://www.w3schools.com/bootstrap/bootstrap_alerts.asp
Mensagens de alerta(2)
Alertas que podem ser fechados
Class = “alert-dismissible” na tag <div>
Class=“close” na tag <a>
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Alertas com links
<div class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Mais opções em https://www.w3schools.com/bootstrap/bootstrap_alerts.asp
Responsável por fechar quando clicar no “x”
Botões
O BootStrap possui diferentes tipos e tamanhos de botões
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
Botões (2)
Block level, ocupam toda a largura do elemento parente
Usa-se a classe .bnt-block
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Ativar / desativar botões
.active deixa o botão com a aparência de selecionado
.disable deixa o botão desabilidato
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
Botões agrupdos
Agrupa vários botões
Usa-se a classe .bnt-group aplicado ao elemento <div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Os botões podem ser agrupados na vertical
Usa-se a classe .bnt-group-vertical aplicado ao elemento <div>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Botões agrupados e aninhados
Cria uma forma de menu dropdown
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
Outros exemplos de botões em https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp
Glyphicons
O BootStrap provê 260 glyphicons para serem utilizados em textos, botões forms, etc.
Usa-se a seguinte sintaxe
<span class="glyphicon glyphicon-name"></span>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>
Paginação
Para criar paginação usa-se a classe .pagination no elemento <ul>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Para indicar a paginação ativa usa-se a classe .active
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Outros recursos em https://www.w3schools.com/bootstrap/bootstrap_pagination.asp
https://www.w3schools.com/bootstrap/bootstrap_pager.asp
Dropdowns
Menu dropdown
A classe .dropdown indica o menu
Para abrir o menu usa-se um botão ou um link com a classe dropdown-toggled e o atributo data-toggled=“dropdown”
A classe .caret cria a seta para baixo indicando que é um menu
Adiciona uma classe .dropdown-menu para o elemento <ul>com os itens do menu
A classe .divides separa itens do menu
<<div class="container">
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
Outras informações em https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
Colapse
Utilizado quando se deseja esconder/mostrar grande quantidade de elementos na página
No exemplo quando seleciona o botão aparece o texto abaixo dele e quando seleciona novamente esconde o texto
A classe .colapse indica o elemento que será mostrado/escondido
Para controlar o evento de esconder/mostrar use um link ou um botão e adicione data-toggle="collapse“
Adicione um data-target="#id“ para conectar as duas partes (ex. o texto e o botão)
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
Para utilizar em outros elementos, ex. painéis, verifique em https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
Menus
Muitas páginas contém menus
Estes menus podem ser criados através de listas
<div class="container">
<h3>Inline List</h3>
<ul class="list-inline">
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Se quisermos criar o menu em linha podemos usar a classe “list-inline”
Tabs
Menus também podem ser criados com tabs
TABS são “pastas” geralmente utilizadas para apresentação de conteúdos em uma página.Tabs são criadas com a classe <nav nav-tabs> na tag <ul>
A tag <li>pode indicar a tab ativa
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Tabs com menu drowdown
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
PILLs
Pills também são usados para criar menus. Eles ficam com a aparência de botões
Usa-se a classe <nav nav-pills> na tag <ul>
A tag <li>pode indicar a tab ativa
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Na vertical usa-se a classe .nav-stacked
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Para posicionar pills em uma coluna específica, colocar dropdown menu, etc. visitar https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
Barra de navegação (navbar)
Cria uma barra de navegação posicionada no topo da página
Sintaxs: <nav class="navbar navbar-default">
<nav class="navbar navbar-default">
<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>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
Barra de navegação invertida (inverted navbar)
Coloca a barra preta com a letra branca
<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>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Para acrescentar botões, dropdown, alinhamento... Visitar https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Barra de navegação com formulário
<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>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Forms
BootStrap contém três layouts para formulários
Vertical (default)
Horizontal
Em linha
Precisa adicionar a classe .form-control a todos os elementos do form (input, textarea e select)
Form vertical (padrão)
<div class="container">
<h2>Vertical (basic) form</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" 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>
</div>
Form InLine
<div class="container">
<h2>Inline form</h2>
<p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" 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>
</div>
Form horizontal
O label é alinhado ao campo
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
Controles dos formulários
O BootStrap pode ser aplicado a diversos controles do formulário: input, textarea, checkbox, radio, select e suas variações ex. text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color
É preciso usar a classe form-control
Controles dos formulários (2)
Plain text : texto fixo ao lado do label
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<p class="form-control-static">someone@example.com</p>
</div>
</div>
</form>
Controles dos formulários (3)
Input Group: possibilita colocar um ícone junto ao campo
Classe .input-group-addon
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password">
</div>
<div class="input-group">
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
</form>
https://www.w3schools.com/bootstrap/bootstrap_forms_inputs2.asp
Controles dos formulários (4)
Input group button: adiciona um botão ao campo
Classe .input-group-btn
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Controle do estado do campo no formulário
Controle de estado
Input focus: aparece uma cor cinza para indicar o foco
Disabled inputs: desabilitao campo(atributo disabled)
Disabled fieldset: desabilita todos os controles do fieldset (atributo disabled)
Readonly inputs: não permite digitar (atributo readonly)
Validation states: validações para mensagens de erro
Icons: adiciona um ícone de feedback (atributo has-feedback)
Controle do estado do campo no formulário (2)
Controle de estado
Ver exemplos em https://www.w3schools.com/bootstrap/bootstrap_forms_inputs2.asp
Controles dos formulários (6)
Tamanho do campo
Para controlar a altura usa-se as classes .input-lg e .input-sm
Para controlar a largura usa-se as classes: .col-lg-* e .col-sm-*
A classe form-group form-group-lg deixa o label e o campo arrumados em linha
Ver exemplos em https://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp
<form>
<div class="form-group">
<label for="inputsm">Small input</label>
<input class="form-control input-sm" id="inputsm" type="text">
</div>
<div class="form-group">
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="inputlg">Large input</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
</form>
Objetos de Mídia
BootStrap tem recurso de alinhamento rápido para mídias como vídeos e imagens
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
Usar um <div> com a classe .media
Usar .media-left ou .meia-right para alinha o objeto de mídia a direita ou a esquerda
O texto deve ter a classe .mediabody
Pode-se usar a classe .media-heading para cabeçaho
https://www.w3schools.com/bootstrap/bootstrap_media_objects.asp
Carrossel
Plugin para passar elementos na página como um carrossel
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
</div>
</div>
<div>
Utilizamos um id, ex “myCarousel” e a classe “carousel”
O atributo slide dá o efeito do transição e animação. Se não quiser esse efeito omita esse atributo.
O atributo data-ride=“carousel” informa para começar o efeito do carrossel assim que a página for aberta.
Indicator, pontos na base do slide indicando a quantidade de slides(.carousel-indicators)
data-target aponta para o id do carrossel
data-slide-to especifica para qual slide irá quando clicar nos pontos
Wrapper for slides
os slides são especificados em uma <div> com a classe .carousel-inner
o conteúdo é definido em uma <div> com a classe .item
um dos slides deve ter a classe .active para que o carrossel apareça
Carrossel (2)
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Left and right controls
adiciona botões a esquerda e a direita para navegação
o atributo data-slide tem os valores “prev” ou “next”
Caption Slide
Possibilita colocar um titulo acima dos pontos para cada slide
no <div class=“item”> <div classe=“carousel-caption”>
https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
JQuery
Biblioteca javascript
Facilita o uso de javascript para manipulação de tags, css, efeitos de animação, entre outros.
O Jquery pode ser usado de duas formas
Baixar o Jquery no seu computador
Incluir Jquery pelo CDN
Ex.:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
https://www.w3schools.com/jquery/jquery_intro.asp
Jquery -Sintaxe
A sintaxe básica do Jquery é
$(selector).action()
Onde
$ indica o acesso ao Jquery
(selector) indica o elemento HTML
action() indica a ação Jquery a ser executada
Exemplo:
$(this).hide() Esconde o elemento corrente
$("p").hide() Esconde todos os elementos <p>
$(".test").hide() Esconde todos os elementos da classe .test
$("#test").hide() Esconde os elementos com id test
Jquery –Sintaxe (2)
Os métodos Jquery ficam dentro do evento document ready, para prevenir que sejam executados antes do documento terminar a abertura.
$(document).ready(function(){
// jQuery methods go here...
});
Jquery – Eventos
Eventos são ações que Disparam execuções na página
Sintaxe: $("p").click();
Eventos comuns
Jquery – Exemplos de Eventos
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Quando clica na frase ela desaparece
https://www.w3schools.com/jquery/jquery_events.asp
Exemplo com Filtros
O BootStrap não tem recurso de filtro, mas pode ser feito usando Jquery
Filtro de tabelas (escreve algo no campo para filtrar os dados da tabela)
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
- O Jquery faz um loop para cada elemento da tabela para identificar se há algum texto que coincide com o digitado
- O método toggle() esconde a linha (display:none)
- O método toLowerCase() é usado para que não seja sensível ao contexto.
Executar o exemplo em https://www.w3schools.com/bootstrap/bootstrap_filters.asp
Exercício
Vamos criar um novo site para a nossa livraria usando o bootstrap.
Use a imaginação para fazer um site bem elegante, algumas sugestões:
Use Grid
Refaça o menu
Coloque um carrossel para passar alguns livros
Mude as páginas de cadastro e compra usando campos com bootstrapMateriais relacionados
Perguntas relacionadas
Compartilhar