Guía de estilos
Sistema de grilla tipo Flexbox
Estructura basada en filas, columnas (12) y contenido.
<div class="row">
<div class="col-xs-12">
<p>Contenido de 12 columnas</p>
</div>
</div>
Responsivo.
Modificadores responsivos específicos para diferentes tamaños, alineamientos, columnas
y distribución. En extra-small (xs), small (sm), medium (md) y large (lg).
<div class="row">
<div class="col-xs-12
col-sm-8
col-md-6
col-lg-4">
<div>Responsive</div>
</div>
</div>
Offset.
<div class="row">
<div class="col-xs-offset-3 col-xs-9">
<div>offset</div>
</div>
</div>
Ancho automático.
Si no recibe un numero de columnas a ocupar, calcula automáticamente su ancho.
<div class="row">
<div class="col-xs">
<p>Contenido #1</p>
</div>
<div class="col-xs">
<p>Contenido #2</p>
</div>
<div class="col-xs">
<p>Contenido #3</p>
</div>
</div>
Cuando llega al máximo de su contendor, las columnas pasan a formar otra fila.
Grilla anidada.
<div class="row">
<div class="col-xs">
<div class="row">
<div class="col-xs-3">
<p>Contenido 3</p>
</div>
<div class="col-xs-7">
<p>Contenido 7</p>
</div>
</div>
</div>
</div>
Alineamiento.
Al agregar estas clases se puede alinear tanto verticalmente como horizontalmente.
.start-
<div class="row start-xs">
<div class="col-xs-6">
<div class="sample-box">
start
</div>
</div>
</div>
.center-
<div class="row center-xs">
<div class="col-xs-6">
<div class="sample-box">
center
</div>
</div>
</div>
.end-
<div class="row end-xs">
<div class="col-xs-6">
<div class="sample-box">
end
</div>
</div>
</div>
Responsivo
<div class="row center-xs end-sm start-lg">
<div class="col-xs-6">
<div class="sample-box">
Responsivo
</div>
</div>
</div>
.top-
<div class="row top-xs">
<div class="col-xs-6">
<div class="sample-box">
top
</div>
</div>
</div>
.middle-
<div class="row middle-xs">
<div class="col-xs-6">
<div class="sample-box">
middle
</div>
</div>
</div>
.bottom-
<div class="row bottom-xs">
<div class="col-xs-6">
<div class="sample-box">
bottom
</div>
</div>
</div>
Distribución.
Clases para distribuir el contenido
.around-
<div class="row around-xs">
<div class="col-xs-2">
<div class="sample-box">
around
</div>
</div>
<div class="col-xs-2">
<div class="sample-box">
around
</div>
</div>
<div class="col-xs-2">
<div class="sample-box">
around
</div>
</div>
</div>
.between-
<div class="row between-xs">
<div class="col-xs-2">
<div class="sample-box">
between
</div>
</div>
<div class="col-xs-2">
<div class="sample-box">
between
</div>
</div>
<div class="col-xs-2">
<div class="sample-box">
between
</div>
</div>
</div>
Reordenamiento.
Clases para reordenar columnas
.first-
<div class="row">
<div class="col-xs-2">
<div class="sample-box">
1
</div>
</div>
<div class="col-xs-2">
<div class="sample-box">
2
</div>
</div>
<div class="col-xs-2 first-xs">
<div class="sample-box">
3
</div>
</div>
</div>
.last-
<div class="row">
<div class="col-xs-2 last-xs">
<div class="sample-box">
1
</div>
</div>
<div class="col-xs-2">
<div class="sample-box">
2
</div>
</div>
<div class="col-xs-2">
<div class="sample-box">
3
</div>
</div>
</div>
Reversamiento
.resverse
<div class="row reverse">
<div class="col-xs-2">
<div class="box">
1
</div>
</div>
<div class="col-xs-2">
<div class="box">
2
</div>
</div>
<div class="col-xs-2">
<div class="box">
3
</div>
</div>
</div>
Sistema de grilla tipo Grid
Estructura basada en filas, cantidad de columnas configurables (hasta un límite por defecto de 16) y contenido.
<div class="grid">
<div>Contenido de 1 columna 4 filas</div>
<div>Contenido de 1 columna 4 filas</div>
<div>Contenido de 1 columna 4 filas</div>
<div>Contenido de 1 columna 4 filas</div>
</div>
AUTO RESPONSIVIDAD
Las siguientes clases modificadoras permiten agrupar elementos uno al lado de otro especificando un tamaño mínimo por igual de cada elemento. Los elementos actuaran de manera responsiva según el tamaño en su ancho que adquiera el elemento contenedor padre, ajustandose a diferentes columnas y filas según corresponda. Su ventaja principal radica en que permite no tener que pensar en cada breakpoint en el que debe colocarse cada elemento, lo que permite un rápido maquetado.
El tamaño mínimo es definido a través de una propiedad personalizable ('variable' CSS) que debe ser modificada en el atributo style.
Anotaciones:
1. Si no se especifica el tamaño mínimo este será de 300px.
2. Las propiedades perzonalizables (variables css) son solo compatibles con las últimas versiones de los navegadores actuales.
Para probarlo y ver sus diferencias se recomienda reducir/aumentar el tamaño del viewport.
<div class="grid grid--fill" style="--min-value-fill: 150px">
<div>Contenido. Tamaño mínimo 150px</div>
<div>Contenido. Tamaño mínimo 150px</div>
<div>Contenido. Tamaño mínimo 150px</div>
<div>Contenido. Tamaño mínimo 150px</div>
</div>
Grid Auto-Fit
<div class="grid grid--fit" style="--min-value-fit: 150px">
<div>Contenido. Tamaño mínimo 150px</div>
<div>Contenido. Tamaño mínimo 150px</div>
<div>Contenido. Tamaño mínimo 150px</div>
<div>Contenido. Tamaño mínimo 150px</div>
<div>Contenido. Tamaño mínimo 150px</div>
</div>
Configuración
Se puede determinar el número columnas que tendrá un elemento contenedor utilizandos clases modificadoras:
Tomando en cuenta los 5 brekpoints (xs, sm, md, lg y xl) y un máximo por defecto de 16 columnas, las posibles clases resultan de la siguiente combinación:
<div class="grid grid--cols-{breakpoint}-{número-de-columnas}"></div>
Ejemplo: Grilla de 9 columnas en "lg" (min: 992px) y 5 columnas en "md" (min: 768px)
<div class="grid grid--cols-md-5 grid--cols-lg-9">
<div>Contenido.</div>
<div>Contenido.</div>
<div>Contenido.</div>
<div>Contenido.</div>
<div>Contenido.</div>
<div>Contenido.</div>
<div>Contenido.</div>
<div>Contenido.</div>
<div>Contenido.</div>
</div>
Para determinar la cantidad de columnas que ocupará un elemento dentro del contenedor, puede utilizarse las siguientes combinaciones de clases de bloque:
<div class="grid__column-start-{breakpoint}-{número-de-columna}"></div> : Define el número de columna desde el cual debe empezar a ubicarse un elemento.
<div class="grid__column-end-{breakpoint}-{número-de-columna}"></div> : Defien el número de columna desde el cual debe terminar de ubicarse un elemento.
<div class="grid__column-span-{breakpoint}-{número-de-columnas}"></div> : Define el número de columnas al cual debe expandirse un elemento desde su punto de origen.
<div class="grid__column-{breakpoint}-{número-de-columna-de-inicio}-ends"></div> : Define que un elemento se expanda hasta el último número de columna disponible.
IMPORTANTE: El número de columna corresonde a la línea/espacio que separa a cada elemento dentro de la grilla. Así, por ejemplo, los extremos del primer elemento serán la 'columna' 1 y 'columna' 2 respectivamente. Se refiere como columna por efectos prácticos.
Ejemplo: 16 columnas en "lg" y 8 columnas en "md"
<div class="grid grid--cols-md-8 grid--cols-lg-16">
<div class="grid__column-span-md-4 grid__column-span-lg-8">md: columna 1 a 4. lg: columna 1 a 8.</div>
<div class="grid__column-start-md-5 grid__column-end-md-9 grid__column-start-lg-9 grid__column-end-lg-17">md: columna 5 a 9. lg: columna 9 a 17.</div>
<div class="grid__column-span-md-4">Desde md en adelante: expandir desde columna 1 hasta columna 4.</div>
<div class="grid__column-span-md-4">Desde md en adelante: expandir desde columna 1 hasta columna 4.</div>
<div class="grid__column-span-md-4">Desde md en adelante: expandir desde columna 1 hasta columna 4.</div>
<div class="grid__column-span-md-4">Desde md en adelante: expandir desde columna 1 hasta columna 4.</div>
<div class="grid__column-md-3-ends grid__column-lg-5-ends">Expandir hasta columna final desde md: columna 3, lg: columna 5</div>
</div>
De la misma manera, se puede modificar el espacio en filas que ocupara un elemento dentro la grilla. De nuevo, la fila hace referencia la linea/espacio que hay bajo/encima de cada elemento.
Para modificar el espacio en filas se utiliza las siguientes clases de bloque:
<div class="grid__row-start-{breakpoint}-{número-de-fila}"></div> : Define el número de fila desde el cual debe empezar a ubicarse un elemento.
<div class="grid__row-end-{breakpoint}-{número-de-fila}"></div> : Defien el número de fila desde el cual debe terminar de ubicarse un elemento.
<div class="grid__row-span-{breakpoint}-{número-de-filas}"></div> : Define el número de filas al cual debe expandirse un elemento desde su punto de origen. Funciona correctamente con elementos con número de columnas definidas (start y end)
IMPORTANTE: el número de filas es generado automáticamente a partir de la distribución general de los elementos en la grilla. Esta implementación no cuenta con una forma de crear un número fijo de filas.
<div class="grid grid--cols-md-12">
<div class="sample-box grid__column-span-md-4 grid__row-span-md-3">Tamaño de 4 columnas y 3 filas.</div>
<div class="sample-box grid__column-span-md-4 grid__row-span-md-2">Tamaño de 4 columnas y 2 filas.</div>
<div class="sample-box grid__column-start-md-9 grid__column-end-md-13 grid__row-start-md-1 grid__row-end-md-6">Desde columna 9 hasta la 13 y desde fila 1 hasta la 6.</div>
<div class="sample-box grid__column-span-md-4">Tamaño de 4 columnas.</div>
<div class="sample-box grid__column-span-md-4">Tamaño de 4 columnas.</div>
<div class="sample-box grid__column-span-md-4">Tamaño de 4 columnas.</div>
<div class="sample-box grid__column-span-md-4">Tamaño de 4 columnas.</div>
</div>
Por defecto, el espacio que existe entre los elementos de una grilla es de 1rem (16px)
Para controlar el espacio que existe entre los elementos dentro de la grilla se debe utilizar las siguientes clases modificadores:
<div class="grid grid--gap-{breakpoint}-{nivel-de-espaciado}"></div> : Define el nivel de espacio por igual en vertical y horizontal.
<div class="grid grid--gap-row-{breakpoint}-{nivel-de-espaciado}"></div> : Define el nivel de espacio en horizontal.
<div class="grid grid--gap-column-{breakpoint}-{nivel-de-espaciado}"></div> : Define el nivel de espacio en vertical.
Existen 5 niveles de espaciado:
- 0: 0
- 1: .75rem
- 2: 1rem
- 3: 1.25rem
- 4: 1.5rem
<div class="grid grid--cols-md-6 grid--cols-lg-12 grid--gap-row-md-4 grid--gap-row-lg-0">
<div class="grid__column-span-md-3">Contenido.</div>
<div class="grid__column-span-md-3">Contenido.</div>
<div class="grid__column-span-md-3">Contenido.</div>
<div class="grid__column-span-md-3">Contenido.</div>
<div class="grid__column-span-md-3">Contenido.</div>
<div class="grid__column-span-md-3">Contenido.</div>
</div>
Tipografía
Cabecera.
Todas los elementos HTML
<h1> hasta
<h6>
están habilitados.
HTML
Ejemplo
<h1>Cabecera h1
<h2>Cabecera h2
<h3>Cabecera h3
<h4>Cabecera h4
<h5>Cabecera h5
<h6>Cabecera h6
<h1>Cabecera h1</h1>
<h2>Cabecera h2</h2>
<h3>Cabecera h3</h3>
<h4>Cabecera h4</h4>
<h5>Cabecera h5</h5>
<h6>Cabecera h6</h6>
Además, están habilitadas clases para colocar el
estilo de las cabeceras sobre cualquier elemento.
Desde
.h1 hasta
.h6
Cabecera h1
Cabecera h2
Cabecera h3
Cabecera h4
Cabecera h5
Cabecera h6
<p class="h1">Cabecera h1</p>
<p class="h2">Cabecera h2</p>
<p class="h3">Cabecera h3</p>
<p class="h4">Cabecera h4</p>
<p class="h5">Cabecera h5</p>
<p class="h6">Cabecera h6</p>
Elementos de texto en linea.
Se puede utilizar la etiqueta mark para resaltar texto.
Linea de texto que es interpretada como texto eliminado.
Linea de texto que es interpretada como texto que dejó de ser correcto.
Linea de texto que es interpretada como texto agregado.
Linea de texto que se renderizará subrayada
Linea de texto que es interpretada como letra pequeña de un documento.
Linea de texto que se renderizará como texto en negrita.
Linea que se renderizará como texto en cursiva.
<p>Se puede utilizar la etiqueta mark para <mark>resaltar</mark> texto.</p>
<p><del>Linea de texto que es interpretada como texto eliminado.</del></p>
<p><s>Linea de texto que es interpretada como texto que dejó de ser correcto.</s></p>
<p><ins>Linea de texto que es interpretada como texto agregado.</ins></p>
<p><u>Linea de texto que se renderizará subrayada</u></p>
<p><small>Linea de texto que es interpretada como letra pequeña de un documento.</small></p>
<p><strong>Linea de texto que se renderizará como texto en negrita.</strong></p>
<p><em>Linea que se renderizará como texto en cursiva.</em></p>
Nota: Para lograr el mismo efecto que las etiquetas
<mark> y
<small>, se puede utilizar las clases
.mark {} y
.small {} respectivamente.
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Con fuente
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Nombre importante en <cite title="Fuente">Fuente</cite></footer>
</blockquote>
Alineado
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Nombre importante en <cite title="Fuente">Fuente</cite></footer>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Nombre importante en <cite title="Fuente">Fuente</cite></footer>
</blockquote>
Listas
Ninguno
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
En linea
- Lorem, ipsum.
- Dolor sit.
- Adipiscing elit.
<ul class="list-inline">
<li class="list-inline__item">Lorem, ipsum.</li>
<li class="list-inline__item">Dolor sit.</li>
<li class="list-inline__item">Adipiscing elit.</li>
</ul>
Imagenes
Responsiva
Imagen que ocupará todo el ancho y alto de su contenido.
<img src="..." alt="..." class="img-fill">
Thumbnail
Agrega un enmarcado a una imagen. En el ejemplo, una imagen de 200x200
<img src="..." alt="..." class="img-thumb">
Nota: la imágenes en los ejemplos están redimensionadas. Las clases de CSS no alteran o influyen en
el
tamaño de la imagen.
Tablas
Estilo de tabla por defecto
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Bordeado
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<table class="table--bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Cabecera.
Todas los elementos HTML
<h1> hasta
<h6>
están habilitados.
| HTML | Ejemplo |
|---|---|
<h1> |
Cabecera h1 |
<h2> |
Cabecera h2 |
<h3> |
Cabecera h3 |
<h4> |
Cabecera h4 |
<h5> |
Cabecera h5 |
<h6> |
Cabecera h6 |
<h1>Cabecera h1</h1>
<h2>Cabecera h2</h2>
<h3>Cabecera h3</h3>
<h4>Cabecera h4</h4>
<h5>Cabecera h5</h5>
<h6>Cabecera h6</h6>
Además, están habilitadas clases para colocar el
estilo de las cabeceras sobre cualquier elemento.
Desde
.h1 hasta
.h6
Cabecera h1
Cabecera h2
Cabecera h3
Cabecera h4
Cabecera h5
Cabecera h6
<p class="h1">Cabecera h1</p>
<p class="h2">Cabecera h2</p>
<p class="h3">Cabecera h3</p>
<p class="h4">Cabecera h4</p>
<p class="h5">Cabecera h5</p>
<p class="h6">Cabecera h6</p>
Elementos de texto en linea.
Se puede utilizar la etiqueta mark para resaltar texto.
Linea de texto que es interpretada como texto eliminado.
Linea de texto que es interpretada como texto que dejó de ser correcto.
Linea de texto que es interpretada como texto agregado.
Linea de texto que se renderizará subrayada
Linea de texto que es interpretada como letra pequeña de un documento.
Linea de texto que se renderizará como texto en negrita.
Linea que se renderizará como texto en cursiva.
<p>Se puede utilizar la etiqueta mark para <mark>resaltar</mark> texto.</p>
<p><del>Linea de texto que es interpretada como texto eliminado.</del></p>
<p><s>Linea de texto que es interpretada como texto que dejó de ser correcto.</s></p>
<p><ins>Linea de texto que es interpretada como texto agregado.</ins></p>
<p><u>Linea de texto que se renderizará subrayada</u></p>
<p><small>Linea de texto que es interpretada como letra pequeña de un documento.</small></p>
<p><strong>Linea de texto que se renderizará como texto en negrita.</strong></p>
<p><em>Linea que se renderizará como texto en cursiva.</em></p>
Nota: Para lograr el mismo efecto que las etiquetas
<mark> y
<small>, se puede utilizar las clases
.mark {} y
.small {} respectivamente.
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Con fuente
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Nombre importante en <cite title="Fuente">Fuente</cite></footer>
</blockquote>
Alineado
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Nombre importante en <cite title="Fuente">Fuente</cite></footer>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Nombre importante en <cite title="Fuente">Fuente</cite></footer>
</blockquote>
Listas
Ninguno
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
En linea
- Lorem, ipsum.
- Dolor sit.
- Adipiscing elit.
<ul class="list-inline">
<li class="list-inline__item">Lorem, ipsum.</li>
<li class="list-inline__item">Dolor sit.</li>
<li class="list-inline__item">Adipiscing elit.</li>
</ul>
Responsiva
Imagen que ocupará todo el ancho y alto de su contenido.
<img src="..." alt="..." class="img-fill">
Thumbnail
Agrega un enmarcado a una imagen. En el ejemplo, una imagen de 200x200
<img src="..." alt="..." class="img-thumb">
Nota: la imágenes en los ejemplos están redimensionadas. Las clases de CSS no alteran o influyen en el tamaño de la imagen.
Estilo de tabla por defecto
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Bordeado
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table--bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Notificaciones
Tipos de notificaciones.
<div class="noti-primary">
Notificación de tipo 'primary'
</div>
<div class="noti-secondary">
Notificación de tipo 'secondary'
</div>
<div class="noti-success">
Notificación de tipo 'success'
</div>
<div class="noti-danger">
Notificación de tipo 'danger'
</div>
<div class="noti-warning">
Notificación de tipo 'warning'
</div>
<div class="noti-info">
Notificación de tipo 'info'
</div>
Componente.
Permite cerrar la notificación.
<notification class="noti-success">
Notificación componente 'success'
</notification>
Etiquetas
Ejemplo cabecera Nuevo
Ejemplo cabecera Nuevo
Ejemplo cabecera Nuevo
Ejemplo cabecera Nuevo
Ejemplo cabecera Nuevo
Ejemplo cabecera Nuevo
<h1>Ejemplo cabecera <span class="badge-secondary">Nuevo</span></h1>
<h2>Ejemplo cabecera <span class="badge-secondary">Nuevo</span></h2>
<h3>Ejemplo cabecera <span class="badge-secondary">Nuevo</span></h3>
<h4>Ejemplo cabecera <span class="badge-secondary">Nuevo</span></h4>
<h5>Ejemplo cabecera <span class="badge-secondary">Nuevo</span></h5>
<h6>Ejemplo cabecera <span class="badge-secondary">Nuevo</span></h6>
<button type="button" class="btn btn-primary">
Notificaciones <span class="badge-secondary">3</span>
</button>
Elementos.
Como en etiquetas <span> o <a>
<span class="badge-primary">Primary</span>
<span class="badge-secondary">Secondary</span>
<span class="badge-success">Success</span>
<span class="badge-danger">Danger</span>
<span class="badge-warning">Warning</span>
<span class="badge-info">Info</span>
<span class="badge-light">Light</span>
<span class="badge-dark">Dark</span>
Inputs
Componente que recibe como atributos mínimos type y id. El label es dado por un <span></span>
<input-field
type="text"
id="texto">
<span>Input de texto</span>
</input-field>
<input-field
type="email"
id="email">
<span>Input de correo electrónico</span>
</input-field>
<input-field
type="text"
id="readonlyout"
readonly="readonly">
<span>Solo lectura</span>
</input-field>
<input-field
type="text"
id="disabledout"
disabled>
<span>Deshabilitado</span>
</input-field>
<textarea-field name="unique" id="someid">
<span>Textarea</span>
</textarea-field>
<div class="datepicker-field">
<date-picker id="date"></date-picker>
<label for="date">Fecha</label>
</div>
En linea.
Colocando los input dentro de
<div class="form-inline"></div>
Texto aquí:
<div class="form-inline">
<p>Texto aquí:</p>
<input-field
type="text"
id="inline1">
<span>Inline 1</span>
</input-field>
<input-field
type="text"
id="inline2">
<span>Inline 2</span>
</input-field>
<button type="button" class="btn-secondary">Boton</button>
<label>
<input type="checkbox">
<span>Checkbox</span>
</label>
</div>
Input stretch o 'pegado al label'
Por defecto, el tamaño de ancho del label, en cualquier componente tipo Input, es de 130px. Si se desea que se calcule automáticamente al ancho respectivo del texto debe colocarse el atributo stretch
<input-field stretch type="text" id="textstretch">
<span>Input de texto</span>
</input-field>
<textarea-field stretch name="uniquestretch" id="textareastretch">
<span>Textarea</span>
</textarea-field>
Para obtener el mismo efecto en los componentes Select2 y Datepicker, se debe colocar una clase css modificadora:
<div class="datepicker-field datepicker-field--stretch">
<date-picker id="datestretch"></date-picker>
<label for="datestrech">Fecha</label>
</div>
<div class="select2-field select2-field--stretch">
<v-select id="tipo_comprobante" placeholder="Seleccione"></v-select>
<label for="select2stretch">Select stretch</label>
</div>
DatetimePicker
Documentación de opciones: Props-api
Maquetado
Fecha
<div class="datepicker-field">
<VueCtkDateTimePicker
id="datePicker"
v-model="07-04-2020"
locale="es"
no-label
only-date
auto-close
button-now-translation="Ahora"
format="DD-MM-YYYY"
formatted="ll" // momentjs format
/>
<label for="datePicker">Selecipon fecha</label>
</div>
Fecha y Hora
<div class="datepicker-field">
<VueCtkDateTimePicker
id="dateTimePicker"
v-model="07-04-2020 11:33"
locale="es"
no-label
only-date
button-now-translation="Ahora"
format="DD-MM-YYYY HH:mm" // formato de 24 horas
formatted="lll" // momentjs format
/>
<label for="datePicker">Selecipon fecha y hora</label>
</div>
Hora
<div class="datepicker-field">
<VueCtkDateTimePicker
id="timne"
v-model="11:33"
locale="es"
no-label
only-time
auto-close
button-now-translation="Ahora"
format="HH:mm" // formato de 24 horas
formatted="LT" // momentjs format
/>
<label for="datePicker">Selecipon hora</label>
</div>
Rango de fechas
<div class="datepicker-field">
<VueCtkDateTimePicker
id="dateRangePicker"
v-model="{
'start': '07-04-2020',
'end': '17-04-2020'
}"
locale="es"
no-label
range
button-now-translation="Ahora"
format="DD-MM-YYYY"
formatted="ll" // momentjs format
custom-shortcuts="[
{ key: 'thisWeek', label: 'Esta semana', value: 'isoWeek' },
{ key: 'lastWeek', label: 'Última semana', value: '-isoWeek' },
{ key: 'last7Days', label: 'Últimos 7 días', value: 7 },
{ key: 'last30Days', label: 'Últimos 30 días', value: 30 },
{ key: 'thisMonth', label: 'Este mes', value: 'month' },
{ key: 'lastMonth', label: 'Último mes', value: '-month' },
{ key: 'thisYear', label: 'Este año', value: 'year' },
{ key: 'lastYear', label: 'Último año', value: '-year' }
]"
/>
<label for="datePicker">Selecipon rango de fecha</label>
</div>
Select2
Básico:
Etiquetas mímimas para colocar el componente
<div class="select2-field">
<v-select v-model="modelo" :options="opciones" placeholder="Selecciona..." label="label"></v-select>
<label>Label</label>
</div>
Completo:
Etiquetas recomendadas. Permite el manejo de estado de habilitado/deshabilitado del componente.
<div class="form-field select2">
<div class="select2-field">
<v-select v-model="modelo" :options="opciones" placeholder="Selecciona..." label="label"></v-select>
<label>Label</label>
</div>
</div>
<div class="form-field select2 select2--disabled">
<div class="select2-field">
<v-select v-model="modelo" :options="opciones" placeholder="Selecciona..." label="label"></v-select>
<label>Label</label>
</div>
</div>
Desplieque de opciones hacia arriba
<div class="form-field select2">
<div class="select2-field select2-field--dropdown-top">
<v-select v-model="modelo" :options="opciones" placeholder="Selecciona..." label="label"></v-select>
<label>Label</label>
</div>
</div>
Documentación completa: https://sagalbot.github.io/vue-select/docs/
Vue-good-table
Pintar una fila
Segun la documentación de vue-good-table, puede conseguirse pintar una fila a través del prop :row-style-class, el cual recibe una función que debe ser invocada en methods.
Clases de los colores posibles:
■ .vgtr--pending
■ .vgtr--issued
■ .vgtr--canceled
■ .vgtr--authorized
Ejemplo: Pintar en verde los mayores de 20 años, en rojo el resto.
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
:search-options="{
enabled: true,
placeholder: 'Buscar...'
}"
:row-style-class="pintarFilaFn"
styleClass="vgt-table"/>
</div>
</template>
<script>
export default {
data(){
return {
columns: [
{
label: 'Name',
field: 'name',
},
...
],
rows: [
{ id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
{ id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
...
],
};
},
methods: {
pintarFilaFn(row) {
return row.age > 20 ? 'vgtr--authorized' : 'vgtr--canceled';
},
}
};
</script>
Tamaño de altura máximo (con scroll)
Referencia: https://xaksis.github.io/vue-good-table...
Ejemplo: Altura máxima de 150px.
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
:search-options="{
enabled: true,
placeholder: 'Buscar...'
}"
:max-height="150px"
:fixed-header="true"
styleClass="vgt-table"/>
</div>
</template>
Table VueSax
Tooltip-Select
Componente tipo input que despliega un tooltip que contiene un componente select2.
Funciona enviando los valores a los atributos (props) internos de su componente Select2 a través de :opciones y, de ser necesario, :label. Además, si se encuentra en una tabla con filas dinámicas, puede recibir su índice de fila a través de :rowIndex.
El item seleccionado es capturado en @check.
<template>
<div class="form-group form-group--on-input">
<input-field id="tooltip-select" type="text" placeholder="Ejemplo" v-model="texto">
</input-field>
<tooltip-select :opciones="example" :label="'countryName'" @check="itemSeleccionado"></tooltip-select>
</div>
</template>
<script>
export default {
data() {
return {
example: [
{ countryCode: "AU", countryName: "Australia" },
{ countryCode: "CA", countryName: "Canada" },
{ countryCode: "CN", countryName: "China" },
{ countryCode: "DE", countryName: "Germany" },
{ countryCode: "JP", countryName: "Japan" },
{ countryCode: "MX", countryName: "Mexico" },
{ countryCode: "CH", countryName: "Switzerland" },
{ countryCode: "US", countryName: "United States" }
],
texto: null
}
},
methods: {
itemSeleccionado (item, index) {
if(item != null && item != undefined) {
this.texto = item.countryName
}
}
}
}
</script>
Multiselect
Documentación del componente: https://vue-multiselect.js.org/#sub-getting-started
Maquetado
Para colocarlo correctamente debe estar dentro de un div con la clase .multiselect-field, seguido, y opcionalmente, se coloca un label para describir el select.
Nota: como en otros componentes, para colocar el label y el multiselect unidos (sin el espacio de 130px de ancho por defecto del label), colocar la clase modificadora .multiselect-field--stretch.
<div class="multiselect-field">
<multiselect
v-model="value"
:options="options"
:searchable="false"
:show-labels="false"
placeholder="Seleccione..."
:taggable="true"></multiselect>
<label for="label">Label</label>
</div>
Más ejemplos de implementación: https://vue-multiselect.js.org/#examples
Botones
<button type="button" class="btn">Default</button>
<button type="button" class="btn-primary">Primary</button>
<button type="button" class="btn-secondary">Secondary</button>
<button type="button" class="btn-success">Success</button>
<button type="button" class="btn-danger">Danger</button>
<button type="button" class="btn-warning">Warning</button>
<button type="button" class="btn-info">Info</button>
<button type="button" class="btn-light">Light</button>
<button type="button" class="btn-dark">Dark</button>
La clase .btn {} está diseñada para funcionar
sobre cualquiera
de estos elementos.
<a class="btn-primary" href="#" role="button">Enlance</a>
<button class="btn-primary" type="submit">Boton</button>
<input class="btn-primary" type="button" value="Input">
<input class="btn-primary" type="submit" value="Submit">
<input class="btn-primary" type="reset" value="Reset">
Botones sin relleno.
<button type="button" class="btn--outline btn-primary">Primary</button>
<button type="button" class="btn--outline btn-secondary">Secondary</button>
<button type="button" class="btn--outline btn-success">Success</button>
<button type="button" class="btn--outline btn-danger">Danger</button>
<button type="button" class="btn--outline btn-warning">Warning</button>
<button type="button" class="btn--outline btn-info">Info</button>
<button type="button" class="btn--outline btn-light">Light</button>
<button type="button" class="btn--outline btn-dark">Dark</button>
Tamaños.
Button Card
Propiedades del componente:
btn-color: tipo de botónfa-name: tipo de íconocounter: contador
<div class="grid grid--fit">
<button-card btn-color="btn-success" fa-name="fa-ban" counter="1">ACTIVOS</button-card>
<button-card btn-color="btn-info" fa-name="fa-edit" counter="12">ACTIVOS</button-card>
<button-card btn-color="btn-danger" fa-name="fa-eye" counter="123">ACTIVOS</button-card>
<button-card btn-color="btn-secondary" fa-name="fa-trash" counter="4">ACTIVOS</button-card>
</div>
Checkbox
<form action="#">
<p>
<label>
<input type="checkbox" name="remember">
<span>Checkbox</span>
</label>
</p>
<p>
<label>
<input type="checkbox" class="is-filled" name="remember">
<span>Checkbox de relleno</span>
</label>
</p>
</form>
Radio Buttons
<form action="#">
<p>
<label>
<input type="radio" name="radio1">
<span>Radio 1</span>
</label>
</p>
<p>
<label>
<input type="radio" name="radio1">
<span>Radio 2</span>
</label>
</p>
<p>
<label>
<input type="radio" name="radio1">
<span>Radio 3</span>
</label>
</p>
</form>
Loaders
Componente pensado para funcionar con axios
<loader :loading="loading"></loader>
data () {
return {
loading : true
}
},
methods: {
getSomething () {
axios.get(url + '/api').then(res => {
if(res.data) {
...
this.loading = false
}
}).catch(err => {
if(err.msg) {
...
this.loading = false
}
})
}
}
Card
Estructura simple.
Un título cualquiera Un subtítulo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur sint, sit perferendis eveniet accusantium id praesentium. Ipsam quidem, iure vitae fugiat, consequatur nemo neque ab accusantium dicta nam excepturi temporibus.
<div class="card">
<div class="card__title">
<span>Un título cualquiera
<span class="subtitle">Un subtítulo</span>
</span>
</div>
<div class="card__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur sint, sit perferendis eveniet accusantium id praesentium. Ipsam quidem, iure vitae fugiat, consequatur nemo neque ab accusantium dicta nam excepturi temporibus.
</p>
</div>
</div>
Con imagen, enlaces y botones.
Un título cualquiera Un subtítulo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur sint, sit perferendis eveniet accusantium id praesentium. Ipsam quidem, iure vitae fugiat, consequatur nemo neque ab accusantium dicta nam excepturi temporibus.
<div class="card">
<div class="card__image">
<img src="https://www.docs2.kimerasoft-ec.com/images/bg-sidepanel.png" alt="...">
</div>
<div class="card__title">
<h3>Un título cualquiera
<span class="subtitle">Un subtítulo</span>
</h3>
</div>
<div class="card__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consectetur sint, sit perferendis eveniet accusantium id praesentium.
Ipsam quidem, iure vitae fugiat, consequatur nemo neque ab accusantium
dicta nam excepturi temporibus.</p>
</div>
<div class="card__buttons">
<button class="btn-info">Boton</button>
<button class="btn-primary">Boton</button>
<a href="#">Enlace</a>
</div>
</div>
Alineamiento
Un título cualquiera Un subtítulo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur sint, sit perferendis eveniet accusantium id praesentium. Ipsam quidem, iure vitae fugiat, consequatur nemo neque ab accusantium dicta nam excepturi temporibus.
<div class="card">
<div class="card__title">
<h3>Un título cualquiera
<span class="subtitle">Un subtítulo</span>
</h3>
</div>
<div class="card__content text-right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consectetur sint, sit perferendis eveniet accusantium id praesentium.
Ipsam quidem, iure vitae fugiat, consequatur nemo neque ab accusantium
dicta nam excepturi temporibus.</p>
</div>
<div class="card__buttons--right">
<button class="btn-info">Boton</button>
<button class="btn-primary">Boton</button>
<a href="#">Enlace</a>
</div>
</div>
</div>
Controles
Un título cualquiera Un subtítulo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur sint, sit perferendis eveniet accusantium id praesentium. Ipsam quidem, iure vitae fugiat, consequatur nemo neque ab accusantium dicta nam excepturi temporibus.
<div class="card">
<div class="card__title">
<h3>Un título cualquiera
<span class="subtitle">Un subtítulo</span>
</h3>
<div class="card__controls">
<button type="button" class="btn-success">Boton</button>
<button type="button" class="btn-info">Boton</button>
</div>
</div>
<div class="card__content text-right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consectetur sint, sit perferendis eveniet accusantium id praesentium.
Ipsam quidem, iure vitae fugiat, consequatur nemo neque ab accusantium
dicta nam excepturi temporibus.</p>
</div>
</div>
Colapsable
Un título cualqueira
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur voluptatum molestiae eos sequi ipsum dolores alias sit ullam sed officiis, suscipit quidem necessitatibus architecto vero odio vitae totam doloribus. Minus?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur voluptatum molestiae eos sequi ipsum dolores alias sit ullam sed officiis, suscipit quidem necessitatibus architecto vero odio vitae totam doloribus. Minus?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur voluptatum molestiae eos sequi ipsum dolores alias sit ullam sed officiis, suscipit quidem necessitatibus architecto vero odio vitae totam doloribus. Minus?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur voluptatum molestiae eos sequi ipsum dolores alias sit ullam sed officiis, suscipit quidem necessitatibus architecto vero odio vitae totam doloribus. Minus?
Por defecto, el card estará contraído a menos que se coloque el atributo open en la etiqueta <detials>
Para colocar colores en el título utilizar la clase: .card__title--bg-{nombre del color}
<details class="card card--collapsible" open>
<summary class="card__title card__title--bg-primary">
<h4>Un título cualqueira</h4>
</summary>
<div class="card__content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur voluptatum molestiae eos sequi
ipsum dolores alias sit ullam sed officiis, suscipit quidem necessitatibus architecto vero odio vitae
totam doloribus. Minus?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur voluptatum molestiae eos sequi
ipsum dolores alias sit ullam sed officiis, suscipit quidem necessitatibus architecto vero odio vitae
totam doloribus. Minus?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur voluptatum molestiae eos sequi
ipsum dolores alias sit ullam sed officiis, suscipit quidem necessitatibus architecto vero odio vitae
totam doloribus. Minus?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur voluptatum molestiae eos sequi
ipsum dolores alias sit ullam sed officiis, suscipit quidem necessitatibus architecto vero odio vitae
totam doloribus. Minus?</p>
</div>
</details>
Dropdown
Por defecto.
<dropdown>
<span slot="title">Título de dropdown</span>
<ul slot="content">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</dropdown>
<dropdown class="btn-secondary">
<span slot="title">Dropdown button</span>
<ul slot="content">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</dropdown>
Con imagen.
Agrega el atributo data-image
se habilitará la opción de colocar una imagen.
<dropdown data-image>
<span slot="title">Dropdown image</span>
<ul slot="content">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
<img src="" alt="..." slot="image">
</dropdown>
Tamaños.
Agrega el atributo data-big
para agrandar el tamaño del dropdown.
<dropdown data-big>
<span slot="title">Dropdown grande</span>
<ul slot="content">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</dropdown>
Desplique por encima.
Agregael atributo data-above
para que la lista se despliegue por encima del título.
<dropdown display-above>
<span slot="title">Dropdown</span>
<ul slot="content">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</dropdown>
Desplique alineado hacia la derecha.
Por defecto se alinea hacia la izquierda. Agregando el
atributo display-right el
contenido desplegable se alineará hacia la derecha.
<dropdown display-right>
<span slot="title">Dropdown</span>
<ul slot="content">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</dropdown>
Texto
Clases de utilidad para aplicar a todo texto en cualquier contendor HTML
Esto es un texto 'mudo'.
Esto es un texto 'nowrap' intencionalmente largo para demostrar la aplicación de la clase aquí especificada, que me permitirá que el texto aquí presente no haga un salto línea.
Esto es un texto en negrita.
Esto es un texto todo en mayúsculas.
Texto oculto
< Aquí hay un texto oculto.Texto truncado que mostrará puntos suspensivos cuando se acabe el espacio de su contenedor.
Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado.
Texto alineado a la derecha.
Texto alineado a la izquierda.
Texto alineado al centro.
<p class="text-muted">Esto es un texto 'mudo'.</p>
<p class="text-nowrap">Esto es un texto 'nowrap' intencionalmente largo para demostrar la aplicación
de la clase aquí especificada, que me permitirá que el texto aquí presente no haga un salto
línea.</p>
<p class="text-bold">Esto es un texto en negrita.</p>
<p class="text-uppercase">Esto es un texto todo en mayúsculas.</p>
<p class="text-hide">Texto oculto</p><em>< Aquí hay un texto oculto.</em>
<p style="width: 180px" class="text-truncate">Texto truncado que mostrará puntos suspensivos
cuando se acabe el espacio de su contenedor.</p>
<p style="width: 280px" class="text-justify">
Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado
Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado
Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado Justificado.
</p>
<p class="text-right">Texto alineado a la derecha.</p>
<p class="text-left">Texto alineado a la izquierda.</p>
<p class="text-center">Texto alineado al centro.</p>
Colores
Texto del color de negocio 100
Texto del color de negocio 200
Texto del color de negocio 300
Texto del color de negocio 400
Texto color 'primary'
Texto color 'secondary'
Texto color 'info'
Texto color 'success'
Texto color 'waring'
Texto color 'danger'
Texto color 'light'
Texto color 'dark'
<p class="text-bus100">Texto del color de negocio 100</p>
<p class="text-bus200">Texto del color de negocio 200</p>
<p class="text-bus300">Texto del color de negocio 300</p>
<p class="text-bus400">Texto del color de negocio 400</p>
<p class="text-primary">Texto color 'primary'</p>
<p class="text-secondary">Texto color 'secondary'</p>
<p class="text-info">Texto color 'info'</p>
<p class="text-success">Texto color 'success'</p>
<p class="text-waring">Texto color 'waring'</p>
<p class="text-danger">Texto color 'danger'</p>
<p class="text-light">Texto color 'light'</p>
<p class="text-dark">Texto color 'dark'</p>
Espaciados
Clases para colocar espaciado utilizando margin o padding.
Funciona de la siguiente manera:
{propiedad}{lado}-{tamaño}- Para aplicación general.{propiedad}{lado}-{breakpoint}-{tamaño}- Para aplicación en distintos tamaños de pantalla.
Donde propiedad corresponde a:
m- Clase con la propiedadmargin.p- Clase con la propiedadpadding.
Donde lado corresponde a:
t- Clase con la propiedadmargin-topopadding-top.r- Clase con la propiedadmargin-rightopadding-right.b- Clase con la propiedadmargin-bottomopadding-bottom.l- Clase con la propiedadmargin-leftopadding-left.x- Clases con las propiedades*-lefty*-right(espaciado por igual en los costados).y- Clases con las propiedades*-topy*-bottom(espaciado por igual arriba y abajo).- Vacío - Clase con la propiedad
marginopaddingaplicada a los cuatro lados.
Donde tamaño corresponde a:
0- Para eliminar el espaciado aplicando 0 amarginopadding.1- Para aplicar espaciado de0.25remamarginopadding.2- Para aplicar espaciado de0.5remamarginopadding.3- Para aplicar espaciado de1remamarginopadding.4- Para aplicar espaciado de1.5remamarginopadding.5- Para aplicar espaciado de3remamarginopadding.
<div class="row">
<div class="col-xs-4 mt-2">
<div class="sample-box"><em>margin</em> '2' hacia arriba</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 pl-5">
<div class="sample-box"><em>padding</em> '5' hacia la izquierda</div>
</div>
</div>
<div class="row">
<div class="col-xs-3 mt-md-4">
<div class="sample-box"><em>margin</em> '4' hacia arriba en pantallas medianas en adelante</div>
</div>
</div>
Importante: se recomienda un uso moderado de estas clases.
Overflow
Para determinar contendores con un límite fijo.
<div class="overflow-container">
<div class="btn-group">
<button type="button" class="btn-secondary">Boton #1</button>
<button type="button" class="btn-secondary">Boton #2</button>
<button type="button" class="btn-secondary">Boton #3</button>
<button type="button" class="btn-secondary">Boton #4</button>
<button type="button" class="btn-secondary">Boton #5</button>
...
</div>
</div>
Tooltip
Para describir un elemento en la interfaz de usuario que no queda lo suficientemente claro se puede utilizar Tooltips. Esta utilidad está implementad para que pueda mostrarse en cualquier elemento a través del artibuto tooltip
<div class="select2-field select2-field--stretch">
<v-select tooltip="Esto es un componente Select2" placeholder="Selecciona..."></v-select>
<label for="tipo">Select2:</label>
</div>
<div class="select2-field select2-field--stretch">
<v-select tooltip="Esto es un componente Select2" tooltip-position='left' placeholder="Selecciona..."></v-select>
<label for="tipo">Select2:</label>
</div>
<div class="select2-field select2-field--stretch">
<v-select tooltip="Esto es un componente Select2" tooltip-position='bottom' placeholder="Selecciona..."></v-select>
<label for="tipo">Select2:</label>
</div>
<div class="select2-field select2-field--stretch">
<v-select tooltip="Esto es un componente Select2" tooltip-position='bottom' placeholder="Selecciona..."></v-select>
<label for="tipo">Select2:</label>
</div>
Para componentes en una celda de una tabla es recomendable colocarlo sobre la etiqueta <td>
| Cabecera 1 | Cabecera 2 | Cabecera 3 |
|---|---|---|
|
|
Texto | Texto |
<table>
<thead>
<tr>
<th>Cabecera 1</th>
<th>Cabecera 2</th>
<th>Cabecera 3</th>
</tr>
</thead>
<tbody>
<tr>
<td tooltip="Esto es un componente Select2">
<v-select placeholder="Selecciona..."></v-select>
</td>
<td>Texto</td>
<td>Texto</td>
</tr>
</tbody>
</table>
Para mostrar mensajes de estados en una celda específico, se deben utilizar los siguientes atributos personalizables:
cell-message="Mensaje de estado" * : El texto que se mostrará en el tooltip.
cell-message-status='authorized' * : Estado del mensaje (color). Estados: Authorized, Pending, Issued, Canceled.
cell-message-dir='left' : Colocar indicador de estado a la izquierda.
*: Mínimo necesario
Nota: Los mensajes de estados se pueden mostrar en filas solo si estas están en una disposición en bloque (display: block;).
| Cabecera 1 | Cabecera 2 | Cabecera 3 | Cabecera 4 |
|---|---|---|---|
| Texto | Texto | Texto | Texto |
| Texto | Texto | Texto | Texto |
| Texto | Texto | Texto | Texto |
<table>
<thead>
<tr>
<th>Cabecera 1</th>
<th>Cabecera 2</th>
<th>Cabecera 3</th>
<th>Cabecera 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Texto</td>
<td>Texto</td>
<td cell-message="Mensaje de estado de error" cell-message-status="canceled">Texto</td>
<td>Texto</td>
</tr>
<tr>
<td cell-message="Mensaje de estado pendiente en fila" cell-message-status="pending" cell-message-dir="left">Texto</td>
<td>Texto</td>
<td>Texto</td>
<td>Texto</td>
</tr>
<tr>
<td>Texto</td>
<td cell-message="Mensaje de estado autorizado" cell-message-status="authorized">Texto</td>
<td>Texto</td>
<td>Texto</td>
</tr>
</tbody>
</table>