Bienvenido de nuevo a esta lección, vamos a seguir trabajando en tu campamento.
Ya hemos hecho la configuración inicial.
Hemos hecho algunos diseños básicos, agregamos el encabezado y el pie de página de Parshall. Añadimos el
arranque y agregamos la funcionalidad de crear nuevos campamentos.
Ahora vamos a ir al estilo de la página de campings usando bootstrap.
Entonces empecemos.
Lo primero que haré es asegurarme de que mis servidores se estén ejecutando.
Y solo eche un vistazo a lo que tenemos ahora.
Definitivamente un poco decepcionante.
Entonces tengo dos objetivos principales.
El primero es que queremos un encabezado mejor en el título hasta aquí, así que debería verse mejor.
Vamos a usar lo que se llama jumbotron en Bootstrap y luego también en los campamentos, la
lista de campings no debería mostrarse verticalmente así.
En su lugar, queremos una cuadrícula de imágenes más pequeñas que se crucen y esa cuadrícula debe ser receptiva.
Comencemos con el primero que obtiene este texto del título para que se vea un poco mejor.
Así que voy a abrir campamentos que sí, voy a trabajar aquí.
Así que voy a cambiar el tamaño de esto un poco porque vamos a escribir un poco de correo HD y no
vamos a hacer nada con un terminal en absoluto.
Entonces, para trabajar en el encabezado vamos a usar una etiqueta de encabezado que no hemos visto antes.
Funcionalmente funciona de la misma manera que algo así como un div.
La única diferencia es que esto tiene un poco de significado semántico.
Usar encabezado en lugar de solo un div arbitrario, pero en realidad no importa, es solo un contenedor.
Y vamos a darle una clase de jumbotron y luego, dentro de eso, agregaremos bien solo copiemos este
H-1 en realidad y lo dejaremos así y guardaremos Frigo y actualizaremos nuestra página.
Ahora tenemos lo que se llama el Jumbotron.
Todavía no es genial.
Lo siguiente que debemos hacer es hacer que todo esté dentro de un contenedor de bootstrap.
Entonces todo lo que vemos aquí todo esto voy a sangrar y voy a agregar un
div con clase igual a contenedor así.
Y luego vamos a pegar todo dentro de eso y esto agregará algo de especificación para nosotros en los lados.
Refrescar.
Puedes ver que ya no tenemos las cosas en el lado izquierdo aquí.
Tenemos espacio y nuestro JumboTron se ve un poco más cerca y eventualmente aparecerá
una barra naff.
Así que esto se verá un poco más agradable también.
Por ahora solo tenemos el Jumbotron.
Ahora cambiemos el texto en sí.
Entonces, en lugar de que esta sea la página de los campamentos, pongamos un mensaje de bienvenida. Bienvenidos al campamento.
libre de poner cualquier contenido que desees y también
agregaré un párrafo en el párrafo. Añadiré solo un pequeño tipo de eslogan y solo diré "mira nuestra mano" y elige campings de todo el mundo.
Siéntete
Algo así realmente no importa.
Guardaremos la actualización
OK, ahora tenemos una pequeña línea de etiquetas y lo último que queremos hacer es cuidar este enlace.
El add new camping link.
Así que voy a copiar eso y también ponerlo dentro del Jumbotron.
Sin embargo, voy a convertirlo en un botón.
de arranque para hacer eso o para agregar un párrafo primero y luego poner la etiqueta de anclaje dentro de eso.
Uno de los botones
Y lo estoy haciendo por espacio.
Quiere que esté en su propia línea y luego voy a darle a
la clase de botón varias clases de PTEN ETN primaria para el color y entre guiones grandes como esa y guardará.
Ahora hemos tenido un nuevo botón de campamento.
Hacemos clic en él y nos lleva al formulario que está completamente diseñado.
Una cosa menor es que si cambio el tamaño de esta ventana aquí.
Observe cómo nuestro texto va justo contra el borde del Jumbotron, que no es genial.
Tenemos un espacio aquí y quieren mantener ese espacio. Lo que tendremos
que hacer es agregar otro contenedor dentro del Jumbotron para que la clase div sea igual al contenedor y luego aquí abajo en el Jumbotron antes del
final en el divisor de cierre y luego solo sangrar. todo.
Y ahora si actualizamos
Ella se veía igual pero cuando lo redujimos ahora tenemos algo de espacio allí.
OK, así que esa es la parte del encabezado.
Ahora queremos trabajar en esa grilla de imágenes y seré directo contigo.
Definitivamente es un poco más trabajo.
OK comencemos en esa grilla y comenzaremos creando una fila para que la clase div iguale a la fila
así y comenzaré con un pequeño mensaje aquí.
Así que vamos a agregar una clase div igual y voy a hacer que esto ocupe todo el ancho y vamos a
tener un mensaje aquí y H-3 que dice que nuestros sitios más populares son campings que conoces no
se verá mucho.
Por ahora volvamos y comencemos agregando en la fila de la clase div, que necesitamos todo en nuestra escuela primaria
en una fila.
Es una clase div igual a una fila así.
Y ahora tenemos que hablar de esto para cada bucle porque lo que realmente queremos hacer es reemplazar a
nuestra grilla dentro de la fila para cada campamento, queremos hacer un div que tenga una columna de clase y una
columna usando la grilla bootstrap.
Así que voy a hacer eso ahora, donde voy a poner todo este código para que cada bucle
tenga sangría así.
Y luego necesitamos nuestra etiqueta div de cierre aquí.
Así que esto es para la fila clásica y esto es para el contenedor.
DE ACUERDO.
Así que en una fila de clase y en lugar de simplemente dejar este contenido como div y aquí
con una H para una imagen todavía tendremos una imagen, pero vamos a cambiar esta div para que tenga una clase de columna
de tres en columna pequeña 6 y eso es solo para que responda de manera que obtengamos imágenes más grandes cuando el tamaño de
la pantalla sea más grande.
Y luego, cuando lo reduzcamos, bajará a solo dos imágenes por fila y luego se reducirá aún
más a una sola imagen por fila.
miniatura que es una clase de arranque que nos ayudará a hacer una pequeña tarjeta que hará que un pequeño
elemento de cuadrícula dentro de esa miniatura agregará el imagen para comenzar así.
Así que dentro de eso vamos a agregar otro div y este div va a tener una clase de
Tenemos servicios de imágenes iguales al campamento que RL Y lo dejaremos así.
Y vamos a deshacernos de esto por ahora y solo ahorrar y veamos qué obtenemos si estamos frescos.
Todo bien.
Entonces, tenemos una grilla de imágenes ahora.
Solo hay tres pero estamos obteniendo esta grilla.
Y te mostraré lo que quise decir al hacer que responda.
Entonces, como un encogimiento, observe cómo cambia a dos cuadrados o dos elementos en la pantalla.
Recuerde que hay 12 unidades.
Entonces, lo que tuvimos primero es dividiéndolo en cuatro pedazos, donde cada uno extrajo tres unidades y luego, cuando la
cuadrícula se hace más pequeña aquí, cada uno ocupa seis unidades y aún más pequeño va automáticamente
a uno.
Y no tuvimos que escribir eso porque el valor predeterminado más pequeño es usar 12 unidades.
Entonces no tuvimos que especificar eso.
Ahora volvamos a poner el título en el nombre de este campamento y no solo a la edad
para que uno haga otra clase de arranque. Una clase div equivale a un título así.
Y luego dentro pondrá una H para el nombre del campamento.
OK, ahorremos, veamos qué aspecto tiene.
Aquí vamos.
Obtenemos estas lindas tarjetas pequeñas.
Esta es la clase de miniatura que hace eso por nosotros.
Tenemos nuestras imágenes
Y veamos cómo se ve si tenemos un montón de imágenes en un montón de elementos.
Entonces no tienes que hacer esto, pero voy a pegar esto aquí.
Solo danos más datos.
Serán datos duplicados, pero está bien.
Y luego tenemos que asegurarnos de que agreguemos las comas correctas y, por lo tanto, comas allí y llegar allí.
Ahora si actualizamos Oh, necesitamos reiniciar el servidor.
Y cada vez que nos metimos con la aplicación.
Sí.
Y ahora si actualizamos, verá que tenemos un pequeño problema.
Nuestra grilla está un poco desordenada.
Y lo que está sucediendo es que tenemos imágenes que son de diferentes alturas.
Entonces este Salmon Creek es diferente a estos.
Aunque el ancho es el mismo en este caso.
Y eso está saliendo de la cuadrícula y hay una manera fácil de arreglarlo, aunque es un poco inestable.
Y te mostraré cómo lo hacemos en lugar de nuestro campamento.
Sí.
En el día de la fila de clase voy a agregar un atributo de estilo y voy a hacer esto temporalmente.
a una hoja de estilo externa, pero voy a hacerlo en línea para que sea más fácil de ver.
Vamos a mover esto
Así que configuramos el estilo para que sea flexible y flexible.
Y esas son dos propiedades que ayudarán a nuestra grilla.
Entonces, si estuviera fresco Ahora terminamos con la grilla donde es más flexible.
No importa que tengamos alturas diferentes porque ahora la cuadrícula se adapta. Así que hay más espacio
entre estos dos y allí está aquí.
Básicamente se da cuenta de la cantidad mínima de espacio necesario donde podemos tener todo en
su propia línea, donde podemos tener todo perfectamente alineado.
Y hay otro cambio que podemos hacer que consiste en volver atrás y agregar el texto Center, que es un programa
de arranque para nosotros que hará que nuestro texto se centre allí mismo.
Y creo que se ve un poco mejor.
También es una cuestión de preferencia personal y ahora hemos terminado con la página de camping por el momento.
Esperemos que eso te muestre cómo el bootstrap realmente nos puede ayudar a hacer las cosas bastante fáciles,
especialmente en comparación con hacerlo desde cero.
Y déjame mostrarte nuestra buena red receptiva que tenemos.
Entonces esto está en el móvil.
Obtenemos este diseño agradable hasta en cuatro imágenes.
De acuerdo, estoy bastante contento de cómo se ve esto.
Te veré en el siguiente video