Bienvenidos de nuevo a esta lección. Les mostraré uno de los componentes más importantes y más
ampliamente utilizados en Bootstrap, que es el NFR, de modo que puedan ver realmente cómo se obtiene Boucek dotcom.
Usan suficiente componente de barra aquí.
También vamos a usar uno en nuestra aplicación de campamento Yelp y como redimensioné la barra de navegación.
Observe cuán receptivo es y luego observe tan pronto como presione TAB qué tamaño y tamaño de móvil
obtenemos esta buena hamburguesa.
Así que trabajaremos para lograr todo eso en esta lección.
Pero vamos a comenzar más simple.
Lo primero que debemos hacer es ir a los componentes y ir a la barra de navegación y antes de ir mucho más lejos, he
creado un nuevo archivo solo porque vamos a escribir un poco de código.
El viejo se estaba abarrotando.
Lo llamo naff Bar H T M L.
Dentro de todo lo que tienen es que el enlace al programa de arranque no cambia el título aquí.
Lo llamaré barras de navegación bootstrap.
Así.
Ahora vayamos a los documentos y echemos un vistazo a la barra de navegación predeterminada.
Entonces, este ejemplo aquí muestra todas las características importantes en las que podemos tener un enlace de marca.
Podemos tener otros enlaces que podemos haber soltado en los menús.
Podemos tener una forma de barra de navegación y un botón, podemos tener cosas que están en el lado derecho, cosas que
están en el lado izquierdo.
Esto realmente muestra todo.
Es el fregadero de la cocina de las barras naff bootstrap y, en consecuencia, el marcado es un poco largo.
Trabajaremos con todas estas piezas al final de este video.
Pero quiero comenzar más simple y comenzaré mostrándote la forma más sencilla de hacer un número.
Entonces, necesitamos hacer un elemento de navegación y ese elemento de NAV necesita tener dos clases, queremos la barra de navegación y
la barra de navegación, y podemos comenzar con el guardado predeterminado de Dasch.
Y ahora veamos el archivo en el navegador y actualiza.
Puedes ver que espero que se vea y que haya una barra de suficiente barra muy débil en
la parte superior, así que así es como realmente iniciamos la barra NF.
Ahora llenémoslo con un poco de contenido.
Lo primero que veremos es cómo podemos agregar esta marca aquí.
Básicamente el nombre de su empresa.
En la mayoría de los casos.
Y eso es usando un encabezado de barra de navegación y luego dentro del encabezado NFR usamos una marca de barra de navegación.
Comencemos añadiendo que la clase div es igual al encabezado del tablero de navegación y luego dentro de allí vamos a agregar una marca de barra
de navegación que es una etiqueta de anclaje.
Por lo general, al hacer clic en el nombre de la empresa, vuelve a la página de inicio.
Así que haremos eso aquí, etiqueta de anclaje y comenzaremos con un tráfico igual al de Thorpes, para que no nos
lleve a ningún lado.
Class igualará a la marca de barra de navegación nav y solo inventaremos el nombre de una compañía.
Veamos si tengo una taza de café a mi alrededor, así que vamos a tomar café.
Pero para que realmente sea una verdadera startup, debemos cambiar la ortografía un poco.
OK Alex.
Suficientemente bueno para mi.
Café con una K.
Vamos a echar un vistazo.
Actualice y ahora tenemos nuestra marca de barras NAV que es un enlace.
Hago clic en él
No me lleva a ningún lado en este momento, pero al final nuestras aplicaciones lo tendrán de modo que cuando
haga clic en el nombre de la empresa lo lleve de vuelta a la página de inicio siguiente.
Veamos si podemos agregar algunos otros enlaces, como contacto.
Regístrese para registrarse.
Todos esos enlaces comunes en el bar.
Comencemos agregando un enlace de página aquí.
Así que volveremos y luego, fuera del encabezado de la barra de navegación, haremos que otro div en este div recopile
todo el contenido al menos en el lado izquierdo de nuestra barra NAV.
Entonces tenemos el encabezado y luego tendremos algo de contenido y luego, si queremos algo en el
lado derecho, tendremos otro div que tenga otra clase.
Entonces la clase aquí.
En realidad, dos queremos navegación y navegación barra de navegación.
No me preguntes sobre el nombre de su barra de navegación dash nav.
Es una de las grandes críticas de bootstrap es que es un poco feo y no es muy
significativo a veces.
que se creó en respuesta a la falta de sentido semántico de bootstrap si se le llama UI semántica.
Y en realidad hay un marco de CSSA
Y esa es una que realmente disfruto también.
Y debatí la enseñanza.
Pero al final no es tan ampliamente utilizado, no hay tan buenos tutoriales todavía.
Así que volvamos a nuestra diferencia aquí.
Nav de navegación de navegación de clase y navegación de clase ambos.
Y luego, para cada elemento que queremos en este NFR, necesitamos agregar un aliado y luego dentro de la Y, si queremos vincular,
acabamos de tener una etiqueta de anclaje.
Entonces este no irá a ninguna parte.
Una vez más, esto será en la página Acerca de.
Y si vuelvo atrás y actualizo, ahora tenemos un enlace para agregar una más para contactar y guardar volver atrás.
Ahora tenemos dos enlaces, vamos adelante y agreguemos algo al lado derecho de la página.
Agreguemos dos enlaces uno para registrarse o registrarse y otro para iniciar sesión en el lado derecho de la barra
para hacer eso.
convencional usarlo, funcionará exactamente de la misma manera, pero usted quiere tener aliados en lugar de un
pozo, aunque funcionarán perfectamente con un div. poco más sentido para ser en lugar de una UL.
Necesitamos otro contenedor aquí y en realidad en lugar de usar divs es más
Así que vamos a agregar otra UL y esta será Nav. nav bar dash nav y luego barra de navegación
dash.
Derecha.
Y debemos asegurarnos de que deletreemos correctamente, de lo contrario, la clase no tendrá efecto.
Entonces, lo que hará es crear un nuevo grupo de contenido para el lado derecho de esa barra de navegación.
Y ahora solo tenemos que llenarlo.
Así que agregaré dos enlaces tanto en edgewise.
El primero no irá a ninguna parte y dirá registrarse y luego tendremos otro que solo dice
iniciar sesión.
Vamos a ver.
Actualiza la página y puedes ver que tenemos contenido a la derecha.
Sin embargo, está justo en el límite y para solucionarlo, podemos agregar un contenedor a una barra
suficiente como usamos el contenedor antes para agregar espacio a nuestro contenido principal.
Podríamos agregar uno en lugar de una barra de navegación.
Así que puse todo en la barra neph en lugar de un contenedor.
Entonces la clase es igual a contenedor
Solo mueve esto hacia abajo.
Asegúrate de que todo esté sangrado apropiadamente.
Aquí vamos.
Probémoslo.
Bonito.
Así que ahora todo está centrado agradable y correctamente.
Te mostraré si agregué el contenedor fuera del navegador y pusieron toda la barra de navegación dentro.
Veremos que pasa.
Ahora bien, si tuviera bares lo suficientemente frescos, en realidad me corto y solo cruzo la calle.
Entonces el contenedor hará eso con lo que pongamos dentro de él.
Y en este caso, queremos que el contenedor esté dentro de la barra de navegación para que no constriña
la parte real de la máscara, sino que restringe el contenido dentro de ella.
DE ACUERDO.
Así que tenemos nuestro contenedor Hetter, tenemos el material a la izquierda y tenemos algo de contenido a la derecha para
que pueda verlo aquí.
Ahora qué paso un poco e ir y tomar esta barra de navegación básica o la barra de
navegación predeterminada que tienen en los documentos y vamos a copiar todo esto y lo pondré justo debajo ahora están haciendo un poco
de espacio.
Un montón de comentarios para hacerlo más claro.
Barra de navegación predeterminada
Y echemos un vistazo a la actualización.
Aquí está este navegador y hay algunas cosas que quiero resaltar.
Una es que hemos caído en los menús, pero en realidad no funcionan.
Y también a medida que cambiamos el tamaño de la ventana obtenemos el menú de hamburguesas aquí.
Esos enlaces desaparecen.
El formulario se va y para revelarlos debemos hacer clic aquí.
Pero eso tampoco funciona.
Comencemos haciendo que funcione y luego hablaremos de todas estas piezas diferentes y de lo
que hacen para que funcione.
Necesitamos ir e incluir el archivo javascript bootstrap.
Entonces, si volvemos a los documentos de arranque, haremos clic en descargar.
También hay un archivo Javascript que necesitamos que está aquí.
Usaré la versión Cdn pero también se incluye dentro de la carpeta que descargaste.
Simplemente se llama bootstrapped.
Sí.
O la versión minimizada arranca Mencius.
Y agreguemos eso y lo haremos abajo en la parte inferior de nuestro cuerpo y guardaremos.
Y sé que no hemos hablado de javascript.
No sabes qué es un script y qué fuente aquí no importa.
Simplemente vamos a conectarlo al bootstrap.
Y ahora nuestra actualización
¿Podemos resolver un pequeño problema que le mostraré aquí nos dice que bootstraps javascript
requiere consulta.
No se preocupe por qué es esto y cómo llegó a este mensaje.
Pero solo quiero mostrártelo para que veas el mensaje real que recibimos.
Necesitamos solicitar una consulta J de la que tampoco hayamos hablado.
Pero es bastante fácil ir y obtener.
No tenemos que escribir ningún javascript.
No necesita saber ningún javascript.
Solo tenemos que incluirlo.
Entonces, todo lo que tenemos que hacer es buscar Jay Queries CDN, que está en el código que Jay dot
com y aquí abajo deberá seleccionar la versión más reciente y copiar esta URL.
Este es el archivo Querrey y luego volveremos aquí.
Vamos a agregar otra de estas etiquetas de script.
Básicamente copiando este código exacto.
De hecho, haré eso para que sea más fácil duplicar esa línea exacta y cambie esta url para que sea la
consulta de jey que eres.
Si todo lo demás falla, simplemente puede escribir esto.
No es tan malo si eres un l, pero tengo esto buscando Jay queery CDN y lo guardaré y
esto tiene que venir antes del archivo javascript bootstraps porque se basa en una consulta.
Entonces, una vez más, no se preocupe demasiado por cómo funciona la consulta de Jay.
Todo esto surgirá dentro de unos minutos.
Pero para obtener el máximo rendimiento de arranque y, en particular, las barras de navegación y el menú desplegable.
Solo necesitamos tener estas dos líneas cada vez que la usemos, así que volveremos y actualizaremos.
En primer lugar, se eliminan los menús que ahora funcionan, como se puede ver, ahora tenemos menús desplegables.
No vamos a hablar de eso en este video, pero a medida que cambio el tamaño y obtengo esa hamburguesa.
La hamburguesa ahora funciona cuando hago clic en ella.
Cambia ese material oculto.
Entonces, la forma en que funciona aquí, aquí está este pequeño punto de quiebre donde todo este
contenido se esconde y todo lo que vemos es el encabezado y ese botón.
luego, cuando hacemos clic en el botón, todo el contenido previamente oculto reaparece. Vamos a hacer que funcione.
Y
Ahora para nosotros
Pero vamos a hacer una versión mucho menos complicada en la que solo queremos ocultar estos
cuatro enlaces para que cuando cambiemos el tamaño de estos cuatro enlaces estén ocultos y luego sean realmente rápidos.
Para hacer eso vamos a comenzar mirando cómo se logra en esta versión predeterminada este monstruo
gigante de una barra de navegación.
Y solo señalaré la línea importante aquí.
Div colapsar todo lo que coloquemos dentro de este div se colapsará cuando accedamos al tamaño de Móvil para que no se convierta en el botón para nosotros.
Barra de navegación del colapso de la clase de
No hará el alternar en la reaparición en la clandestinidad, pero ocultará todo el contenido que pongamos
dentro cuando acceda a esa tableta y a su tamaño móvil.
Así que vamos a copiar esto y solo tenemos que envolverlo con el contenido que
queremos ocultar y queremos ocultarlo aquí.
Estos dos Juelz Entonces, los cuatro enlaces que queremos ocultar cuando alcanzamos ese tamaño de pantalla más pequeño.
Así que agregue la etiqueta de cierre y guarde y hay una línea aquí y esto es importante y lo abordaré
en un momento.
No nos afectará todavía, pero si actualizamos.
Verás.
Ahora, cuando cambio el tamaño, hay un punto aquí donde todo el contenido dentro de la div del
colapso desaparece.
Ahora no vuelve a aparecer.
No conseguimos esta hamburguesa
No hacemos clic en nada, pero se ha colapsado, se ha ido.
Y eso es porque agregamos en esta línea aquí el colapso de la barra de navegación del colapso de clase div.
Lo siguiente que tenemos que hacer es agregar la hamburguesa y es un poco de código.
Desafortunadamente, todavía es mucho mejor que si tuviéramos que hacerlo nosotros mismos.
Pero la hamburguesa es en realidad todo esto aquí mismo.
Así que voy a copiar eso y pegarlo dentro de una siesta o Hetter antes de que nuestro café no se contacte.
Y ahorraremos, volveré a lo que hace.
Vamos a actualizar.
Y ahora si cambio el tamaño obtengo la hamburguesa.
Aquí vamos.
Ahora déjame explicarte un poco sobre cómo funciona.
Entonces hay un botón y luego dentro de ese botón hay tres tramos y cada uno
es responsable de hacer una de estas barras.
Entonces, no es una imagen que estamos viendo aquí, en realidad cada equipo está creando esta pequeña spand que
están siendo diseñados en esas barras angostas para hacer esa hamburguesa.
Y luego, en cuanto a mostrar y ocultar el contenido cuando hacemos clic en él, lo
que es realmente importante es que tenemos este atributo de destino de datos y lo que sea que esté configurado en nuestro caso, el ejemplo B-S.
Ahora para nuestro colapso, una red de ejemplo de arranque para nuestro club así que cambiemos a sí.
Nav. demo así como así.
Entonces tenemos que cambiar la ID del contenido que queremos colapsar en realidad que queremos
mostrar y ocultar.
Así que lo cambiaré para que coincida con la demostración de nav.
Observe una diferencia importante.
No estamos agregando el Arctic Thor Así que es como CSI cuando seleccionamos algo con C dice que necesitamos usar
ese Octa Thorpe para apuntar a un ID así que dejamos el ID como solo el texto del nombre.
Ahora si la demostración aquí agregamos eso a Thorpe guardará la actualización.
Ahora, si cambio el tamaño, obtenemos la hamburguesa y hacen clic en ella y funciona para alternar entre mostrar y esconder.
Estupendo.
Lo último que te mostrará es que si movemos algo fuera de este colapso.
Así que tomemos estos enlaces aquí.
La cuenta o el sobre y el contacto y simplemente movemos los que están aquí fuera del div del colapso y
me actualizo pueden ver que no se colapsan en realidad permanecen allí y luego hago clic en eso y los otros dos que están
en lugar del colapso son alternadas
Ahora no estoy diciendo que esto se vea bien pero sí ilustra la importancia de ese colapso div. nuestro caso por diferentes enlaces a eso están a la derecha o a la izquierda.
Entonces, sea lo que sea lo que sucedió al lado del colapso o lo que sea que tengamos en
Todos colapsarán cada vez que lleguemos a ese tamaño móvil más pequeño.
Y luego para hacer que vuelvan a aparecer, hacemos clic en este botón aquí y ese
botón tiene un atributo de destino de datos y cualquier ID a la que corresponda se ocultará y se mostrará cuando hagamos clic en eso.
Y esa es la idea aquí.
Está bien, es una especie de maratón.
Una gran cantidad de cosas que se usan para crear una barra de navegación bootstrap.
archivo y diseccionando partes de él.
Pero de nuevo, la forma en que llegamos fue simplemente copiando esto en nuestro
Y así
es como hacemos lo suficiente cada vez que tomamos ese código de ejemplo y descubrimos qué piezas necesitamos y vamos desde allí.