Continuaremos con el ejercicio de la cuadrícula de arranque
que comenzamos en el ejercicio anterior.
Vamos a hacer algunas cosas más en nuestra
página index.html con el fin de mejorar su diseño.
Vamos a usar algunas clases CSS personalizadas y agregar algo de color
a nuestra página index.html usando clases CSS personalizadas.
Lo siguiente que voy a hacer es bajar al pie de página y para este UL aquí,
notarás que esta lista cuando mires
nuestra página web se muestra en la página web usando esta lista con viñetas aquí.
No estoy muy contento con esta lista con viñetas,
quiero eliminar estos puntos de viñeta y luego simplemente mostrarlos como solo los enlaces allí.
Entonces, para hacer eso, voy a usar otro estilo de lista llamado como
lista sin estilo y aplicar eso a esa etiqueta UL allí.
Volviendo a nuestra página web,
a esta etiqueta UL en el pie de página,
voy a aplicar la clase como lista sin estilo,
y esto eliminaría esas balas delante de estos enlaces allí.
Ahora, permítanme agregar algunas clases CSS personalizadas a la página index.html.
Para ello, ahora crearemos una carpeta aquí y la nombraremos como la carpeta CSS aquí.
Dentro de la carpeta CSS,
voy a crear un nuevo archivo y el nombre del archivo como styles.css.
Ahora, dentro del archivo styles.css,
ahora puedo agregar algunas clases CSS para darle estilo a nuestra página.
Permítanme agregar algunas clases CSS aquí.
Entonces, agregaría mi primera clase como encabezado de fila.
Entonces, como su nombre lo indica,
esta clase estoy aplicando al encabezado.
Y luego, aplicaría el margen como
cero píxel auto y
luego relleno como cero píxel auto.
Por lo tanto, esto es para el encabezado de fila.
Por lo tanto, voy a tener margen cero y relleno cero para el encabezado de fila.
Y luego para el contenido de la fila,
así que voy a agregar una clase CSS más llamada fila-contenido.
Y luego para esto, agregaré margen cero píxel auto,
y luego el relleno lo tendrá en 50 píxeles,
cero píxel, 50 y cero píxel.
Entonces voy a añadir un borde en
la parte inferior de mi fila aquí.
Y luego, el borde le daré un píxel y luego lo llamaré una cresta.
Y estableceré la altura mínima en 400 píxeles para el contenido aquí.
De esa manera, mi página web se verá más agradable en la pantalla.
Ahora esto de nuevo, tiene que tratar de
ver hasta que esté satisfecho con la forma en que se presenta la página.
Ahora también, voy a incluir
una clase más llamada como el pie de página que como podría haber adivinado,
voy a aplicar al pie de página y
voy a aplicar un color de fondo al pie como D1C4E9.
Si me preguntas cómo seleccioné el color,
solo busqué el color y entonces estaba contento con ese color.
Puedes elegir cualquier color que quieras aplicar,
pero este color parece ser bueno para mí.
Entonces, agregué ese color.
Y para el relleno, para el pie de página,
agregaría 20 píxeles y cero píxeles.
Ahora, una vez que haya agregado estos estilos a mi archivo CSS,
permítanme aplicar el archivo CSS a la página index.html.
Voy a la página index.html.
Obviamente, necesito usar ese archivo CSS dentro de mi página index.html.
Así que justo después del archivo CSS de arranque,
voy a hacer un enlace y una hoja de estilo,
y este es el archivo style.css allí.
Entonces ahí es donde se almacena mi archivo CSS.
Entonces, voy a incluir eso en mi página index.html.
Ahora, voy a entrar en el cuerpo y aplicar las clases que acabo de crear.
Así que yendo al encabezado,
aplicaré la clase de encabezado de fila al div en el encabezado.
Luego, para el contenido,
aplicaría las clases de contenido de fila a las filas allí.
Por lo tanto, a las tres filas en el contenido,
aplico la clase de contenido de fila y luego bajando al pie de página,
a la etiqueta de pie de página,
aplicaré el pie de página de la clase aquí,
y luego guardaré los cambios.
Vamos a echar un vistazo a esa página ahora. Al
ir a su página web,
ya estamos empezando a ver algunos cambios interesantes en la página web.
Por lo tanto, ahora puede ver que el contenido en
la página web se ha presentado un poco más limpio.
Ese es el borde inferior que agregamos al contenido de la fila,
por lo que puede ver que hay suficiente separación entre las filas aunque
el contenido de las filas todavía está colocado hacia la parte superior de las filas,
por lo que tiene estas tres filas y luego mira el pie de página,
el pie de página ahora tiene adquirió el color de fondo que aplicé,
y observe cómo los enlaces se diseñan con la lista sin estilo en el lado izquierdo aquí.
Aún no hemos terminado, tenemos que hacer algunos cambios más en la página index.html,
y luego volver y echar un vistazo al resultado final de este ejercicio.
Volviendo a su Editor,
voy a agregar algunas clases CSS más en mi estructura de estilo,
es un archivo, así que voy a entrar allí y luego agregar una clase llamada Jumbotron.
Por lo tanto, verá que ya hemos aplicado el Jumbotron a nuestro encabezado allí.
Ahora, si agrego más propiedades a esta clase Jumbotron aquí,
esto se aplicará al Jumbotron,
además del Jumbotron predeterminado estándar que bootstrap ya incluye.
Voy a agregar algunas cosas más,
voy a agregar un relleno de
70 y 30 píxeles en su entorno,
y luego un margen de cero píxel alrededor,
y voy a establecer el fondo de esto en 9575CD.
Esto es algo de un color púrpura más oscuro que parece ir muy bien en el Jumbotron.
Una vez más, por prueba y error,
seleccioné ese color,
y también el color del texto como blanco floral.
Entonces, para el Jumbotron,
vamos a aplicar esas clases, y también,
voy a aplicar una clase más a la clase de dirección.
Tenemos una dirección en el pie de página,
así que voy a cambiar el tamaño de la fuente de esa a 80 por ciento,
una fuente ligeramente más pequeña que
la fuente normal, y el margen, le daré un
píxel cero, y el color, voy a usar cero F,
cero F, cero F,
y luego guardar los cambios.
Así que se agregaron un par de clases CSS
más, volviendo a index.html.
Lo que voy a hacer ahora,
es ir a las filas de contenido y luego
voy a intentar posicionar este contenido en el medio,
verticalmente en esa fila.
Aquí es donde voy a tomar la ayuda de la
alineación vertical que soporta la cuadrícula de arranque a través del soporte de Flexbox.
Para hacer eso, diría align-items-center,
así que esta es la otra clase que necesito agregar, align-items-center.
Y voy a agregar eso a las dos filas restantes también,
alinear elementos centrados en la segunda y la tercera fila,
y eso debería hacer una justificación vertical del contenido de las filas.
Veremos el resultado en un minuto.
Bajando al pie de página.
En el pie de página, verá que hemos utilizado
la columna auto para este contenido de derechos de autor allí.
Ahora, voy a posicionar esto justo en el medio horizontalmente
usando esa clase de centro de contenido justificado,
por lo que hay un contenido justificado y algunas otras clases allí.
Voy a usar para justificar la clase de centro de contenido para eso.
Eso esencialmente colocará esa columna en el centro de la fila allí.
Eso se aplica a eso, y luego,
un pequeño cambio que voy a hacer,
es a este div interno allí,
voy a aplicar una clase como centro de texto a eso, para
que estos enlaces estén centrados en la pantalla.
Con estos cambios, vamos a echar un vistazo a la página web,
al final de este ejercicio. Al
ir a nuestra página web,
nuestra página web ya está empezando a verse aún mejor ahora, por
lo que ahora puede ver que el Jumbotron ahora está diseñado con un nuevo color de fondo,
que es un poco morado oscuro allí,
y las letras ahora están en color blanco floral,
un poco sangradas allí,
entonces ahora puede ver que el contenido de las filas de contenido ahora está centrado verticalmente,
para las tres filas de contenido.
Este es el uso del align-items-center que aplicamos a las filas allí.
Luego yendo al pie de página,
ahora puede ver que este derecho de autor está ahora justificado en el centro de la pantalla.
Mira cómo se han centrado los enlaces aquí.
Me di cuenta de que también quiero posicionar este centrado verticalmente en esta fila en particular,
así que vamos a aplicar una clase más para mover esto
al centro de esta fila en particular verticalmente.
Así que para hacer eso, volviendo al índice.
html, en el pie de página de esa columna en particular que los contiene,
aplicaré la clase como align-self-center.
Esto debe aplicarse al div que usa la clase de columna.
Con esto, ese contenido en particular se alineará con el centro de la fila.
El contenido restante permanecerá en la parte superior.
Echemos un último vistazo al pie de página.
Ir al pie de página en nuestra página web,
ahora puede ver cómo se ha posicionado verticalmente en el centro.
Estas dos piezas de contenido todavía están alineadas a la parte superior de la fila,
eso está bien porque eso se ve bien ahí dentro,
pero este lo he arrastrado verticalmente hacia el centro de esta fila en particular.
Con esto, completamos este ejercicio.
En este ejercicio, vimos el uso de clases CSS personalizadas,
y también usamos algunas de las clases para
justificar el contenido horizontal y verticalmente en nuestras filas.
Este es un buen momento para que hagas un buen comentario con el mensaje,
Cuadrícula de Bootstrap, segunda parte.