1
00:00:03,580 --> 00:00:09,250
Na palestra anterior, vimos várias formas de revelar conteúdo aos usuários.

2
00:00:09,250 --> 00:00:11,870
Então, isso seria uma sobreposição na parte superior da

3
00:00:11,870 --> 00:00:15,285
sua página web para mostrar as informações aos usuários.

4
00:00:15,285 --> 00:00:17,880
Então, vamos olhar para duas dessas abordagens,

5
00:00:17,880 --> 00:00:21,575
Tooltips e Modals neste exercício.

6
00:00:21,575 --> 00:00:25,300
Primeiro, vamos adicionar uma dica de ferramenta a esta página.

7
00:00:25,300 --> 00:00:29,040
Então, indo para index.html e no Jumbotron,

8
00:00:29,040 --> 00:00:33,305
vemos este botão no Jumbotron lá. A

9
00:00:33,305 --> 00:00:36,000
este botão, vou adicionar uma dica de ferramenta.

10
00:00:36,000 --> 00:00:38,125
Então indo para este botão,

11
00:00:38,125 --> 00:00:44,380
o que eu vou fazer agora é simplesmente ir para a próxima linha para

12
00:00:44,380 --> 00:00:50,420
que seja um pouco mais claro para escrever o código lá e neste botão,

13
00:00:50,420 --> 00:00:53,535
eu vou introduzir a dica de ferramenta aqui.

14
00:00:53,535 --> 00:00:57,740
Então, após o aviso de botão, eu diria,

15
00:00:58,560 --> 00:01:04,550
data-toggle-tooltip, para que você possa ver que

16
00:01:04,550 --> 00:01:12,230
o componente javascript entrando em uso aqui e, em seguida, data-html-true.

17
00:01:12,230 --> 00:01:17,630
Então, se aplicarmos este atributo HTML de dados e enviá-lo para true,

18
00:01:17,630 --> 00:01:21,965
isso significa que o conteúdo da dica de ferramenta pode ser estilizado usando

19
00:01:21,965 --> 00:01:27,060
HTML e, em seguida, eles vão dizer a próxima linha,

20
00:01:27,060 --> 00:01:31,165
Eu vou dar o atributo de título.

21
00:01:31,165 --> 00:01:35,680
Então, este é o lugar onde o conteúdo da dica de ferramenta será incluído.

22
00:01:35,680 --> 00:01:42,090
Então vamos dizer “ou ligue-nos em”.

23
00:01:45,810 --> 00:01:52,950
Então, você pode ver que eu estou usando HTML para

24
00:01:52,950 --> 00:02:02,510
formatar o conteúdo da dica de ferramenta lá.

25
00:02:06,070 --> 00:02:16,315
Assim, com isso, a dica de ferramenta é introduzida no botão lá e também o último atributo que

26
00:02:16,315 --> 00:02:26,095
eu vou dar é a colocação de dados que eu vou dar como inferior aqui.

27
00:02:26,095 --> 00:02:32,700
Então, o que significa que esta dica de ferramenta será mostrada na parte inferior deste botão aqui.

28
00:02:32,700 --> 00:02:36,815
Depois de adicionar isso no botão,

29
00:02:36,815 --> 00:02:38,610
vamos agora adicionar

30
00:02:38,610 --> 00:02:45,130
algum código JavaScript na parte inferior desta página, a fim de ativar esta dica de ferramenta.

31
00:02:45,130 --> 00:02:47,505
Indo para a parte inferior da página,

32
00:02:47,505 --> 00:02:57,470
deixe-me apresentar o script lá adicionando as tags para o script.

33
00:02:57,470 --> 00:03:04,665
Dentro disso, vamos definir o código JavaScript real aqui.

34
00:03:04,665 --> 00:03:07,790
Então, vamos dizer documentos em dólares.

35
00:03:07,790 --> 00:03:13,910
Então, este script está usando a sintaxe jQuery aqui.

36
00:03:15,890 --> 00:03:20,880
Então, isso especifica quando o documento está pronto,

37
00:03:20,880 --> 00:03:23,810
quando este documento HTML específico está pronto

38
00:03:23,810 --> 00:03:28,775
para renderização e definir invocar esta função particular aqui.

39
00:03:28,775 --> 00:03:32,790
Então, nós fornecemos a função JavaScript a ser

40
00:03:32,790 --> 00:03:37,780
invocado nesse ponto para que vamos especificar a nossa função e,

41
00:03:38,570 --> 00:03:51,510
em seguida, vamos dizer entre colchetes data-toggle-tooltip e tooltip.

42
00:03:53,240 --> 00:04:01,315
Então, esse é o código que vamos introduzir nesta página aqui.

43
00:04:01,315 --> 00:04:09,255
Isto está na sintaxe jQuery e vamos cobrir jQuery um pouco mais no próximo módulo.

44
00:04:09,255 --> 00:04:13,995
No momento, isso é especificar que, sempre que houver um atributo

45
00:04:13,995 --> 00:04:19,650
desse tipo para essa tag HTML específica,

46
00:04:19,650 --> 00:04:21,570
ative a dica de ferramenta.

47
00:04:21,570 --> 00:04:25,420
Então, mas esta alteração irá salvar as alterações e

48
00:04:25,420 --> 00:04:30,510
, em seguida, ir e dar uma olhada em como a dica de ferramenta se parece na página web.

49
00:04:30,510 --> 00:04:32,760
Indo para a página web,

50
00:04:32,760 --> 00:04:36,600
agora, quando seguramos nosso ponteiro do mouse sobre o padrão aqui,

51
00:04:36,600 --> 00:04:40,755
você pode ver que a dica de ferramenta está sendo exibida na parte inferior aqui.

52
00:04:40,755 --> 00:04:44,950
Então, você pode notar que o conteúdo desta dica de ferramenta é

53
00:04:44,950 --> 00:04:50,115
exatamente o que demos como o atributo título para aquele fundo lá.

54
00:04:50,115 --> 00:04:54,095
Então, é assim que podemos adicionar dicas de ferramentas à nossa página.

55
00:04:54,095 --> 00:04:58,030
Dicas de ferramentas são uma boa maneira de fornecer algumas informações adicionais para

56
00:04:58,030 --> 00:05:03,370
o usuário quando o usuário navega para diferentes locais na página.

57
00:05:03,370 --> 00:05:06,790
Continuando com o exercício, na próxima etapa,

58
00:05:06,790 --> 00:05:10,045
vamos criar um modal em nossa página web.

59
00:05:10,045 --> 00:05:17,665
Este modal hospedará o formulário de login e será mostrado usando um link em sua barra de navegação.

60
00:05:17,665 --> 00:05:19,720
Então, para começar, o

61
00:05:19,720 --> 00:05:26,700
bootstrap aconselha que todo o código relacionado modal seja colocado no topo da sua página.

62
00:05:26,700 --> 00:05:31,530
Então, eu vou entrar e escrever abaixo da barra de navegação aqui,

63
00:05:31,530 --> 00:05:34,455
eu vou colocar no código para o modal lá.

64
00:05:34,455 --> 00:05:36,080
Então, para criar um modal,

65
00:05:36,080 --> 00:05:43,400
vou começar dizendo div ID login modal.

66
00:05:43,400 --> 00:05:48,355
Então, damos um ID para este modal para que ele possa ser acionado

67
00:05:48,355 --> 00:05:53,895
a partir do link navbar e, em seguida, classe como “modal fade”.

68
00:05:53,895 --> 00:05:56,910
Então você vê que a classe é modal e fade significa

69
00:05:56,910 --> 00:06:00,220
que quando o modal é trazido para a tela,

70
00:06:00,220 --> 00:06:07,185
ele vai desaparecer na tela e a função é como uma caixa de diálogo.

71
00:06:07,185 --> 00:06:11,625
Então, o que significa que ele é exibido no topo da página.

72
00:06:11,625 --> 00:06:14,195
Vamos fechar a div da peça.

73
00:06:14,195 --> 00:06:18,415
Então aqui dentro, vamos criar o modal.

74
00:06:18,415 --> 00:06:28,510
Então, lá dentro, eu vou criar a segunda div com a classe como diálogo modal e, em seguida,

75
00:06:28,510 --> 00:06:32,620
dentro aqui vamos definir o conteúdo do

76
00:06:32,620 --> 00:06:39,550
modal real aqui e fechar a div.

77
00:06:39,550 --> 00:06:45,220
E assim, este é para ser o conteúdo modal será estruturado aqui.

78
00:06:45,220 --> 00:06:51,370
Então, dentro desta caixa de diálogo modal vamos criar outra div com

79
00:06:51,370 --> 00:07:00,770
o conteúdo modal de classe e

80
00:07:00,770 --> 00:07:10,350
fechar o div e um modal típico irá conter um cabeçalho modal.

81
00:07:10,350 --> 00:07:14,255
Então, é aí que a próxima div vai ser hospedada.

82
00:07:14,255 --> 00:07:23,635
E, em seguida, um corpo modal

83
00:07:23,635 --> 00:07:28,980
que irá conter grande parte do conteúdo relacionado modal.

84
00:07:28,980 --> 00:07:34,835
Todas estas seções do modal são opcionais,

85
00:07:34,835 --> 00:07:38,020
mas pelo menos você deve ter uma dessas seções em seu modal

86
00:07:38,020 --> 00:07:41,645
caso contrário, não faz qualquer sentido criar o modal lá.

87
00:07:41,645 --> 00:07:46,455
Então, com isso, a estrutura do modal está agora pronta.

88
00:07:46,455 --> 00:07:50,550
Então, vamos entrar e preencher o conteúdo neste modal.

89
00:07:50,550 --> 00:07:54,005
Então agora, precisamos definir o que vai para o modal.

90
00:07:54,005 --> 00:07:57,505
Agora, no cabeçalho vamos colocar em um botão,

91
00:07:57,505 --> 00:08:01,770
um botão cruzado no modal que quando clicado irá descartar o modal.

92
00:08:01,770 --> 00:08:05,715
Essa é a maneira usual que os modais são projetados.

93
00:08:05,715 --> 00:08:08,805
E o corpo modal conterá a forma.

94
00:08:08,805 --> 00:08:12,610
Agora, um modal pode conter qualquer coisa que você quiser, então, por exemplo,

95
00:08:12,610 --> 00:08:16,040
se você clicar em

96
00:08:16,040 --> 00:08:19,630
uma imagem em uma galeria de imagens e você quiser mostrar o tamanho maior da imagem,

97
00:08:19,630 --> 00:08:24,415
mesmo lá você pode usar um modal para exibir as informações.

98
00:08:24,415 --> 00:08:26,280
Agora neste exercício,

99
00:08:26,280 --> 00:08:31,765
vamos usar o modal para hospedar um formulário que é mostrado para o usuário.

100
00:08:31,765 --> 00:08:35,695
Ok, agora, no cabeçalho modal,

101
00:08:35,695 --> 00:08:40,175
vamos introduzir um botão com

102
00:08:40,175 --> 00:08:49,170
o botão tipo e a classe fechar.

103
00:08:49,170 --> 00:08:59,080
Então, você vê que este é um botão que é usado para fechar o modal e, em seguida, você vai dizer,

104
00:08:59,080 --> 00:09:04,685
data-dispensar e, em seguida, modal.

105
00:09:04,685 --> 00:09:07,180
Então, o que isso significa é que este botão particular

106
00:09:07,180 --> 00:09:09,845
quando clicado irá descartar o modal da tela.

107
00:09:09,845 --> 00:09:18,700
E este botão, eu vou usar os tempos,

108
00:09:21,100 --> 00:09:24,900
será exibido como uma cruz nos modais aqui.

109
00:09:24,900 --> 00:09:27,380
Então eu diria vezes aqui.

110
00:09:27,380 --> 00:09:30,549
Antes deste botão, vamos introduzir

111
00:09:30,549 --> 00:09:36,470
um cabeçalho que vamos exibir no cabeçalho do modal então eu

112
00:09:36,470 --> 00:09:46,180
vou começar com um h4 com o título modal classe.

113
00:09:46,180 --> 00:09:48,635
E então dentro deste h4,

114
00:09:48,635 --> 00:09:52,200
vou incluir o título do modal,

115
00:09:52,200 --> 00:09:56,995
que é login porque isso vai mostrar o formulário de login.

116
00:09:56,995 --> 00:10:01,625
Agora que temos colocado em alguns detalhes neste modal,

117
00:10:01,625 --> 00:10:06,110
vamos adicionar o link em nossa barra de navegação que irá

118
00:10:06,110 --> 00:10:07,770
acionar este modal e, em seguida, vamos ter

119
00:10:07,770 --> 00:10:11,515
uma rápida olhada em como o modal se parece na tela.

120
00:10:11,515 --> 00:10:14,280
Indo para a barra de navegação,

121
00:10:14,280 --> 00:10:16,095
logo após a UL aqui,

122
00:10:16,095 --> 00:10:17,845
vou incluir em

123
00:10:17,845 --> 00:10:22,910
um link que pode ser usado para acionar a exibição e ocultação do modal.

124
00:10:22,910 --> 00:10:31,080
Então, para fazer isso, eu vou entrar e usar um span com a classe navbar-text.

125
00:10:31,080 --> 00:10:37,950
Isto é o que me permite incluir um link na barra de navegação e mostrá-lo como texto.

126
00:10:37,950 --> 00:10:39,995
Então, dentro do span,

127
00:10:39,995 --> 00:10:45,345
eu vou usar um A com o data-toggle,

128
00:10:45,345 --> 00:10:50,010
para que você possa ver o data-toggle JavaScript chegando e

129
00:10:50,010 --> 00:10:55,400
o data-toggle é para um modal e, em seguida, data-target.

130
00:10:55,400 --> 00:11:03,940
Você se lembra que tínhamos dado o ID como login modal para nosso-

131
00:11:04,170 --> 00:11:06,460
Modal que incluímos.

132
00:11:06,460 --> 00:11:11,950
Então, eu vou usar isso como meu alvo de dados com o hash na frente disso.

133
00:11:11,950 --> 00:11:15,815
E aqui dentro, eu vou entrar e usar

134
00:11:15,815 --> 00:11:24,520
um ícone incrível fonte para um login.

135
00:11:24,520 --> 00:11:28,710
Então, esta é uma fonte incrível

136
00:11:28,800 --> 00:11:37,945
ícone “fa- sign-in” e diga login e feche o e-tech.

137
00:11:37,945 --> 00:11:43,975
Então, com isso, vamos salvar as alterações e dar uma olhada na página da web.

138
00:11:43,975 --> 00:11:47,265
Indo para a nossa página web no navegador,

139
00:11:47,265 --> 00:11:50,530
agora você vê que na borda direita,

140
00:11:50,530 --> 00:11:56,680
você vê este login com este ícone criado lá.

141
00:11:56,680 --> 00:12:00,850
Então este é o link que vai desencadear a exibição do modal.

142
00:12:00,850 --> 00:12:02,530
Então, se eu clicar neste link,

143
00:12:02,530 --> 00:12:05,015
então o modal será exibido na tela.

144
00:12:05,015 --> 00:12:08,500
Então note que quando criamos este modal nós dissemos,

145
00:12:08,500 --> 00:12:14,565
cabeçalho que continha o login e, em seguida, também este botão e,

146
00:12:14,565 --> 00:12:17,605
em seguida, o corpo, atualmente vazio, vamos introduzir mais código lá.

147
00:12:17,605 --> 00:12:20,860
Agora, se você clicar neste botão, o modal desaparecerá.

148
00:12:20,860 --> 00:12:23,170
Clique nisso novamente, o modal é mostrado.

149
00:12:23,170 --> 00:12:25,470
Mesmo se você clicar fora do modal, o modal desaparecerá.

150
00:12:25,470 --> 00:12:30,985
Então este é o comportamento do modal que temos vindo a esperar.

151
00:12:30,985 --> 00:12:36,275
Agora, no próximo passo eu vou entrar e apresentar o formulário aqui.

152
00:12:36,275 --> 00:12:39,990
Eu não vou explicar os detalhes do formulário porque você

153
00:12:39,990 --> 00:12:43,924
já estudou formulários em uma das lições anteriores.

154
00:12:43,924 --> 00:12:47,830
Então eu vou simplesmente entrar e colar o código do formulário e

155
00:12:47,830 --> 00:12:52,370
, em seguida, vamos dar uma olhada no formulário no modal aqui.

156
00:12:52,370 --> 00:12:54,505
Voltando ao código,

157
00:12:54,505 --> 00:12:57,640
agora você pode ver que no corpo modal,

158
00:12:57,640 --> 00:13:01,115
eu preenchi um formulário.

159
00:13:01,115 --> 00:13:07,850
E então eu tenho dois grupos de formulários aqui com uma entrada com o tipo de e-mail

160
00:13:07,850 --> 00:13:14,795
e entrada tipo senha e, em seguida, eu tenho uma caixa de seleção aqui que eu tenho.

161
00:13:14,795 --> 00:13:21,970
Então, isso deve ser fácil para você decifrar o que este formulário é EEs estrutura de código,

162
00:13:21,970 --> 00:13:26,505
a partir de sua compreensão de como formulários Bootstrap são projetados.

163
00:13:26,505 --> 00:13:28,250
Coloquei dois botões.

164
00:13:28,250 --> 00:13:33,060
Um é um botão de envio e outro é um botão de cancelamento.

165
00:13:33,060 --> 00:13:36,440
O botão cancelar tem o primeiro.

166
00:13:36,440 --> 00:13:41,580
O botão cancelar aqui tem o modelo de dispensa de dados.

167
00:13:41,580 --> 00:13:45,215
Então, o que significa que quando você clicar no botão cancelar o modelo será descartado.

168
00:13:45,215 --> 00:13:50,170
E o outro é um botão de envio que é usado para enviar o formulário.

169
00:13:50,170 --> 00:13:51,480
Então, com essas alterações,

170
00:13:51,480 --> 00:13:55,550
vamos salvar as alterações e, em seguida, ir e dar uma olhada em nossa página da Web.

171
00:13:55,550 --> 00:13:57,205
Voltando para a página da Web,

172
00:13:57,205 --> 00:14:04,045
agora você clica no login e verá um formulário para um usuário entrar.

173
00:14:04,045 --> 00:14:07,025
Então você vai ver que você tem duas caixas aqui.

174
00:14:07,025 --> 00:14:09,850
Caixas de entrada aqui para inserir e-mail e senha,

175
00:14:09,850 --> 00:14:12,870
e, em seguida, uma caixa de seleção para dizer Lembre-se de mim.

176
00:14:12,870 --> 00:14:15,320
E então você tem um login e um cancelamento.

177
00:14:15,320 --> 00:14:17,860
Então, se você clicar em cancelar o modal irá embora.

178
00:14:17,860 --> 00:14:20,710
Assim como quando você clica na cruz lá.

179
00:14:20,710 --> 00:14:23,915
E, em seguida, se você preencher essas informações e manter o clique no login,

180
00:14:23,915 --> 00:14:26,120
o processo de login deve ser iniciado.

181
00:14:26,120 --> 00:14:29,885
Neste momento não temos um servidor para isso funcionar,

182
00:14:29,885 --> 00:14:34,640
mas estou apenas mostrando no Bootstrap como você criaria um formulário como este.

183
00:14:34,640 --> 00:14:37,240
Tenho certeza que você já viu coisas como estas em

184
00:14:37,240 --> 00:14:40,610
muitos sites onde quando você clica em um botão de login

185
00:14:40,610 --> 00:14:43,220
algo como este com o formulário aparece na tela

186
00:14:43,220 --> 00:14:46,585
e espera que você digite as informações.

187
00:14:46,585 --> 00:14:50,160
Agora você verá como aproveitar modelos para exibir

188
00:14:50,160 --> 00:14:54,740
informações que sobrepõem sua página da Web.

189
00:14:54,740 --> 00:14:57,910
Com isso, completamos este exercício.

190
00:14:57,910 --> 00:15:01,950
Neste exercício, vimos o uso de dicas de ferramentas

191
00:15:01,950 --> 00:15:06,835
e vimos o uso de modelos para exibir conteúdo.

192
00:15:06,835 --> 00:15:14,200
Este é um bom momento para você fazer um git-commint com as dicas e modelos de ferramenta de mensagem.