BOOTSTRAP COMPONENTES - ELEMENTOS DE NAVEGACION

En esta sesión mostramos el uso de elementos de navegación

Descripción del Vídeo

Los elementos de navegación en Bootstrap pueden tener varios estilos, pero comparten muchos atributos y sintaxis:
Pestañas
Píldoras
Anidación (ej: Pestañas + Desplegables)

Entre las características configurables tenemos:
Disposición (horizontal / vertical)
Alineación
Enlaces deshabilitados

NOTA: Los elementos de navegación sencillos muchas veces dependerán de componentes JavaScript para su funcionalidad completa, que ilustraremos después con mayor profundidad. También veremos luego con más detalle las barras de navegación, que pueden contener mayor variedad de elementos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Las 3 etiquetas anteriores deben ir en primer lugar en el bloque head -->
<title>Elementos de navegación en Bootstrap</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- HTML5 shim y Respond.js se agregan para mejorar soporte a IE8 -->
<!-- NOTA: Respond.js no funciona si se ve la página localmente con file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* clase local para visualizar mejor bloques de ejemplo */
.bs-example {
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
margin-bottom: 15px;
}
</style>
</head>
<body>
<!-- podemos usar la clase "container" (ancho fijo) o "container-fluid" (ancho completo) -->
<div class="container">
<h1>Elementos de navegación con Bootstrap</h1>
<div class="bs-example">
<h2>Navegación con pestañas: "nav-tabs"</h2>
<!-- Podemos usar la etiqueta nav de HTML5, u otro elemento como un "div", agregando
el atributo role="navigation" -->
<nav>
<!-- utilizamos la clase "nav-tabs" en la lista para definir las pestañas -->
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Inicio</a></li>
<li role="presentation"><a href="#">Productos</a></li>
<li role="presentation"><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
<div class="bs-example">
<h2>Navegación con "píldoras": "nav-pills"</h2>
<nav>
<!-- Igual que antes, pero usamos "nav-pills" -->
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Inicio</a></li>
<li role="presentation"><a href="#">Productos</a></li>
<li role="presentation"><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
<div class="bs-example">
<h2>Píldoras verticales: "nav-pills nav-stacked"</h2>
<!-- Incluimos el elemento de navegación en una columna, ya que de manera predeterminada
tomará todo el ancho del contenedor -->
<div class="row">
<nav class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">Inicio</a></li>
<li role="presentation"><a href="#">Productos</a></li>
<li role="presentation"><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</div>
<div class="bs-example">
<h2>Navegación "justificada": "nav-justified"</h2>
<h4>Con pestañas</h4>
<nav>
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"><a href="#">Inicio</a></li>
<li role="presentation"><a href="#">Productos</a></li>
<li role="presentation"><a href="#">Contacto</a></li>
</ul>
</nav>
<h4>Con píldoras</h4>
<nav>
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active"><a href="#">Inicio</a></li>
<li role="presentation"><a href="#">Productos</a></li>
<li role="presentation"><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
<div class="bs-example">
<h2>Elemento deshabilitado: clase "disabled"</h2>
<h4>Con pestañas</h4>
<!-- Agregamos la clase "disabled" al elemento de la lista deseado. Nótese
que en caso de incluir un enlace en la opción "deshabilitada", éste aún
se encuentra activo, y necesitaríamos evitar su activación vía JavaScript
(ver fragmento al final del archivo) -->
<nav>
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"><a href="#">Inicio</a></li>
<li role="presentation"><a href="#">Productos</a></li>
<li role="presentation"><a href="#">Contacto</a></li>
<li role="presentation" class="disabled"><a href="http://www.google.com">Tienda</a></li>
</ul>
</nav>
</div>
<div class="bs-example">
<h2>Navegación anidada: Pestañas + Desplegable</h2>
<nav>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Inicio</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Productos <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a href="#">Lorem</a></li>
<li role="presentation"><a href="#">Ipsum</a></li>
<li role="presentation"><a href="#">Dolor</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="#">Otra acción</a></li>
</ul>
</li>
<li role="presentation"><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</div>
<!-- jQuery (necesario para utilizar plugins JS de Bootstrap) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Acá utilizamos la versión precompilada y optimizada,
pero pueden incluirse otras versiones o componentes individuales -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
// Deshabilitamos navegación en enlaces "deshabilitados"
$('li.disabled a').click(function(e){ e.preventDefault(); })
</script>
</body>
</html>
					

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.