Bien vamos a continuar después del cabecero que hemos agregado ahora vamos a incluir algunos botones
de navegación así que vamos a negar lo siguiente Vamos a dejar una sección en esa sección vamos a agregar
el elemento el aire de Auctions
posiblemente definimos la clase de Pelle 4 que significa Padín hacia arriba e inferior con un ancho
de cuatro según los estilos definidos demostró posteriormente un margen Bodom de 4 y aplicamos el color
de fondo background light.
Posteriormente dentro de esta sección vamos a agregar un DIV
y la clase va a ser conteiner
similar a lo que ya hemos trabajado.
Ahora vamos a agregar también otro DIV con la clase de Rou
agregamos otro Dip
con la clase de Cool MD pero en este caso de tres con un ancho de tres y posteriormente agregamos un
link el HR-V va a abrir un elemento modal así que vamos a configurar este elemento para que en lugar
de que haga un link hacia otra página va a abrir un componente modal que vamos a configurar posteriormente.
Así que indicamos que se va a quedar dentro de esta misma página.
Agregamos una clase la clase de veten de botón.
Posteriormente indicamos que va a ser el estilo de botón primario between Primary y también para que
se expanda todo lo ancho disponible para este botón.
Agregamos el estilo de botón Block damos enter y seguimos agregando algunos otros elementos para poder
indicar que se abra el elemento modal que posteriormente vamos a agregar el elemento modal que se va
a visualizar es un formulario para agregar un nuevo cliente así que especificamos el atributo de data
Toggle para indicar que cuando se dé click se abra un elemento modal
indicamos el Data target el cual vamos a definir posteriormente con el Heydi de agregar cliente modal
y cerramos este link damos enter y vamos a agregar un ícono.
Utilizamos el elemento de y definimos la clase faz de Photoshop y agregamos el icono de más.
Por lo tanto utilizamos el ícono Plus.
Cerramos este elemento y agregamos el texto de agregar cliente bien así que con eso ya tenemos definido
el elemento la nueva sección para la sección que va a ser la sección
de botones de navegación guardamos cambios refrescamos y podemos observar que se ha agregado una nueva
sección en color gris debido a que aplicamos el Bagram light.
Todo esto lo pueden revisar en la documentación de Bushra y posiblemente hemos agregado un botón con
el estilo de botón primario.
Por ello se visualiza el color azul y si damos clic sobre este botón de momento no hace nada ya que
todavía no agregamos el código para que se muestre un formulario que vamos a llegar posteriormente.
Pero ya está configurado para que abra el elemento modal que posteriormente vamos a agregar y básicamente
un elemento modal es como un pop que se va a abrir una nueva ventana encima de la ventana y de esta
manera no vamos a tener que cambiar de página sino que dentro de esta misma página vamos a poder agregar
un nuevo cliente.
Así que con eso ya tenemos los botones de navegación.
Podemos dejar este código dentro de esta página o como hemos comentado podemos pasarla o podemos pasar
este código a otra página en las páginas comunes si es que lo vamos a utilizar en otras secciones así
que ya lo dejamos a su consideración pero nosotros sí lo vamos a mover a otra página así que dentro
de páginas comunes vamos a crear un nuevo JSP llamado botones
navegación damos clic en Finalizar
cerramos esta página de cabecera o ya no lo vamos a utilizar y el código que hemos agregado en esta
sección de navegación copiamos toda esta sección.
De hecho más bien la cortamos
y pegamos ese código dentro de este JSP damos un formato y ya tenemos el código en una página privada.
Ahora vamos a hacer el include de la nueva página así que en lugar de la página de cabecero vamos a
utilizar la página de botones navegación JSP guardamos cambios y vamos a revisar
refrescamos y podemos observar que todo siga funcionando correctamente se visualiza la sección el botón
con el ícono de más y con el texto agregar cliente.
Así que vamos a detener hasta que este video y vamos a continuar en el siguiente video con las demás
secciones.
Nos vemos en el siguiente video.
Saludos.