1
00:00:00,042 --> 00:00:04,268
[MUSIC]

2
00:00:04,268 --> 00:00:09,793
En la lección anterior me referí a la clase de navegación que se usa en Bootstrap para

3
00:00:09,793 --> 00:00:12,790
crear estructuras de navegación.

4
00:00:12,790 --> 00:00:17,376
Exploramos el navegador de la barra de navegación ya en el módulo anterior.

5
00:00:17,376 --> 00:00:21,660
En esta conferencia,

6
00:00:21,660 --> 00:00:26,700
vamos a explorar pestañas de navegación y pastillas de navegación con un poco más de detalle.

7
00:00:26,700 --> 00:00:29,350
Y el ejercicio que sigue,

8
00:00:29,350 --> 00:00:33,927
veremos cómo hacemos uso de esto para crear una estructura de navegación para nuestra página web.

9
00:00:36,020 --> 00:00:41,300
Las pestañas y píldoras proporcionan una interesante estructura de navegación para nuestra página web.

10
00:00:42,640 --> 00:00:47,608
Le permitirán incluir contenido dentro de su página web que

11
00:00:47,608 --> 00:00:52,201
el usuario pueda navegar entre el contenido sin volver a cargar

12
00:00:52,201 --> 00:00:55,460
la página web a otra página web.

13
00:00:55,460 --> 00:01:00,190
Así que si usted tiene una cierta cantidad de contenido para ser presentado en su página web,

14
00:01:00,190 --> 00:01:04,700
pero desea mostrar sólo

15
00:01:04,700 --> 00:01:09,855
una parte del contenido en su página web, pero aún así proporcionar al usuario la capacidad de navegar a otras partes del contenido,

16
00:01:09,855 --> 00:01:13,340
entonces las pestañas y píldoras pueden ser muy útiles para este propósito.

17
00:01:14,390 --> 00:01:18,290
¿ Qué es mejor que simplemente ir y echar un vistazo al uso de pestañas y

18
00:01:18,290 --> 00:01:19,790
píldoras en la navegación?

19
00:01:20,860 --> 00:01:25,430
Echando un vistazo a un ejemplo del uso de pestañas en la navegación,

20
00:01:25,430 --> 00:01:28,890
verá que en este caso particular, tiene

21
00:01:29,910 --> 00:01:34,570
la información de liderazgo corporativo en nuestra página aboutus.html,

22
00:01:34,570 --> 00:01:40,240
encerrada dentro de pestañas con la pestaña de navegación construida en la parte superior.

23
00:01:40,240 --> 00:01:44,740
Así que usted puede ver que usted tiene los cuatro líderes corporativos diferentes

24
00:01:44,740 --> 00:01:47,270
representados en su propia pestaña aquí.

25
00:01:47,270 --> 00:01:52,080
Y el contenido actualmente revelado en la página web es sólo

26
00:01:52,080 --> 00:01:55,270
los detalles sobre el primer líder corporativo.

27
00:01:55,270 --> 00:02:00,280
Así que si desea cambiar a otros, simplemente haga clic en

28
00:02:00,280 --> 00:02:05,520
la pestaña correspondiente y luego revele ese contenido en su página web.

29
00:02:05,520 --> 00:02:08,610
Así que tenga en cuenta que no estamos navegando a una página web diferente, pero

30
00:02:08,610 --> 00:02:13,590
simplemente estamos revelando el contenido usando esta pestaña de navegación aquí.

31
00:02:15,030 --> 00:02:17,980
En su lugar, en algunos casos puede encontrar

32
00:02:17,980 --> 00:02:22,650
una navegación basada en píldoras más útil para su propósito.

33
00:02:22,650 --> 00:02:25,150
Así que una navegación basada en píldoras funciona así.

34
00:02:25,150 --> 00:02:29,210
Así que todavía tiene la misma estructura de navegación en la parte superior aquí, pero

35
00:02:29,210 --> 00:02:34,270
la información que se muestra actualmente se resaltará como una píldora aquí.

36
00:02:34,270 --> 00:02:39,760
Por lo tanto, si cambia a otra parte de su navegación, observe cómo

37
00:02:39,760 --> 00:02:45,600
ese elemento en particular está siendo resaltado en la página web,

38
00:02:45,600 --> 00:02:49,500
y la información correspondiente se muestra en el contenido de la pestaña abajo.

39
00:02:49,500 --> 00:02:51,790
Así que esta es una navegación basada en píldoras.

40
00:02:51,790 --> 00:02:56,680
Entonces, esto usa píldoras de navegación en lugar de pestañas de navegación para

41
00:02:56,680 --> 00:03:02,030
la clase que se aplica a la clase de navegación allí.

42
00:03:02,030 --> 00:03:06,770
Ahora que ha visto un ejemplo del uso de la navegación con pestañas y de extracción

43
00:03:06,770 --> 00:03:12,180
en una página web, estoy seguro de que tiene curiosidad por saber cómo se construye realmente.

44
00:03:12,180 --> 00:03:16,310
Eso es lo que vamos a explorar en el próximo ejercicio.

45
00:03:16,310 --> 00:03:20,418
Así que usaremos la navegación con pestañas y luego usaremos el contenido de las

46
00:03:20,418 --> 00:03:25,940
pestañas y los paneles de pestañas para organizar el contenido real que se mostrará en nuestra página web.

47
00:03:25,940 --> 00:03:29,369
[ MÚSICA]