Este video vamos a continuar diseñando el campamento.
Vamos a agregar una barra de navegación a cada página y esa barra de navegación estará bastante vacía por el momento.
Pero eventualmente tendrá botones como iniciar sesión y cerrar sesión para registrar toda esa funcionalidad.
Pero hasta entonces solo pondremos un texto de marcador de posición allí y luego también vamos a
diseñar la nueva forma de campamento porque ahora está en una forma bastante difícil.
Comencemos el servidor y veamos lo que tenemos.
Así que aquí está nuestra página de inicio.
Aquí está nuestra vista, todos los campamentos cambian la lista de campings.
Se ve bastante bien.
Queremos una barra de navegación aquí.
Lo mismo al agregar un nuevo campamento.
Vamos a centrar el formulario y vamos a apilar estas dos entradas una encima de la otra en lugar de
tenerlas una al lado de la otra.
Pero vamos a comenzar con la barra de navegación y vamos a trabajar en la plantilla de camping.
Así que volveremos aquí y abriremos la plantilla de campings para comenzar.
bastante marcado y el nuestro no será tan largo como para no comenzar cuando no tenemos todos los botones en los menús desplegables.
Voy a abrir la caja de arranque y voy a ir a los componentes y luego a
la barra de navegación y me encuentro en esta sección todo el tiempo porque aunque bootstrap hace que sea muy fácil
agregar una barra de navegación, todavía se puede ver es
Comenzaremos de forma agradable y simple, pero aun así hay muchas clases que debemos recordar.
Así que definitivamente no hay que avergonzarse por arrancar el bootstrap de Darcs como cualquier otra cosa en esta
clase, no deberías sentirte avergonzado de mirar las cosas.
Pero en particular, el arranque suele ser un desastre con estas clases y elementos, y no
hay forma de hacerlo sin mirar los documentos.
OK, volveremos y haré algo de espacio en la parte superior de mi plantilla
de campings y comenzaremos por definir un Nav. que de nuevo al igual que el encabezado.
Podríamos hacer un div pero un Nav. es un poco más significativo.
Es más semántico.
Así que voy a hacer un navegador con la barra de navegación de la clase y luego barra de navegación predeterminada.
Hay diferentes tipos y colores diferentes o podemos tener una barra de navegación invertida, pero solo vamos
a ir con la predeterminada.
encabezado vamos a agregar una etiqueta de anclaje con clase igual a barra de navegación para un final como ese.
Y luego dentro vamos a agregar un div con una clase igual al fluido del contenedor y
eso nos hará un buen relleno y algo de espacio ahí y luego vamos a agregar otro div con una
clase igual al encabezado de la barra de navegación y luego dentro de la clase es igual a nuestro
Y luego podemos configurar el enlace para que solo sea una barra y luego lo cerraremos y agregaremos el campamento de
yelper así.
Y veamos qué obtenemos con este simple marcado.
Así que tenemos nuestro NAV con un contenedor dentro con el encabezado de la barra de navegación y el encabezado de la barra de navegación solo tiene un ítem
que es la marca de la barra neph.
Vamos a actualizar
OK, entonces tenemos la barra de navegación y luego tenemos nuestra marca aquí y este es un enlace que
cuando hagamos clic nos llevará de vuelta a la espantosa página de aterrizaje.
De acuerdo, agreguemos algunos marcadores de posición aquí para iniciar sesión e inscribirse.
No funcionarán o no harán nada más que verse bien, así que hagámoslo ahora y vayamos a nuestro campamento.
MI. J. como plantilla, luego dentro de la barra de navegación y el contenedor pero no dentro del N. F. bar Hetter.
Vamos a agregar otro div y este div tendrá una clase de colapso que verá lo que
hace.
Y solo un momento y luego Neph bar Dasch colapsan así.
Y luego adentro vamos a agregar un UL y este UL tendrá una clase de nav bar dash nav y luego también barra de navegación hacia la derecha
que lo moverá hacia el lado derecho y luego dentro de eso vamos a tiene tres
enlaces por ahora y cada uno será un aliado.
Y luego, dentro, Ally tendrá una etiqueta de anclaje y dará el primer inicio de sesión.
Y por ahora, el H ref solo se establecerá en nuestra ruta porque todavía no tenemos ningún registro y
haremos lo mismo para registrarlo.
Hagamos la suscripción y luego también finalice la sesión.
DE ACUERDO.
Entonces, veamos cómo se ve esto.
Antes de hablar sobre lo que hace el colapso si actualizamos y no se ve bien, nos perdimos
una clase menor aquí en UL.
Parece que no agregamos ahora, así que solo agregamos la barra de navegación.
Ahora nunca lo hice bien, pero no añadimos el navegador, por lo que ahorraremos, ahora lo actualizaremos y terminaremos
con los tres enlaces en el lado derecho del NAV y también cuando cambie el tamaño aquí.
Tenga en cuenta que aquí mismo se derrumbó.
Y, finalmente, lo que tendremos es un pequeño icono de hamburguesa.
Se ve igual a donde haces clic y su menú.
Por ahora solo los ocultamos cuando llegamos a ese tamaño.
DE ACUERDO.
Así que eso es todo lo que tenemos que hacer para la barra de navegación, excepto por el hecho de que está solo en esta página.
Así que ahora vamos a agregarlo a todas las páginas.
Así que vamos a copiarlo o cortarlo y vamos a moverlo al encabezado.
Así que muévase a la cabeza o parcial.
Voy a abrir eso.
Utilizando la línea de comando C9, las vistas recortan el encabezado de barra de Parshall Ijaw Yes.
Y luego, justo en la parte superior del cuerpo lo agregaremos.
Vamos a sangrar esto apropiadamente.
OK, ahí vamos.
Y tenemos nuestra barra de navegación en el encabezado para que cualquier archivo en el que incluyamos el
encabezado parcial ahora tenga la barra de navegación pero vuelva a iniciar el servidor.
Así que todavía está aquí si agregamos un nuevo campamento, también conseguimos ese bar.
Y si vamos a la página de inicio también tenemos la barra suficiente.
Estupendo.
Así que ahora sigamos para hacer que esta forma se vea un poco mejor.
Entonces, como mencioné anteriormente, hay dos cosas importantes que quiero hacer en esta forma.
La primera es centrarla en el medio de la página y la segunda es apilar la forma
verticalmente en lugar de tener las tres entradas o las dos entradas y el botón alineados horizontalmente
en la pantalla.
Desea tomarlos y apilarlos uno encima del otro.
Comencemos abriendo el archivo correcto que es el nuevo punto.
Sí.
Así que haremos C9 visitas, slash sabía que Ejay nosotros y luego aquí está nuestra forma que tenemos hasta ahora.
Comencemos fácil y agreguemos algunas de las clases de arranque a los formularios o a las entradas, y eso es
control de guiones de formulario.
Y queremos eso tanto en las entradas como en el botón.
Agreguemos en la clase Bootstrap PTEN ETN grande así como así.
Y también lo hacemos entre la falla y veamos qué aspecto tiene.
Entonces nodo después de J.
Sí actualizar
OK, así que estamos obteniendo los controles de arranque aquí y el botón de arranque aunque definitivamente es enorme y
no queremos eso.
Entonces, para solucionar esto, hay algunas cosas que podemos hacer.
El primero es que pondremos todo dentro de un contenedor.
Así que fuimos en la clase div es
igual a contenedor y voy a mover esto a la parte inferior.
Ahí vamos y sangrémoslo apropiadamente.
Ahorre un cambio menor
Ahora tenemos algo de espacio, pero esa es una forma masiva.
Entonces, lo siguiente que haré es usar el sistema de grillas.
Así que agregaremos otro div y este tendrá una clase igual a row así.
Tomemos esto y copiémoslo en la fila.
Entonces todo el formulario entra en una fila ahora.
Y eso también lo hizo.
OK guardar actualizar aún no es una gran diferencia.
Y lo que vamos a hacer es usar CSSA y, de hecho, escribir nuestros propios estilos sobre bootstrap
para centrar esto dándole margen.
Auto todo esto aquí en el lado izquierdo y derecho.
Y solo queríamos ocupar el 30 por ciento de este contenedor en el que se encuentra.
Así que lo hemos hecho antes de que regresemos y voy a romper una de las reglas, así que te
dijeron desde el principio que no debes hacer estilos en línea.
Y definitivamente es una buena idea no hacer eso.
Pero por ahora hasta que lleguemos a una nueva versión donde creamos nuestras propias hojas de estilo, voy a hacerlo
en línea.
Así que voy a hacer un nuevo div en el que ponemos el formulario.
Así.
Y luego voy a dar ese estilo div y voy a comenzar diciendo que es 30 por ciento.
Y simplemente déjalo así y no veamos que obtenemos una forma más pequeña.
Ahora queremos centrar eso.
Así que volvemos aquí.
Digamos margen cero en la parte superior e inferior y Otto a la izquierda y a la derecha.
Ahora tenemos la forma centrada.
Lo siguiente que haremos es hacer que el botón ocupe todo el ancho, que es bastante largo.
Pero lo que haremos es darle el bloque DTN que está construido en forma de Bootstrap para convertirlo en un elemento de bloque.
Y ahora ocupa toda la línea.
A continuación, démosle un espacio entre todos estos elementos para hacer eso.
Usaremos bootstraps construidos en la clase de grupo de formulario.
Entonces, necesitamos un ECO de clase div para formar un grupo de guiones y lo vamos a necesitar para cada entrada.
De modo que cada entrada entra dentro de una de esas cosas y luego solo voy a
duplicar esto y tendremos otra aquí y esto irá dentro de eso.
Y luego tenemos uno más para el botón.
Entonces, tenemos un grupo de formulario clásico tres veces y también necesitamos las etiquetas de cierre de div.
Ahí vamos oh hay uno y necesitamos la otra etiqueta div de cierre aquí.
DE ACUERDO.
Entonces ese grupo de formularios solo junta cosas.
Pero también nos da un poco de espacio.
Ahora tenemos este botón aquí.
Lo siguiente en lo que nos podríamos enfocar es en centrar el texto y para hacerlo, aunque tenemos que
hacer es darle al texto alinear el centro.
Y otra vez voy a hacer eso en línea.
No es una buena idea al menos a largo plazo, pero este es un gran uso para hacer algo rápidamente.
Así que el estilo y el texto se alinearán en el centro.
Ahorre ahora centrado en el medio.
Lo siguiente que debemos hacer es cambiar el color de este botón.
El blanco no se ve muy bien.
Vamos a hacer que sea el botón principal primario que lo hará azul guardar la actualización.
Sí, eso se ve mucho mejor.
Vamos a mover este enlace al link de atrás hacia el medio también.
Entonces copiaremos esto y todo lo que tenemos que hacer es ponerlo dentro de este margen.
Auto div para que esto div aquí después de la forma así y guarde.
Aquí vamos.
agregar un poco de relleno o margen para que no esté en contra de este H-1 hacer eso.
Tenemos que retroceder y lo último que deberíamos hacer es
Volveremos y ya tenemos este div que hemos seleccionado.
Entonces, en lugar de cero marginado, podemos darle un margen de 20 píxeles para comenzar.
Veamos cómo se ve eso.
Ok, eso se ve un poco mejor.
Hagamos algo más como 50.
Y eso podría ser un poco demasiado.
Definitivamente su propia preferencia.
Regresemos y hagamos 25.
Todo bien.
Eso es suficiente por ahora.
Juega con esto tanto como lo desees y puedes hacer que las entradas sean más anchas si te
gustan o más estrechas, pero puedes ver que es receptivo, permanecerá en el medio y se
reducirá un poco.
Por último, deshagámonos de esta marca registrada.
Definitivamente ya no necesitas eso.
En la parte inferior de nuestro pie de página, veremos el archivo de pie de página y haré trampa.
Solo haz esto por ahora y nos deshaceremos de ese rescate.
Ahora tenemos nuestra forma, no se ve tan mal, podemos retroceder, obtenemos una lista de campings, tenemos
suficiente barra, podemos agregar una.
También podemos volver atrás y ver la página de destino que aún no está lista.
Probablemente, ese sea el que más trabajo tenga y será bastante diferente de las otras páginas,
se verá mucho mejor y tendrá muchos más estilos personalizados.
Entonces es por eso que lo guardo hasta más tarde.
Y luego también tenemos nuestro número aquí con nuestros botones falsos que no hacen nada.
Todo bien