Bootstrap JavaScript – Diego Mariano

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.

Além de ser um framework CSS, Bootstrap também apresenta uma série de funções JavaScript. Neste capítulo aprenderemos como utilizar algumas funções muito importantes do Bootstrap, como por exemplo, criar menus suspensos, popovers, modais e carrosséis.

Declarando o Bootstrap JavaScript

Após baixar o Bootstrap, copie as pastas “css”, “font” e “js” para seu projeto. A pasta “js” possui diversos arquivos. Vamos declarar apenas o arquivo “boostrap.min.js” dentro da tag <footer> de sua página. É recomendado declarar scripts no final de um arquivo HTML. Bootstrap requer que o JQuery esteja instalado. Faça download da última versão do jQuery e insira o arquivo na pasta “js”. Declare-o logo acima da declaração do “bootstrap.min.js”.

Não se esqueça de declarar os arquivos CSS: “boostrap.min.css” e “bootstrap-theme.min.js” na tag <head>.

<!DOCTYPE HTML>
<html>
<head>
    <title>Bootstrap JavaScript</title>
    <meta charset="utf-8">
    <!-- Estilos -->
<link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-theme.min.css">
</head>
<body>
<!-- INÍCIO DO CONTEÚDO AQUI -->
<!-- FIM -->
<footer>
    <!-- Scripts -->
    <script src="jquery-3.2.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
</footer>
</body>
</html>

c13_s1.html | https://goo.gl/I31g65

Menu suspenso

No exemplo a seguir usaremos Bootstrap para criação de menus suspensos.

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Botão <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Ação</a></li>
    <li><a href="#">Outra ação </a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Link separado</a></li>
  </ul>
</div>

c13_s2.html | https://goo.gl/5EKJZA

Observe agora o que acontece o menu é clicado.

O atributo responsável para que o menu suspenso funcione corretamente é o: data-toggle=”dropdown”. A seguir, uma lista (tag <ul>) de classe “.dropdown-menu” é mantida oculta até que o botão seja clicado.

Popover

Popovers são pequenos balões que ao serem clicados podem exibir mais informações. Observe o exemplo a seguir:

<!DOCTYPE HTML>
<html>
<head>
    <title>Bootstrap JavaScript</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<!-- INICIO -->
<a href="#" class="btn btn-default" data-toggle="popover" id="saiba_mais" title="Meu primeiro Popover" data-content="Mensagem passada pelo popover">Clique para saber mais</a>
<!-- FIM -->
<footer>
    <!-- Scripts -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
  <script>$('#saiba_mais').popover();</script>
</footer>
</body>
</html>

c13_s3.html | https://goo.gl/JGPbmr

Para que o link funcionasse foi necessário acrescentar os atributos “data-toggle” (com o valor popover), uma ID, um título e um “data-content” com os dados que deseja exibir.

<a data-toggle="popover" id="saiba_mais" title="Meu primeiro Popover" data-content="Mensagem passada pelo popover">
    Clique aqui para saber mais
</a>

c13_s4.html | https://goo.gl/JgeyVR

Você ainda pode usar o atributo “data-placement” para definir a posição de aparecimento do popover, por exemplo, em data-placement=”top” o modal aparecerá sobre o botão.

Ao final do script também é necessário inserir um script JQuery para habilitar o popover:

<script>$('#saiba_mais').popover();</script>

c13_s5.html | https://goo.gl/oBKteU

Modal

Modais permitem a exibição de caixas de diálogo que cobrem toda a página. Ao carregar um modal, uma tela preta semitransparente cobrirá o resto da página, dando destaque a caixa de diálogo principal.

Para compreendermos como desenvolver um modal vamos dividi-lo em duas partes: (1) botão de chamada para o modal; e (2) div do modal.

Modal (Bootstrap)

Botão de chamada para o modal

Esse botão (ou link) deve receber os atributos: (1) data-toggle=”modal”; e (2) data-target=”nome_ID_div”.

<!-- Botão de chamada do MODAL -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#info">
  Meu Modal
</button>
<!-- FIM Botão de chamada do MODAL -->

c13_s6.html | https://goo.gl/btWp1o

Divs do modal

As divs que contém o modal podem estar localizadas em qualquer parte da página, desde que estejam abaixo do botão que chama o modal. Lembre-se que o ID da div deve ser o mesmo declarado no atributo “data-target”.

A principal div deve receber as classes “modal” e “fade”. Ela também deve receber o ID. Abaixo dela deve seguir as divs com classes “modal-dialog”, seguido pela div de class “modal-content”. Dentre dessa div deve haver três divs com as seguintes classes:

Modal-title: recebe o título do modal;
Modal-body: recebe o conteúdo (textos e imagens) aplicado ao modal;
Modal-footer: recebe botões de salvar ou sair.

Observe agora a implementação da segunda parte do código (lembre-se que sem o botão demonstrado anteriormente este código não funciona).

<!-- Modal -->
<div class="modal fade" id="info" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- FIM Modal -->

c13_s7.html | https://goo.gl/btWp1o

O atributo dismiss=”modal” é o responsável por fechar o modal. Além disso, ao clicar fora da caixa de diálogo também a fecha.

Largura de modais

Pode-se aplicar a classe “modal-sm” a mesma div que recebe “modal-dialog” para reduzir o tamanho do modal.

<div class="modal-dialog modal-sm" role="document">

c13_s8.html | https://goo.gl/N8Rlly

Aplicando-se a classe “modal-lg” a mesma div que recebe “modal-dialog” aumenta-se o tamanho do modal.

<div class="modal-dialog modal-lg" role="document">

c13_s9.html | https://goo.gl/D6z440

Carrossel

O carrossel (carousel) permite que uma série de imagens seja exibida na tela por um tempo determinado. Para o exemplo a seguir, coletaremos e modificaremos três imagens com direitos autorais que permitem a livre edição. As imagens devem ter exatamente o mesmo tamanho. Escolha o tamanho que melhor lhe convém (no nosso exemplo as imagens têm 250px de largura e 500px de altura). Se você utilizar tamanhos diferentes, o carousel automaticamente se ajustará, mas isso não é considerado uma boa prática.

Carousel (Bootstrap)

Inicialmente insira as imagens em uma pasta chamada “img”. Agora digite o código-fonte a seguir:

<!DOCTYPE HTML>
<html>
<head>
    <title>Bootstrap JavaScript</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
  <!-- INICIO -->
  <div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicadores -->
    <ol class="carousel-indicators">
      <li data-target="#carousel" data-slide-to="0" class="active"></li>
      <li data-target="#carousel" data-slide-to="1"></li>
      <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <!-- Imagens -->
    <div class="carousel-inner" role="listbox">
      <div id="#imagem_0" class="item active">
        <img src="img/1.png" alt="Imagem 1">
        <div class="carousel-caption">
          Esta é uma proteína!
        </div>
      </div>
      <div class="item">
        <img src="img/2.png" alt="Imagem 2">
        <div class="carousel-caption">
          Esta é outra proteína!
        </div>
      </div>
      <div class="item">
        <img src="img/3.png" alt="Imagem 3">
        <div class="carousel-caption">
          <h3>Proteína</h3>
          <p>Mais uma proteína!</p>
        </div>
      </div>
    </div>
    <!-- Controle -->
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Anterior</span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Posterior</span>
    </a>
  </div>
  <!-- FIM -->
  <footer>
   <!-- Scripts -->
   <script src="js/jquery-3.2.1.min.js"></script>
   <script src="js/bootstrap.js"></script>
 </footer>
</body>
</html>

c13_s10.html | https://goo.gl/7sfpNd

Ao final você obterá a seguinte página:

Vamos dividir a explicação do carousel em três partes: (1) indicadores; (2) imagens; e (3) controles.

Os indicadores são pontos que determinam qual a imagem atual. Por padrão as imagens vão trocando a cada cinco segundos. Ao clicar em um dos indicadores, o slider automaticamente pula pra imagem em questão. Eles devem ser indicados como itens (li) de uma lista (ol), e devem ter os atributos data-target=”#carousel” e data-slide-to=”número_da_imagem”. A tag <ol> deve ter a classe “carousel-indicators”. A div mãe também deve receber o id #carousel.

Imagens devem ser inseridas dentro de divs, cuja classe deve ser item. Cada imagem pode receber uma legenda desde que essa esteja dentro de uma div cuja classe seja “carousel-caption”.

Por fim, os controles permitem que se volte ou avance para a próxima imagem. A figura recebe a classe “left carousel-control” para voltar ou “right carousel-control” para avançar.

Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:

Web Design: Construa Sites com PHP, HTML, CSS e JavaScriptCurso completo para aprender a construir sites usando as linguagens web mais conceituadas do mercado

Web Design com Adobe XD, Bootstrap, GIMP, HTML e PhotoshopCrie sites com design elegante em poucas linhas de código usando Adobe XD, Bootstrap 4, FontAwesome e DataTables

Introdução à linguagem JavaScriptCurso para aprender programação front-end usando a linguagem JavaScript

Livro Introdução à Programação para Web para Bioinformática: HTML, CSS, PHP & JavaScript

_{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 .