Tutorial #17 del curso de bootstrap v3.3, en este tutorial damos por finalizado la parde de componentes, utilizaremos los componentes como paneles, breadcrumbs, page header, alerts, list groups y progress bars.
A partir de ahora utilizaremos la nueva versión 3.3 de bootstrap, todo los visto hasta el momento con la version 3.2 es compatible con la nueva versión por lo que no sera un problema de todas formas ante una duda recuerda consultar la documentación oficial de bootstrap.
Sitios donde podras encontrar plugins para el componente progress bar:
http://geersch.github.io/bootstrap-progressbar/
http://www.minddust.com/project/bootstrap-progressbar/demo/bootstrap-3-2-0/
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Componentes varios</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Componentes <small>secundarios</small></h1>
</div>
<ol class="breadcrumb">
<li><a href="#">Inicio</a></li>
<li><a href="#">Paneles</a></li>
<li class="active">Varios</li>
</ol>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">Título del panel por defecto</div>
<div class="panel-body">
Es 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.
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
Es 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.
</div>
<div class="panel-footer">Panel de pie</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">Panel primario</div>
<div class="panel-body">
Es 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.
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-danger">
<div class="panel-heading">Panel danger</div>
<div class="panel-body">
Es un hecho establecido hace demasiado tiempo que un lector se distraerá
con el contenido.
</div>
</div>
</div>
<div class="col-sm-12">
<div class="panel panel-warning">
<div class="panel-heading">Panel danger</div>
<div class="panel-body">
Es 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.
</div>
</div>
</div>
<div class="col-sm-12">
<h1>Alerts</h1>
<div class="alert alert-success" role="alert">(success) Es un hecho establecido hace demasiado tiempo que un lector</div>
<div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-info-sign"></span> (info) Es un hecho establecido hace demasiado tiempo que un lector</div>
<div class="alert alert-warning" role="alert">(warning) Es un hecho establecido hace demasiado tiempo que un lector</div>
<div class="alert alert-danger" role="alert">(danger) Es un hecho establecido <button type="button" class="btn btn-primary">Aceptar</button></div>
</div>
<div class="col-sm-12">
<h1>Barras de progreso</h1>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div id="progressTimer"></div>
</div>
<div class="col-sm-8">
<h1>Listas</h1>
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo mar
</li>
<li class="list-group-item">
<span class="badge">13</span>
Cras justo mar
</li>
<li class="list-group-item">
<span class="badge">142</span>
Cras justo mar
</li>
<li class="list-group-item">
<span class="badge">11</span>
Cras justo mar
</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.progressTimer.min.js"></script>
<script>
$("#progressTimer").progressTimer({
timeLimit: 30,
warningThreshold: 10,
baseStyle: 'progress-bar-warning',
warningStyle: 'progress-bar-danger',
completeStyle: 'progress-bar-info',
onFinish: function() {
console.log("I'm done");
}
});
</script>
</body>
</html>
Ariel, por casualidad no tienes pensado hacer un curso de PHP POO en un futuro no muy lejano? me gusta tu manera de explicar. pero si no lo tienes pensado de igual manera gracias por todos lo que no has brindado.
yo creo que si en un futuro lo boy hacer un curos sobre php orientado a objetos