Cómo crear un diseño como el de Gmail con HTML y Bootstrap

En este tutorial vamos a plagiar el diseño de Gmail utilizando HTML y el framework Bootstrap. Muchas veces me gsuta ponerme eso como reto, es decir, copiar el diseño de una popular plataforma utilizando los recursos de los que dispongo y hacerlo, lo más parecido. Una vez lo diseño por mi mismo, siento esa sensación orgullo, mientras que en mi cabeza resuena la frase: “Sí, lo he conseguido”. Es una practica recomendada a todos aquellos que amen el diseño web y también para esos que están comenzando. En esta ocasión vamos a replicar una de las webs más populares de todo Internet, Gmail. Solo tienes que seguir este tutorial para poder hacerlo tú mismo.

Añade la librería Bootstrap y todos los js y css necesarios

Crea un fichero llamado index.html y añade el CSS y JS de Bootstrap, así como el todopoderoso jQuery. Para los iconos utilizaré la librería de CSS FontAwesome, así que también la añadiremos.

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

Y ahora las librerías de js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

HTML del diseño de Gmail

He implementado este diseño de Gmail utilizando el sistema de grid de Bootstrap y muchos de sus componentes. Si tienes alguna duda, revisa la documentación oficial de Bootstrap.

<div class="container">		
	<!-- Gmail Header Starts here -->
	<div class="row">
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2"> 
			<div class="btn-group" role="group">
		    	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		      		Gmail
		      		<span class="caret"></span>
		    	</button>
		    	<ul class="dropdown-menu" role="menu">
		    		<li><a href="#">Mail</a></li>
		      		<li><a href="#">Contacts</a></li>
		      		<li><a href="#">Tasks</a></li>
		    	</ul>
		  	</div>
		</div>
		<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10"> 
			<div class="pull-left">		
				<div class="btn-group">
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
					  	<input type="checkbox"/> <span class="caret"></span>
				  	</button>
				  	<ul class="dropdown-menu" role="menu">
				   		<li><a href="#">Action</a></li>
				    	<li><a href="#">Another action</a></li>
				    	<li><a href="#">Something else here</a></li>
				    	<li class="divider"></li>
				    	<li><a href="#">Separated link</a></li>
				  	</ul>
				</div>
				<button type="button" class="btn btn-default">
					<i class="fa fa-refresh"></i>
				</button>
				
				<div class="btn-group">
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
				    	More <span class="caret"></span>
				  	</button>
				  	<ul class="dropdown-menu" role="menu">
				    	<li><a href="#">Mark all as read</a></li>
				    	<li class="divider"></li>
				    	<li><a href="#">Select messages to see more actions</a></li>
				  	</ul>
				</div>
			</div>
			<div class="pull-right">
				<span>1-13 of 13</span>
				<div class="btn-group" role="group" aria-label="...">
				  <button type="button" class="btn btn-default"> <i class='fa fa-angle-left'></i> </button>
				  <button type="button" class="btn btn-default"> <i class='fa fa-angle-right'></i> </button>
				</div>
				
				<div class="btn-group">
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
				    	<i class="fa fa-gear"></i> <span class="caret"></span>
				  	</button>
				  	<ul class="dropdown-menu" role="menu">
				    	<li><a href="#">Comfortable</a></li>
				    	<li><a href="#">Cozy</a></li>
				    	<li><a href="#">Compact</a></li>
				    	<li class="divider"></li>
				    	<li><a href="#">Configure Inbox</a></li>
				    	<li class="divider"></li>
				    	<li><a href="#">Settings</a></li>
				    	<li><a href="#">Themes</a></li>
				    	<li><a href="#">Help</a></li>
				  	</ul>
				</div>
			</div>	
		</div>
	</div>
	<!-- Gmail Header Starts here -->
	<hr>
	<div class="row">
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2"> 
			<p>
			<button class="btn btn-danger" type="button">
			  Compose
			</button>
			</p>
			<hr/>
			<p>
			<button class="btn btn-success" type="button">
			  Inbox <span class="badge">4</span>
			</button>
			</p><p>
			<button class="btn btn-info" type="button">
			  Starred 
			</button>
			</p>
			<p>
				<button class="btn btn-warning" type="button">
			  		Important 
				</button>
			</p>
			<p>
				<button class="btn btn-danger" type="button">
			  		Chats 
				</button>
			</p>
			<p>
				<button class="btn btn-info" type="button">
			  		Sent Mail 
				</button>
			</p>
			<p>
				<button class="btn btn-primary" type="button">
				  Drafts <span class="badge">10</span>
				</button>
			</p>
		</div>
		<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10"> 
			<div role="tabpanel">
				<ul class="nav nav-tabs" role="tablist">
			    	<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab"> <i class="fa fa-hdd-o"></i> &nbsp;  Primary</a></li>
			    	<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"> <i class="fa fa-users"></i> &nbsp; Social</a></li>
			    	<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"> <i class="fa fa-exclamation-circle"></i> &nbsp; Updates</a></li>
			    	<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">+</a></li>
			  	</ul>
			
			  	<!-- Tab panes -->
			  	<div class="tab-content">
			    	<div role="tabpanel" class="tab-pane active" id="home">
			    		&nbsp;&nbsp;&nbsp;
			    		
			    		<table class="table table-hover">
					    	<tbody>
					        	<tr>
					          		<td scope="row"><input type="checkbox"/></td>
					          		<td><i class="fa fa-star"></i></td>
					          		<td>Smart Tutorials Download Link</td>
					          		<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
					        		<td> <i class="fa fa-file-archive-o"> </i> </td>
					        		<td>8:06am</td>
					        	</tr>
					        	<tr>
					          		<td scope="row"><input type="checkbox"/></td>
					          		<td><i class="fa fa-star"></i></td>
					          		<td>Smart Tutorials Download Link</td>
					          		<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
					        		<td> <i class="fa fa-file-archive-o"> </i> </td>
					        		<td> 8:06am </td>
					        	</tr>
					        	<tr>
					          		<td scope="row"><input type="checkbox"/></td>
					          		<td><i class="fa fa-star"></i></td>
					          		<td>Smart Tutorials Download Link</td>
					          		<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
					        		<td> <i class="fa fa-file-archive-o"> </i> </td>
					        		<td>Jan 1</td>
					        	</tr>
					        	<tr>
					          		<td scope="row"><input type="checkbox"/></td>
					          		<td><i class="fa fa-star"></i></td>
					          		<td>Smart Tutorials Download Link</td>
					          		<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
					        		<td> <i class="fa fa-file-archive-o"> </i> </td>
					        		<td> Jan 2</td>
					        	</tr>
					      </tbody>
					    </table>
			    	</div>
			    	<div role="tabpanel" class="tab-pane" id="profile">
			    		&nbsp;&nbsp;&nbsp;
			    		<table class="table table-hover">
					    	<tbody>
					        	<tr>
					          		<td scope="row"><input type="checkbox"/></td>
					          		<td><i class="fa fa-star"></i></td>
					          		<td>Muni tagged You in Facebook</td>
					          		<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
					        		<td> <i class="fa fa-file-archive-o"> </i> </td>
					        		<td>8:06am</td>
					        	</tr>
					        	<tr>
					          		<td scope="row"><input type="checkbox"/></td>
					          		<td><i class="fa fa-star"></i></td>
					          		<td>Smart Tutorials Shared Link On Google Plus</td>
					          		<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
					        		<td> <i class="fa fa-file-archive-o"> </i> </td>
					        		<td>8:06am</td>
					        	</tr>
					        	<tr>
					          		<td scope="row"><input type="checkbox"/></td>
					          		<td><i class="fa fa-star"></i></td>
					          		<td>Smart Tutorials New Post on Twitter</td>
					          		<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
					        		<td> <i class="fa fa-file-archive-o"> </i> </td>
					        		<td>Jan 1</td>
					        	</tr>
					      </tbody>
					    </table>
			    	</div>
			    	<div role="tabpanel" class="tab-pane" id="messages">
			    		&nbsp;&nbsp;&nbsp;
			    		<table class="table table-hover">
					    	<tbody>
					        	<tr>
					          		<td scope="row"><input type="checkbox"/></td>
					          		<td><i class="fa fa-star"></i></td>
					          		<td>New Updates From SmartTutorils</td>
					          		<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
					        		<td> <i class="fa fa-file-archive-o"> </i> </td>
					        		<td>8:06am</td>
					        	</tr>
					        	<tr>
					          		<td scope="row"><input type="checkbox"/></td>
					          		<td><i class="fa fa-star"></i></td>
					          		<td>Smart Tutorials Shared Link On Google Plus</td>
					          		<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
					        		<td> <i class="fa fa-file-archive-o"> </i> </td>
					        		<td>8:06am</td>
					        	</tr>
					        	
					      </tbody>
					    </table>
			    	</div>
			    	<div role="tabpanel" class="tab-pane" id="settings">
			    	</div>
			  	</div>
			</div>
			
			
			
			
		</div>
	</div>
</div>

CSS del diseño de Gmail

Muchos de los estilos que hemos utilizado vienen por defecto en Bootstrap, es por eso que no necesitamos mucho código CSS adicional para este diseño.

html{position:relative;min-height:100%}body{margin-bottom:60px}.footer{position:absolute;bottom:0;width:100%;height:60px;background-color:#f5f5f5}body>.container{padding:60px 15px 0}.container .text-muted{margin:20px 0}.footer>.container{padding-right:15px;padding-left:15px}.navbar-default{background-color:#f04949;border-color:#f04949;font-family:Droid Sans}.navbar-default .navbar-brand{color:#fff;font-family:Droid Sans}.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover,.navbar-default .navbar-nav>li>a{color:#fff}.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#fff}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#D5D5D5}.navbar-default .navbar-nav>.dropdown>a .caret,.navbar-default .navbar-nav>.dropdown>a:focus .caret,.navbar-default .navbar-nav>.dropdown>a:hover .caret{border-top-color:#fff;border-bottom-color:#fff}.navbar-default .navbar-nav>.open>a .caret,.navbar-default .navbar-nav>.open>a:focus .caret,.navbar-default .navbar-nav>.open>a:hover .caret{border-top-color:#555;border-bottom-color:#555}.navbar-default .navbar-toggle{border-color:#DDD}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#f04949}.navbar-default .navbar-toggle .icon-bar{background-color:#fff}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#fff}.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333}}.chk-read{margin:0;padding:0!important}.btn-chk{padding-top:4px;padding-bottom:4px}.btn.btn-default.dropdown-toggle{padding-left:30%;padding-right:30%}

Fuente: smarttutorials.net

COMPARTE ESTE ARTÍCULO

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