Barra de navegación con Bootstrap

Clase 29 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Vamos a ver como construir un menú de navegación con Bootstrap

Sergio Zapata Donado

student•

Para los que están en la versión 4.x

    <!-- Menú -->

    <nav id="menu-contaimer" class="navbar navbar-light">
        <div class="container d-inline-block">
            <div class="row">
                <div class="col-7 col-sm-5 col-md-4 col-lg-3 offset-2 offset-sm-0 colum">
                    <ul class="nav navbar-nav flex-row justify-content-between">
                        <li class="nav-item">
                            <a href="#" class="nav-link active">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Catalogo</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Carrito</a>
                        </li>
                    </ul>
                </div>
                <div class="col-12 col-md-6 offset-md-2 offset-lg-3 colum">
                    <form>
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="¿Encontró lo que buscaba?">
                            <span class="input-group-btn"></span>
                            <button class="btn btn-watch" type="button">
                                Buscar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </nav>

    <!-- /Menú -->

El CSS es el mismo de sacha

Juan Barboza

student•

Excelente, gracias!

Cesar David Ramírez Dimaté

student•

Tienes que pulir ciertos detalles en tu código:

La clase colum no existe, eliminala.
La clase input-group-btn no existe, cambiala por input-group-append.
Cambia btn btn-watch por btn btn-platzi.
No utilices nav navbar-nav flex-row justify-content-between cambialo por navbar-nav flex-row justify-content-around.
Deja los estilos que colocó Sacha para las dos columnas col-10 offset-1 col-md-4 offset-md-0 y col-12 col-md-6 offset-md-2.

Javier Eduardo Perez Carreño

student•

Estoy trabajando con la versión v4.0.0-alpha.6 y este es el código HTML para que quede igual al de Sacha

<!-- Menu -->
	<nav id="menu-container" class="navbar">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-10 offset-2 offset-md-0">
            <ul class="nav">
              <li class="nav-item">
                <a class="nav-link activo" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Catálogo</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Carrito</a>
              </li>
            </ul>
          </div>
          <div class="col-md-6 col-12 offset-md-2">
            <form>
              <div class="input-group">
                <input type="text" class="form-control" placeholder="¿Encontró lo que buscaba?">
                <span class="input-group-btn">
                  <button class="btn btn-platzi" type="button">Buscar</button>
                </span>
              </div>
            </form>
          </div>
        </div>
      </div>
    </nav>
    <!-- /Menu -->

Y este es el código CSS

#menu-container {
	background-color: #f7f7f9;
}

.btn-platzi {
	background-color: #99c84a;
	color:white;
}

.btn-platzi:hover {
	background-color: #8ab542;
}

input.form-control:focus {
	border-color: #99c84a;
}

.nav-link {
	color: #D5D5D7;
}

.nav-link:hover {
	color: #464a4c;
}

.activo,
.activo:hover{
	color: black;
}

Cesar David Ramírez Dimaté

student•

Excelente, aunque puedes pulir ciertos detalles:

Cambia el primer navbar por navbar navbar-light, o sino te va a quedar pegado en todo el extremo de la pantalla.
Agrégale al container la clase d-inline-block.
En <ul> deja las clases navbar-nav flex-row justify-content-around.
Cambia la clase activo (que no existe) por active.
Cambia el input-group-btn (que no existe) por input-group-around.

Jose L. Figueroa

student•

Muchas gracias @cesardramirez_ estaba batallando bastante… tal cuál, el nav rompe todo lo de los 2 videos anteriores!!

Ismael Teixeira

student•

Hola! para todas las personas que entren al curso sepan que esta version de Bootstrap es la version alpha 6.0, yo estoy al 4 de Sep del 2017 y he podido ver que el curso tiene mas de un año de haberse lanzado y pues muchas cosas se han desactualizado tanto con este curso de Bootstrap como con el de Foundation, sin embargo no es mala idea ver todos los videos pues aunque habran cosas que cambiaran de version en verson (como esta barra de navegacion, la diferencia es bastante) recomiendo ver los videos pues nos enseñan las bases del Framework las cuales creo que dificilmente cambiaran. Saludos!

Mario Ruano Fernández

student•

Es cierto. Hace unos días terminé con Foundation (donde note pocos cambios), y hoy he comenzado con Bootstrap, pero con su versión más reciente, y los cambios son notables.

En el caso de esta navbar, estoy intentando hacerla lo más parecida.

Otra opción es trabajar con la versión con la que se trabaja en el vídeo, pero se pierden las novedades…

Alejandro Sulbaran

student•

Tienes razon amigo, a mi me costo replicar al 100% lo que se dicta aqui haciendo cambios con la documentacion oficial, y la verdad no es la idea perderse tanto

Dayan Betancourt

student•

Hola, en el minuto 9:28 se encima el video del profesor con el resultado del ejercicio y no se ve.

Blanca Segura Garcia

student•

pero luego se ve …

Víctor de Jesús Pacheco Padilla

student•

La clase que se utiliza para colocar una barra de navegación es navbar. Se le coloca a la etiqueta _nav _Se puede utilizar navbar-light para darle color gris, y al pasar el cursos por encima, se pone de un color más oscuro.

Luego se crea un _ul _con la clase nav navbar-nav, dentro de él, los _li _se crean con la clase nav-item y dentro de ellos, una etiqueta a con la clase nav-link.

Estructura:

nav class=“navbar navbar-light”
- ul class=“nav navbar-nav”
  - li class=“nav-item active”
    - a class=“nav-link”

Enzo Aliatis

student•

Si el curso esta desactualizado, pero bueno con la Doc a la mano todo se puede

Enzo Aliatis

student•

<!-- Menu -->
  <div id="menu-container">
    <nav class="navbar navbar-expand-md navbar-light bg-light">
      <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
          aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
  
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Catálogo</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Carrito</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Buscar">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
          </form>
        </div>
      </div>
    </nav>
  </div>
  <!-- /Menu -->```

Cesar David Ramírez Dimaté

student•

Tu código no aplica para nada en la versión 4.1.1.

Hector Vasquez

student•

En la última versión, no entiendo cuál es la manera correcta de hacer que el buscador se vea alineado a la derecha en pantallas grandes y al achicar se vea abajo centrado en una línea nueva

Hector Vasquez

student•

Al final lo hice así:

<nav id="menu-container" class="navbar navbar-expand navbar-light d-block d-md-flex">
      <ul class="navbar-nav mr-auto justify-content-center justify-content-lg-start">
        <li class="nav-item active"><a class="nav-link" href="#">Menu</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Catálogo</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Carrito</a></li>
      </ul>
      <form class="form-inline my-2 d-block d-md-flex text-center">
        <div class="item-group">
          <input type="text" class="form-control d-inline-block" placeholder="¿Encontró lo que buscaba?" aria-label="Search">
          <span class="item-group-btn">
            <button class="btn btn-platzi" type="button">Buscar</button>  
          </span>
        </div>
        <!--<input class="form-control mr-sm-2" type="search" placeholder="¿Encontró lo que buscaba?" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0 btn-platzi" type="submit">Buscar</button>-->
      </form>
      <!--<ul class="nav navbar-nav pull-xs-right">
          <li class="nav-item">
              <a class="nav-link" href="#" title="I collapse on `sm` screens">About</a>
          </li>
      </ul>-->
    </nav>

Y css:

body{
	font-family: 'Montserrat', sans-serif;
}

#header-container{
	background-color: #99c84a;
	color: #fff;
}

#menu-container{
	background-color: #f7f7f9;
}
#menu-container .form-control{
	width: auto!important;
}

.btn.btn-platzi{
	background-color: #99c84a;
	color: #fff;
}
.btn.btn-platzi:hover{
	background-color: #8ab542;
}

input.form-control:focus{
	border-color: #99c84a;
}

Platzi Team

student•

En mi opinion es la mejor implementación usando la ultima versión estable de bootstrap (v4.0.0). He visto la documentación y la verdad no entiendo muchas de las clases que utilizaste en tu implementación. Aún así las iré desglosando para entenderlas. No hubiese podido hacerlo sin una guia como esta porque no sabria que condiciones eran necesarias para igualar lo que Sacha logra en el video. Saludos

EP Development

student•

este es el codigo para el menu para la version 4.x
hay ajustes y agregados que se hacen para que quede como en el video,

<!-- Menu -->
    <nav id="menu-contaimer" class="navbar navbar-light">
      
        <div class="container d-inline-block">
            <div class="row">
                <div class="col-10 offset-1 col-md-4 offset-md-0">
                    <ul class="nav navbar-nav flex-row justify-content-around">
                        <li class="nav-item active">
                            <a href="#" class="nav-link">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Catalogo</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Carrito</a>
                        </li>
                    </ul>
                </div>
                <div class="col-12 col-md-6 offset-md-2 ">
                    <form>
                        <div class="input-group">
                          <input type="text" class="form-control" placeholder="¿Encontró lo que buscaba?">
                          <span class="input-group-btn">
                            <button class="btn btn-platzi" type="button">
                              Buscar
                            </button>
                          </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </nav>
    
    <!-- /Menu -->

Cesar David Ramírez Dimaté

student•

Excelente, es el más cercano a lo que tiene Sacha, solo puliría algunos detalles:

Cambia la clase input-group-btn (que no existe) por input-group-around.

Jose L. Figueroa

student•

Para poder centrar los** items del nav como lo hace Sacha versión 4.1 Bootstrap (Agosto 2018)**, se tienen que utilizar las siguientes clases:

En el div container : d-inline-block
En el ul nav : navbar-nav flex-row justify-content-around

En caso de no ser así, los elementos flotarán hacia abajo como naturalmente lo hace una lista.

Les comparto mi ej:

javier alejandro segovia

student•

dios mio bootstrap lo comando que pone esta muy desactualizado

Hernán Quiroga

student•

A mi ni si quiera me funciona el css flex que descargamos del curso con la versión vieja. Y al linkear el css del nuevo boostrap (que ya incluye flex) se va todo al carajo. Igual lo estoy trabajando en una web que ya estaba haciendo desde antes de ver el curso

Ricardo Celis

teacher•

Gracias por su feedback esperen novedades muy pronto!

Jose Francisco Romero Meza

student•

ya revisaste que tu link, esté escrito correctamente?, yo lo realizé con y sin el archivo .min, en bootstrap 4 y funciono correctamente.

Carlos Enrique Rojas Falcone

student•

Hola, ¿cómo puedo centrar el menú .nav dentro de la columna sin usar el offset?

He puesto .text-xs-center pero no funciona.

Gracias.

CARLOS GUZMAN

student•

Buena tarde compañero, recién he llegado a este video y me topé con la misma inquietud tuya, al parecer ese nav bar esta tomando otro comportamiento diferente flex y eso hace que no opere y funcione como se espera cuando intentas alinearlo.

Yo lo solucione de la siguiente forma:

Agregué al ul del Nav un ID, lo llamé top-menu. lo anterior para luego en el app.css aplicar la propiedad Display:flex. y así convertir ese ul en un elemento de tipo FLEX-BOX.
Ajusté un poco los tamaños de la columna que contiene el NAV.
Asi: <div class="col-xs-12 col-md-4">
Usé las propiedades de Bootstrap para centrar elementos de acuerdo a los media query,
flex-items-xs-center flex-items-md-left

El CSS quedá asi:
#top-menu{
display: flex;
}
Si tienes alguna duda me cuentas;

Fernando Gonzales

student•

lastima no se puede ver bien los detalles que resalta quien dicta el curso. igual que otros cursos donde se movian la ventana preview del profesor.

Juan David lemus Rubiano

student•

hago una pregunta, por que todo el contenido del sitio se mete en un container y se ahora uno esta div.container, y ahorra lineas de codigo

Jose Francisco Romero Meza

student•

para todos los que se les a complicado debido a la nueva versión Aquí adjunto el codigo, espero les ayude:

<nav class=“navbar navbar-expand-lg navbar-dark bg-dark justify-content-between”> <div class=“container”> <a class=“navbar-brand” href="#">Santè</a> <button class=“navbar-toggler” type=“button” data-toggle=“collapse” data-target="#navbarNavAltMarkup" aria-controls=“navbarNavAltMarkup” aria-expanded=“false” aria-label=“Toggle navigation”> <span class=“navbar-toggler-icon”></span> </button> <div class=“collapse navbar-collapse” id=“navbarTooglerDemo01”> <div class=“navbar-nav mr-auto mt-2 mt-lg-0”> <a class=“nav-item nav-link active” href="#">Home <span class=“sr-only”>(current)</span></a> <a class=“nav-item nav-link” href="#">Servícios</a> <a class=“nav-item nav-link” href="#">Carrito</a> </div> <form class=“form-inline my-2 my-lg-0”> <input class=“form-control mr-sm-2” type=“text” placeholder="¿Encontraste lo que buscabas? " aria-label=“Search”> <button class=“btn btn-outline-success my-2 my-sm-0” typ columnae=“submit”>Buscar</button> </form> </div> </div> </nav>

-No se colocan columnas ya que por defecto navbar ya lo divide en columnas, dependiendo la clase (brand, toogler, form, etc.)
-A diferencia de Sacha agregué la clase “navbar-brand” la cual resalta su contenido, Se utiliza normalmente para nombres de marca.

dentro de las clases podemos ajustar los margenes para cada tamaño de la pantalla. p.ej.(mr-auto mt-2 mt-lg-0).

Kevin Rosado

student•

Como puedo poner el icono de search antes del input como en foudation?

<code>

Diego Forero

Team Platzi•

Existen varias formas, puedes usar la pseudoclase :after

Cesar David Ramírez Dimaté

student•

El código para la versión 4.1.1 sería el siguiente

<!-- Menu -->
<nav id="menu-container" class="navbar navbar-light">
  <div class="container d-inline-block">
    <div class="row">
      <div class="col-10 offset-1 col-md-4 offset-md-0">
        <ul class="navbar-nav flex-row justify-content-around">
          <li class="nav-item active">
            <a href="#" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Catálogo</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Carrito</a>
          </li>
        </ul>
      </div>
      <div class="col-12 col-md-6 offset-md-2">
        <form action="">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="¿Encontró lo que buscaba?">
            <span class="input-group-append">
              <button type="button" class="btn btn-platzi">Buscar</button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
</nav>
<!-- /Menu -->

El css si se mantiene intacto. Se vería de la siguiente forma:

Cristian Bermudez

student•

Muchachos y muchachas :v

Como cambio el color de texto del navbar que viene por defecto… es decir si lo quiero amarillo como lo hago?

Diego Forero

Team Platzi•

Puedes poner una clase adicional por ejemplo navbar--yellow y en el css pones esa clase con las propiedades que necesitas.

Barra de navegación con Bootstrap

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman