Na palestra anterior, vimos várias formas de revelar conteúdo aos usuários.
Então, isso seria uma sobreposição na parte superior da
sua página web para mostrar as informações aos usuários.
Então, vamos olhar para duas dessas abordagens,
Tooltips e Modals neste exercício.
Primeiro, vamos adicionar uma dica de ferramenta a esta página.
Então, indo para index.html e no Jumbotron,
vemos este botão no Jumbotron lá. A
este botão, vou adicionar uma dica de ferramenta.
Então indo para este botão,
o que eu vou fazer agora é simplesmente ir para a próxima linha para
que seja um pouco mais claro para escrever o código lá e neste botão,
eu vou introduzir a dica de ferramenta aqui.
Então, após o aviso de botão, eu diria,
data-toggle-tooltip, para que você possa ver que
o componente javascript entrando em uso aqui e, em seguida, data-html-true.
Então, se aplicarmos este atributo HTML de dados e enviá-lo para true,
isso significa que o conteúdo da dica de ferramenta pode ser estilizado usando
HTML e, em seguida, eles vão dizer a próxima linha,
Eu vou dar o atributo de título.
Então, este é o lugar onde o conteúdo da dica de ferramenta será incluído.
Então vamos dizer “ou ligue-nos em”.
Então, você pode ver que eu estou usando HTML para
formatar o conteúdo da dica de ferramenta lá.
Assim, com isso, a dica de ferramenta é introduzida no botão lá e também o último atributo que
eu vou dar é a colocação de dados que eu vou dar como inferior aqui.
Então, o que significa que esta dica de ferramenta será mostrada na parte inferior deste botão aqui.
Depois de adicionar isso no botão,
vamos agora adicionar
algum código JavaScript na parte inferior desta página, a fim de ativar esta dica de ferramenta.
Indo para a parte inferior da página,
deixe-me apresentar o script lá adicionando as tags para o script.
Dentro disso, vamos definir o código JavaScript real aqui.
Então, vamos dizer documentos em dólares.
Então, este script está usando a sintaxe jQuery aqui.
Então, isso especifica quando o documento está pronto,
quando este documento HTML específico está pronto
para renderização e definir invocar esta função particular aqui.
Então, nós fornecemos a função JavaScript a ser
invocado nesse ponto para que vamos especificar a nossa função e,
em seguida, vamos dizer entre colchetes data-toggle-tooltip e tooltip.
Então, esse é o código que vamos introduzir nesta página aqui.
Isto está na sintaxe jQuery e vamos cobrir jQuery um pouco mais no próximo módulo.
No momento, isso é especificar que, sempre que houver um atributo
desse tipo para essa tag HTML específica,
ative a dica de ferramenta.
Então, mas esta alteração irá salvar as alterações e
, em seguida, ir e dar uma olhada em como a dica de ferramenta se parece na página web.
Indo para a página web,
agora, quando seguramos nosso ponteiro do mouse sobre o padrão aqui,
você pode ver que a dica de ferramenta está sendo exibida na parte inferior aqui.
Então, você pode notar que o conteúdo desta dica de ferramenta é
exatamente o que demos como o atributo título para aquele fundo lá.
Então, é assim que podemos adicionar dicas de ferramentas à nossa página.
Dicas de ferramentas são uma boa maneira de fornecer algumas informações adicionais para
o usuário quando o usuário navega para diferentes locais na página.
Continuando com o exercício, na próxima etapa,
vamos criar um modal em nossa página web.
Este modal hospedará o formulário de login e será mostrado usando um link em sua barra de navegação.
Então, para começar, o
bootstrap aconselha que todo o código relacionado modal seja colocado no topo da sua página.
Então, eu vou entrar e escrever abaixo da barra de navegação aqui,
eu vou colocar no código para o modal lá.
Então, para criar um modal,
vou começar dizendo div ID login modal.
Então, damos um ID para este modal para que ele possa ser acionado
a partir do link navbar e, em seguida, classe como “modal fade”.
Então você vê que a classe é modal e fade significa
que quando o modal é trazido para a tela,
ele vai desaparecer na tela e a função é como uma caixa de diálogo.
Então, o que significa que ele é exibido no topo da página.
Vamos fechar a div da peça.
Então aqui dentro, vamos criar o modal.
Então, lá dentro, eu vou criar a segunda div com a classe como diálogo modal e, em seguida,
dentro aqui vamos definir o conteúdo do
modal real aqui e fechar a div.
E assim, este é para ser o conteúdo modal será estruturado aqui.
Então, dentro desta caixa de diálogo modal vamos criar outra div com
o conteúdo modal de classe e
fechar o div e um modal típico irá conter um cabeçalho modal.
Então, é aí que a próxima div vai ser hospedada.
E, em seguida, um corpo modal
que irá conter grande parte do conteúdo relacionado modal.
Todas estas seções do modal são opcionais,
mas pelo menos você deve ter uma dessas seções em seu modal
caso contrário, não faz qualquer sentido criar o modal lá.
Então, com isso, a estrutura do modal está agora pronta.
Então, vamos entrar e preencher o conteúdo neste modal.
Então agora, precisamos definir o que vai para o modal.
Agora, no cabeçalho vamos colocar em um botão,
um botão cruzado no modal que quando clicado irá descartar o modal.
Essa é a maneira usual que os modais são projetados.
E o corpo modal conterá a forma.
Agora, um modal pode conter qualquer coisa que você quiser, então, por exemplo,
se você clicar em
uma imagem em uma galeria de imagens e você quiser mostrar o tamanho maior da imagem,
mesmo lá você pode usar um modal para exibir as informações.
Agora neste exercício,
vamos usar o modal para hospedar um formulário que é mostrado para o usuário.
Ok, agora, no cabeçalho modal,
vamos introduzir um botão com
o botão tipo e a classe fechar.
Então, você vê que este é um botão que é usado para fechar o modal e, em seguida, você vai dizer,
data-dispensar e, em seguida, modal.
Então, o que isso significa é que este botão particular
quando clicado irá descartar o modal da tela.
E este botão, eu vou usar os tempos,
será exibido como uma cruz nos modais aqui.
Então eu diria vezes aqui.
Antes deste botão, vamos introduzir
um cabeçalho que vamos exibir no cabeçalho do modal então eu
vou começar com um h4 com o título modal classe.
E então dentro deste h4,
vou incluir o título do modal,
que é login porque isso vai mostrar o formulário de login.
Agora que temos colocado em alguns detalhes neste modal,
vamos adicionar o link em nossa barra de navegação que irá
acionar este modal e, em seguida, vamos ter
uma rápida olhada em como o modal se parece na tela.
Indo para a barra de navegação,
logo após a UL aqui,
vou incluir em
um link que pode ser usado para acionar a exibição e ocultação do modal.
Então, para fazer isso, eu vou entrar e usar um span com a classe navbar-text.
Isto é o que me permite incluir um link na barra de navegação e mostrá-lo como texto.
Então, dentro do span,
eu vou usar um A com o data-toggle,
para que você possa ver o data-toggle JavaScript chegando e
o data-toggle é para um modal e, em seguida, data-target.
Você se lembra que tínhamos dado o ID como login modal para nosso-
Modal que incluímos.
Então, eu vou usar isso como meu alvo de dados com o hash na frente disso.
E aqui dentro, eu vou entrar e usar
um ícone incrível fonte para um login.
Então, esta é uma fonte incrível
ícone “fa- sign-in” e diga login e feche o e-tech.
Então, com isso, vamos salvar as alterações e dar uma olhada na página da web.
Indo para a nossa página web no navegador,
agora você vê que na borda direita,
você vê este login com este ícone criado lá.
Então este é o link que vai desencadear a exibição do modal.
Então, se eu clicar neste link,
então o modal será exibido na tela.
Então note que quando criamos este modal nós dissemos,
cabeçalho que continha o login e, em seguida, também este botão e,
em seguida, o corpo, atualmente vazio, vamos introduzir mais código lá.
Agora, se você clicar neste botão, o modal desaparecerá.
Clique nisso novamente, o modal é mostrado.
Mesmo se você clicar fora do modal, o modal desaparecerá.
Então este é o comportamento do modal que temos vindo a esperar.
Agora, no próximo passo eu vou entrar e apresentar o formulário aqui.
Eu não vou explicar os detalhes do formulário porque você
já estudou formulários em uma das lições anteriores.
Então eu vou simplesmente entrar e colar o código do formulário e
, em seguida, vamos dar uma olhada no formulário no modal aqui.
Voltando ao código,
agora você pode ver que no corpo modal,
eu preenchi um formulário.
E então eu tenho dois grupos de formulários aqui com uma entrada com o tipo de e-mail
e entrada tipo senha e, em seguida, eu tenho uma caixa de seleção aqui que eu tenho.
Então, isso deve ser fácil para você decifrar o que este formulário é EEs estrutura de código,
a partir de sua compreensão de como formulários Bootstrap são projetados.
Coloquei dois botões.
Um é um botão de envio e outro é um botão de cancelamento.
O botão cancelar tem o primeiro.
O botão cancelar aqui tem o modelo de dispensa de dados.
Então, o que significa que quando você clicar no botão cancelar o modelo será descartado.
E o outro é um botão de envio que é usado para enviar o formulário.
Então, com essas alterações,
vamos salvar as alterações e, em seguida, ir e dar uma olhada em nossa página da Web.
Voltando para a página da Web,
agora você clica no login e verá um formulário para um usuário entrar.
Então você vai ver que você tem duas caixas aqui.
Caixas de entrada aqui para inserir e-mail e senha,
e, em seguida, uma caixa de seleção para dizer Lembre-se de mim.
E então você tem um login e um cancelamento.
Então, se você clicar em cancelar o modal irá embora.
Assim como quando você clica na cruz lá.
E, em seguida, se você preencher essas informações e manter o clique no login,
o processo de login deve ser iniciado.
Neste momento não temos um servidor para isso funcionar,
mas estou apenas mostrando no Bootstrap como você criaria um formulário como este.
Tenho certeza que você já viu coisas como estas em
muitos sites onde quando você clica em um botão de login
algo como este com o formulário aparece na tela
e espera que você digite as informações.
Agora você verá como aproveitar modelos para exibir
informações que sobrepõem sua página da Web.
Com isso, completamos este exercício.
Neste exercício, vimos o uso de dicas de ferramentas
e vimos o uso de modelos para exibir conteúdo.
Este é um bom momento para você fazer um git-commint com as dicas e modelos de ferramenta de mensagem.