Bootstrap (parte 20): Barras de navegación

Redes sociales

Una barra de navegación es un elemento de navegación que se coloca en la parte superior de la página web. Con Bootstrap, la barras de navegación pueden extenderse o collapsarse, dependiendo del tamaño de la pantalla.

Bootstrap

Para crear una barra de navegación debes utilizar <nav class=”navbar navbar-default”>

Menú Bootstrap

Menú Bootstrap

Barra de navegación por defecto

El siguiente ejemplo te mostrará como añadir una barra de navegación en la parte superior de la página:

Ejemplo Bootstrap

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Webdisenia .:. Ejemplo barra navegación</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Sitio Web</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Inicio</a></li>
      <li><a href="#">P&aacute;gina 1</a></li>
      <li><a href="#">P&aacute;gina 2</a></li>
      <li><a href="#">P&aacute;gina 3</a></li>
    </ul>
  </div>
</nav>
<div class="container">
  <h3>Ejemplo de Barra de navegaci&oacuten</h3>
  <p>Una barra de navegaci&oacuten es un elemento de navegaci&oacuten que se coloca en la parte superior de la p&aacutegina web.</p>
</div>
</body>
</html>

Resultado en el navegador

clic aquí pata ver el ejemplo en una página-pestaña nueva

Todos los ejemplos de este artículo se mostrarán en una barra de navegación que ocupará demasiado espacio en pantallas pequeñas (sin embargo, la barra de navegación se mostrará en una sólo línea en pantallas más grandes – ya que Bootstrap es responsivo). Este problema (con las pequeñas pantallas) será resuelto en el último ejemplo de este artículo.

Barra de navegación inversa

Si no te gusta el estilo de la barra de navegación por defecto, Bootstrap provee de una alternativa, la barra de navegación negra.

Para ello sólo tienes que cambiar la la clase .navbar-default por la clase .navbar-inverse:

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=gb18030">
  <title>Webdisenia .:. Ejempo Barra de navegación</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Sitio Web</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Inicio</a></li>
      <li><a href="#">P&aacute;gina 1</a></li>
      <li><a href="#">P&aacute;gina 2</a></li>
      <li><a href="#">P&aacute;gina 3</a></li>
    </ul>
  </div>
</nav>
<div class="container">
  <h3>Barra de Navegaci&oacute;n inversa</h3>
  <p>Una Barra de navegaci&oacute;n inversa tiene el fondo negro en vez de gris.</p>
</div>
</body>
</html>

Resultado en el navegador

clic aquí pata ver el ejemplo en una página-pestaña nueva

Barra de navegación fija

También puedes fijar la barra de navegación en la parte superior de la página.
Una barra de navegación fija permanecerá siempre visible, en la parte superior, independientemente, de que te muevas hacía abajo al hacer scroll en la página. Para ellos, debes de utilizar la clase .navbar-fixed-top

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Webdisenia .:. Ejemplo Barra de navegación</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Sitio Web</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Inicio</a></li>
      <li><a href="#">P&aacute;gina 1</a></li>
      <li><a href="#">P&aacute;gina 2</a></li>
      <li><a href="#">P&aacute;gina 3</a></li>
    </ul>
  </div>
</nav>
<div class="container">
  <h3>Barra de Navegaci&oacuten fija</h3>
  <div class="row">
    <div class="col-md-4">
      <p>Una barra de navegación fija permanecerá siempre visible, en la parte superior, independientemente, de que te muevas hacía abajo al hacer scroll en la página.</p>
      <p>Una barra de navegación fija permanecerá siempre visible, en la parte superior, independientemente, de que te muevas hacía abajo al hacer scroll en la página.</p>    
    </div>
    <div class="col-md-4"> 
      <pUna barra de navegación fija permanecerá siempre visible, en la parte superior, independientemente, de que te muevas hacía abajo al hacer scroll en la página.</p>
      <pUna barra de navegación fija permanecerá siempre visible, en la parte superior, independientemente, de que te muevas hacía abajo al hacer scroll en la página.</p>
    </div>
    <div class="col-md-4"> 
      <p>Una barra de navegación fija permanecerá siempre visible, en la parte superior, independientemente, de que te muevas hacía abajo al hacer scroll en la página.</p>
      <p>Una barra de navegación fija permanecerá siempre visible, en la parte superior, independientemente, de que te muevas hacía abajo al hacer scroll en la página.</p> 
    </div>
  </div>
<center><h2>Reduce la altura de esta ventana hasta que se muestre la barra de desplazamiento vertical. A continuación, haz scroll hacia abajo en esta página y observa como la barra de navegación permanece fija en la parte superior</h2></center>
</body>
</html>

Resultado en el navegador

clic aquí pata ver el ejemplo en una página-pestaña nueva

Si lo que deseas, es que la barra de herramientas quede fija en la parte inferior de la página, en vez de en la superior, tendrás que utilizar la clase .navbar-fixed-bottom en vez de la clase .navbar-fixed-top

Temas WordPress para todo el mundo

Barra de navegación con menús desplegables

También puedes añadir menús desplegables a la barra de navegación.

El siguiente ejemplo, añade un menú desplegable para el botón de la “Página 1”.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Webdisenia .:. Ejemplo Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Sitio Web</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Inicio</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">P&aacute;gina 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">P&aacute;gina 1-1</a></li>
          <li><a href="#">P&aacute;gina 1-2</a></li>
          <li><a href="#">P&aacute;gina 1-3</a></li>
        </ul>
      </li>
	  <li><a href="#">P&aacute;gina 2</a></li>
      <li><a href="#">P&aacute;gina 3</a></li>
    </ul>
  </div>
</nav>
<div class="container">
  <h3>Barra de Navegación con lista desplegable</h3>
  <p>El siguiente ejemplo, incluye un men&uacute; desplegable para el botón de la "P&aacute;gina 1"</p>
</div>
</body>
</html>

Resultado en el navegador

clic aquí pata ver el ejemplo en una página-pestaña nueva

Barra de navegación con elementos alineados a la derecha

La clase .navbar-right te permitirá añadir elementos alineados a la derecha en tu barra de navegación.

En el siguiente ejemplo, se añaden dos botones, “Registrarse” y “Acceder” en el lado derecho de la barra de navegación. También se ha añadido un glyphicon a cada uno de ellos.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Webdisenia .:. Ejemplo Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Sitio Web</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Inicio</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">P&aacute;gina 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">P&aacute;gina 1-1</a></li>
          <li><a href="#">P&aacute;gina 1-2</a></li>
          <li><a href="#">P&aacute;gina 1-3</a></li>
        </ul>
      </li>
	  <li><a href="#">P&aacute;gina 2</a></li>
      <li><a href="#">P&aacute;gina 3</a></li>
    </ul>
	<ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Registrase</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Acceder</a></li>
    </ul>
  </div>
</nav>
<div class="container">
  <h3>Barra de Navegaci&oacute;n con men&uacute;s alineados a la derecha</h3>
  <p>En el siguiente ejemplo, se incluyen dos botones, "Registrarse" y "Acceder" en el lado derecho de la barra de navegaci&oacute;n, también se ha incluye un glyphicon a cada uno de ellos.</p>
</div>
</body>
</html>

Resultado en el navegador

clic aquí pata ver el ejemplo en una página-pestaña nueva

Barras de navegación colapsables

Barra de navegación colapsable

Barra de navegación colapsable

Las barras de navegación pueden ocupar mucho espacio en pantallas pequeñas (móviles o tablets). Para evitar este problema Bootstrap nos proporciona herramientas para ocultar la barra de

navegación, y mostrarla sólo cuando sea necesario.

En el siguiente ejemplo, cuando se muestra en una pantalla pequeña, la barra de navegación es reemplazada por un botón en la esquina superior derecha de la pantalla. Sólo cuando se selecciona el botón, se muestra la barra de navegación.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Webdisenia .:. Ejemplo Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Sitio Web</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Inicio</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">P&aacute;gina 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">P&aacute;gina 1-1</a></li>
            <li><a href="#">P&aacute;gina 1-2</a></li>
            <li><a href="#">P&aacute;gina 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">P&aacute;gina 2</a></li>
        <li><a href="#">P&aacute;gina 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Registrarse</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Acceder</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <h3>Barra de Navegaci&oacute;n colapsable</h3>
  <p>En el siguiente ejemplo, cuando se muestra en una pantalla peque&ntilde;a, la barra de navegaci&oacute;n es reemplazada por un bot&oacute;n en la esquina superior derecha de la pantalla. S&oacute;lo cuando se selecciona el bot&oacute;n, se muestra la barra de navegaci&oacute;n.</p>
  <h2>Para ver el efecto, reduce el ancho de la pantalla, hasta que desaparezca el men&uacute; y se muestre el bot&oacuten para desplegarlo.</h2>
</div>
</body>
</html>

Resultado en el navegador

clic aquí pata ver el ejemplo en una página-pestaña nueva

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *