Cómo diseñar un timeline similar al de Facebook con Bootstrap

En este tutorial vamos a desarrollar un diseño similar al timeline responsive de Facebook con Twitter Bootstrap. Voy a explicar paso a paso el desarrollo del diseño de este timeline responsive, por lo que sólo tienes que seguir los pasos uno por uno para obtener el mismo resultado.

Crea el fichero index.php y añádele el siguiente código HTML

Créate un directorio llamado timeline en la carpeta htdocs del directorio raíz de tu servidor. Después crea la siguiente lista de carpetas (css, js) en el directorio llamado timeline. Más tarde, descárgate bootstrap y los archivos de jQuery, y añádelos en sus respectivos directorios css y js. Ahora crea un archivo llamado index.html y no te olvides de incluir dentro de él la llamada a los distintos archivos css y js.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Timeline Design</title>
	<!-- Bootstrap -->
	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200' rel='stylesheet' type='text/css'>	
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<link href="css/style.css" rel="stylesheet">

	<!-- Script -->
	<script src="js/jquery.min.js"></script>
</head>
<body>

Crea una lista desordenada de elementos para formar el diseño del timeline

Añade la siguiente lista desordenada de elementos HTML en tu página index.html

<div class="container">
	<h2 class="title text-center" >Responsive Facebook Style Timeline Design With Twitter Bootstrap</h2>
	<ul class="timeline">
		<li class="year">2015</li>
		<li class="event">
			<h3 class="heading">Responsive PHP Quiz Script</h3>
			<span class="month"><i class="fa fa-calendar"></i> &nbsp; September 2016</span>
			
			<p>&nbsp;</p>
			<div class="text-center">
				<img class="img-responsive img-thumbnail" src="http://1.bp.blogspot.com/-5VF-5ZFx6fk/VRu6g9QaxjI/AAAAAAAAEB4/ipE14PIvqGQ/s1600/php-quiz-script.png">
			</div>
			<p>This version of Responsive PHP Quiz application has following new features are added. You may refer my previous versions of PHP MySQL quiz script tutorial to download php quiz script freely.</p>
			<blockquote>
				<ol>
					<li>Now users can share his/her results on Social networks (Facebook, Twitter, Google Plus, Reddit and Linkedin).</li>
					<li>The Quiz result page will contain all questions answered by the user along with correct answer.</li>
					<li>The Quiz result manage Grid has unique link to each taken Quiz result page, So user can refer his last Quiz results.</li>
					<li>The User can sort Quiz results on manage Grid using quiz taken date.</li>
				</ol>
			</blockquote>
		</li>
		<li class="event">
			<h3 class="heading">Invoice System Using jQuery PHP MySQL And Bootstrap</h3>
			<span class="month"><i class="fa fa-calendar"></i> &nbsp; September 2016 </span>
			<p>&nbsp;</p>
			<div class="embed-responsive embed-responsive-16by9">
				<iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/AGawieZttJ0" class="embed-responsive-item"></iframe>
			</div>
			<p>&nbsp;</p>
			
			<p>This is an awesome tool for your marketing team and they can crack the deal at client’s doorstep. Order PDF Invoice System Script today! and increase sales. It just comes at a fraction of one time price. Grab the deal today.</p>
		</li>
	</ul>
</div>

Crea la línea vertical del timeline

Crea el fichero style.css, y añade los siguientes estilos para crear la línea vertical del timeline y alinéala al centro de la página.

.timeline{
	background-image: url("../images/line-1.png");
    background-position: center; 
    background-repeat: repeat-y;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    height: auto;
    padding: 0px;
    clear: both;
    overflow: hidden;
}

Personalizar los años del timeline

Ahora mostraremos el año en el centro de la página sobre la línea vertical del timeline. Los siguientes estilos css alinearán el año en el centro de la página.

.timeline li.year{
	clear: both;
	width: 4em;
	margin: 0 auto;
	line-height: 4em;
	background-color: #fff;
	border-radius:50%;
	text-align: center;
	margin-bottom: 25px;
	border: 1px solid #f39c12;
	
	box-shadow: 2px 2px 2px #888888;
	-moz-box-shadow: 2px 2px 2px #888888;
    -webkit-box-shadow: 2px 2px 2px #888888;
}
.timeline li.year:first-child{
	margin-top:0px;
}
.timeline li.year, .timeline li.event{
	list-style-type: none;
	z-index: 999;
}

Personaliza los feeds del timeline verticalmente

Primero asígnale un ancho y un color de fondo al feed del timeline. Ahora dale estilo a los feeds del timeline utilizando pseudo selectores de css (:even, :odd)

.timeline li.event{
     width: 45%;
     background-color: #fff;
	margin-bottom: 20px;
	padding: 20px;
	position: relative;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-color: #e5e6e9 #dfe0e4 #d0d1d5;
        border-image: none;
        border-style: solid;
        border-width: 1px;
}

li.event:nth-child(odd) {
    color: green;
    clear:left;
    float: left;
}
li.event:nth-child(even) {
    color: red;
    clear: right;
    float: right;
    margin-top:100px;
    margin-bottom:50px;
}

Finalmente tendrás que crear las líneas que conecten los feeds con el timeline utilizando los siguientes pseudo selectores de css (::after, ::before)

.timeline li.event:nth-child(odd)::after {
    background:red;
    content: "";
    height: 2px;
    position: absolute;
    right: -11.2%;
    top: 30px;
    width: 11.2%;
    
}
li.event:nth-child(even)::before{
	background:red;
    content: "";
    height: 2px;
    position: absolute;
    top: 30px;
    width: 11.2%;
    left: -11.2%;
} 

Diseño del timeline responsive

Finalmente vamos a dotar a nuestro timeline de un aspecto el cual se vea bien en dispositivos pequeños, como por ejemplo, los dispositivos móviles. Con la ayuda de las media queries de CSS vamos a hacer que los feeds del timeline se alineen al centro de la página uno por uno.

@media (max-width: 640px) {
	.timeline li.event{
		width: 80%;
		background-color: #fff;
		border: 1px solid #ff0000;
		margin: 20px auto;
		padding: 20px;
		position: relative;
	}
	
	li.event:nth-child(odd) {
	    color: green;
	    clear: both;
	    float: none;
	}
	li.event:nth-child(even) {
	    color: red;
	    clear: both;
	    float: none;
	}
	
	.timeline li.event:nth-child(odd)::after, li.event:nth-child(even)::before {
	    width: 0px;
	}
}

Fuente: smarttutorials.net

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP