Tutorial #15 del curso de bootstrap v3.2, en este tutorial veremos el componente nav tab que nos permite crear pestañas de navegación estos pueden resultar muy útile para simplificar la navegación y mejorar la experiencia del usuario.
!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<style type="text/css">
body{
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-5">
<ul class="nav nav-pills">
<li class="active"><a href="#home" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-home"></span> Inicio</a></li>
<li><a href="#profile" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-user"></span> Perfil</a></li>
<li><a href="#messages" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-envelope"></span> Mensajes</a></li>
<li><a href="#settings" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span> Configuración</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<br>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.
Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500
(N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos
un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido
un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido
</div>
<div class="tab-pane fade" id="profile">
<br>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="formGroup">Nombre</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="formGroup">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="formGroup">email</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="formGroup">
</div>
</div>
<br />
<div class="form-group">
<label class="col-sm-2 control-label" for="formGroup"></label>
<div class="col-sm-4">
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-floppy-saved"></span> Guardar</button>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="messages">
<br>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<div class="tab-pane fade" id="settings">
<br>
<div class="panel panel-default">
<div class="panel-heading">Panel configuración</div>
<div class="panel-body">
un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido
del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que
iene una distribución más o menos normal de las letras, al contrario de usar textos
como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer.
</div>
</div>
</div>
</div>
</div>
<div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>