El header de nuestro sitio

Resumen

Conocemos el componente de Navbar de Bootstrap para crear el encabezado de nuestro website. Conoce más de su manejo en https://getbootstrap.com/docs/4.1/components/navbar/

Edwin Daniel Acero Rojas

student•

En bootstrap 5 ya no se usa ml-auto para llevar los elementos a la derecha. Ahora se usa ms-auto. En bootstrap 4 era l y r para left y right, Ahora es: s = start e = end

Fernando Gill

student•

Gracias!!

Kevin FG

student•

gracias :D

Juan C Felizzola

student•

Como recomendación: usar la etiqueta headerantes del nav

Iván Toro

student•

Muy cierto.

Jhon Carlos Colorado Angulo

student•

Cierto, porque le da semántica

gregory yepez

student•

Propiedades de espaciado

m - para las clases que establecen margin
p - para las clases que establecen padding

Donde los lados es uno de:

t- para las clases que establecen margin-top o padding-top
b- para las clases que establecen margin-bottom o padding-bottom
l- para las clases que establecen margin-left o padding-left
r- para las clases que establecen margin-right o padding-right
x- para las clases que establecen tanto -left y -right
y- para las clases que establecen tanto -top y -bottom

en blanco - para las clases que establecen un margin o padding en los 4 lados del elemento
Donde el tamaño es uno de:

0- Para las clases que eliminen el margino padding configurándolo como.0
1- (por defecto) para las clases que establecen margino padding para $ spacer * .25
2- (por defecto) para las clases que establecen margino padding para $ spacer * .5
3- (por defecto) para las clases que establecen margino padding para $ spacer
4- (por defecto) para las clases que establecen margino padding para $ spacer * 1.5
5- (por defecto) para las clases que establecen margino padding para $ spacer * 3
auto- Para las clases que configuran el margin auto.

Ana Maria Cubides Acosta

student•

Excelente aporte! gracias

Juan Miguel Jimenez

student•

¿En el tamaño a que se refiere el $spacer?

Diego Alvaro Parra Abad

student•

No sé ustedes, pero me dolió en el alma usar el "!important" después de varios cursos donde te recuerdan a nunca usarlo. :(

Jhonatan David Ibarra Lavado

student•

jajajajajja si total

Esteban Casallas

student•

han muerto muchos osos 🙁

Daniel Vaca

student•

Si queremos que el menú no se colapse en dispositivos con ancho mediano para abajo, podemos usar: “navbar-expand-md”

RODRIGO ALEJANDRO CASTILLO MONTERROSA

student•

gracias

Harold David Avila Sabogal

student•

Muchas gracias

bruno guerra solano

student•

Paula Andrea Anaya Ramirez

student•

ME ENCANTAAAA y yo rompiendome el coco haciendo los navbar con puro css <3

Rafael Alvarez Cardona

student•

jajajaj yo estaba igual, dure casi 1 mes y medio haciendo mi web y con un framework lo termine en 3 dias :V lol pd: parecias psicopata escribiendo HTML y CSS puro ajjajajajajajajajaj

Sergio Arturo Enriquez Nava

student•

Jejeje la verdad que si, desde importar los asset's para el menu de hamburguesa, estaba renuente de aprender bootstrap, me retracto.

ivan dario castro

student•

Hice un diseño y temática un poco diferente pero guiado por el código que se utilizo en clase basado en el Bootstrap.

Reynaldo Francisco Moreno Briceño

student•

Si estan usando la version 5 de Bootstrap al final del video cuando el profesor agrega el container, en la version 5 viene como "container-fluid". Solo quiten el "-fluid" y listo.

Alarcon Ricardo Ezequiel

student•

Me salvaste, estuve probando como 10 clases diferentes a ver si alguna funcionaba jajaja muchas gracias!

Reynaldo Francisco Moreno Briceño

student•

De nada, sigue dandole! ;)

Jose Barboza

student•

si no les sale el desplegable como lo llaman la hamburguesa asegurarse que tienes copiado esto al final del body antes de cerrar la etiqueta </body>.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>```

Juan Fernando Bermúdez Villa

student•

Salvaste una vida de la frustración bro, thankss

Jorge Fidel Zubieta Choque

student•

justamente esta buscando eso y tambien me salvaste la vida amigo! gracias!!!!

Jairo Merea Dueñas

student•

IMPORTANTE

Ahora el Margin Left, se calcula por medio de "ms-auto"

Marco David Romero

student•

En Bootstrap 5.1, el Nav ya contiene un container. Solo quitenle el -fluid para que les quede como en el video.

Alonso Castellanos

student•

Menú de anvorgesa

Rafael Alvarez Cardona

student•

eso si me ha costado hacerlo jajajajajaja ANVORGESA

Karla

student•

Anvorgesitas

Alberto Alejandro Soto Herrera

student•

Al utilizar el <header> y luego el <nav> estamos cumpliendo con la semántica de HTML5 es recomendable x cuestiones de semántica

David Felipe Caicedo Canchon

student•

En bootstrap 5 en vez de usar mr-auto y ml-auto podemos usar me-auto y ms-auto

Joel Dominguez Merino

student•

Muchas Gracias! Justamente tenia ese problema que no me funcionaba ml-auto

Andrés David Solarte Vidal

student•

Uso !important. Adios osos polares :(

Esteban Casallas

student•

han muerto muchos 🙁

Kathion Vega

student•

mr - se refiere a margin right
ml- se refiere al margin left

Héctor Aguilar Mogollan

student•

Alguien sabe que tantos cambios hay a la versión 5 de bootstrap??

RONNY MICHAEL MINDA VERA

student•

Yo estoy igual y en la documentación me pierdo un poquito

Cristobal Nyram

student•

Hola te explico amigo la documentación ha estado mejorando y mucho, como podras darte cuenta ahora ya no se alinea de la misma la forma, ahora el

ul  del navbar se alinea con las siguientes lineas de codigo

<ul class="navbar-nav ms-auto">

Tambien lo puedes consultar en la documentacion, la parte llamada

**Margin utilities o en español utilidades de margin **

mira te dejo una captura, espero les sirva

Ramon Duthil

student•

vengo haciendo varios cursos en Platzi y en todos dicen EVITEN EL USO DEL !IMPORTANT jajajaja entonces en esta clase me entro miedo de usarlo jajajaja

Never Andrés Aparicio Hernandéz

student•

si tambien pense lo mismo pero es la unica forma de como funciona creo que con los frameworks toca asi, sera porque casi no lleva css

Tito Rodriguez

student•

Exactamente, sin embargo, creo que si estructuras bien el css, no deberia ser necesario usarlo

Estiventh Leonardo Neira Aldana

student•

si desean arreglar donde dice "Conf Hawaii" para que este centrado pueden usar este CSS

.navbar-brand {
  display: flex;
}

Jhonatan David Ibarra Lavado

student•

en ese sentido podemos colocar la clase ' d-flex'

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>```

El header de nuestro sitio

Introducción al curso

Repositorio del curso de bootstrap

Bootstrap 4 ¿Qué trae de nuevo esta versión?

¿Que es un framework de frontend?

Nuestro Proyecto: Hola Mundo de Bootstrap

Creando el sitio web

La grilla de Bootstrap

Reto: La grilla de Bootstrap

El footer

El header de nuestro sitio

Creando un carousel de imágenes

Agregando texto informativo del evento

Agregando botones

Las cards de Bootstrap 4

Pastillas de texto

Agregando un contenedor de ancho completo

Los formularios de Bootstrap 4

Agregando un tooltip

Scrollspy: Conociendo la ubicación del usuario en el header

Agregando un modal para comprar tickets

Un nuevo formulario para completar la compra

Deploy a producción

Poniendo nuestro sitio en producción

Conclusiones del curso