Bootstrap ~ TRUCOS PARA DESARROLLO

Herramientas como Bootstrap son muy prácticas a la hora realizar una web y organizar efectivamente el espacio de trabajo. No inventar la rueda por que ya se esta inventando constantemente. Increíble toda la ayuda para los maquetadores de páginas web. Presento esta vez una explicación a las clases principales y más utilizadas, más adelante detallaré más elementos prácticos de este increíble y tal vez el mejor framework.

CDN Bootstrap 3.3.7

HTML

Último CSS compilado y minificado
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Tema opcional
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

Último compilado y minificado de JavaScript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"> </script>

CDN Bootstrap 4.0.0

HTML

Columnas automáticas

Se refiere a que a la comuna que se le aplique la clase col-auto, no heredará el ancho total sino basado en su contenido.

COLUMNA 1

COLUMNA 2

COLUMNA 3

HTML

<div class="row">
<div class="col">COLUMNA 1 </div>
<div class="col col-auto">COLUMNA 2 </div>
<div class="col">COLUMNA 3 </div>
</div>

Separar un grupo de columnas automáticas

COLUMNA 1

COLUMNA 2

COLUMNA 3

COLUMNA 4

HTML

<div class="row">
<div class="col">COLUMNA 1 </div>
<div class="col">COLUMNA 2 </div>
<div class="col">COLUMNA 3 </div>
<div class="w-100"> </div>
<div class="col">COLUMNA 4 </div>

Alinear verticalmente

Esta es la manera de centrar verticamente de bootstrap

Es primordial para centrar verticalmente que el contenedor padre tenga una altura definida. Incluso de esta misma forma centra FLEXBOX

CSS

.row{
height:150px;
}

ALINEAR ARRIBA

COLUMNA 1

COLUMNA 2

COLUMNA 3

HTML

ALINEAR EN CENTRO

COLUMNA 1

COLUMNA 2

COLUMNA 3

HTML

ALINEAR AL FINAL

COLUMNA 1

COLUMNA 2

COLUMNA 3

HTML

Alineación independiente

COLUMNA 1

COLUMNA 2

COLUMNA 3

HTML

Alineación horizontal

AL INICIO

COLUMNA 1

COLUMNA 2

HTML

AL CENTRO

COLUMNA 1

COLUMNA 2

HTML

AL FINAL

COLUMNA 1

COLUMNA 2

HTML

RESPARTIR EL ESPACIO

COLUMNA 1

COLUMNA 2

HTML

RESPARTIR EL ESPACIO SOLO ENTRE COLUMNAS

COLUMNA 1

COLUMNA 2

HTML

Espaciados

Los espaciados se general a la izquierda de las columnas y se colocan al lado de la clase de la columna.

offset-1, offset-2, offset-3, offset-4, offset-5,etc.

Ya para las medidas de dispositivos se incluye:

offset-md-1 o offset-xl-4 según lo requerido

HTML

<div class="col-4 offset-1"></div>

Reubicación de columnas

Esta propiedad es ideal para cambiar el diseño en tamaños responsive

HTML

UBICA AL INICIO DESDE LA POSICIÓN QUE ESTE
.col-md-4 flex-first
UBICA AL FINAL DESDE LA POSICIÓN QUE ESTE
.col-md-4 flex-last
DEJA EN LA POSICIÓN QUE ESTE
.col-md-4 flex-unordered

miércoles, 19 de diciembre de 2018

CDN Bootstrap 3.3.7

HTML

CDN Bootstrap 4.0.0

HTML

Columnas automáticas

COLUMNA 1

COLUMNA 2

COLUMNA 3

HTML

Separar un grupo de columnas automáticas

COLUMNA 1

COLUMNA 2

COLUMNA 3

COLUMNA 4

HTML

Alinear verticalmente

CSS

COLUMNA 1

COLUMNA 2

COLUMNA 3

HTML

COLUMNA 1

COLUMNA 2

COLUMNA 3

HTML

COLUMNA 1

COLUMNA 2

COLUMNA 3

HTML

Alineación independiente

COLUMNA 1

COLUMNA 2

COLUMNA 3

HTML

Alineación horizontal

COLUMNA 1

COLUMNA 2

HTML

COLUMNA 1

COLUMNA 2

HTML

COLUMNA 1

COLUMNA 2

HTML

COLUMNA 1

COLUMNA 2

HTML

COLUMNA 1

COLUMNA 2

HTML

Espaciados

HTML

Reubicación de columnas

HTML

1 comentario: