2.1. Bootstrap

Twitter Bootstrap es un framework o conjunto de herramientas de software libre para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales.

Es el proyecto más popular en GitHub y es usado por multiples empresas. El presente documento presenta diversos ejemplos de aplicación no trata de ser un tutorial exhaustivo ni mucho menos un manual solo presenta material util para los lectores.

Plantilla base

A continuación se presenta una plantilla básica para usar Bootstrap

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8' />
  <title>SQL</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css' rel='stylesheet'>
  <link href='favicon.ico' type='image/x-icon' rel='shortcut icon' />
  <link href='favicon.ico'  rel='icon' />
</head>
<body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Clases Grid

El Bootstrap grid system tiene cuatro clases:

Las clases pueden ser combinadas para crear diseños dinámicos y flexibles.

Tres columnas iguales

El siguiente código muestra cómo obtener tres columnas del mismo ancho compatible con tablet y escalable a computadoras de escritorio. En los teléfonos celulares, las columnas se apilan automáticamente:

See the Pen PZErXq by JOSE (@albatros) on CodePen.

Dos columnas desiguales

El siguiente código muestra cómo obtener dos columnas de diferente ancho compatible con tabletas y computadoras de escritorio:

See the Pen qbpzgL by JOSE (@albatros) on CodePen.

Bootstrap Layouts with Column Wrapping Feature

Now we are going to create more flexible layouts that changes the column orientation based on the viewport size. The following example will create a three column layout on medium devices like laptops and desktops, as well as on tablets (e.g. Apple iPad) in landscape mode, but on small devices like tablets in portrait mode, it will change into a two column layout where the third column moves at the bottom of the first two columns.

See the Pen yepdWz by JOSE (@albatros) on CodePen.

As you can see in the example above the sum of small grid column numbers (i.e. col-sm-*) is 3 + 9 + 12 = 24 > 12, so the third <div> element with the class .col-sm-12 that is adding the extra columns beyond the maximum 12 columns in a .row, gets wrapped onto a new line as one contiguous unit on small devices having the viewport width less than the 992 pixels.