Navegación responsive con Bootstrap

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

Contenido del curso

¡Hemos renovado este curso!

1
¿Dónde aprender frontend actualizado?
00:17 min

Bienvenido al curso

Foundation

Bootstrap

Conclusiones

Contenido complementario

Tomar examen

Resumen

Veamos cómo hacer nuestra barra de navegación responsive,

Recuerda:

Puedes utilizar los ico-fonts de FontAwesome

Hector Vasquez

student•

Acá dejo mi versión, sin código de buscador duplicado:

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
  <body>
    
    <!-- Header -->
    <header id="header-container">
      <div class="container">
  
        <div class="row d-flex align-items-center justify-content-between">
          <div class="col-3">
            <h1>Platzishop</h1>
          </div>
          <div class="col-3 text-right text-md-center text-lg-left">
            <button class="navbar-toggler d-sm-none" data-toggle="collapse" data-target="#navbarSupportedContent">
              &#9776;
            </button>
            <a href="#" class="login d-none d-sm-inline text-uppercase font-weight-bold">Login</a>
          </div>
        </div>

      </div>
    </header>
    <!-- /Header -->

    <!-- Menu -->
    <nav id="menu-container" class="navbar navbar-expand-sm navbar-light d-block d-sm-flex">
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto justify-content-center justify-content-lg-start text-center">
          <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>
          <li class="nav-item"><a class="nav-link d-sm-none" href="#">Login</a></li>
        </ul>
      </div>
      <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 align-top" placeholder="¿Encontró lo que buscaba?" aria-label="Search">
            <span class="item-group-btn align-top">
              <button class="btn btn-platzi" type="button"><span class="d-none d-md-inline-block">Buscar</span><i class="fa fa-search d-md-none"></i></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>
    <!-- /Menu -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

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;
}
#header-container .login,
#header-container .navbar-toggler{
	color: #fff;
}

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

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

Navegación responsive 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