Bootstrap (Parte 19): Elementos de navegación

Redes sociales

Con Bootstrap puedes añadir a las páginas de tu web, de forma sencilla, elementos de navegación como solapas y botones.

Bootstrap

En HTML, un elemento de navegación se define mediante una lista desordenada <ul> a la que se aplica un estilo determinado. Algo parecido a esto:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

Si deseas crear un elemento de navegación con una disposición horizontal, hay que añadir la clase .list-inline al elemento <ul>.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo - Webdisenia</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.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <ul class="list-inline">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Productos</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Contactar</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Además puedes mejorar el diseño del ejemplo anterior utilizando pestañas o botones.

Navegar con pestañas

Para crear pestañas, debes de utilizar las clases .nav y .nav-tabs en el elemento <ul> de las siguiente forma: <ul class=”nav nav-tabs”>
Además, si deseas resaltar una de las pestañas, como pestaña activa, utiliza la clase .active en el elemento <ul>.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo - Webdisenia</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.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Inicio</a></li>
    <li><a href="#">Productos</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Contactar</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Temas WordPress para todo el mundo

Pestañas con menús desplegable

Es también posible, añadir un menú desplegable a las pestañas utilizando las clases .dropdown, .dropdown-togle y dropdown-menu.

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo - Webdisenia</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.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Inicio</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Productos <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Producto 1</a></li>
        <li><a href="#">Producto 2</a></li>
        <li><a href="#">Producto 3</a></li>                        
      </ul>
    </li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Contactar</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Navegación con botones

Puedes crear elementos de navegación con botones, utilizando la clases .nav y .nav-pills en el elemnto <ul>: <ul class=”nav nav-pills”>. También puedes resaltar el botón por defecto, utilizando la clase .active en un elemento <li> de la lista.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo - Webdisenia</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.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <ul class="nav nav-pills">
    <li class="active"><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#"Productos</a></li>
    <li><a href="#">Contactar</a></li>
  </ul>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Botones verticales

Puedes disponer los botones verticalmente utilizando la clase .nav-stacked.

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo - Webdisenia</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.5/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Productos</a></li>
    <li><a href="#">Contactar</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Botones con menú desplegable

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo - Webdisenia</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.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Productos<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Producto 1</a></li>
        <li><a href="#">Producto 2</a></li>
        <li><a href="#">Producto 3</a></li>                        
      </ul>
    </li>
    <li><a href="#">Contactar</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>


Pestañas y botones centrados

Para centrar y justificar pestañas y botones, debes de utilizar la clase .nav-justified

Ten en cuenta, que si el ancho de pantalla es menor de 768px, la lista de opciones se mostrará apilada (el contenido permanecerá centrado).

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo - Webdisenia</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.5/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h3>Centered Tabs</h3>
  <ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
  <br>
  <h3>Centered Pills</h3>
  <ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador


Haz clic en este enlace para ver el resultado en una pestaña-página nueva.


Redes sociales

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.