Bootstrap es un framework que puedes utilizar en las páginas de tu aplicación web para que sean responsive, es decir, para que se adapten automáticamente al tamaño de la pantalla en la que se visualizan (tablets, móviles, pantallas de TV...).
Incorpora una series de plantillas CSS y archivos Javascript, además de integrarse perfectamente con librerías como jquery. Además cada día se amplia más la comunidad y se pueden obtener fácilmente plantillas basadas en Bootstrap tanto gratuitas como de pago para no empezar tu web desde 0. La versión actual es la 3 y próximamente está previsto el lanzamiento de la 4.
Por ejemplo dispondremos de clases CSS para las contenedores (divs) con las que podremos indicar si nuestra Web ocupará todo el espacio disponible en la pantalla o por el contrario solo una parte de la misma:
Contenedor ocupando un espacio acotado en pantalla
Contenedor ocupando todo el espacio de pantalla
Contenedor mixto
Otro ejemplo sería un contenedor que ocupa toda la pantalla con una imagen de fondo que contendría a otro contenedor con el contenido de nuestra página.
<div class="container-fluid"> </div>
Contenedor mixto
Otro ejemplo sería un contenedor que ocupa toda la pantalla con una imagen de fondo que contendría a otro contenedor con el contenido de nuestra página.
<div class="container-fluid"> <div class="container"></div> </div>
Las resoluciones de pantalla que se definen en Bootstrap son 4:
- Pantallas grandes (lg). A partir de 1200 pixels. Ordenadores
- Pantallas medias (md). A partir de 992 pixels. Ordenadores
- Pantallas pequeñas (sm). A partir de 768 pixeles. Tablets
- Pantallas muy pequeñas (xs). Por debajo de 768 pixels. Móviles
Para la disposición de los diferentes elementos de nuestras páginas lo más importante que tenemos que conocer es el modelo de rejillas de Bootstrap. Este framework considera que cada fila de la pantalla contiene 12 columnas (que ocuparan un número determinado de pixels dependiendo en el tipo de pantalla en la que nos encontremos).
Para entender mejor la forma de dividir la pantalla con Bootstrap, imaginemos que tenemos 4 bloques de contenidos y que queremos mostrarlos de la siguiente forma:
- En pantallas grandes queremos 4 bloques por cada fila. Como tenemos 4 bloques y 12 columnas, cada bloque debe ocupar 3 columnas. Para ello utilizamos la clase CSS col-lg-3.
- En pantallas medias queremos 3 bloque por cada fila. Como tenemos 3 bloques por cada fila y 12 columnas, cada bloque debe ocupar 4 columnas. La clase que utilizaremos será col-md-4.
- En pantallas pequeñas queremos 2 bloques por cada fila. Como tenemos 2 bloques por cada fila y 12 columnas, cada columna debe ocupar 6 columnas. La clase que se usa será col-sm-6.
- En pantallas muy pequeñas queremos un bloque en cada fila. Como tenemos solamente un bloque, cada bloque debe ocupar 12 columnas para ocupar toda la fila. La clase que se usa será col-xs-12.
El código HTML con el que tenemos en cuenta los 4 casos será el siguiente:
<div class="row borde">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<canvas height="200px" width="200px" id="micanvas1">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<canvas height="200px" width="200px" id="micanvas2">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<canvas height="200px" width="200px" id="micanvas3">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<canvas height="200px" width="200px" id="micanvas4">
</div>
</div>
La pantalla se verá de la siguiente forma según la resolución del dispositivo en la que la visualizamos:
Además de facilitar la disposición de contenidos, Bootstrap contiene botones, menus, diálogos modales muy útiles para el desarrollo de nuestras aplicaciones. La web oficial está muy bien documentada y los ejemplos son muy claros. Otros frameworks para realizar páginas web responsive son Foundation o Skeleton. Si pulsas aquí podrás echar un ojo a frameworks similares para poder comparar tú mismo.
El código del ejemplo es el siguiente:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via 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]-->
<style type="text/css"> .borde {border: black 1px solid; } </style>
<script> function pintarCuadrados() { var i = 1; var canvas; var ctx; for (i = 1; i <=4; i ) { canvas = document.getElementById("micanvas" i); ctx = canvas.getContext("2d"); ctx.fillRect(10,10,200,200); ctx.fillStyle="#f00"; } } </script>
</head>
<body onload="pintarCuadrados()">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <br/>
<div class="container">
<div class="row borde">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<canvas height="200px" width="200px" id="micanvas1">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<canvas height="200px" width="200px" id="micanvas2">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<canvas height="200px" width="200px" id="micanvas3">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<canvas height="200px" width="200px" id="micanvas4">
</div>
</div>
</div>
</body>
</html>
Fuente: proyectobds
Comentarios
Publicar un comentario