BOOTSTRAP - CUADRICULAS - GRIDS

En esta sesión mostramos el uso del sistema de cuadrícula (grid) en Bootstrap incluyendo cómo personalizar la cuadrícula según el dispositivo para móviles, tablets, escritorios o pantallas grandes.

Cargando video...

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

Bootstrap incluye una cuadrícula personalizable de 12 columnas de ancho

Las clases CSS predeterminadas permiten especificar reglas de visualización adaptables al dispositivo, si queremos mayor control.

Todo el contenido debe estar dentro de un div "container" o "container-fluid"

Agregamos filas con la clase "row"

Agregamos columnas con "col-*"


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Las 3 etiquetas anteriores deben ir en primer lugar en el bloque head -->
<title>Cuadrículas con Bootstrap</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style>
/* estilo local para visualizar fácilmente cuadrícula en ejemplo */
.show-grid [class^=col-] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
</style>
<!-- HTML5 shim y Respond.js se agregan para mejorar soporte a IE8 -->
<!-- NOTA: Respond.js no funciona si se ve la página localmente con file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- podemos usar la clase "container" (ancho fijo) o "container-fluid" (ancho completo) -->
<div class="container">
<h2>Cuadrícula ejemplo (MD)</h2>
<div id="cuadricula1" class="show-grid">
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-6">col-md-6</div>
<div class="col-md-3">col-md-3</div>
</div>
<div class="row">
<div class="col-md-2">col-md-2</div>
<div class="col-md-5 col-md-offset-1">col-md-5 col-md-offset-1</div>
<div class="col-md-3 col-md-offset-1">col-md-3 col-md-offset-1</div>
</div>
</div>
<h2>Cuadrícula ajustable (Móvil y Desktop)</h2>
<div id="cuadricula2" class="show-grid">
<div class="row">
<div class="col-xs-12 col-md-8">col-xs-12 col-md-8</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
</div>
</div>
<h2>Cuadrícula ajustable (Móvil, Tablet y Desktop)</h2>
<div id="cuadricula3" class="show-grid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">col-xs-12 col-sm-6 col-md-8</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4 Ejemplo con contenido más largo en una de las celdas</div>
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
<!-- Opcional: forzar salto en las columnas XS si la altura del contenido no concuerda -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
</div>
</div>
<h2>Cuadrícula anidada</h2>
<div id="cuadricula4" class="show-grid">
<div class="row">
<div class="col-sm-9">
Nivel 1: col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Nivel 2: col-xs-8 col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Nivel 2: col-xs-4 col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necesario para utilizar plugins JS de Bootstrap) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Acá utilizamos la versión precompilada y optimizada,
pero pueden incluirse otras versiones o componentes individuales -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.