Los clientes quieren que sus sitios se vean bien en tablets, teléfonos, y hasta en el microondas si fuera posible. La solución: Bootstrap 3, el framework CSS que te hace parecer un genio del diseño responsivo sin serlo.
Después de pelear con media queries durante meses, descubrí Bootstrap y mi vida cambió. No es perfecto, pero es mejor que escribir 500 líneas de CSS para que un menú se vea decente en móvil.
¿Qué diablos es Bootstrap?
Bootstrap es un framework CSS creado por Twitter. Básicamente, es un conjunto de clases predefinidas que hacen que tu sitio se vea profesional sin esfuerzo. Versión 3 salió en agosto 2013 y es mobile-first, lo que significa que está pensado primero para móviles.
Setup inicial: Más fácil que hervir agua
Primero, descarga Bootstrap de getbootstrap.com o usa el CDN si eres vago como yo:
<!-- CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
El Grid System: La magia responsiva
Bootstrap divide la pantalla en 12 columnas. Suena complicado, es ridículamente simple:
<div class="container">
<div class="row">
<div class="col-md-8">Contenido principal (8 columnas)</div>
<div class="col-md-4">Sidebar (4 columnas)</div>
</div>
</div>
¿Quieres que se vea diferente en móvil? Agrega más clases:
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-9">
Este div cambia de tamaño según el dispositivo
</div>
- xs: Extra small (teléfonos)
- sm: Small (tablets)
- md: Medium (desktops)
- lg: Large (desktops grandes)
Navegación responsiva que funciona
El menú que se convierte en hamburguesa en móvil. Años tratando de hacerlo desde cero, Bootstrap lo hace en 10 líneas:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Mi Sitio</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
</nav>
Componentes útiles incluidos
Botones que no dan vergüenza:
<button class="btn btn-primary">Botón Principal</button>
<button class="btn btn-success">Éxito</button>
<button class="btn btn-danger">Peligro</button>
<button class="btn btn-default btn-lg">Botón Grande</button>
Formularios que se ven profesionales:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
</form>
Alertas para mensajes importantes:
<div class="alert alert-success">¡Bien hecho! Guardado exitosamente.</div>
<div class="alert alert-warning">Cuidado, algo no anda bien.</div>
<div class="alert alert-danger">Error: Todo salió mal.</div>
Ejemplo completo: Landing page en 5 minutos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi Sitio Responsivo</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Navegación -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Mi Empresa</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="jumbotron">
<div class="container">
<h1>Bienvenido a mi sitio</h1>
<p>Este sitio se ve bien en cualquier dispositivo gracias a Bootstrap</p>
<p><a class="btn btn-primary btn-lg" href="#">Aprende más</a></p>
</div>
</div>
<!-- Contenido -->
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Responsivo</h2>
<p>Se adapta a cualquier tamaño de pantalla automáticamente.</p>
</div>
<div class="col-md-4">
<h2>Rápido</h2>
<p>Desarrollo veloz con componentes predefinidos.</p>
</div>
<div class="col-md-4">
<h2>Compatible</h2>
<p>Funciona en todos los navegadores modernos.</p>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Personalización sin dolor
¿No te gusta el estilo por defecto? Crea tu propio CSS y sobreescribe lo que necesites:
/* custom.css */
.navbar-inverse {
background-color: #2c3e50;
border: none;
}
.btn-primary {
background-color: #3498db;
border-color: #2980b9;
}
.jumbotron {
background-color: #ecf0f1;
padding: 100px 0;
}
Helpers útiles que salvan vidas
Ocultar/mostrar según dispositivo:
<div class="visible-xs">Solo visible en móviles</div>
<div class="visible-md visible-lg">Solo en desktop</div>
<div class="hidden-sm">Oculto en tablets</div>
Imágenes responsivas:
<img src="foto.jpg" class="img-responsive" alt="Imagen responsiva">
Tips de experiencia real
1. No uses todas las clases solo porque existen. Menos es más.
2. El archivo bootstrap.css pesa 120KB. Si solo necesitas el grid, usa la versión personalizada.
3. Internet Explorer 8 necesita respond.js para que funcionen las media queries.
4. No modifiques los archivos de Bootstrap directamente. Usa tu propio CSS.
5. Los modales y carousels necesitan JavaScript. No olvides incluir jQuery.
Bootstrap 3 no es la solución a todos los problemas de diseño, pero para sitios corporativos, landing pages, y proyectos que necesitas entregar ayer, es una bendición. En 2014, es la mejor herramienta para hacer sitios responsivos sin morir en el intento.
Comentarios 1
Comparte tu opinión
Eduardo Navarro