#css: Sistema de filas y columnas de #Bootstrap3 con ejemplos by @telecristy

#css: Sistema de filas y columnas de #Bootstrap3 con ejemplos by @telecristy

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:

rejilla.png

La resoluciones que maneja Bootstrap son:

resoluciones.png

Ahora, vamos a ver cómo usarlo:

Lo primero que hice fue descargar bootstrap.min.css y añadirlo en mi  head del HTML5.

<head>
    <title>Sistema de filas y columnas de Bootstrap 3 </title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
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="row">
    <div class="col-lg-2">.col-lg-2</div>
    <div class="col-lg-10">.col-lg-10</div>
</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:

lg-12001px.png

En la siguiente imágen tengo  la resolución de 1199px es por eso que mis columnas son verticales:

lg-1199px.png

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:

rosaferte1.png

Columnas en forma horizontal dentro de la misma fila:

rosaferte2.png

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="row">
    <div class="col-md-7">.col-md-7</div>
    <div class="col-md-5">.col-md-4</div>
</div>

En la siguiente imágen tengo la resolución de 992px es por eso que mis columnas son horizontales:

md-992px.png

En la siguiente imágen tengo  la resolución de 991px es por eso que mis columnas son verticales:

md-991px.png

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="row">
    <div class="col-sm-9">.col-sm-9</div>
    <div class="col-sm-3">.col-sm-3</div>
</div>

En la siguiente imágen tengo la resolución de 768px es por eso que mis columnas son horizontales:

768px.png

En la siguiente imágen tengo  la resolución de 767px es por eso que mis columnas son verticales:

767.png

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="row">
    <div class="col-xs-8">.col-xs-8</div>
    <div class="col-xs-4">.col-xs-4</div>
</div>

xs.png

Código completo del ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Sistema de filas y columnas de Bootstrap 3 </title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
	<body>
		<p class="lg">Tamaño lg (large) </p>
		<div class="row">
			<div class="col-lg-2">.col-lg-2</div>
			<div class="col-lg-10">.col-lg-10</div>
		</div>
 
		<p class="md">Tamaño md (mediano)</p>
		<div class="row">
			<div class="col-md-7">.col-md-7</div>
			<div class="col-md-5">.col-md-4</div>
		</div>
 
		<p class="sm">Tamaño sm (small - pequeño)</p>
		<div class="row">
			<div class="col-sm-9">.col-sm-9</div>
			<div class="col-sm-3">.col-sm-3</div>
		</div>
 
		<p class="xs">Tamaño xs (extra small - extra pequeño)</p>
		<div class="row">
			<div class="col-xs-8">.col-xs-8</div>
			<div class="col-xs-4">.col-xs-4</div>
		</div>
	</body>
</html>

CSS

.lg {
	color: #3333FF;
	font-weight: 700;
}
 
.md {
	color: red;
	font-weight: 700;
	margin-top: 20px;
}
 
.sm {
	color: green;
	font-weight: 700;
	margin-top: 60px;	
}
 
.xs {
	color: purple;
	font-weight: 700;
	margin-top: 90px;	
}
 
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4, 
.col-lg-5, 
.col-lg-6, 
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
	border: 1px solid #3333FF;
}
 
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4, 
.col-md-5, 
.col-md-6, 
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
	border: 1px solid red;
}
 
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4, 
.col-sm-5, 
.col-sm-6, 
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
	border: 1px solid green;
}
 
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4, 
.col-xs-5, 
.col-xs-6, 
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
	border: 1px solid purple;
}

ESTRUCTURA

estructura.png

Un placer, @telecristy.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s