Ir al contenido principal

BOOTSTRAP FOR DUMMIES

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


<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

Entradas populares de este blog

Soluciones Alchemy Classic 389 elementos

Hace algún tiempo salió una actualización del Juego Alchemy Classic en la que aparecían más elementos (389 en lugar de 238). Aparte de añadir elementos mejoran algunas traducciones en castellano y mejoran la interfaz, aunque todavía hay algún error en algunos nombres de elementos.

Aquí os dejo las soluciones para los que estén atascados y no puedan dormir por las noches:


Sustancia primaria
Aire=Elemento primario  Fuego=Elemento primario  Agua=Elemento primario  Tierra=Sustancia Primaria Arena=Piedra + Aire Piedra=Tierra + Fuego Arcilla=Arena + Pantano Caliza=Tierra + Amonitas Carbono=Fuego + Madera Cloro=Fuego + Sal + Electricidad CO2(Dióxido de Carbono)=Ceniza + Ácido nítrico Electricidad=Relámpago+ Metales Gas natural= Yacimiento de gas + Pozo Helio=Refinería de gas + Gas Natural Hidrógeno=Electricidad + Agua Hielo=Frío + Agua Imán=Piedra + Metales Metano=Deshechos Vegetales + Pantano Oxígeno=Electricidad + Agua Petróleo=Unidad de Bombeo + Pozo Plutonio=2 + Radiactividad + Metales Sa…

Matemáticas y cine.

El otro día estaba viendo por la televisión una película llamada 21 blackjack. En una escena de la película el profesor de matemáticas (Kevin Spacey) le presenta a uno de sus alumnos la siguiente situación: se encuentra en un concurso en la que debe escoger entre tres puertas (1,2 y 3). En dos de ellas hay una cabra, sin embargo en una de las 3 hay un flamante coche nuevo. El alumno responde que quiere abrir la puerta. El presentador, conocedor de lo que hay detrás de cada puerta decide abrir otra puerta diferente mostrando detrás de ella una cabra. El profesor se dirige al alumno y le pregunta, ¿cambiarías la puerta o te quedarías con la puerta que tienes? Muchos de nosotros cambiaríamos de puerta pensando que es una treta del presentador para engañarnos. ¿Cual elegiríais vosotros? Al comienzo tenemos 1/3 de probabilidades de acertar la puerta donde está el coche. Una vez que el presentador abre la puerta con una cabra, la mayoría de gente piensa que hay la misma probabilidad de ace…

Soluciones Alchemy Classic 442 elementos

Después de la resaca navideña y de la cuesta de enero, volvemos para informar la agradable sorpresa que nos ha dado a los fans de Alchemy Classic la empresa NIASOF,  tras actualizar el juego Alchemy Classic.


Una nueva versión con 442 elementos, interfaz mejorada de grupos y lo más importante, nuevos elementos que descubrir.


La gran novedad de esta actualización son los puntos que tienes asignados, con los que puedes  conseguir pistas sobre los elementos que no has abierto todavía como:



Conseguir un subelemento de un elemento, con 100 puntos.Conseguir el grupo de un subelemento de un elemento (qué lío , jeje), con 35 puntos.
Me gusta, me gusta el enfoque de esta nueva versión aunque los elementos que han sacado me parecen poco originales. Parece que se van agotando las ideas para los elementos nuevos.


Aquí van las soluciones:




Carbon = Tierra + Turba

Sol = Estrella + Tierra


Espacio = 3 x Estrella
Estrella = Helio + Hidrógeno
Oso Panda = Oso + Bambú


Girasol = Sol + Flor


Animales de pezuña hendida = …