1
00:00:00,310 --> 00:00:05,580
Bien vamos a continuar después del cabecero que hemos agregado ahora vamos a incluir algunos botones

2
00:00:05,580 --> 00:00:12,210
de navegación así que vamos a negar lo siguiente Vamos a dejar una sección en esa sección vamos a agregar

3
00:00:12,270 --> 00:00:14,010
el elemento el aire de Auctions

4
00:00:17,420 --> 00:00:25,630
posiblemente definimos la clase de Pelle 4 que significa Padín hacia arriba e inferior con un ancho

5
00:00:25,630 --> 00:00:32,680
de cuatro según los estilos definidos demostró posteriormente un margen Bodom de 4 y aplicamos el color

6
00:00:32,680 --> 00:00:34,890
de fondo background light.

7
00:00:35,410 --> 00:00:38,290
Posteriormente dentro de esta sección vamos a agregar un DIV

8
00:00:41,450 --> 00:00:42,910
y la clase va a ser conteiner

9
00:00:45,570 --> 00:00:47,520
similar a lo que ya hemos trabajado.

10
00:00:47,700 --> 00:00:51,660
Ahora vamos a agregar también otro DIV con la clase de Rou

11
00:00:55,220 --> 00:00:56,250
agregamos otro Dip

12
00:00:59,600 --> 00:01:09,180
con la clase de Cool MD pero en este caso de tres con un ancho de tres y posteriormente agregamos un

13
00:01:09,180 --> 00:01:17,340
link el HR-V va a abrir un elemento modal así que vamos a configurar este elemento para que en lugar

14
00:01:17,340 --> 00:01:23,150
de que haga un link hacia otra página va a abrir un componente modal que vamos a configurar posteriormente.

15
00:01:23,400 --> 00:01:26,300
Así que indicamos que se va a quedar dentro de esta misma página.

16
00:01:26,640 --> 00:01:31,750
Agregamos una clase la clase de veten de botón.

17
00:01:31,820 --> 00:01:40,290
Posteriormente indicamos que va a ser el estilo de botón primario between Primary y también para que

18
00:01:40,290 --> 00:01:43,620
se expanda todo lo ancho disponible para este botón.

19
00:01:43,620 --> 00:01:51,420
Agregamos el estilo de botón Block damos enter y seguimos agregando algunos otros elementos para poder

20
00:01:51,420 --> 00:01:56,760
indicar que se abra el elemento modal que posteriormente vamos a agregar el elemento modal que se va

21
00:01:56,760 --> 00:02:03,390
a visualizar es un formulario para agregar un nuevo cliente así que especificamos el atributo de data

22
00:02:03,820 --> 00:02:09,600
Toggle para indicar que cuando se dé click se abra un elemento modal

23
00:02:12,750 --> 00:02:20,200
indicamos el Data target el cual vamos a definir posteriormente con el Heydi de agregar cliente modal

24
00:02:20,440 --> 00:02:25,390
y cerramos este link damos enter y vamos a agregar un ícono.

25
00:02:25,660 --> 00:02:35,670
Utilizamos el elemento de y definimos la clase faz de Photoshop y agregamos el icono de más.

26
00:02:35,670 --> 00:02:37,930
Por lo tanto utilizamos el ícono Plus.

27
00:02:37,950 --> 00:02:45,740
Cerramos este elemento y agregamos el texto de agregar cliente bien así que con eso ya tenemos definido

28
00:02:46,040 --> 00:02:50,450
el elemento la nueva sección para la sección que va a ser la sección

29
00:02:54,780 --> 00:03:04,420
de botones de navegación guardamos cambios refrescamos y podemos observar que se ha agregado una nueva

30
00:03:04,420 --> 00:03:08,920
sección en color gris debido a que aplicamos el Bagram light.

31
00:03:09,000 --> 00:03:14,350
Todo esto lo pueden revisar en la documentación de Bushra y posiblemente hemos agregado un botón con

32
00:03:14,350 --> 00:03:15,890
el estilo de botón primario.

33
00:03:15,910 --> 00:03:21,770
Por ello se visualiza el color azul y si damos clic sobre este botón de momento no hace nada ya que

34
00:03:21,770 --> 00:03:26,260
todavía no agregamos el código para que se muestre un formulario que vamos a llegar posteriormente.

35
00:03:26,330 --> 00:03:32,060
Pero ya está configurado para que abra el elemento modal que posteriormente vamos a agregar y básicamente

36
00:03:32,090 --> 00:03:38,480
un elemento modal es como un pop que se va a abrir una nueva ventana encima de la ventana y de esta

37
00:03:38,480 --> 00:03:43,910
manera no vamos a tener que cambiar de página sino que dentro de esta misma página vamos a poder agregar

38
00:03:43,910 --> 00:03:45,500
un nuevo cliente.

39
00:03:45,500 --> 00:03:47,790
Así que con eso ya tenemos los botones de navegación.

40
00:03:47,960 --> 00:03:54,710
Podemos dejar este código dentro de esta página o como hemos comentado podemos pasarla o podemos pasar

41
00:03:54,770 --> 00:04:00,470
este código a otra página en las páginas comunes si es que lo vamos a utilizar en otras secciones así

42
00:04:00,470 --> 00:04:05,570
que ya lo dejamos a su consideración pero nosotros sí lo vamos a mover a otra página así que dentro

43
00:04:05,570 --> 00:04:11,750
de páginas comunes vamos a crear un nuevo JSP llamado botones

44
00:04:15,150 --> 00:04:17,670
navegación damos clic en Finalizar

45
00:04:21,630 --> 00:04:27,160
cerramos esta página de cabecera o ya no lo vamos a utilizar y el código que hemos agregado en esta

46
00:04:27,160 --> 00:04:30,300
sección de navegación copiamos toda esta sección.

47
00:04:30,430 --> 00:04:31,780
De hecho más bien la cortamos

48
00:04:34,860 --> 00:04:42,050
y pegamos ese código dentro de este JSP damos un formato y ya tenemos el código en una página privada.

49
00:04:42,120 --> 00:04:47,520
Ahora vamos a hacer el include de la nueva página así que en lugar de la página de cabecero vamos a

50
00:04:47,520 --> 00:04:52,950
utilizar la página de botones navegación JSP guardamos cambios y vamos a revisar

51
00:04:55,380 --> 00:05:02,220
refrescamos y podemos observar que todo siga funcionando correctamente se visualiza la sección el botón

52
00:05:02,370 --> 00:05:06,090
con el ícono de más y con el texto agregar cliente.

53
00:05:06,330 --> 00:05:10,110
Así que vamos a detener hasta que este video y vamos a continuar en el siguiente video con las demás

54
00:05:10,110 --> 00:05:10,810
secciones.

55
00:05:10,920 --> 00:05:12,190
Nos vemos en el siguiente video.

56
00:05:12,270 --> 00:05:12,870
Saludos.