Bienvenidos, regresen en esta lección y nos enfocaremos en el diseño de la página del programa.
Así que ahora nuestra página de muestra se ve así.
Tenemos una pequeña barra naff aquí con los botones que no hacen nada.
Tenemos un H-1 con el nombre del camping.
Y tenemos una imagen y una descripción, y tenemos un botón para agregar un nuevo comentario y luego
se muestran todos los comentarios.
Cada uno un pequeño párrafo.
Entonces, nuestro objetivo aquí es hacer que se vea un poco más así.
Así que tengo una barra lateral aquí.
Todavía no vamos a tener el mapa, pero dejaremos espacio para el mapa y luego
tendremos nuestro contenido principal con la descripción.
Algunos leen el título, no vamos a hacer las calificaciones todavía, pero luego también tendremos una lista de comentarios
que se verán así.
Su propio pequeño contenedor allí abajo, tendré un pequeño botón para mover algunos.
Generalmente es un poco más estilizado.
Podemos agregar esto y eso dice cuántas reseñas se han dejado.
Así que eso es lo que estamos buscando.
Y para empezar solo vamos a centrarnos en la cuadrícula de arranque.
Recuerde que la cuadrícula de bootstrap tiene 12 unidades de ancho.
Vamos a designar a tres de los 12 para esta pequeña barra lateral y luego vamos a
agregar nueve para el contenido principal.
Antes de empezar a cambiar realmente cualquier cosa, quiero señalar que estoy trabajando en v 5 ahora.
Entonces, si quiere seguir, todos estos cambios estarán en V 5.
Y la razón por la que lo hago es porque vamos a tener que crear una hoja de estilo personalizada.
Vamos a tener que servir el directorio público y algunas otras cosas que son cambios sustanciales.
Así que quería hacer una versión separada.
Pero antes de hacerlo, lo primero que vamos a hacer es agregar un contenedor alrededor de todo este
contenedor de arranque.
Entonces en mostrar que E. J. va a agregar un div con clase al contenedor así y
pondremos todo dentro de eso.
Y comenzaré agregando la barra lateral y la completaremos con algunos datos ficticios como los que tenemos aquí.
y en esa fila vamos a tener otro div donde una clase es columna media tres así como así.
Entonces DIVX y esto necesita ser de clase igual a pro
Y luego, dentro de aquí, vamos a agregar un párrafo y vamos a obtener este texto que dice Joachim.
Así que ese es un párrafo donde la clase es líder y luego vamos a ponerlo en el campo, por
ahora cambiaremos esto eventualmente.
Pero sí, acampen y luego, para agregar esos pequeños elementos de la lista, haremos un div con la clase lista del grupo
del tablero y luego, aquí, vamos a agregar un grupo de aliados en cada aliado que tiene una clase de elemento del grupo de la lista.
Y dentro solo agregaremos algunos datos ficticios y lo llamaremos info 1 y luego voy
a duplicar esta información a info 3.
Y luego veamos cómo se ve eso por ahora.
Entonces, para actualizar la página, tenemos una barra lateral aquí y seleccionaré uno de estos elementos para comenzar.
Y todo lo que tenemos que hacer es agregar un activo allí mismo.
Si estamos frescos, ahora vemos que uno de ellos está activo.
Y esto es realmente solo un marcador de posición para tener algo allí, así que no tenemos mucho
espacio en blanco, pero de nuevo agregaremos datos reales allí y un mapa con el tiempo.
Y solo para señalarlo, el mapa irá aquí dentro de esta columna de tres medios con el tiempo, pero no
por el momento.
OK, así que es una barra lateral.
Ahora vamos a agregar el contenido principal.
Entonces necesitamos otra columna y esta es el medio de columna de clase 9.
Y en lugar de tener que tener el H-1, necesitamos tener la imagen, pero antes de todo, notará que en
realidad está en una de estas miniaturas, tal como lo tenemos en la página de inicio.
Cada uno de estos es una miniatura.
Vamos a hacer lo mismo con la imagen completa en el título y los comentarios, y todo eso.
Así que vamos a agregar un div y ese div tendrá una clase igual a miniatura.
Y luego, dentro de eso, vamos a agregar la imagen, y voy a fijar la imagen que ya hemos
escrito y colocarla justo allí.
Esa va a ser nuestra imagen de camping.
Y luego también queremos agregar una clase a la que bootstrapped nos da, que es la imagen de respuesta de Dasch.
Aquí vamos.
Salva eso.
Y si echamos un vistazo a lo que tenemos ahora y actualizamos, al menos tenemos la imagen y el contenido
en el lugar correcto.
Sin embargo, tenemos un problema donde esto no se está llevando a cabo con el que queremos.
Quiero que llegue hasta el final y tendremos que manejar eso con algunos C S personalizados al final.
Y ahora volveremos y agregaremos esto aquí donde tenemos el nombre del campamento y luego el precio por noche
que realmente no tenemos en la base de datos.
Entonces solo codificaremos.
Así que hagámoslo ahora.
Y ese es otro div y este tiene una clase de leyenda completa.
Y luego dentro de allí vamos a agregar una H para.
Y vamos a pasar esto a la derecha y hacemos que la clase sea igual a tirar a la derecha y luego lo
que pongamos aquí será el precio.
Y comenzaré con $ 9 por noche, una vez más, esto vendrá de la base de datos con el tiempo.
Si estamos frescos Ahora obtenemos $ 9 por noche en el lado derecho y luego queremos obtener el nombre del
campamento que voy a copiar aquí en el lado izquierdo.
Así que lo pondremos justo debajo y si no agregamos "pull right" irá automáticamente a la izquierda,
aunque eso es más grande de lo que tenía en mente y lo convertiré en una H más pequeña y voy a ir para
agregar una etiqueta de anclaje dentro de allí así y poner el nombre del campamento dentro de la etiqueta de anclaje.
Y la idea detrás de eso es que eventualmente regrese.
Esto debería ser un enlace al camping actual o la página del Servicio de Parques, donde podemos ir a reservar algo.
Por ahora, es solo el enlace a la nada.
DE ACUERDO.
Entonces tenemos eso en.
Tenemos un precio
Ahora agreguemos la descripción de nuevo.
será solo una etiqueta de párrafo y luego agregaremos en nuestra descripción, que es la descripción del campamento allí mismo.
Así que eso
Y va a ser un poco decepcionante porque no tenemos una gran suscripción en este momento, así
que quizás querríamos ir a ver la base de datos con algo de Lorem Ipsum y
voy a robar esto y copiaré eso y vuelve al archivo semilla.
Y luego, en lugar del archivo de nuestra semilla, cambiaré la descripción de los tres.
Simplemente haz que sea lo mismo en lugar de bla, bla, bla.
Ahora tenemos un poco más de Lorem Ipsum y ahorraremos.
Y para que esto entre en vigor debemos reiniciar el servidor porque eso recibirá la base de datos.
Y luego regresemos a la página de campings.
Tenemos tres campamentos.
Sin embargo, ahora tienen una descripción más legítima de algunos textos.
Bien, excelente.
Echemos un vistazo ahora en lo que tenemos que trabajar.
Hay algunas cosas menores.
Dejaremos las estrellas en el recuento de opiniones por separado por ahora y pasaremos a los comentarios.
Volvamos al programa que E. J. queremos que esté en la misma columna aquí.
Sí, podemos cerrar el archivo con las semillas, por ahora lo que vamos a hacer es agregar bien una clase bien dentro de la columna
media nueve porque
Tomando la misma cantidad de espacio.
Así que para hacer eso, simplemente ve aquí después de la miniatura así que esto y el título aquí esta es la miniatura.
Muy bien, van a agregar clase div.
Igual que bien
Y luego, dentro de eso, va a abrirlo y aquí es donde hará el bucle para agregar
los comentarios.
Pero voy a comenzar agregando en el botón la palanca de tu botón y haremos un simple
div y este div tendrá una clase de texto a la derecha.
Y luego, dentro de allí, agregaremos nuestra etiqueta de anclaje que ya tenemos para crear
un nuevo comentario.
Solo ponlo aquí.
Es largo, pero recuerda que es una etiqueta de anclaje que tiene una clase de éxito de botón de botón que
lo hace verde.
Pero la referencia es una parte realmente larga.
Va a acampar, recortar los comentarios de barra de ID de camping, cortar, pero guardar y actualizar.
DE ACUERDO.
Entonces pueden ver que ahora tenemos el pozo que nos da el bonito fondo gris en la frontera.
Aquí es donde vamos a agregar en los comentarios.
Entonces, tenemos que hacer lo siguiente, recorrer los comentarios y ya tenemos eso hecho.
Pero en lugar de simplemente hacer un párrafo para cada uno, en realidad vamos a hacer una fila por separado.
Entonces te mostraré cómo se ve cuando copia esto o lo corta.
Y podemos eliminar este párrafo adicional y vamos a ponerlo justo después del texto correcto.
Y hagámoslo correctamente
Así que tenemos nuestro ciclo y luego vamos a recorrer cada comentario y
vamos a agregar aquí una fila de clase div para cada clase div igual a fila.
Y luego dentro de cada Vamos a agregar otra clase de div igual a la columna medio 12 y guardar eso.
Y si echamos un vistazo a lo que tenemos aquí, terminamos con el nombre de usuario de nombre de usuario de slash de correo electrónico
que llamamos el autor.
Y luego a la derecha hay esta vez hace 10 días, que solo codificará por ahora y luego
aparecerá el comentario real.
Entonces, para que funcione, necesitamos hacer algo de texto y luego hacer algo en el derecho de extraer texto a la
derecha y luego tenemos que agregar un párrafo para el comentario en sí mismo.
Intentemos eso y entremos aquí.
Tenemos nuestro medio de columna 12.
Y dentro de eso vamos a comenzar agregando el autor del comentario.
Así que solo agreguemos eso allí mismo.
Y a continuación, agregaremos un lapso y este será a la derecha.
Así que agregaremos el tirón clásico a la derecha.
Y luego aquí solo agregaremos hace diez días por ahora.
Bueno, solo código difícil que en.
Y luego, lo último que quieren hacer es mostrar el texto del comentario.
Así que voy a obtener este texto de comentario aquí y lo pondremos dentro de su propio párrafo,
que ya tenemos aquí así, excepto que queremos moverlo dentro de la columna aquí, así como tenemos el autor y los
10 días transcurridos .
Queremos que estén en la misma columna juntos y ahora, pero guarden y regresen.
Mira lo que obtenemos
Todo bien.
Entonces tenemos un comentario.
Eso es.
Pero puede ver que tenemos un botón agregar un nuevo comentario.
Asegúrate de que funcione.
Y los comentarios se muestran aquí.
Nos falta la calificación.
Así que se ve un poco raro, pero está bien por ahora.
Lo que podríamos querer hacer es agregar uno o dos comentarios más.
Así que vuelve aquí y usemos algo más de lorem ipsum.
Así que solo voy a copiar partes de esto y agregarlas como comentarios.
Solo use algo de eso y el autor aquí estará acampando.
Abuelo.
Enviar.
DE ACUERDO.
Así que ahora estamos recibiendo nuestros comentarios aquí muy bien.
Eso está funcionando.
Tengo un espacio que queremos agregar.
Si echas un vistazo a lo que tenemos aquí, hay una línea muy tenue, no sé si aparecerás en el
elenco de la pantalla.
Hay una línea muy débil que agrega espacio y todo lo que tenemos que hacer para que
funcione es agregar una h.
Entonces, justo después de este derecho de texto que es el botón, simplemente agregamos una regla horizontal y si actualizamos, ahora tenemos
algo de espacio ahí.
Usted tiene un botón y todos nuestros comentarios se muestran a corto plazo.
¿Por qué no construimos el nombre de usuario?
Así que volveremos aquí y ya tuvimos esto y se deshicieron de él, pero volveremos y volveremos a
agregar una etiqueta fuerte con el autor y harán que sea un poco más fácil de ver.
Aquí vamos.
Todavía no es genial, pero es lo suficientemente bueno por ahora.
Así que eso es realmente todo el bootstrap que tenemos que hacer por ahora.
Pero todavía no hemos terminado.
Si volvemos y echamos un vistazo a la versión finalizada, verá que la imagen ocupa toda la
miniatura y simplemente no lo hace.
Aunque hice un punto para usar la misma imagen exacta, no se trata de la imagen real en sí misma.
El problema se reduce a nuestro estilo.
Y lo que queremos hacer es entrar y decirle a esta imagen que tome el 100 por ciento con el contenedor.
Así que le mostraré que podemos inspeccionarlo y este es un gran uso para el inspector aquí.
Podemos seleccionarlo aquí y luego, aquí podemos agregar un estilo con un 100 por ciento.
Y ahí vamos.
Entonces, eso es algo que querríamos hacer.
Todavía hay una pequeña diferencia, que hay un pequeño espacio allí que no
tenemos en este.
Y para deshacernos de eso, todo lo que queremos hacer es ir a la miniatura
real y seleccionar la miniatura que está aquí y vamos a dar ese relleno cero.
Y ahora si echamos un vistazo se ve de la manera que queremos que se vea o casi se ve de esa manera
cuando mirar.
Vamos a agregar algo de espacio aquí también.
Puedes ver que hay algo de espacio aquí y podemos arreglarlo ahora mismo.
Además, al inspeccionarlo y recordar que en realidad no lo estamos solucionando, lo estamos probando en el
navegador y luego volveremos y realizaremos estos cambios en nuestra propia hoja de estilos.
Entonces, lo que queremos hacer es agregar un poco de relleno al potro de los subtítulos, que es este recuadro aquí.
Y el Padam que queremos está en la parte superior e inferior izquierda y será de nueve o 10 píxeles.
Así que solo haremos relleno nueve x.
Y ahí vamos.
Terminamos con un buen espacio allí.
No es lo que queremos hacer es tomar ese estilo y agregarlo a una hoja de estilo que vamos
a escribir