Bienvenido de nuevo en esta lección vamos a construir un pequeño proyecto usando lo que hemos aprendido hasta
ahora sobre el arranque.
Incluirá muchos de los componentes de los que hemos estado hablando, incluso ahora incluye el jumbotron y
el sistema de grillas.
También lancé una o dos cosas nuevas, incluidos los íconos aquí.
Todavía no hemos visto cómo hacer eso.
Y también el hecho de que esta barra de navegación mientras la desplazo verá que permanece fija en la parte superior para que no
se desplace de la misma forma que tenemos una barra de navegación fija que tampoco hemos visto todavía.
Y finalmente, estamos cambiando algunos de los colores de los componentes predeterminados por arranque.
Entonces este es en realidad un tono ligeramente diferente de gris.
Esta es la sombra de azul y la barra de navegación tiene algunos colores diferentes.
Así que les mostraré cómo hacer todo eso antes de comenzar a escribir cualquier código.
Solo quiero tomar un momento para señalar el hecho de que estas imágenes en su mayoría
provienen de un sitio web, un gran recurso llamado Splash.
Así que Splash proporciona un montón de bonitas fotos en alta resolución para que puedas hacer lo que quieras.
Puedes leer la licencia aquí, pero es prácticamente lo que quieras.
Es una licencia Creative Commons, bla, bla, bla, estoy seguro de que realmente no me importa,
pero las fotos son realmente increíbles y estoy usando muchas de estas ocho.
De hecho en nuestra galería.
Y eso deja una imagen, que es esta, aquí mismo, en la que realmente me hice cargo de tomar una clase
de fotografía y esta es la primera cosa que he tomado que parece medio decente.
Creo que a pesar de que estos no se ven tan calientes.
De todos modos, si desea utilizar estas mismas imágenes exactas, que no es importante.
Esto funcionará con cualquier imagen en absoluto.
Pero si quieres exactamente los mismos, he incluido todos los enlaces en esta galería de archivos M. D que han subido junto con este video
y también han incluido los dos colores que vamos a usar en azul oscuro
y gris claro.
DE ACUERDO.
Entonces, con todo eso, comencemos el proyecto.
Entonces tengo una galería de archivos vacía.
H m l.
l aquí y llamaremos a esta galería de imágenes y lo primero que debemos hacer es incluir bootstrap.
Añadiré mi esqueleto h d m
Y voy a copiar los extremos del CD de un proyecto anterior, así que lo haré ahora mismo.
Aquí vamos.
Me estoy vinculando al bootstrap CDN.
Y mientras esté aquí, también agarraré la ciudad de bootstraps CSSA y Jay queery y lo hicimos en la lección de barra de navegación y pondremos las que están
en la parte inferior aquí para que cuando agreguemos la barra de navegación no tengamos que ir a cazar.
para estos archivos o para las etiquetas de script.
Entonces, un salvamento y lo primero que podemos hacer es agregar nuestro Jumbotron.
Eso es agradable y fácil.
Entonces tendremos un div y esa clase será igual a Jumbotron.
Y luego dentro del Jumbotron comenzará con un H1 que solo dice la galería de imágenes.
Ahí vamos y ahorraremos y asegurémonos de que esto funcione.
Por lo tanto, abrirá este archivo.
Entonces tenemos a Boucek incluido.
Estamos viendo el cambio de fuente.
Estamos viendo este gris del Jumbotron.
Asegurémonos ahora de que esté dentro de un contenedor como está aquí en lugar de lo que
tenemos donde simplemente atraviesa toda la pantalla.
Entonces haremos que la clase div sea igual a contenedor.
Ahí vamos y hagámoslo de manera adecuada y actualizaremos, y volveremos.
Muy bien, así que tenemos el Jumbotron, pero agrega en este párrafo.
Ahora volveremos y haremos el ícono, pero eso es solo una etiqueta de párrafo debajo de la H-1 que guardaremos.
Siéntase libre de poner el texto que desee allí y hemos terminado con el Jumbotron por el momento.
ahora hagamos la barra de navegación y no voy a escribir suficiente barra desde cero por dos razones.
Así que regresemos y
Una es que es bastante código.
Tomará un largo tiempo.
Y este video
Pero dos es el hecho de que casi nunca escribo Ackbar desde cero.
Como mencioné en el video de NASCAR la mayor parte del tiempo, mi flujo de trabajo es que voy al sitio de
arranque o a un sitio anterior que hice con una barra NAV y copio eso.
Y acabo de comprobarlo y me deshago de las piezas que no quiero.
Agrego algunas piezas nuevas en.
Así que ahí es donde voy a hacer aquí.
Ya tengo suficiente parte que hice en la barra de navegación, dijo cada aplicación HTML.
Está justo aquí y voy a copiar eso y luego lo ajustaremos un poco.
Así que copiemos y volveremos y lo pondremos en la parte superior del archivo así.
Y veamos que lo que obtenemos es nuevo y tenemos la barra de navegación.
Está cerca.
Queremos cambiar la marca aquí.
También queremos cambiar el color con el tiempo y queremos asegurarnos de que esté fijado en la parte
superior, lo que no es ahora, pero lo conseguiremos.
Regresemos y simplemente cambiemos la marca.
Entonces, en lugar de café, llamé a las imágenes de las minas, puedes llamar esto como quieras.
Por supuesto, asegúrese de que funcione bien.
Lo próximo que le mostraré es un cambio rápido que podemos hacer para alterar el color donde aparece en lugar
de siesta o predeterminado.
Podemos hacer ahora si barra en verso y le mostraré cómo se ve.
Ahora obtenemos una oscuridad por ahora o los colores se han invertido donde el texto es claro y obtenemos
un fondo oscuro.
Todavía no es el color azul por el que voy por aquí.
Y la fuente tampoco es blanca, pero volveremos y arreglaremos eso.
Esto es lo suficientemente cerca por ahora.
Ahora podemos enfocarnos en la galería de imágenes real en esa grilla aquí.
Y comencemos viendo cómo se comporta en la solución.
tamaño, baja a dos y luego baja a dos y finalmente, en el tamaño pequeño, pasa a uno como se puede ver aquí.
Entonces comienza con tres imágenes que se cruzan y luego, cuando cambio el
Y tenemos una imagen que se cruza.
Comencemos configurando la grilla para este gran tamaño donde tenemos tres cruzando.
Recuerde que tenemos 12 unidades en total.
Entonces, si queremos que tres se transmitan, vamos a designar a cada uno de ellos como cuatro unidades.
Así que pongamos eso justo debajo de nuestro Jumbotron.
Aún dentro del contenedor, solo haremos que la clase div sea igual a la fila y luego dentro de eso tendremos la clase
div igual y queremos que sea de cuatro unidades.
Así que haremos una columna con un gran guión 4 y presionaremos enter y podremos comenzar poniendo solo texto aquí y luego
lo duplicaremos porque queremos tres de esos.
Y no me preocuparé por arreglar la sangría todavía porque vamos a hacer un cambio más grande en solo
un momento.
Pero refresquémonos y atravesamos esas tres columnas.
Entonces, lo próximo que queremos hacer es poner en marcha algunas imágenes y todo comienza, pero solo tomamos la L de
mi foto de Golden Gate Bridge y vamos a agregar una etiqueta de imagen en lugar de texto.
de la imagen es igual al Puente Golden Gate, estás enfermo y solo pegaré eso tres veces y lo guardaré.
Así que la fuente
Y si retrocedemos, tenemos un problema, que es que esa imagen es enorme, aunque tenemos esas
tres columnas.
Nuestra imagen no se queda dentro de nuestra columna, no se está reduciendo.
Puedes ver lo que haremos para arreglar esto, es agregar agregar un poco más de arranque.
Aún no te he mostrado que crees este pequeño y bonito borde alrededor y se llama miniatura.
Todo lo que tenemos que hacer es escribir un div con una clase igual a la miniatura y luego
cualquier imagen que pongamos dentro se reducirá para que quepa dentro de la columna.
Y también tiene este pequeño borde aquí, que creo que se ve muy bien.
Así que para hacer eso, en realidad voy a deshacerme de lo que tenemos con
aquellos para simplemente volver a una sola imagen y agregar una clase div igual a la miniatura y hacerlo correctamente.
Y envolvemos eso alrededor de la imagen y guardamos.
Ahora si refrescamos.
Verá si obtenemos una sola imagen que ocupa la cantidad adecuada de espacio dentro de esa cuadrícula.
Esta es la columna y tiene un pequeño borde alrededor y la imagen no es gigantesca, lo cual es genial.
Asegurémonos de que funcione si duplicamos esto.
Así que esta es una imagen, hagámoslo tres veces y veamos qué ocurre con la actualización.
Y ahí vamos.
Tenemos tres imágenes.
Continuaré y agregaré seis más.
Entonces tenemos nueve en total como hacemos aquí.
Y en realidad no tenemos que agregar filas separadas.
Podemos simplemente ponerlos a todos en la misma fila.
Así que copia los tres que tenemos hasta ahora para ahorrar.
Eso nos dará nueve imágenes.
Y si actualizo, verá que se ajustan automáticamente a la siguiente línea.
Entonces solo tenemos que tener una fila y agregar esas columnas que conocemos médicamente.
Si queremos que cada imagen ocupe cuatro unidades, eso significa tres por fila y luego necesitamos tres
filas de imágenes.
Regresaré y cambiaré todas estas imágenes de los elfos al final del video.
No quiero obligarte a ver eso.
Muy interesante solo copie y pegue, pero centrémonos en el resto de esta cuadrícula.
Así que en este momento tan pronto como un medio de impacto vaya a una imagen a través de la cual no
es lo que queremos, lo que estamos buscando es dos imágenes en ese punto intermedio.
Y luego, después del punto de ruptura medio que está allí, llegamos a pequeño y aún queremos que permanezca en 2.
Entonces, arregle eso en el nuestro o vaya a uno inmediatamente en el gran punto de quiebre o en el punto
de quiebre mediano y luego en el pequeño y extra pequeño se queda en 1.
Podemos volver aquí y cambiaremos todo lo que sepas seleccionar y presionar el comando d seleccionar todas las instancias de llamarlas grandes
y luego presionaré la flecha izquierda o derecha para mover el cursor.
Ahora puedo editarlos todos a la vez.
Y lo que quiero hacer podría agregarse en la columna medio seis porque queremos Perrow y eso funcionará.
Y si regreso y actualizo verá que se quedan en 3 por fila y luego llego al punto de ruptura mediano
y van a 2.
Pero luego pego pequeño y salta a uno y al nuestro cuando golpeamos pequeño la solución se queda en 2.
Entonces, para arreglar eso, en lugar de hacer una columna de seis medios, podemos hacer una columna pequeña 6 y volver a
actualizar esta versión.
Golpeamos medio.
Vamos a dos.
Golpeamos pequeño
Nos quedamos en 2 y luego vamos a extra pequeños y estamos en 1 1 imagen por fila.
Perfecto.
Así que eso es todo lo que tenemos que hacer para la grilla y hemos terminado con la mayor parte de la funcionalidad aquí.
Muy, muy rápido para ponerlo en marcha.
Lo que queremos enfocar ahora son algunos de los colores y también los íconos.
Comenzaré mostrándote cómo agregamos íconos usando bootstrap.
acceso a los componentes, hay iconos de glifos arriba y hay muchos para elegir.
Entonces, si tienes
Y encontraremos uno que queremos usar y el que estoy usando.
Voy a hacer una búsqueda Creo que es la cámara.
Entonces, hay una cámara aquí y no estoy usando esa cámara.
Es un poco diferente.
La que estoy usando es una cámara más retro y te mostraré cómo agregar eso.
En realidad, no es parte de bootstrap. Comencemos con la cámara normal que viene con bootstrap.
Así que escribimos a Clifford Kahn y luego vamos con la cámara del tablero de instrumentos.
Y si te desplazas más abajo puedes ver dónde explican cómo usarlo para crear un tramo donde
una clase es igual a Con y luego glifo puede marcar el ícono del glifo.
Así que copiemos este lapso y comenzaremos haciéndolo dentro de la H-1.
Simplemente colócalo al comienzo de la H-1 y queremos una cámara A-Kon rápida y guardaremos y actualizaremos.
Y así puedes conseguir una cámara allí.
Y si queremos espacio podemos hacerlo a través de relleno o simplemente podemos agregar un espacio allí.
Y obtenemos un espacio en el que podemos hacer exactamente lo mismo para la barra de navegación y utilicé uno que recibe el nombre
de Photo go double check up aquí.
Puede hacer una búsqueda en esta página para obtener una foto.
Ahí está.
Puede ir si puede proyectar la imagen.
Así que vamos a subir a la marca de barra de navegación aquí y pegar en ese lapso de nuevo.
Y luego, dentro del tramo, la clase debe hacer clic en la imagen y agregaremos un espacio allí también.
Volvemos a nuestro sitio son frescos y ahora tenemos una pequeña imagen allí.
Y también tenemos la cámara.
A continuación, abordemos la barra de navegación y comenzaremos por fijarla en la parte superior para que pueda ver en este momento.
Eso siesta nuestros pergaminos de distancia.
Pero en la solución permanece allí.
Y para hacer eso, es una clase única que debemos agregar a nuestra barra de NAV.
Así que hasta aquí queremos que la barra de navegación dash fije el tablero y guarde.
Y si estamos frescos, verás que está fijado en la parte superior.
Hay un pequeño problema: nuestro contenido ahora está un poco atrás y queremos que tenga el
espacio normal por encima del Jumbotron.
Lo que tenemos que hacer es agregar un poco de relleno a nuestro cuerpo y resulta ser 70 píxeles.
Los documentos de arranque te dirán que si alguna vez olvidas 70 píxeles de relleno es lo que queremos que
sea el ancho de los ahora cuatro.
Así que vamos a ir aquí y crearemos una hoja de estilos ahora y la llamaré galería Dotsie
SS y luego dentro de un espacio de cuerpo selecto superior a 70 píxeles y luego tenemos que agregar eso vinculado a esa
hoja de estilo que es Gallery CS S.
Ahora asegurémonos de que esté funcionando.
Aquí vamos.
Tenemos nuestro espaciamiento de vuelta y el NFR todavía está fijo en la parte superior, como se puede ver perfecto