Bienvenidos en esta clase vamos a ver un poco más sobre el layout, el diseño más robusto y también
más ordenado.
Vamos a usar los paneles de Vostra que se llaman los Carth en Bootstrap 4 en Vostra 3.
Se les conocía como panel.
Vamos a comenzar con el listado.
Nos vamos al listado.
Entonces la idea es el contenido, dejarlo dentro del panel.
Primero vamos a crear el panel con undir
con una clase CART.
Este sería nuestro panel principal que va a contener todo el contenido del listado.
Luego vamos a tener dos partes el GER y el body.
El jeeter va a contener el título, entonces Class Car Geddes y vamos a tener también un body y el body
va a contener la tabla.
Vamos a ordenar que el título va a contener el título de la página.
Entonces vamos a cortar acá título, vamos a eliminar el H1, ya que el título va a estar dentro del
getter.
Acá vamos a tener un body dentro del vey vamos a tener una CH4 para el link para que sea un poco más
vistoso.
Le vamos a dar una clase car título card title en vez de success le vamos a colocar primary.
Y vamos a guardar, vamos a ejecutar.
Vamos a levantar el navegador, listar y ahí tenemos el panel de fijan listado cliente y dentro del
panel contiene la tabla.
Queda bastante mejor, incluso se le podría dar un margen o un padding.
Entonces acá en el container vamos a agregar un estilo de Bootstrap y 4 lo que hace el PP y 4 es un
PADI en el eje vertical y con una medida de 4.
Vamos a actualizar y ahí va un padre de queda mejor.
Pero al Carth le podríamos dar un background, un fondo con pege light.
Actualizamos y queda un poco mejor.
Yetta nuestra tabla, vamos al formulario, vamos a tener algo parecido.
Por lo tanto vamos a copiar el car, GD y Car body que vamos a tener el car car GD que tener el título.
Por lo tanto, este título ya se puede quitar y tenemos que cerrar dos etiqueta la del body y la principal
ordenamos.
Ya tenemos vamos al formulario y tenemos el formulario.
Ya mucho mejor vamos al container y le damos también un P y 4 para el padding.
Excelente.
Queda mucho mejor.
Incluso le pudieron cambiar el fondo en vez del Light Dark Dark.
Y dejar el texto en blanco con texto y el color white blanco
y el botón podría quedar de color en vez de primary, podría ser un secondary que es un gris.
Un poco más claro.
Te crea cliente.
No se quedó perfecto la tabla y quedó perfecto.
El formulario
ahí pudrirán y jugando con los colores en vez de dar Olid puede ser primary.
Que de color azul o secondary de un color gris más claro que el dark.
Que puede ir variando.
Hay diferentes combinaciones.
Me gusta el Dark.
El hace juego con el botón.
Actualizamos.
Perfecto.
Para finalizar, si vamos al layout tenemos los estilos de forma remota.
Un servidor va a buscar la hoja de estilo y la carga, lo que pudiera tener que sea un tiempo de respuesta
un poco más lenta.
Pero por otro lado, no estamos cargando nuestro servidor con peticiones o request en los estilos,
pero sí sería una buena idea dejar los estilos en forma local.
Por ejemplo, en Static podrían crear dos directorios 1 CSS.
Y otro JS para lo ya escrito entonces de una forma bien simple.
Por ejemplo, copien la ruta o también se pueden ir a la página de vostra y lo descargan ahí.
Por ejemplo, pueden ir a Download y lo descargan.
O bien.
Acá tenemos el butrãn min.
Simplemente lo guardan con click derecho y lo dejan en algún lugar del equipo y después lo incluyen,
lo copian y lo dejan en las rutas, en el directorio que corresponda.
Por ejemplo, voy a copiar el bus tran min y voy a copiar.
Lo lleva clip de vostra y de requerí.
Por ejemplo, bajamos, copiamos la VL de Querí.
Acá tenemos la versión LIM que no incluye AJAX.
Por lo tanto, hay que descargar la versión completa con Ajax, que sin él es líM.
Por ejemplo, nos vamos al navegador.
Copiamos laureles.
Y le quitamos el punto Slim y dejamos solamente Vickery, la versión punto min, punto 10.
Y ahí tenemos la librería completa de Yeguada Descarga la versión completa sin él Slim Click Derecho
guardar como y lo guardan en alguna carpeta, algún directorio, por ejemplo en descargar.
Luego se van a descargar, lo copian y lo pegan en el proyecto en jotes.
Ahí lo tenemos.
Entonces Vickery min.
JS y luego hacen lo mismo con vostra mi 10.
Lo copian?
Se van al navegador.
Lo pegan.
Y otra viene completo.
Simplemente lo descargan, lo guardan en descargar y también lo copian y lo pegan en la carpeta Jotes
y que butrãn minipunto y iez y querí.
Punto.
Mi punto es la versión actual del momento.
Otra forma de descargar la librería y directamente la página.
Por ejemplo, si nos vamos a la página de Yukari y se van a descargar a Download y extraversión de Éri
esta versión completa y también la versión es lím.
Recuerden que tiene que ser la versión completa.
Acá tenemos la versión Mint que comprimida llega.
Tenemos la versión sin comprimir y por ejemplo hacen clic en Compres.
Y se descarga y querí min.
Y lo mismo con vostra se van a descargar y descargan los compilados CSS y escota es download y descargan
completo.
Ahí los comprimen y copian el javascript en el directorio JS y el CSS ButrÃn min.
Dentro del directorio static CSS.
Bien, lo siguiente es cambiar acá y renombrar laureles para que apunte al local a nuestro directorio
static css y estadi es local dentro de los recursos.
Entonces sería contain lif con el new space th th 2 punto toda VL de nuestro proyecto, ya sea hacer
controladores hacia los mapping o recursos estáticos, hoja de estilos CSS o JavaScript, teníamos que
utilizar en las rutas el arroba importante.
La година las llaves sería el path absoluto, por lo tanto debe comenzar con ese larch y cerramos la
llave.
Entonces el ArruÃ se abre la llave se cierra la llave CSS está dentro static y sería la ruta base el
ruto donde se encuentran nuestros recursos estáticos tanto los CSS como imágenes y JavaScript.
Por lo tanto, el Static como es la ruta principal no se incluye.
Lo que sí se incluye sería lo subdirectorio donde tenemos los recursos, por ejemplo CSS para las hojas
estilo en este caso ButrÃn min.
Y hacemos lo mismo con JavaScript.
Incluimos el en este pais de H.
El atributo se rece y haga sería exactamente lo mismo con el arroba.
Abrimos las llaves y cerramos ya.
Y lo mismo con dígory el arroba se abre la llave.
Acá agregamos diez J.V.
Y Querí.
Quitamos el punto slim importante y cerramos la llave.
Acá incluimos el teat importante.
Entonces, con la година JS el directorio dentro de static y el archivo o recurso.
JS jQuery y acá butrãn Bill Gates guardamos.
Vamos al ejemplo cliente click derecho ver código fuente.
Y acá tenemos el href mil.
Y acá tenemos también los script hacia los recursos estatico.
Probamos con Krom click derecho ver página fuente.
Hacemos clic en los estilos y lo carga perfecto ahí cargando el CSS en el proyecto.
Vamos a lo clip y Vickery ahí está funcionando, lo carga bien y también nos vamos a debutarÃ.
Llegamos hasta acá y cualquier duda que tengan los revisamos.
Espero que le haya gustado esta clase.
Hasta la próxima.