1
00:00:03,670 --> 00:00:09,835
Neste exercício, vamos explorar a navegação baseada em guias do Bootstrap, o

2
00:00:09,835 --> 00:00:11,920
suporte do Bootstrap para guias

3
00:00:11,920 --> 00:00:17,310
e como as guias podem ser usadas para organizar o conteúdo em sua página da web.

4
00:00:17,310 --> 00:00:21,165
E como você pode navegar de uma guia para outra guia

5
00:00:21,165 --> 00:00:26,235
e, em seguida, revelar o conteúdo em cada uma dessas guias na página da Web.

6
00:00:26,235 --> 00:00:30,115
Agora, você vai me ver usando a classe nav,

7
00:00:30,115 --> 00:00:34,560
e então qualificá-lo ainda mais usando a classe nav tabs.

8
00:00:34,560 --> 00:00:38,065
A mesma abordagem também pode ser usada com as pílulas de navegação

9
00:00:38,065 --> 00:00:42,740
que olhamos na palestra anterior.

10
00:00:43,470 --> 00:00:46,440
Para começar com este exercício,

11
00:00:46,440 --> 00:00:49,200
vamos para a página aboutus.html.

12
00:00:49,200 --> 00:00:50,545
E aí mesmo,

13
00:00:50,545 --> 00:00:53,690
onde temos o conteúdo da liderança corporativa lá,

14
00:00:53,690 --> 00:00:59,290
depois do h2, vou apresentar a navegação com guias.

15
00:00:59,290 --> 00:01:07,960
Então, é aqui que eu vou fazer uso do ul com as nav-tabs de navegação da classe.

16
00:01:07,960 --> 00:01:12,070
Então, você viu que antes, quando construímos a barra de navegação,

17
00:01:12,070 --> 00:01:17,215
também usamos o ul dentro da barra de navegação para especificar os itens de navegação lá.

18
00:01:17,215 --> 00:01:20,270
Abordagem semelhante aqui, exceto que aqui vamos

19
00:01:20,270 --> 00:01:24,235
usar o ul com o nav e as guias de navegação aqui.

20
00:01:24,235 --> 00:01:26,120
Então, dentro desta ul,

21
00:01:26,120 --> 00:01:33,395
vamos construir a estrutura de navegação para esta navegação com guias aqui.

22
00:01:33,395 --> 00:01:41,850
Então lá dentro, eu vou usar o item de lista com o item de navegação classe,

23
00:01:41,850 --> 00:01:48,965
e construir a navegação em torno deste item de lista.

24
00:01:48,965 --> 00:01:53,770
Então, isso introduz o primeiro item em minhas guias de navegação.

25
00:01:53,770 --> 00:02:03,605
Logo depois disso, lá dentro eu vou introduzir um a com a classe nav-link ativo.

26
00:02:03,605 --> 00:02:05,960
Então, este, como você vê,

27
00:02:05,960 --> 00:02:10,670
se você se lembrar da maneira como usamos o ul com o item de navegação e o link de navegação.

28
00:02:10,670 --> 00:02:12,995
Na barra de navegação,

29
00:02:12,995 --> 00:02:14,970
estamos vendo uma abordagem semelhante aqui.

30
00:02:14,970 --> 00:02:19,150
Então, nav-item ativo e, em seguida, href.

31
00:02:19,970 --> 00:02:24,895
Então, esta seria uma referência ao painel de tabulação mais tarde,

32
00:02:24,895 --> 00:02:28,695
que teria o ID de peter lá,

33
00:02:28,695 --> 00:02:33,310
e função é tabulação para este,

34
00:02:33,310 --> 00:02:39,560
e guia de alternância de dados.

35
00:02:39,560 --> 00:02:45,540
Então, você pode ver o componente javascript do Bootstrap entrando em imagem aqui.

36
00:02:45,540 --> 00:02:49,500
E então eu vou dizer Peter Pan,

37
00:02:49,700 --> 00:02:54,405
e depois fechar a etiqueta lá.

38
00:02:54,405 --> 00:03:01,435
Então, isso completaria nossa primeira guia em nossa navegação com guias.

39
00:03:01,435 --> 00:03:03,310
Deixe-me completar o resto do código,

40
00:03:03,310 --> 00:03:07,255
e então voltamos e revisamos o resto do código lá.

41
00:03:07,255 --> 00:03:13,630
Então, aqui você pode ver que eu completei esta estrutura de navegação aqui.

42
00:03:13,630 --> 00:03:23,635
Da mesma forma, estou definindo os itens da lista para os líderes corporativos livres restantes aqui.

43
00:03:23,635 --> 00:03:26,305
Agora isto, deixa-me guardar o troco.

44
00:03:26,305 --> 00:03:30,160
E então vamos dar uma olhada rápida na página da web.

45
00:03:30,840 --> 00:03:33,070
Mudando para a página da Web,

46
00:03:33,070 --> 00:03:37,260
agora você vê como usando as guias nav nav criamos

47
00:03:37,260 --> 00:03:42,400
essa estrutura de navegação logo abaixo da liderança corporativa aqui.

48
00:03:42,400 --> 00:03:47,110
Então, esta estrutura de navegação significa que eu deveria ser capaz de navegar e

49
00:03:47,110 --> 00:03:51,815
ver cada um deles com mais detalhes clicando sobre isso.

50
00:03:51,815 --> 00:03:54,830
Então, é assim que a navegação com guias funciona aqui.

51
00:03:54,830 --> 00:03:58,525
Agora, obviamente, o conteúdo de cada um deles deve

52
00:03:58,525 --> 00:04:02,700
mostrar apropriadamente apenas os detalhes dessa pessoa aqui.

53
00:04:02,700 --> 00:04:06,145
Então, é aqui que o uso de conteúdo com guias

54
00:04:06,145 --> 00:04:10,630
e as classes do painel de tabulação entrarão em vigor.

55
00:04:10,630 --> 00:04:13,925
E vamos colocar esse conteúdo usando isso.

56
00:04:13,925 --> 00:04:17,200
E, em seguida, amarre esta navegação,

57
00:04:17,200 --> 00:04:18,660
navegação de guias aqui em cima, para

58
00:04:18,660 --> 00:04:22,580
que apenas uma informação de um único líder corporativo

59
00:04:22,580 --> 00:04:25,380
seja exibida na tela de cada vez.

60
00:04:25,380 --> 00:04:28,910
Assim que concluirmos a configuração dessa navegação com guias,

61
00:04:28,910 --> 00:04:31,755
então vamos descer para o conteúdo real aqui.

62
00:04:31,755 --> 00:04:36,505
E agora, eu vou reorganizar esse conteúdo em quatro painéis de guias separados,

63
00:04:36,505 --> 00:04:38,840
cada um dos quais será mostrado quando

64
00:04:38,840 --> 00:04:44,010
o painel de guias correspondente for selecionado na navegação com guias.

65
00:04:44,010 --> 00:04:45,830
Então, para começar,

66
00:04:45,830 --> 00:04:50,755
a primeira coisa que vamos fazer é entrar e separar

67
00:04:50,755 --> 00:04:55,680
cada um desses quatro líderes corporativos nas quatro partes lá, para

68
00:04:55,680 --> 00:04:58,815
que seja fácil para mim ver o que estou fazendo.

69
00:04:58,815 --> 00:05:01,180
Então, no h3,

70
00:05:01,180 --> 00:05:04,355
eu estou cortando-os em quatro partes diferentes,

71
00:05:04,355 --> 00:05:08,610
e então nós seremos capazes de trabalhar com isso.

72
00:05:08,610 --> 00:05:13,395
Então, agora eu tenho um, dois, três, quatro.

73
00:05:13,395 --> 00:05:19,055
Então, esse conteúdo agora precisa ser colocado dentro de uma div

74
00:05:19,055 --> 00:05:28,540
com a classe tab-content.

75
00:05:28,540 --> 00:05:32,845
Então, todo esse conteúdo que temos para

76
00:05:32,845 --> 00:05:40,055
os quatro líderes corporativos diferentes deve ser fechado dentro de uma div tab-conteúdo lá.

77
00:05:40,055 --> 00:05:44,455
Então, agora eu coloquei isso dentro do contato guia.

78
00:05:44,455 --> 00:05:46,090
Agora, para cada um deles,

79
00:05:46,090 --> 00:05:52,235
eu preciso criar outra div com o painel de guias classes e algumas classes adicionais.

80
00:05:52,235 --> 00:05:56,430
E então organize esse contato.

81
00:05:56,430 --> 00:05:58,680
Então, vamos começar com o primeiro.

82
00:05:58,680 --> 00:06:02,215
Então, para o primeiro líder corporativo,

83
00:06:02,215 --> 00:06:07,955
vou apresentar uma nova div com papel como tabpanel.

84
00:06:07,955 --> 00:06:12,250
Então, isso serve como o painel de guias que será exibido

85
00:06:12,250 --> 00:06:17,235
quando a primeira navegação de guias for selecionada.

86
00:06:17,235 --> 00:06:22,440
E a classe correspondente que eu preciso aplicar é tab-pane.

87
00:06:22,440 --> 00:06:24,090
Então, este é o painel de guias,

88
00:06:24,090 --> 00:06:26,430
o conteúdo real que está contido lá.

89
00:06:26,430 --> 00:06:29,805
E então outra classe que eu aplico é desaparecer.

90
00:06:29,805 --> 00:06:32,920
Então, a classe fade permite que esse conteúdo se desvaneça.

91
00:06:32,920 --> 00:06:37,090
Então, esta é uma classe de animação que Bootstrap suporta.

92
00:06:37,090 --> 00:06:40,340
Além disso, eu aplico essa classe chamada show.

93
00:06:40,340 --> 00:06:43,770
A classe show especifica essencialmente

94
00:06:43,770 --> 00:06:48,425
que este conteúdo específico deve ser mostrado quando a página é renderizada pela primeira vez.

95
00:06:48,425 --> 00:06:52,870
Então, ele aplicará a classe show somente ao primeiro painel de guias,

96
00:06:52,870 --> 00:06:56,640
os painéis de guias restantes não terão a classe show aplicada.

97
00:06:56,640 --> 00:07:00,910
E a última classe que vou aplicar está ativa porque este é

98
00:07:00,910 --> 00:07:07,190
o painel de guias que será exibido na página quando a página for renderizada pela primeira vez.

99
00:07:07,190 --> 00:07:10,095
Além disso, para que a navegação funcione,

100
00:07:10,095 --> 00:07:12,760
eu preciso dar a este e ID,

101
00:07:12,760 --> 00:07:19,340
e desde que eu usei hashtag Peter para o conteúdo de navegação guia,

102
00:07:19,340 --> 00:07:23,705
então eu vou aplicar o ID como Peter aqui.

103
00:07:23,705 --> 00:07:31,680
E assim, quando isso é referido em um link lá com hashtag Peter,

104
00:07:31,680 --> 00:07:34,740
este é o painel correspondente que eu estou me referindo.

105
00:07:34,740 --> 00:07:39,885
Agora, o que eu vou fazer é eu vou copiar este div de lá.

106
00:07:39,885 --> 00:07:49,010
E então eu vou aplicar esta div para a informação do segundo líder corporativo,

107
00:07:49,010 --> 00:07:55,255
exceto que para este eu só deveria aplicar o painel de abas e encaixar.

108
00:07:55,255 --> 00:07:58,730
O show e ativo não devem ser aplicados para os três restantes.

109
00:07:58,730 --> 00:08:03,820
E a identificação aqui deve ser Danny para o segundo.

110
00:08:03,820 --> 00:08:08,190
Vou simplesmente copiar este código,

111
00:08:08,190 --> 00:08:13,460
e depois colá-lo para o terceiro líder corporativo aqui.

112
00:08:13,460 --> 00:08:20,955
E então o painel de abas e o terceiro é Agumbe.

113
00:08:20,955 --> 00:08:23,795
E o último,

114
00:08:23,795 --> 00:08:27,235
novamente, eu colo isso,

115
00:08:27,235 --> 00:08:31,640
e então a identificação deve ser mudada para Alberto,

116
00:08:31,640 --> 00:08:34,280
e fechar esta div aqui.

117
00:08:34,280 --> 00:08:39,580
Então, esta div para o último deve ser fechada nesse ponto.

118
00:08:39,580 --> 00:08:45,355
E isso deve cuidar dos quatro painéis que eu preciso.

119
00:08:45,355 --> 00:08:50,725
Entrando e recuando esse conteúdo,

120
00:08:50,725 --> 00:08:53,490
para que eu esteja satisfeito,

121
00:08:53,490 --> 00:08:56,245
minha obsessão está satisfeita lá.

122
00:08:56,245 --> 00:09:01,805
Ok, isso completa a organização do conteúdo da aba.

123
00:09:01,805 --> 00:09:04,600
Agora, vamos salvar a mudança e dar

124
00:09:04,600 --> 00:09:09,030
uma olhada rápida no que a página web parece agora.

125
00:09:09,330 --> 00:09:11,480
Indo para a nossa página web,

126
00:09:11,480 --> 00:09:19,680
agora você vê que nossa página da web está exibindo apenas o conteúdo correspondente ao CEO.

127
00:09:19,680 --> 00:09:22,825
Se você mudar para qualquer um dos outros,

128
00:09:22,825 --> 00:09:26,415
você verá que as informações correspondentes são exibidas.

129
00:09:26,415 --> 00:09:32,290
E observe como essa informação desaparece quando você seleciona esse usuário específico.

130
00:09:32,290 --> 00:09:35,400
Mas, claro, se você está feliz com isso,

131
00:09:35,400 --> 00:09:37,890
então tudo bem, podemos parar neste ponto.

132
00:09:37,890 --> 00:09:45,360
Mas eu gostaria de definir uma guia real em torno disso.

133
00:09:45,360 --> 00:09:50,370
Então, este é o lugar onde eu vou aplicar alguns atributos CSS,

134
00:09:50,370 --> 00:09:53,540
propriedades para esta guia particular aqui, de

135
00:09:53,540 --> 00:09:55,660
modo que é bom,

136
00:09:55,660 --> 00:09:58,290
estrutura de tabulação limpa sendo definido lá.

137
00:09:58,290 --> 00:10:03,590
Então, vamos criar algumas propriedades CSS para isso.

138
00:10:03,590 --> 00:10:06,855
O último passo, alternando para styles.css.

139
00:10:06,855 --> 00:10:09,555
Após o inverso da barra de navegação,

140
00:10:09,555 --> 00:10:15,530
eu vou introduzir as classes CSS para o conteúdo da guia,

141
00:10:15,530 --> 00:10:18,010
então eu especificar para o tab-content,

142
00:10:18,010 --> 00:10:29,565
border-left: 1px sólido DDD.

143
00:10:29,565 --> 00:10:48,195
E eu vou aplicar o mesmo para border-direita e inferior.

144
00:10:48,195 --> 00:10:51,310
Eu não preciso me inscrever no topo porque o topo é

145
00:10:51,310 --> 00:10:55,585
regido pela navegação de guias já.

146
00:10:55,585 --> 00:11:00,250
E então deixe-me dar um preenchimento de 10 pixels ao redor,

147
00:11:00,250 --> 00:11:02,990
e depois salvar as alterações.

148
00:11:02,990 --> 00:11:07,450
Vamos dar uma olhada em nossa página da web depois disso.

149
00:11:07,450 --> 00:11:09,980
Voltando para a nossa página,

150
00:11:09,980 --> 00:11:11,395
agora você vê uma

151
00:11:11,395 --> 00:11:14,920
estrutura agradável e limpa semelhante a guias sendo criada.

152
00:11:14,920 --> 00:11:18,355
Para que, quando você navega até cada um deles,

153
00:11:18,355 --> 00:11:24,695
essa informação correspondente seja exibida adequadamente em sua própria guia.

154
00:11:24,695 --> 00:11:28,905
Isso conclui este exercício onde analisamos

155
00:11:28,905 --> 00:11:33,120
o uso da navegação com guias para a nossa página web.

156
00:11:33,120 --> 00:11:39,435
E então vimos como podemos criar navegação de tabulação e incluir outro conteúdo.

157
00:11:39,435 --> 00:11:46,200
Este também é um bom momento para você fazer um comentário Git com as guias de mensagem.