Este conteúdo faz parte do livro “Introdução à programação Web para a Bioinformática: HTML, CSS, PHP & JavaScript“. Você pode adquirir a versão impressa desse livro aqui ou a versão para Kindle aqui. Para nos citar, consulte este link.
Bootstrap é um dos mais famosos frameworks HTML, CSS e JavaScript utilizados para desenvolvimento de websites responsíveis. Bootstrap foi criado por Mark Otto (@mdo) e Jacob Thornton (@fat) no Twitter em meados de 2010. Em 2011 foi liberado ao público como um framework de código aberto.
Bootstrap contém um conjunto de componentes desenvolvidos por designers e programadores, que facilitam e aceleram o desenvolvimento de websites com belas interfaces. Bootstrap permite que um mesmo site possa ser executado em computadores desktop, laptops, celulares e tabletes.
Como instalar o Bootstrap?
Para utilizar o Bootstrap é necessário baixá-lo no site oficial, extrair os arquivos, copiar as pastas para seu projeto e referenciar os arquivos CSS e JS no seu código. Bootstrap pode ser baixado gratuitamente no site: <http://getbootstrap.com>.
Os exemplos demonstrados aqui utilizam Bootstrap versão 3. Novas versões poderão surgir no futuro, o que, eventualmente, pode fazer com que algumas classes aqui demonstradas tenham o nome alterado ou até mesmo sejam descontinuadas. Demonstraremos a seguir o uso básico de alguns componentes do Bootstrap. Caso tenha algum problema utilize a mesma versão apresentada aqui ou consulte a documentação oficial.
Começando a usar o Boostrap
No diretório de seu website adicione as pastas “css” e “js” do Bootstrap. Inicialmente iremos referencias apenas os arquivos “.css”. Observe que na pasta “css” haverá os arquivos: bootstrap.css, bootstrap.min.css, bootstrap-theme.css, bootstrap-theme.min.css (dentre outros arquivos). Arquivos terminados com o final “.min.css” têm conteúdos similares aos terminados em “.css”. A diferença é que esses arquivos foram minimizados para que pudessem ser processados mais rápido pelos navegadores. Vamos utilizar apenas os arquivos “.min.css”.
No cabeçalho de sua página <head>, insira a seguinte declaração:
<!--Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Tema (opcional) -->
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
c5_s1.html | https://goo.gl/W0OUQA
Pronto! Bootstrap já está pronto para ser utilizado! Você pode ainda inserir a tag que melhora a rendenização em dispositivos móbile:
<meta name="viewport" content="width=device-width, initial-scale=1">c5_s2.html | https://goo.gl/IszYqU
Lembre-se que o Bootstrap requer o uso de HTML5. Logo, as páginas devem conter a declaração do doctype:
<!DOCTYPE html>
<html lang="pt-br">
[...]
</html>
c5_s3.html | https://goo.gl/fkNgwD
Nos próximos capítulos demonstraremos como adicionar arquivos JavaScript. A seguir, demonstraremos alguns das propriedades CSS e componentes do Bootstrap.
Sistema de grid
Aprendemos anteriormente que os elementos que organizam e estruturam as páginas, delimitando seu conteúdo, são denominados containers. Bootstrap possui métodos simples para estruturação de páginas por meio das classes containers e do sistema de grid.
Os containers permitem que toda a página se ajuste a resolução da tela de acordo com o dispositivo usado pelo usuário para acessá-la. Bootstrap apresenta duas classes: “.container” e “.container-fluid”.
A classe .container é usada para conteúdo responsível armazenado em uma estrutura de largura fixa. Observe o exemplo abaixo:
<!-- Container de largura fixa -->
<div class="container">
[...]
</div>
c5_s4.html | https://goo.gl/m5rtAl
A classe .container-fluid é utilizada em páginas a qual se deseja que a estrutura ocupe (quase) toda a largura:
<!-- Container de largura fixa -->
<div class="container-fluid">
[...]
</div>
c5_s5.html | https://goo.gl/hKPPWe
O sistema de grid permite que o conteúdo presente na classe container seja exibido corretamente na tela por meio de uma estrutura dividida em 12 colunas.
Na prática os elementos devem ser organizados em linhas (classe .row) e em colunas (classe .col-[dispositivo]-[tamanho]). Os tamanhos vão de 1 a 12, enquanto o dispositivo depende do tamanho da tela do dispositivo e pode ser xs, sm, md ou lg.
O exemplo a seguir é apresentado na documentação oficial do Bootstrap e demonstra como utilizar o sistema de grid para criar divs de diferentes tamanhos.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<style>div.row div { border:#c9c1d5 2px solid; padding:25px 0; background-color:#e6e2eb;} </style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</body>
</html>
c5_s6.html | https://goo.gl/SPM5lx
Observe que a div de classe row faz parte da div container. Cada div da classe row possui divs de classe col-md-*. A soma dos valores que definem o tamanho das colunas em cada linha deve ser sempre igual a 12, ou seja, no exemplo vemos 12 colunas de tamanho um, duas com tamanho oito e quatro, três de tamanho quatro e duas de tamanho seis. Podemos visualizar esse exemplo desta forma:
O sistema de grid colapsa em resoluções não ideais, que dependem da classe usada: xs (< 768px), sm (≥ 768px), md (≥ 992px) e lg (≥ 1200px). Por exemplo, o mesmo exemplo demonstrado anteriormente poderia ser visualizado em um telefone desta forma:
Observe que as divs são empilhadas verticalmente. Podemos forçar o sistema de grid a adotar essa organização mesmo em dispositivos pequenos substituindo os nomes das classes de “.col-md-*” por “.col-xs.*”. Veja o exemplo abaixo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<style>div.row div { border:#c9c1d5 2px solid; padding:25px 0; background-color:#e6e2eb;} </style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
</div>
<div class="row">
<div class="col-xs-8">.col-xs-8</div>
<div class="col-xs-4">.col-xs-4</div>
</div>
<div class="row">
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</body>
</html>
c5_s7.html | https://goo.gl/TN1NO5
Observe que mesmo em resoluções pequenas, o sistema de grid manteve sua organização. Entretanto, houve uma grande redução no tamanho do texto, que se tornou inelegível. Podemos concluir que o colapso de estruturas de websites é importante para que o website continue legível mesmo em pequenos dispositivos.
Tabelas Bootstrap
Bootstrap melhora a aparência de tabelas de forma simples e prática. Para isso basta declarar a classe “.table”.
<table class="table">
[...]
</table>
c5_s8.html | https://goo.gl/1UvrlT
No exemplo a seguir, demonstraremos a aplicação da classe “.table” a uma tabela anteriormente criada.
<table class="table">
<thead>
<tr>
<th colspan="4">Nucleotídeos</th>
</tr>
</thead>
<tfoot>
<td colspan="4">Bases / DNA</td>
</tfoot>
<tbody>
<tr>
<th colspan="2">Purinas</th>
<th colspan="2">Pirimidinas</th>
</tr>
<tr>
<td>Adenina</td>
<td>Guanina</td>
<td>Citosina</td>
<td>Timina</td>
</tr>
</tbody>
</table>
c5_s9.html | https://goo.gl/PFVsxQ
Agora observe como seria o leiaute da tabela sem a classe “.table”:
As folhas de estilo do Bootstrap configuram a tabela para que ocupe toda a largura da div. O espaçamento de colunas é distribuído uniformemente. Espaçamentos internos são inseridos nas células. Linhas horizontais são inseridas. E cabeçalhos são colocados em destaque. Tudo isso com a simples declaração da classe “.table”.
Bordas
Por padrão, Bootstrap insere apenas linhas horizontais. Entretanto, é possível inserir todas as bordas adicionando a classe “.table-bordered”.
<table class="table table-bordered">
<thead>
<tr><th colspan="4">Nucleotídeos</th></tr>
</thead>
<tfoot>
<td colspan="4">Bases / DNA</td>
</tfoot>
<tbody>
<tr>
<th colspan="2">Purinas</th>
<th colspan="2">Pirimidinas</th>
</tr>
<tr>
<td>Adenina</td>
<td>Guanina</td>
<td>Citosina</td>
<td>Timina</td>
</tr>
</tbody>
</table>
c5_s10.html | https://goo.gl/TpC448
Linhas intercaladas por listras
Bootstrap permite que as linhas de uma tabela sejam intercaladas por listras. A classe responsável por isso é a “.table-striped”.
<table class="table table-striped">
<thead><tr><th colspan="4">Nucleotídeos</th></tr></thead>
<tbody>
<tr><td>Adenina</td></tr>
<tr><td>Guanina</td></tr>
<tr><td>Citosina</td></tr>
<tr><td>Timina</td></tr>
</tbody>
</table>
c5_s11.html | https://goo.gl/SIjgh7
Linha destacada
A classe “.table-hover” usada em paralelo com a classe “.table” permite que uma linha seja destacada quando o usuário passar o mouse sobre ela.
<table class="table table-hover">
<thead><tr><th colspan="4">Nucleotídeos</th></tr></thead>
<tbody>
<tr><td>Adenina</td></tr>
<tr><td>Guanina</td></tr>
<tr><td>Citosina</td></tr>
<tr><td>Timina</td></tr>
</tbody>
</table>
c5_s12.html | https://goo.gl/Lg0EWw
Tabela condensada
A classe “.table-condensed” remove as margens internas das células, reduzindo a altura final da tabela.
<table class="table table-condensed">
<thead><tr><th colspan="4">Nucleotídeos</th></tr></thead>
<tbody>
<tr><td>Adenina</td></tr>
<tr><td>Guanina</td></tr>
<tr><td>Citosina</td></tr>
<tr><td>Timina</td></tr>
</tbody>
</table>
c5_s13.html | https://goo.gl/SbwnaC
Formulários
Elementos de formulários, como <input>, <textarea>, e <select> podem receber a classe “.form-control” que aplica o estilo do Bootstrap. A classe “.form-group” também pode ser utilizada para melhorar o espaçamento.
<form>
<div class="form-group">
<label>E-mail:</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<label>Senha</label>
<input type="password" class="form-control" id="senha" placeholder="Senha">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Mantenha-me conectado
</label>
</div>
<button type="submit" class="btn btn-default">Entrar</button>
</form>
c5_s14.html | https://goo.gl/pWB6Yd
Formulário em linha
Bootstrap permite a inserção de formulários em linha única utilizando a classe “.form-inline” aplicada à tag <form>.
<form class="form-inline">
<div class="form-group">
<label>Email:</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<label>Senha:</label>
<input type="password" class="form-control" id="senha" placeholder="Senha">
</div>
<button type="submit" class="btn btn-default">Entrar</button>
</form>
c5_s15.html | https://goo.gl/P425nk
Desativando campos
É possível desativar campos aplicando o atributo disabled à tag <fieldset>. Essa tag deve envolver todos os elementos que deseja que sejam somente leitura.
<form class="form-inline">
<fieldset disabled>
<div class="form-group">
<label>Email:</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<label>Senha:</label>
<input type="password" class="form-control" id="senha" placeholder="Senha">
</div>
<button type="submit" class="btn btn-default">Entrar</button>
</fieldset>
</form>
c5_s16.html | https://goo.gl/GxNYNZ
Largura de campos
A largura de campos de formulários pode ser alterada utilizando as classes de declaração de grids: “.col-[dispositivo]-[tamanho]”, sendo [dispositivo] “xs”, “sm”, “md” ou “lg”; e [tamanho] um valor numérico que varia de 1 a 12. Observe o exemplo a seguir:
<div class="col-md-1"><input type="text" class="form-control" placeholder="col-md-1"></div>
<div class="col-md-2"><input type="text" class="form-control" placeholder="col-md-2"></div>
<div class="col-md-3"><input type="text" class="form-control" placeholder="col-md-3"></div>
<div class="col-md-4"><input type="text" class="form-control" placeholder="col-md-4"></div>
<div class="col-md-5"><input type="text" class="form-control" placeholder="col-md-5"></div>
<div class="col-md-6"><input type="text" class="form-control" placeholder="col-md-6"></div>
<div class="col-md-7"><input type="text" class="form-control" placeholder="col-md-7"></div>
<div class="col-md-8"><input type="text" class="form-control" placeholder="col-md-8"></div>
<div class="col-md-9"><input type="text" class="form-control" placeholder="col-md-9"></div>
<div class="col-md-10"><input type="text" class="form-control" placeholder="col-md-10"></div>
<div class="col-md-11"><input type="text" class="form-control" placeholder="col-md-11"></div>
<div class="col-md-12"><input type="text" class="form-control" placeholder="col-md-12"></div>
c5_s17.html | https://goo.gl/K8P1UU
Deve-se ressaltar que as classes “.col-[dispositivo]-[tamanho]” devem ser aplicadas a uma div que envolve o campo. O elemento <input> deve receber a classe “form-control”, que aplica o estilo padrão para o elemento e altera sua largura para que ocupe 100% da div. Observe também que quando a soma dos tamanhos for menor ou igual a 12, as colunas são agrupadas em uma mesma linha.
Altura de campos
A altura de elementos pode ser alterada com a classe “.input-[tamanho]”, sendo que tamanho pode receber os valores “sm” (pequeno), “md” (padrão) ou “lg” (grande). Observe o exemplo a seguir:
<label>Tamanho pequeno</label>
<input type="text" class="form-control input-sm" placeholder="input-sm">
<label>Tamanho padrão</label>
<input type="text" class="form-control input-md" placeholder="input-md">
<label>Tamanho grande</label>
<input type="text" class="form-control input-lg" placeholder="input-lg">
c5_s18.html | https://goo.gl/zDShTz
Grupos de inputs
Bootstrap permite que campos possam ser agrupados por meio da classe “.input-group-addon”. Essa classe pode ser aplicada a um elemento do tipo <span> declarado no mesmo nível de um elemento <input>. Ambos os elementos devem pertencer a uma div da classe “.input-group”. No exemplo a seguir demonstraremos agrupamentos aplicados aos principais elementos de formulários:
<div class="input-group">
<input type="text" class="form-control" placeholder="E-mail">
<span class="input-group-addon">@diegomariano.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">R$</span>
<input type="text" class="form-control" placeholder="Valor">
<span class="input-group-addon">,00</span>
</div>
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" aria-label="..."></span>
<input type="text" class="form-control" placeholder="Checkbox">
</div>
<div class="input-group">
<span class="input-group-addon"><input type="radio" aria-label="..."></span>
<input type="text" class="form-control" placeholder="Radio">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Pesquisar">
<span class="input-group-btn">
<button class="btn btn-default" type="button">OK</button>
</span>
</div>
c5_s19.html | https://goo.gl/CRpUD
Observe que no último elemento utilizamos a classe “.input-group-btn”. Essa classe permite o agrupamento de campos de texto de formulários a botões. No próximo tópico demonstraremos como Bootstrap permite a aplicação de estilos a botões.
Botões
Bootstrap apresenta a classe “btn” e outras classes derivadas para a formatação de botões. As classes de configurações de botões podem ser aplicadas a tags <button>, <input> e <a>.
<button class="btn btn-default" type="submit">Botão</button>
<input class="btn btn-default" type="submit" value="Submit">
<input class="btn btn-default" type="button" value="Input">
<a class="btn btn-default" href="#">Link</a>
c5_s20.html | https://goo.gl/eydVO6
Cores para botões
Bootstrap apresenta uma série classes que permitem a aplicação de cores a botões. Essas cores têm por objetivo alertar o usuário sobre a importância de um determinado botão. Elas podem ser declaradas por meio das classes “.btn-[tipo]”. São seis classes possíveis:
- btn-default (cinza): cor padrão;
- btn-primary (azul): indica ao usuário que aquele botão representa uma ação primária;
- btn-success (verde): indica uma ação bem sucedida;
- btn-info (azul claro): indica que é um botão informativo;
- btn-warning (laranja): avisa sobre possíveis problemas;
- btn-danger (vermelho): indica ações perigosas.
Classes de cores para botões devem ser declaradas em conjunto com a classe “.btn”. Observe abaixo como utilizá-las:
<!-- Botão padrão -->
<button type="button" class="btn btn-default">Default</button>
<!-- Azul -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Verde -->
<button type="button" class="btn btn-success">Success</button>
<!-- Azul claro -->
<button type="button" class="btn btn-info">Info</button>
<!-- Laranja -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Vermelho -->
<button type="button" class="btn btn-danger">Danger</button>
c5_s21.html | https://goo.gl/AFwH3Q
Tamanhos de botões
A altura de botões pode ser alterada com a classe “.btn-[tamanho]”, sendo que tamanho pode receber os valores “xs” (extra pequeno), “sm” (pequeno), vazio ou “lg” (grande). Observe o exemplo a seguir:
<p>
<button type="button" class="btn btn-default btn-lg">Botão grande</button>
</p>
<p>
<button type="button" class="btn btn-default">Botão padrão</button>
</p>
<p>
<button type="button" class="btn btn-default btn-sm">Botão pequeno</button>
</p>
<p><button type="button" class="btn btn-default btn-xs">Botão extra pequeno</button></p>
c5_s22.html | https://goo.gl/FcTPkF
Grupos de botões
Botões podem ser agrupados através da classe “.btn-group”. No exemplo a seguir, demonstraremos o agrupamento de três botões.
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Esquerda</button>
<button type="button" class="btn btn-default">Meio</button>
<button type="button" class="btn btn-default">Direita</button>
</div>
c5_s23.html | https://goo.gl/6LZmoV
Tamanhos de grupos de botões
A altura de botões pode ser alterada com a classe “.btn-group-[tamanho]”, sendo que tamanho pode receber os valores “xs” (micro), “sm” (pequeno), vazio ou “lg” (grande). Observe o exemplo a seguir:
<label>Tamanho micro</label><br>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-default">Esquerda</button>
<button type="button" class="btn btn-default">Meio</button>
<button type="button" class="btn btn-default">Direita</button>
</div>
<br>
<label>Tamanho pequeno</label><br>
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-default">Esquerda</button>
<button type="button" class="btn btn-default">Meio</button>
<button type="button" class="btn btn-default">Direita</button>
</div>
<br>
<label>Tamanho padrão</label><br>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Esquerda</button>
<button type="button" class="btn btn-default">Meio</button>
<button type="button" class="btn btn-default">Direita</button>
</div>
<br>
<label>Tamanho grande</label><br>
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default">Esquerda</button>
<button type="button" class="btn btn-default">Meio</button>
<button type="button" class="btn btn-default">Direita</button>
</div>
c5_s24.html | https://goo.gl/1Zxfbr
Imagens
Bootstrap possui algumas classes para formatação de imagens, como por exemplo, adequação da imagem ao tamanho do dispositivo (imagens responsivas), inserção de adornos e construção de miniaturas.
Imagens responsivas
Bootstrap permite por meio da classe “.img-responsive” que imagens sejam declaradas como responsivas, ou seja, sejam ajustadas conforme o tamanho de uma página.
<img title="Imagem responsiva" src="..." class="img-responsive">c5_s25.html | https://goo.gl/0k3qL2
Formas de adornos
Bootstrap permite a adição de formas de adornos a figuras. Elas podem ser adicionadas à tag <img> por meio das classes “.img-rounded”, “.img-circle” e “.img-thumbnail”.
<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-thumbnail">
c5_s26.html | https://goo.gl/WJkijL
Ícones
Bootstrap possui uma biblioteca nativa com ícones obtidos no Glyphicon (http://glyphicons.com). Para uso dos ícones é necessário o diretório “fonts”.
Para usar os ícones declare a classe “.gryphicon” seguido do nome de um ícone. Observe:
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>c5_s27.html | https://goo.gl/MCjN0e
Biblioteca de ícones Bootstrap
Abaixo alguns dos ícones mais utilizados no Bootstrap:
Para consultar a lista completa com o nome dos ícones acesse: <http://getbootstrap.com/components/#glyphicons>.
Barra de navegação
Barras de navegação (navbars) são componentes responsivos presentes no cabeçalho que servem para navegação em um Website. Bootstrap possui um leiaute padrão para barras de navegação.
Em telas de tamanho reduzido (como tabletes ou celulares), o menu entra em colapso e adota outra conformação. Com exceção do logo, todos os elementos, como links e caixas de busca, são escondidos e substituídos por um ícone com três linhas.
Ao clicar nesse ícone, um menu responsivo é chamado permitindo acesso a todos os elementos da barra de navegação.
A classe responsável por aplicar estilos a barras de navegação é “.navbar”, e deve ser atribuída à tag <nav>. A classe “.navbar-default” será responsável por aplicar a cor branca como padrão para a barra de navegação. O logo da página deve ser adicionado a uma div que possui a classe “.navbar-header”. Algumas outras classes devem ser implementadas em divs para que a barra de navegação se comporte de maneira adequada quando entrar em colapso (ou seja, quando for exibida em telas pequenas). Observe abaixo a implementação da barra de navegação acima demonstrada.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bioinformática</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Buscar</button>
</form>
</ul>
</div>
</div>
</nav>
c5_s28.html | https://goo.gl/bGNXOx
Observe que a tag <nav> recebe as duas classes: “navbar navbar-default”. A seguir é declarada uma div container, seguida pela div que recebe o cabeçalho da barra de navegação. Um botão é declarado a seguir. Ele recebe as classes “navbar-toggle collapsed”, que indicam que ele só será exibido se a página entrar em colapso. Nesse caso, o atributo data-target indicará o id da div armazena os itens do menu que serão carregados por esse botão, no caso, a div “#menu”. As tags span, a seguir, armazenam os detalhes do botão. A seguir é declarada a div “#menu” que armazena os links de navegação. Por fim, usamos as classes “nav navbar-nav navbar-right” para declarar itens que serão alinhados à direita do menu. No caso, um campo de buscas.
Barra de navegação fixa
É possível manter a barra de navegação fixa no topo da página adicionando a classe “.navbar-fixed-top” à tag <nav>.
<nav class="navbar navbar-default navbar-fixed-top">c5_s29.html | https://goo.gl/R7L7NA
Nesse caso, a medida que a página é rolada, o menu mantém-se no mesmo lugar.
É possível ainda fixá-la no rodapé utilizando a classe “.navbar-fixed-bottom”.
Barra de navegação inversa
É possível ainda alterar a cor padrão para preto utilizando a classe “.navbar-inverse” no lugar da classe “.navbar-default”.
<nav class="navbar navbar-inverse">c5_s30.html | https://goo.gl/NBq9yE
Elementos informativos
Rótulos
Bootstrap permite a adição de estilos à tag <label> por meio da classe de mesmo nome “.label”. Cores dos rótulos podem ser definidas com as classes “.label-[cor]”. O sistema de cores é o mesmo adotado para botões: cinza (default), azul (primary), azul claro (info), vermelho (danger), laranja (warning) e verde (success).
<span class="label label-default">Padrão</span>
<span class="label label-primary">Primário</span>
<span class="label label-info">Informativo</span>
<span class="label label-danger">Problema</span>
<span class="label label-warning">Aviso</span>
<span class="label label-success">Sucesso</span>
c5_s31.html | https://goo.gl/NCiFjX
Alertas
Alertas permitem dar destaque a informações exibidas ao usuário. Podem ser aplicados a divs e outras tags. Para usá-los, utilize a classe “.alert”, seguido pela classe “.alert-[cor]”. Sendo que os alertas podem adotar as cores: verde (success – indica que algo deu certo), azul claro (info – indica que aquilo se trata de uma mensagem informativa), laranja (warning – indica que o usuário deve prestar atenção no conteúdo daquela mensagem) e vermelho (danger – indica que algo deu errado). Além disso o atributo “role” é usado para indicar que a div se trata de um alerta.
<div class="alert alert-success" role="alert">Algo deu certo! :D</div>
<div class="alert alert-info" role="alert">Estou te informando algo! ;p</div>
<div class="alert alert-warning" role="alert">Ei, mensagem importante! Preste atenção!</div>
<div class="alert alert-danger" role="alert">Algo deu errado! :(</div>
c5_s32.html | https://goo.gl/KHNQyI
Painéis
Painéis podem ser formatados com a classe “.panel”. As classes “.panel-[cor]” podem ser utilizadas para alterar o esquema de cor padrão. Onde cor adota o mesmo esquema de nomenclatura utilizado nos botões e alertas. Um painel pode ser dividido em cabeçalho, corpo e rodapé. A classe “.panel-heading” permite a configuração do cabeçalho, enquanto a classe “.panel-title” permite a formatação do título. O corpo é declarado com a classe “.panel-body”, enquanto o rodapé (opcional) com a classe “.panel-footer”. Observe o exemplo a seguir:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Título do painel</h3>
</div>
<div class="panel-body">
[...]
</div>
</div>
c5_s33.html | https://goo.gl/Dndfn5
Barras de progresso
Barras de progresso indicam o quanto uma ação foi concluída. Bootstrap possui classes especialmente tratadas para configurar barras de progresso. Barras de progresso podem ser criadas usando a classe “.progress”. Essa classe cria apenas a estrutura para a barra de progresso. Uma segunda div com a classe “.progress-bar” define o tamanho da barra de progresso. Observe o exemplo a seguir:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 70%;">
70%
</div>
</div>
c5_s34.html | https://goo.gl/dS39BT
Apesar dessa div receber o texto “70%”, essa declaração é opcional. O componente que define o tamanho da barra de progresso é “style= ‘width:70%’”.
É possível alterar a cor da barra de progresso atribuindo as classes “.progress-bar-[cor]”, onde cor pode receber as mesmas nomenclaturas que botões, painéis e rótulos. Listras podem ser adicionadas por meio da classe “.progress-bar-striped”.
Além disso, barras de progresso admitem diferentes cores e valores em uma mesma barra. Para isso, basta declarar novas divs com a classe “.bar-progress” à div pai. Observe o exemplo a seguir:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 70%;">
70%
</div>
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" style="width: 30%;">
30%
</div>
</div>
c5_s35.html | https://goo.gl/HUZJVt
Mais informações
A maior parte de conteúdo apresentado neste capítulo pode ser encontrado na documentação oficial do Bootstrap (em inglês). Para mais exemplos, consulte as configurações CSS gerais e a lista de componentes do Bootstrap em <http://getbootstrap.com>.
Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:
Capítulo 1
Introdução ao HTML
Capítulo 2
Fundamentos do HTML
Capítulo 3
Estrutura de páginas
Capítulo 4
Folhas de Estilo em Cascata (CSS)
Capítulo 5
Bootstrap
Capítulo 6
Iniciando a construção de um Website
Capítulo 7
Introdução ao PHP
Capítulo 8
Fundamentos do PHP
Capítulo 9
Transformando um Website em dinâmico
Capítulo 10
Introdução ao JavaScript
Capítulo 11
Fundamentos do JavaScript
Capítulo 12
jQuery
Capítulo 13
Bootstrap JavaScript
Capítulo 14
D3.js
Capítulo 15
3Dmol
Capítulo 16
Projeto Final
Epílogo
Referências Bibliográficas
Cite:
MARIANO, DIEGO; de MELO-MINARDI, R. C. . Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript. 1. ed. North Charleston, SC (EUA): CreateSpace Independent Publishing Platform, 2017. v. 3. ISBN: 978-1520895154; 403p .
