Saber todo lo que necesitamos enfocarnos son los colores.
Comencemos con un jumbotron.
Así que todo lo que hay dentro del JumboTron es de un tono azul
diferente y ese tono de azul que tengo en este documento para ver 3 5 0 irá a nuestra hoja de estilos y podemos simplemente seleccionar el jumbotron y darle un
color y todo dentro de todo ese color así como está fresco y puedes ver que todo ha cambiado para ser
azul, incluido el acantilado A-Kon, el ícono del glifo simplemente se trata como texto.
En realidad, es una fuente, por lo que puede cambiar el color con la propiedad de color.
Ahora abordemos la barra de navegación, que es un poco más complicada.
El color de fondo no está mal.
Todo lo que tenemos que hacer es seleccionar nav bar Inv. o podríamos hacer
Ahora si estamos encendidos después de nuestra parada de reparación, pero voy a hacer la barra de navegación
inversa y luego le doy un color de fondo de ese fondo azul y lo pego y lo actualizo.
Y puedes ver que cambia para ser azul.
Pero para cambiar el color aquí, quiero que sean blancos en lugar de grises.
Si acabo de diseñar todas las etiquetas de tinta que son para que las etiquetas de anclaje de estilo
sean blancas, no funcionarán.
Entonces te mostraré lo que quiero decir.
Etiqueta de anclaje color blanco.
Regresa.
No tiene efecto y este es un gran uso para el inspector si lo inspeccionamos.
Echa un vistazo a lo que está sucediendo.
Entonces podemos ver que nuestro color blanco está tachado y el color está siendo asignado aquí.
Este color de línea es este gris y si lo deseleccionamos vuelven a ser el blanco que queremos
que sean.
Y eso es porque este es un selector más específico.
Si puedes recordar la lección que hice sobre la especificidad.
Esto se calcula para tener un número más alto o un índice de especificidad más alto que el que teníamos aquí, que
es solo para una pequeña etiqueta de anclaje versus esto aquí.
Son múltiples clases.
Recuerde que cada uno de ellos es diez veces más específico que solo una etiqueta de anclaje.
Entonces, lo que queremos hacer es escribir un selector que sea tan específico y podamos
robarlo aquí mismo.
Entonces vamos a entrar aquí y pegar eso y luego cambiar el color para que sea blanco.
Así que vamos a anular exactamente el mismo schlechter que tenía el bootstrap.
Y es importante que nuestros estilos se produzcan después del arranque para que podamos anularlo y, si estamos frescos,
ahora obtenemos enlaces blancos.
Por último, haremos lo mismo con la marca de barra de navegación.
Entonces, como pueden ver, está dentro de la marca de barra de navegación.
Si seleccionamos ese Daut ahora para nuestra marca y le damos un color blanco y lo guardamos y volvemos, todavía no funciona
y tenemos el mismo problema.
Entonces, si lo inspeccionamos, verán que está tachado de nuestros estilos aquí donde nos
volvemos blancos y que los colores han cambiado por esta línea.
Ahora si la marca Bar dentro de la barra de navegación Inv. entonces también podemos robar eso y sobrescribirlo.
Entonces solo necesitamos esa barra de navegación inv. Ahora para nuestra marca
Básicamente, estamos escribiendo estilos que
van a chocar cabeza a cabeza en una batalla de estilos entre bootstrap y nuestros estilos, y son idénticos en los selectores.
Entonces, como el nuestro es el segundo, van a estar en la cima.
Van a ganar, vuelve a refrescarte y nunca te vayas.
Tenemos la mayoría de los estilos hechos.
Hay una cosa realmente menor
que probablemente no notará en el molde de la pantalla: el color gris en el JumboTron es ligeramente diferente.
Así que tengo ese color aquí. Simplemente lo copiaré y luego
iré a RC SS y simplemente cambiaremos el fondo del Jumbotron para que sea de color gris y prestaremos mucha atención como actualización.
Espero que puedas verlo cambiar.
Simplemente cambió.
Es un gris ligeramente más azul.
Así que probemos todo.
Vamos a cambiar el tamaño de nuestro trabajo de barra de NAV.
El Javascript funciona bien.
Aquí vamos.
Todo se ve bien.
Lo último que le mostraré es cómo podemos usar un ícono diferente aquí.
El que estoy usando proviene de una biblioteca llamada
fun awesome fun awesome es una biblioteca simple que incluye muchos iconos diferentes.
Mucho más que el Bootstrap incorporado con íconos para que puedas acceder a él en Funt awesome.
No la atrapes.
Sé que estoy en la página de inicio aquí.
Y si hacemos clic en los iconos hay más de 580 íconos diferentes, puedes verlos todos aquí.
Y una de las buenas características que puede buscar a través de ellos
que realmente no puede hacer en Pucelle con mucha facilidad.
Entonces podemos buscar una foto y obtenemos la cámara y la cámara retro, que es lo que usé.
Pero antes de que podamos usar cualquiera de ellos, necesitamos instalarlo.
Entonces, si vas a empezar.
Tienen un buen CDN que puedes copiar y simplemente ponerlo dentro de tu aplicación.
Así que haremos eso arriba paga súbita.
Y ahora podemos usar divertidos iconos increíbles y es realmente muy fácil.
En realidad, si haces clic en el ícono que te gusta y digas que quiero
usar el signo de la paz, puedo hacer clic en él y te dan un poquito de código que puedes copiar.
Entonces es un ícono con clase igual a f por diversión.
Increíble.
Y luego F. A. apunte el nombre del ícono.
Reemplacemos el ícono de la cámara con esto para que tenga un gran signo de paz que se guardará y actualizará.
Y tenemos un signo de paz.
Tan divertido es increíble.
Es realmente popular
Un montón de iconos geniales, ya que puedes ver prácticamente cualquier ícono que necesites.
Tienen un montón de los estándar.
Pausa el botón de reproducción.
Adelante hacia atrás diferentes iconos para la tecnología y diferentes iconos de Internet.
Pero también tienen algunos más divertidos, como los signos de paz.
Y creo que también tienen una mano de Spock. Sí, vamos.
Entonces puede usar cualquiera de estos como si usara cualquier otra fuente.
Entonces, si desea cambiar el color, simplemente cambie la propiedad del color si desea cambiar el tamaño.
En realidad, cambias el tamaño de la fuente.
Así que voy a utilizar esa búsqueda de
cámara retro para eso otra vez, que es cámara retro, así que tengo que hacer un guion retro de la cámara dash y guardar la actualización y obtenemos esa cámara retro.
Muy bien, así que terminamos con la galería.
Además de cambiar realmente la imagen, eres lo que haré tan pronto como termine este resumen.
Probablemente no quiera mirar de todos modos, pero en caso de que lo haga, lo incluiré al final.
Así que tenemos suficiente Bartra aquí hizo un pequeño cambio que era
el que usamos ahora muy inverso, que es cómo obtuvimos la barra de navegación en blanco y negro.
Pero luego cambiamos los colores de todos modos, así que realmente no importaba.
Y luego también utilizamos la barra fija de navegación fija, que es cómo se mantiene arriba en la parte superior.
Usamos un sistema de cuadrícula aquí abajo y luego usamos un jumbotron.
Introduje glyph en un concepto creado en los íconos de Bootstrap que son relativamente limitados.
Hay la mayoría de las cosas que usarías, pero de vez en cuando
no tendrán algo o, a veces, prefieres que los divertidos íconos se vean divertidos.
Awesome es definitivamente más popular que el show de comida con
pacanas y la otra novedad que te mostré es la clase de miniatura que puedes colocar alrededor de
una imagen y que limitará esa imagen a una cuadrícula y agregará este lindo y pequeño borde aquí.
Y finalmente, hablamos sobre la especificidad y cómo teníamos que
luchar contra los estilos de arranque si queríamos cambiar el color del color de fondo.
Desea cambiar el color de fondo de Nav. o el color de fuente para los enlaces y también el color del Nev.
marca aquí.
OK, así que eso es todo en el próximo video.
Voy a mostrarte cómo podemos hacer una página de inicio con bootstrap.
Y como prometí, ahora voy a copiar
y pegar esos enlaces de imagen para hacer nueve imágenes diferentes aquí.
Entonces, si eso es algo que quieres ver, espera el próximo minuto o dos.
DE ACUERDO.
Así que voy a dividir esta pantalla y
copiaré algunos de estos sobre este primero y voy a reemplazar este aquí y luego haré el siguiente.
Antiguo lugar.
Este de aquí.
Y luego, el próximo,
estoy seguro de que esto es fascinante y seguiré adelante así.
De acuerdo, hemos llegado a la mitad.
imágenes diferentes.
Nos acercamos
y creo que lo hicimos, digamos asegúrate de que todo se ve bien o fresco y tenemos nueve
Increíble.
Todo bien.
Así que ahora he terminado hecho.
Afortunadamente disfruté haciendo esa galería de imágenes.
Te veré en el próximo video.