Tutorial #5 del curso de BootStrap, en este tutorial seguimos viendo el sistema de grillas de bootstrap, veremos el uso de dos componentes importantes: .row , .col , la cual nos permite crear una especie de cuadrícula donde podremos nuestro contenido, bootstrap no permite utilizar un máximo de 12 columnas o espacios de columnas para colocar nuestro contenido nos permite utilizar los prefijos de clase para el soporte a diseños adaptables para distiantas resoluciones como ser (xs sm md ,lg).
En el siguiente gráfico vemos como estan dispuesto los espacios de columnas por fila que nos permite utilizar bootstrap:
Aqui nuestro ejemplo:
grilla.php
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>ejemplo grilla</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6 well"> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno e </div> <div class="col-xs-6 well"> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el </div> </div> <div class="row"> <div class="col-xs-3">Lorem Ipsum es simplemente el relleno estándar de las industrias desde el año </div> <div class="col-xs-6">Lorem Ipsum es simplemente el el texto de relleno estándar de las industrias desde el año </div> <div class="col-xs-3">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año </div> </div> <div class="row"> <div class="col-xs-1">Lorem Ipsum es simplemente el</div> <div class="col-xs-1">Lorem Ipsum es simplemente el</div> <div class="col-xs-1">Lorem Ipsum es simplemente el</div> <div class="col-xs-1">Lorem Ipsum es simplemente el</div> <div class="col-xs-1">Lorem Ipsum es simplemente el</div> <div class="col-xs-1">Lorem Ipsum es simplemente el</div> <div class="col-xs-1">Lorem Ipsum es simplemente el</div> <div class="col-xs-1">Lorem Ipsum es simplemente el</div> <div class="col-xs-1">Lorem Ipsum es simplemente el</div> <div class="col-xs-1">Lorem Ipsum es simplemente el</div> <div class="col-xs-1">Lorem Ipsum es simplemente el</div> <div class="col-xs-1">Lorem Ipsum es simplemente el</div> </div> </div> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>