Bienvenido de nuevo en esta lección vamos a usar el programa de arranque para crear una página de inicio para un inicio ficticio.
Nuestra startup se llama Perfect match.
Muy divertido.
Sé que es una aplicación de citas de felinos humanos y dejaré que tú interpretes qué fecha de felino
humano es que podría ser relativamente inofensivo, solo podría coincidir con los gatos Sheldrick con humanos solitarios que podrían ser
otra cosa.
No lo sé.
Empecemos haciendo un recorrido rápido por el sitio y escribiéndole.
Realmente solo me refiero a señalar algunas características.
No hay mucho aquí.
En realidad, no tenemos esto enganchado, no hace nada todavía.
Así que en realidad solo son personajes de HD, pero eso es todo lo que hemos cubierto hasta ahora.
Así que tenemos suficiente nuestro hogar perfecto sobre longitudes sin contacto.
En realidad, no se van a ninguna parte regístrate e inicia sesión en el lado derecho dos iconos pequeños allí
obtenemos su hamburguesa.
Puedo hacer clic en él.
Todos esos enlaces están ahora dentro de esa hamburguesa.
Entonces tenemos una gran imagen de fondo que permanece centrada y cubre todo el fondo.
Así que en el medio tenemos el nombre de nuestro inicio perfecto con el nuestro y luego tenemos nuestra leyenda La
única aplicación de citas sobre alimentación humana.
Y luego tenemos una pequeña regla H R aquí horizontal y luego un botón para comenzar con un ícono.
Y a medida que reduzco esto, todo se queda en el medio y también se mueve un poco para que no tengamos algún
tipo de diseño incómodo en su dispositivo móvil donde el texto comienza a mitad de camino hacia abajo.
Así que lo movemos un poco y permanece centrado.
Este diseño es realmente fácil de hacer y de arranque, pero es relativamente efectivo para la página de inicio.
Todo lo que tenemos es una sola columna que ocupa todo el ancho.
Entonces esta columna tiene 12 unidades de ancho.
No estamos dividiéndolo en ninguna sección, solo a una columna de 12 unidades de ancho y luego centramos
todo dentro de esa columna.
Entonces empecemos.
Lo primero que debemos hacer es crear un archivo.
Tengo un índice llamado en DML.
Agregaré esto en mi coincidencia perfecta estándar y
luego comenzaré añadiendo Bootstrap y usaré
CDN Bitstrips CDN.
Hagamos el SS y el Javascript aquí.
Necesitaremos ese javascript para la barra de tareas.
Entonces tenemos que vincular la etiqueta.
Entonces tenemos el javascript.
Entendido.
Coloque esto en la parte inferior, que es una etiqueta de script y luego establecemos la fuente igual a la que eres.
Ahora si abrimos esto, abra la consola, tenemos un pequeño problema, es que también necesitamos la consulta de
Jay para el bootstrap javascript.
Recuerde de regreso de la lección de barra de navegación que necesitamos para exigir a J.
Querrey
Entonces obtendremos un CDN por eso.
Haremos la versión modificada.
Copia esa URL
Y finalmente volvemos aquí y tenemos que hacerlo antes del enlace al arranque del javascript.
De lo contrario, todavía no sabrá su consulta, por lo que primero debe cargar la consulta.
Ahora intentémoslo de nuevo.
Refresco de fuego
Está bien, no vemos nada que sea una buena señal porque no vemos ningún error.
Comencemos con el texto en el medio.
Todo este contenido aquí.
el contenedor ECO de la clase div y luego, dentro de allí, tenemos otro div. Siempre necesitamos esa fila.
Entonces, necesitamos crear un contenedor y luego, dentro del contenedor, necesitamos una fila para
Cada vez que estamos usando el sistema de grillas y luego nuestro div que va a ser de clase igual a la columna dash
large 12.
Y eso abarcará todo el camino a través de ese contenedor.
Y luego dentro si van a tener un H1 que diga pareja perfecta y guarde.
Y dejémoslo en esa actualización.
Y no es realmente lo que queremos todavía y es porque hay algunas cosas que debemos hacer.
El primero es que debemos centrar todo en esa columna.
Entonces, si inspeccionamos con qué estamos tratando aquí, podríamos ver que la H1 cruza todo y
solo debemos centrarnos en eso.
Y el segundo es que tenemos que bajar un poco.
Necesitamos agregar algo de relleno o margen para que no vaya directamente a la parte superior de nuestra página.
Comencemos por agregar el resto del contenido.
Así que también tenemos la única aplicación de citas de felinos humanos y eso será solo un H
3 y podríamos jugar con eso, podría ser cualquier elemento que queramos, pero lo convertiré en una H-3, la única aplicación de citas felinas
con humanos.
Y luego podemos agregar esa regla horizontal que no se verá demasiado, pero la haremos con estilo
después del hecho y luego también agregaremos un botón en la clase en ese botón.
Echemos un vistazo.
Este es un botón de arranque predeterminado y es un botón grande.
Volvamos.
Entonces necesitamos PTEN y luego el color predeterminado y luego el tamaño entre LG para grande y aquí
simplemente agregaremos el texto
que se inicia y guardaremos veamos con qué terminamos.
Todo bien.
Entonces tenemos nuestro contenido ahora siguiente pero Center dentro de la grilla.
Y luego nos enfocaremos en el relleno y lo moveremos hacia abajo.
Pero para comenzar con el centro dentro de esta cuadrícula y para facilitar eso, voy a agruparlo todo
dentro de un div para que no tengamos que centrar cada cosa individualmente.
Tenemos que centrar el H-1 y luego los tres y luego el botón, más bien podemos agrupar en un div y
simplemente centrar ese div con una línea.
Hagamos un div y le daremos una identificación de Cantet y luego pondremos todo dentro de allí.
Entonces el H-1 a la edad de 3 años el H. R. y el botón sangrará y guardará correctamente.
Entonces, nada debería ser diferente si actualizo la página antes de hacerlo, vamos a agregarla en nuestra hoja de estilos.
Así que agregué una etiqueta de enlace y llamaré a mi aplicación de hojas de estilo.
SS No existe todavía.
Entonces necesito hacer que lo guarde.
Veo SS en el mismo directorio.
Y comencemos con algo simple como todas las h que son moradas.
Solo para asegurarme de que funciona bien.
Volvamos a actualizar
Andrew obtiene un H-1 púrpura.
Estupendo.
Entonces, seleccionemos Dave, agregamos la idea del contenido y lo centramos.
Así que desháganse de eso y necesitamos un contenido de identificación y omitir hacer es alinear texto en el centro.
Volvamos.
Aquí vamos.
Así que las cosas están alineadas al centro hasta ahora.
A continuación, haremos clic un 25 por ciento más abajo en la página para ser exactos, con un relleno equivalente al 25 por ciento.
Así que aquí haremos un colchón superior al 25 por ciento.
Y en lugar de darle una cantidad de píxeles difícil si lo mantenemos como un porcentaje, es
un poco más receptivo.
Así que eso está justo en el centro.
Y luego el 25 por ciento cambia a medida que cambiamos el tamaño de la pantalla.
Estupendo.
Ahora agreguemos en la imagen de fondo.
Entonces, la imagen que estoy usando es adorable y la interacción humana que está ocurriendo aquí proviene de este en el sitio
web de Splash que presenté en el último video donde creamos la cuadrícula de la imagen de arranque.
Y tienen todo tipo de imágenes de gran calidad que puedes usar sin ningún problema.
Y el que yo uso está justo aquí. Busco enlaces de gatos en esa descripción también.
Aquí está el Aro de esta imagen, simplemente haz clic derecho en copiar la imagen que eres.
Ahora regresemos y lo agregaré al cuerpo como una imagen de fondo.
Así que de fondo y luego darle una URL que es ese gigante. Estás ahí.
o actualización, obtenemos una imagen de fondo gigantesca y todo lo que podemos decir es que este es un tipo de arranque para las uñas.
Y si lo dejamos en su forma en este nivel
Entonces tenemos que redimensionarlo y para hacer eso usamos el tamaño de fondo y lo cambiamos para cubrirlo nuevamente.
De nuevo, nos estamos acercando.
Esto hará que la imagen sea lo más pequeña posible mientras se cubre todo el ancho y alto de
la pantalla.
Por lo tanto, no cambiará la relación de aspecto, ya que no sesgará la imagen de ninguna manera, pero se estirará en
ambas direcciones tanto como sea necesario.
Pero la cantidad mínima que necesita para caber en nuestra pantalla y aún no es perfecta.
Y lo que queremos hacer no es cambiar el tamaño sino cambiar la posición.
Vamos a centrar el centro de posición de fondo, pero ahorraremos que estemos más cerca.
Pero todavía no es una pareja perfecta en lo que respecta a la imagen.
Y esos cambios vendrán más tarde.
Por ahora quiero enfocarme en agregar en la barra de navegación y hacer eso cuando vaya a los documentos de
Boucek y vaya a los componentes y ya lo mencioné antes.
Siempre hago esto si agrego una barra de navegación de bootstrap.
Son demasiadas cosas para recordar lo contrario.
Y solo copio esto aquí mismo.
Tomará todo el navegador para comenzar, regrese a nuestra aplicación aquí y simplemente colóquelo en la parte superior.
Esta definitivamente no es la NAF que queremos, pero contiene las piezas que queremos actualizar.
Está lo suficientemente cerca.
Entonces, hay algunos cambios que queremos hacer.
La primera y más fácil es que nuestro contenido en la solución se encuentre en un contenedor, por lo que
no llega hasta los bordes como lo hace aquí.
ver que debido a que agregamos en ese contenedor ahora tenemos un espacio tal como lo hacemos aquí en la solución.
Entonces podemos volver e insertar o simplemente cambiamos esto para ser un contenedor de clase div y si
retrocedemos ahora puede
Ahora vamos a trabajar en el contenido real del Nev. Así que lo más fácil es cambiar la
marca que ahora mismo dice Brand aquí. Esta clase de línea es igual a la marca de barra de neth y la cambiaremos por una coincidencia y guarda fijas.
Pruébalo.
Bien.
Ahora vamos a deshacernos de esta forma.
No necesitamos esto en absoluto.
Así que nuestra forma todo comienza aquí.
Deshazte de esa cosa completa de actualización.
También eliminemos el menú desplegable.
No necesitas eso.
Entonces eso comienza aquí.
Esta mentira que termina allí
está fresca de nuevo.
Ahora tenemos un solo enlace.
Comenzaremos con estos dos enlaces, que se supone que deben registrarse y registrarse.
Ese es el enlace aquí, así que podemos cambiarlo para que se registre y luego lo duplique.
Solo un aliado con una etiqueta de anclaje dentro.
Y este estará conectado.
Vamos a ver.
Estupendo.
Entonces los íconos llegarán al final.
Tenemos los dos enlaces.
Ahora necesitamos tres enlaces aquí.
Ya tenemos dos de ellos y nos desharemos de ese menú desplegable.
Entonces, necesitamos estar en contacto con nosotros.
Entonces, busque ese menú desplegable que está aquí.
La clase es igual a la lista desplegable.
Deshagámoslo y ahora Akbar está simplificado mucho.
Ahora tenemos dos longitudes diferentes.
Realmente nos desharemos de ambos y lo haremos desde cero.
Así que agregaremos un aliado con una etiqueta de anclaje y luego lo haremos tres veces.
Este primero debería decir hogar.
El próximo es sobre.
Y el último es contacto.
Vamos a ver.
Ahí vamos tenemos tres longitudes.
Una cosa menor.
Se supone que Home debe estar activo y un bootstrap realmente fácil.
Todo lo que tenemos que hacer es agregar la clase igual activa al
aliado, no a la etiqueta de anclaje, sino al aliado principal y ahora terminamos siendo el enlace activo el hogar.
Estupendo.
OK, así
que esa es nuestra barra de navegación y si cambiamos de tamaño verás que ya tenemos esta hamburguesa funcionando bien.
Tenemos un problema, es que nuestra imagen de fondo está en mal estado.
Cubriremos eso en un momento, pero tenemos el Hamberger funcionando bien.
Todo se ve bien.
Ahora abordemos la fuente para que la fuente que utilicé aquí sea Ledo L. A. Es de fuentes de Google así que iré a las fuentes de Google y buscaré a Ledo.
LA T-O cada ir a la colección.
Vamos a usarlo si se vuelve normal y audaz.
También queremos que nuestro H-1 sea audaz.
Bueno.
Y luego agregaremos este enlace directamente a su aplicación.
Arriba arriba aquí, ahora ingrese las aplicaciones. Evaluemos que vamos a aplicar esa fuente a todo.
Así que voy a seleccionar dentro de la familia de fuentes del cuerpo el Ledo y vamos a asegurarnos de que se está cargando correctamente.
Mira lo que tenemos actualizado
Y nuestros cambios frontales son difíciles de ver porque el texto está oscuro pero modificado, también puedes
verlo en el NFR aquí.
Ha cambiado
Concuerda con lo que tenemos en esta solución.