CursosEmpresasBlogLiveConfPrecios

El header de nuestro sitio

Clase 8 de 21 • Curso de Bootstrap 4

Contenido del curso

Introducción al curso

  • 1
    Repositorio del curso de bootstrap

    Repositorio del curso de bootstrap

    00:15 min
  • 2
    Bootstrap 4 ¿Qué trae de nuevo esta versión?

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

    03:23 min
  • 3
    ¿Que es un framework de frontend?

    ¿Que es un framework de frontend?

    02:45 min
  • 4
    Nuestro Proyecto: Hola Mundo de Bootstrap

    Nuestro Proyecto: Hola Mundo de Bootstrap

    02:34 min

Creando el sitio web

  • 5
    La grilla de Bootstrap

    La grilla de Bootstrap

    12:09 min
  • 6
    Reto: La grilla de Bootstrap

    Reto: La grilla de Bootstrap

    05:43 min
  • 7
    El footer

    El footer

    10:38 min
  • 8
    El header de nuestro sitio

    El header de nuestro sitio

    Viendo ahora
  • 9
    Creando un carousel de imágenes

    Creando un carousel de imágenes

    07:58 min
  • 10
    Agregando texto informativo del evento

    Agregando texto informativo del evento

    12:51 min
  • 11
    Agregando botones

    Agregando botones

    04:42 min
  • 12
    Las cards de Bootstrap 4

    Las cards de Bootstrap 4

    11:44 min
  • 13
    Pastillas de texto

    Pastillas de texto

    04:38 min
  • 14
    Agregando un contenedor de ancho completo

    Agregando un contenedor de ancho completo

    12:26 min
  • 15
    Los formularios de Bootstrap 4

    Los formularios de Bootstrap 4

    15:43 min
  • 16
    Agregando un tooltip

    Agregando un tooltip

    04:07 min
  • 17
    Scrollspy: Conociendo la ubicación del usuario en el header

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

    07:23 min
  • 18
    Agregando un modal para comprar tickets

    Agregando un modal para comprar tickets

    04:47 min
  • 19
    Un nuevo formulario para completar la compra

    Un nuevo formulario para completar la compra

    04:40 min

Deploy a producción

  • 20
    Poniendo nuestro sitio en producción

    Poniendo nuestro sitio en producción

    04:08 min
  • 21
    Conclusiones del curso

    Conclusiones del curso

    00:51 min
Tomar examen
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/

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

      Comentarios

      Edwin Daniel Acero Rojas

      Edwin Daniel Acero Rojas

      student•
      hace 5 años
        Fernando Gill

        Fernando Gill

        student•
        hace 5 años
        Kevin FG

        Kevin FG

        student•
        hace 5 años
      Juan C Felizzola

      Juan C Felizzola

      student•
      hace 8 años
        Iván Toro

        Iván Toro

        student•
        hace 8 años
        Jhon Carlos Colorado Angulo

        Jhon Carlos Colorado Angulo

        student•
        hace 8 años
      gregory yepez

      gregory yepez

      student•
      hace 7 años
        Ana Maria Cubides Acosta

        Ana Maria Cubides Acosta

        student•
        hace 7 años
        Juan Miguel Jimenez

        Juan Miguel Jimenez

        student•
        hace 7 años
      Diego Alvaro Parra Abad

      Diego Alvaro Parra Abad

      student•
      hace 6 años
        Jhonatan David Ibarra Lavado

        Jhonatan David Ibarra Lavado

        student•
        hace 6 años
        Esteban Casallas

        Esteban Casallas

        student•
        hace 6 años
      Daniel Vaca

      Daniel Vaca

      student•
      hace 7 años
        RODRIGO ALEJANDRO CASTILLO MONTERROSA

        RODRIGO ALEJANDRO CASTILLO MONTERROSA

        student•
        hace 7 años
        Harold David Avila Sabogal

        Harold David Avila Sabogal

        student•
        hace 7 años
      bruno guerra solano

      bruno guerra solano

      student•
      hace 6 años
      Paula Andrea Anaya Ramirez

      Paula Andrea Anaya Ramirez

      student•
      hace 6 años
        Rafael Alvarez Cardona

        Rafael Alvarez Cardona

        student•
        hace 6 años
        Sergio Arturo Enriquez Nava

        Sergio Arturo Enriquez Nava

        student•
        hace 6 años
      ivan dario castro

      ivan dario castro

      student•
      hace 5 años
      Reynaldo Francisco Moreno Briceño

      Reynaldo Francisco Moreno Briceño

      student•
      hace 5 años
        Alarcon Ricardo Ezequiel

        Alarcon Ricardo Ezequiel

        student•
        hace 5 años
        Reynaldo Francisco Moreno Briceño

        Reynaldo Francisco Moreno Briceño

        student•
        hace 5 años
      Jose Barboza

      Jose Barboza

      student•
      hace 6 años
        Juan Fernando Bermúdez Villa

        Juan Fernando Bermúdez Villa

        student•
        hace 5 años
        Jorge Fidel Zubieta Choque

        Jorge Fidel Zubieta Choque

        student•
        hace 5 años
      Jairo Merea Dueñas

      Jairo Merea Dueñas

      student•
      hace 5 años
      Marco David Romero

      Marco David Romero

      student•
      hace 4 años
      Alonso Castellanos

      Alonso Castellanos

      student•
      hace 6 años
        Rafael Alvarez Cardona

        Rafael Alvarez Cardona

        student•
        hace 6 años
        Karla

        Karla

        student•
        hace 6 años
      Alberto Alejandro Soto Herrera

      Alberto Alejandro Soto Herrera

      student•
      hace 7 años
      David Felipe Caicedo Canchon

      David Felipe Caicedo Canchon

      student•
      hace 5 años
        Joel Dominguez Merino

        Joel Dominguez Merino

        student•
        hace 5 años
      Andrés David Solarte Vidal

      Andrés David Solarte Vidal

      student•
      hace 6 años
        Esteban Casallas

        Esteban Casallas

        student•
        hace 6 años
      Kathion Vega

      Kathion Vega

      student•
      hace 8 años
      Héctor Aguilar Mogollan

      Héctor Aguilar Mogollan

      student•
      hace 5 años
        RONNY MICHAEL MINDA VERA

        RONNY MICHAEL MINDA VERA

        student•
        hace 5 años
        Cristobal Nyram

        Cristobal Nyram

        student•
        hace 5 años
      Ramon Duthil

      Ramon Duthil

      student•
      hace 6 años
        Never Andrés Aparicio Hernandéz

        Never Andrés Aparicio Hernandéz

        student•
        hace 6 años
        Tito Rodriguez

        Tito Rodriguez

        student•
        hace 6 años
      Estiventh Leonardo Neira Aldana

      Estiventh Leonardo Neira Aldana

      student•
      hace 6 años
        Jhonatan David Ibarra Lavado

        Jhonatan David Ibarra Lavado

        student•
        hace 6 años

      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

      Gracias!!

      gracias :D

      Como recomendación: usar la etiqueta headerantes del nav

      Muy cierto.

      Cierto, porque le da semántica

      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.

      Excelente aporte! gracias

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

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

      jajajajajja si total

      han muerto muchos osos 🙁

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

      gracias

      Muchas gracias

      Sin título.png

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

      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

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

      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.

      Event-Shop - Google Chrome 26_07_2021 4_37_44 p. m..png

      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.

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

      De nada, sigue dandole! ;)

      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>```

      Salvaste una vida de la frustración bro, thankss

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

      IMPORTANTE

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

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

      Menú de anvorgesa

      eso si me ha costado hacerlo jajajajajaja ANVORGESA

      Anvorgesitas

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

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

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

      Uso !important. Adios osos polares :(

      han muerto muchos 🙁

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

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

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

      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

      margin-uti.jpg

      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

      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

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

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

      .navbar-brand { display: flex; }

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