Source: https://coudlain.wordpress.com/2016/07/22/css-sistema-de-filas-y-columnas-de-bootstrap3-con-ejemplos-by-telecristy/
Timestamp: 2018-06-19 02:23:52+00:00

Document:
#css: Sistema de filas y columnas de #Bootstrap3 con ejemplos by @telecristy – www.coudlain.com
#css: Sistema de filas y columnas de #Bootstrap3 con ejemplos by @telecristy
22 julio, 2016 por coudlain, posted in css
fuente: https://www.codejobs.biz/es/blog/2015/12/01/sistema-de-filas-y-columnas-de-bootstrap3-con-ejemplos
Si vamos a la documentación de Bootstrap, nos dirá que tenemos una rejilla con 12 columnas (siempre son 12 columnas ojo aquí) y estas columnas las podemos optimizar para cada una de las distintas resoluciones de nuestras pantallas (desktop, celulares, etc.). Ver aquí la documentación oficial de Bootstrap.
A continuación la rejilla de columnas que maneja Bootstrap:
La resoluciones que maneja Bootstrap son:
Ahora, vamos a ver cómo usarlo:
Lo primero que hice fue descargar bootstrap.min.css y añadirlo en mi head del HTML5.
<title>Sistema de filas y columnas de Bootstrap 3 </title>
Clase .col-lg-numerocolumnas
Ahora bien en el caso de la clase de bootstrap .col-lg-numerocolumnas; nos dice que si la resolución de mi pantalla es mayor o igual a 1200px el comportamiento de las columnas será horizontal y si la resolución es menor a 1200px entonces el comportamiento de las columnas será de forma vertical (apiladas), veamos el siguiente ejemplo:
<div class="col-lg-2">.col-lg-2</div>
<div class="col-lg-10">.col-lg-10</div>
Resolución >= 1200px comportamiento de las columnas en horizontal
En la siguiente imágen tengo la resolución de 1201px es por eso que mis columnas son horizontales:
En la siguiente imágen tengo la resolución de 1199px es por eso que mis columnas son verticales:
Nota: Aunque las columnas se coloquen en forma vertical esto NO quiere decir que se ha creado otra fila, es decir, las columnas se apilan pero dentro de la misma fila, a continuación te pongo en color “rosa fuerte” la fila.
Columnas en forma vertical dentro de la misma fila:
Columnas en forma horizontal dentro de la misma fila:
En general bootstrap implementa medias queries que afectan las columnas cuando la resolución de la pantalla tiene cierta medida de pixeles.
Clase .col-md-numerocolumnas
Para el caso de md(tamaños medianos) nos dice que las columnas se van a comportar de forma horizontal si la resolucion es >=992px y de manera vertical si la resolucion es menor a 992px, veamos el siguiente ejemplo:
<div class="col-md-7">.col-md-7</div>
<div class="col-md-5">.col-md-4</div>
En la siguiente imágen tengo la resolución de 992px es por eso que mis columnas son horizontales:
En la siguiente imágen tengo la resolución de 991px es por eso que mis columnas son verticales:
Clase .col-sm-numerocolumnas
Para el caso de sm(small – tamaños pequeños) nos dice que las columnas se van a comportar de forma horizontal si la resolucion es >=768 px y de manera vertical si la resolucion es menor a 768px, veamos el siguiente ejemplo:
<div class="col-sm-9">.col-sm-9</div>
En la siguiente imágen tengo la resolución de 768px es por eso que mis columnas son horizontales:
En la siguiente imágen tengo la resolución de 767px es por eso que mis columnas son verticales:
Clase .col-xs-numerocolumnas
Para el caso de xs(extra pequeño) por más pequeña que sea la resolución mis columnas nunca van a cambiar, es decir siempre se comportarán de manera horizontal.
<div class="col-xs-8">.col-xs-8</div>
<p class="lg">Tamaño lg (large) </p>
<p class="md">Tamaño md (mediano)</p>
<p class="sm">Tamaño sm (small - pequeño)</p>
<p class="xs">Tamaño xs (extra small - extra pequeño)</p>
border: 1px solid #3333FF;
Un placer, @telecristy.
Etiquetado Bootstrap3, css, html
Entrada anterior#Gijón: Nuestro autobús rumbo a la historia se llama “Arqueobus”
Entrada siguiente#FelizFinde #Asturias! Como sera el tiempo en #gijon?

References: resolución 
 resolución 

Resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución