1
00:00:00,042 --> 00:00:04,268
[MÚSICA]

2
00:00:04,268 --> 00:00:09,793
Na lição anterior eu me referi à classe nav que é usada no Bootstrap para

3
00:00:09,793 --> 00:00:12,790
criar estruturas de navegação.

4
00:00:12,790 --> 00:00:17,376
Nós exploramos o navbar nav já no módulo anterior.

5
00:00:17,376 --> 00:00:21,660
Nesta palestra,

6
00:00:21,660 --> 00:00:26,700
vamos explorar guias de navegação e pílulas de navegação em um pouco mais de detalhes.

7
00:00:26,700 --> 00:00:29,350
E o exercício que se segue a isso,

8
00:00:29,350 --> 00:00:33,927
veremos como fazemos uso disso para criar uma estrutura de navegação para nossa página web.

9
00:00:36,020 --> 00:00:41,300
Tabs e pílulas fornecem uma estrutura de navegação interessante para a nossa página web.

10
00:00:42,640 --> 00:00:47,608
Eles permitirão que você coloque conteúdo dentro de sua página da web que

11
00:00:47,608 --> 00:00:52,201
o usuário pode navegar entre o conteúdo sem recarregar

12
00:00:52,201 --> 00:00:55,460
a página da web para uma página da web diferente.

13
00:00:55,460 --> 00:01:00,190
Então, se você tem uma certa quantidade de conteúdo a ser apresentado em sua página da web,

14
00:01:00,190 --> 00:01:04,700
mas quer mostrar apenas parte do conteúdo em sua página da web, mas

15
00:01:04,700 --> 00:01:09,855
ainda fornecer ao usuário a capacidade de navegar para outras partes do conteúdo,

16
00:01:09,855 --> 00:01:13,340
então guias e pílulas podem ser muito úteis para este fim.

17
00:01:14,390 --> 00:01:18,290
O que é melhor do que simplesmente ir e dar uma olhada no uso de guias e

18
00:01:18,290 --> 00:01:19,790
pílulas na navegação?

19
00:01:20,860 --> 00:01:25,430
Olhando para um exemplo do uso de guias na navegação,

20
00:01:25,430 --> 00:01:28,890
você verá que, neste caso específico, você tem

21
00:01:29,910 --> 00:01:34,570
as informações de Liderança Corporativa em nossa página aboutus.html,

22
00:01:34,570 --> 00:01:40,240
incluídas dentro de guias com a navegação de guias construída na parte superior.

23
00:01:40,240 --> 00:01:44,740
Então você pode ver que você tem os quatro líderes corporativos diferentes

24
00:01:44,740 --> 00:01:47,270
representados em sua própria guia aqui.

25
00:01:47,270 --> 00:01:52,080
E o conteúdo atualmente revelado na página web é apenas

26
00:01:52,080 --> 00:01:55,270
os detalhes sobre o primeiro líder corporativo.

27
00:01:55,270 --> 00:02:00,280
Então, se você quiser mudar para outros, basta clicar

28
00:02:00,280 --> 00:02:05,520
na guia correspondente e, em seguida, revelar esse conteúdo em sua página da web.

29
00:02:05,520 --> 00:02:08,610
Portanto, note que não estamos navegando para uma página web diferente, mas

30
00:02:08,610 --> 00:02:13,590
estamos simplesmente revelando o conteúdo usando esta guia de navegação aqui.

31
00:02:15,030 --> 00:02:17,980
Em vez disso, em alguns casos, você pode achar

32
00:02:17,980 --> 00:02:22,650
uma navegação baseada em pílulas mais útil para sua finalidade.

33
00:02:22,650 --> 00:02:25,150
Então, uma navegação baseada em pílulas funciona assim.

34
00:02:25,150 --> 00:02:29,210
Então você ainda tem a mesma estrutura de navegação no topo aqui, mas

35
00:02:29,210 --> 00:02:34,270
a informação atualmente exibida será destacada como uma pílula aqui.

36
00:02:34,270 --> 00:02:39,760
Portanto, se você mudar para outra parte de sua navegação, observe como

37
00:02:39,760 --> 00:02:45,600
esse item específico está sendo destacado na página da Web

38
00:02:45,600 --> 00:02:49,500
e as informações correspondentes são exibidas no conteúdo da guia abaixo.

39
00:02:49,500 --> 00:02:51,790
Então esta é uma navegação baseada em pílulas.

40
00:02:51,790 --> 00:02:56,680
Então, isso usa pílulas nav em vez de guias nav para

41
00:02:56,680 --> 00:03:02,030
a classe que está sendo aplicada para a classe nav lá.

42
00:03:02,030 --> 00:03:06,770
Agora que você viu um exemplo do uso de navegação com abas e pull

43
00:03:06,770 --> 00:03:12,180
em uma página da web, tenho certeza que você está curioso para saber como ele é realmente construído.

44
00:03:12,180 --> 00:03:16,310
Isso é o que vamos explorar no próximo exercício.

45
00:03:16,310 --> 00:03:20,418
Então, vamos usar navegação com guias e, em seguida, usar o conteúdo da

46
00:03:20,418 --> 00:03:25,940
guia e painéis de guias para organizar o conteúdo real que será exibido em nossa página web.

47
00:03:25,940 --> 00:03:29,369
[ MUSIC]