Anidocs.es

Tipografía

Párrafos

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

El illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Blockquote (bloque de cita)

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio Someone Important

Blockquote Pequeño

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio Someone Important

Estilos en linea (Inline)

  • Negrita
  • Énfasis
  • Enlaces en línea
  • Strike
  • Iconos en línea
  • <h1>Ejemplo de código</h1>

Encabezado 1

Encabezado 2

Encabezado 3

Encabezado 4

Encabezado 5
Encabezado 6

Dirección (Address)

1234 South Creek Lane
Calgary, Alberta, Canada
T4B–1S6

<!-- Encabezados 1–6 -->
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
<!-- Párrafo -->
<p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...</p>
<p>El illum dolore eu feugiat nulla facilisis at vero eros et accumsan...</p>
<!-- Blockquote -->
<blockquote>
<p>
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
et iusto odio
<span>Someone Important</span>
</p>
</blockquote>
<!-- Blockquote Pequeño -->
<blockquote class="small">
<p>
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
et iusto odio
<span>Someone Important</span>
</p>
</blockquote>
<!-- Negrita -->
<strong>Negrita</strong>

<!-- Énfasis -->
<em>énfasis</em>

<!-- Enlace en línea -->
<a href="">Enlace en línea</a>

<!-- Strike -->
<strike>Strike</strike>

<!--Iconos en línea (inline) -->
Iconos <span class="icon" data-icon="2"></span> en línia

<!--Ejemplo de código (encoded entities) -->
<code>&lt;h1&gt;Ejemplo de código&lt;/h1&gt;</code>
<!-- Dirección -->
<address><p>
1234 South Creek Lane<br />
Calgary, Alberta, Canada<br />
T4B–1S6
</p>
</address>

Listas

Lista desordenada (UL)

  • tation ullamcorper suscipit lobortis
  • Nam liber tempor cum soluta nobis
  • imperdiet doming id quod mazim
  • suscipit lobortis nisl ut aliquip ex

Lista ordenada (OL)

  1. tation ullamcorper suscipit lobortis
  2. Nam liber tempor cum soluta nobis
  3. imperdiet doming id quod mazim
  4. suscipit lobortis nisl ut aliquip ex

UL.checks

  • tation ullamcorper suscipit lobortis
  • Nam liber tempor cum soluta nobis
  • imperdiet doming id quod mazim
  • suscipit lobortis nisl ut aliquip ex

UL.alt

  • tation ullamcorper suscipit lobortis
  • Nam liber tempor cum soluta nobis
  • imperdiet doming id quod mazim
  • suscipit lobortis nisl ut aliquip ex
<!-- Lista desordenada -->
<ul>
<li>tation ullamcorper suscipit lobortis</li>
<li>Nam liber tempor cum soluta nobis</li>
<li>imperdiet doming id quod mazim</li>
<li>suscipit lobortis nisl ut aliquip ex</li>
</ul>
<!-- Lista ordenada -->
<ol>
<li>tation ullamcorper suscipit lobortis</li>
<li>Nam liber tempor cum soluta nobis</li>
<li>imperdiet doming id quod mazim</li>
<li>suscipit lobortis nisl ut aliquip ex</li>
</ol>
<!-- List Checks -->
<ul class="checks">
<li>tation ullamcorper suscipit lobortis</li>
<li>Nam liber tempor cum soluta nobis</li>
<li>imperdiet doming id quod mazim</li>
<li>suscipit lobortis nisl ut aliquip ex</li>
</ul>
<!-- List con estilo alternativo -->
<ul class="alt">
<li>tation ullamcorper suscipit lobortis</li>
<li>Nam liber tempor cum soluta nobis</li>
<li>imperdiet doming id quod mazim</li>
<li>suscipit lobortis nisl ut aliquip ex</li>
</ul>

Tablas

Tabla (Por defecto)

Ítem1 Ítem2 Ítem3
Ítem1 Ítem2 Ítem3
Ítem1 Ítem2 Ítem3
Ítem1 Ítem2 Ítem3
Ítem1 Ítem2 Ítem3

Table.striped

  Ítem2 Ítem3
Ítem1 Ítem2 Ítem3
Ítem1 Ítem2 Ítem3
Ítem1 Ítem2 Ítem3
Ítem1 Ítem2 Ítem3

Table.tight

Ítem1 Ítem2 Ítem3
Ítem1 Ítem2 Ítem3
Ítem1 Ítem2 Ítem3
Ítem1 Ítem2 Ítem3
Ítem1 Ítem2 Ítem3

Table.sortable

Nombre Número Color Acciones
Joshua 555-4325 Blue
Peter 555-5698 Gold
Mary 666-7654 Red
Gretty 555-6732 Pink
<!-- Tabla -->
<table cellspacing="0" cellpadding="0">
<thead><tr>
	<th>Ítem1</th>
	<th>Ítem2</th>
	<th>Ítem3</th>
</tr></thead>
<tbody><tr>
	<td>Ítem1</td>
	<td>Ítem2</td>
	<td>Ítem3</td>
</tr><tr>
	<td>Ítem1</td>
	<td>Ítem2</td>
	<td>Ítem3</td>
</tr><tr>
	<td>Ítem1</td>
	<td>Ítem2</td>
	<td>Ítem3</td>
</tr><tr>
	<td>Ítem1</td>
	<td>Ítem2</td>
	<td>Ítem3</td>
</tr></tbody>
</table>
<!-- Tabla w/Side -->
<table cellspacing="0" cellpadding="0">
<thead><tr>
	<th> </th>
	<th>Ítem2</th>
	<th>Ítem3</th>
</tr></thead>
<tbody><tr>
	<th>Ítem1</th>
	<td>Ítem2</td>
	<td>Ítem3</td>
</tr><tr>
	<th>Ítem1</th>
	<td>Ítem2</td>
	<td>Ítem3</td>
</tr><tr>
	<th>Ítem1</th>
	<td>Ítem2</td>
	<td>Ítem3</td>
</tr><tr>
	<th>Ítem1</th>
	<td>Ítem2</td>
	<td>Ítem3</td>
</tr></tbody>
</table>
<!-- Tabla striped -->
<table class="striped">
...
</table>

<!-- Tabla tight -->
<table class="tight">
...
</table>

<!-- Tabla sortable -->
<table class="sortable">
...
</table>

<!-- Estilos de tabla combinados -->
<table class="striped tight sortable">
...
</table>

ToolTips (información adicional)

Tooltips

Los Tooltips son fascinantes. Estos tooltips están diseñadas para imitar el tema de los tooltips de navegador - elegantes, conscientes del límite de la ventana del navegador. Simple.

Desplázate por encima de los ejemplos de la derecha para previsualizarlo.

Uso:
class="tooltip" +
title="my tooltip content"

Posiciones de Tooltip

  • .tooltip (por defecto)
  • .tooltip-top
  • .tooltip-right
  • .tooltip-left
  • .tooltip-bottom

Tooltips con contenido HTML

.tooltip + data-content="#ID"
 
Contenido HTML

Esto es más contenido HTML. Puedes colocar cualquier HTML en este tooltip.

<!-- Tooltip por defecto (top) -->
<span class="tooltip" title="This is a default (top) tooltip">.tooltip</span>

<!-- Tooltip Arriba -->
<span class="tooltip-top" title="This is a Top tooltip">.tooltip-top</span>

<!-- Tooltip Derecho -->
<span class="tooltip-right" title="This is a Right tooltip">.tooltip-right</span>

<!-- Tooltip Izquierdo -->
<span class="tooltip-left" title="This is a Left tooltip">.tooltip-left</span>

<!-- Tooltip Abajo -->
<span class="tooltip-bottom" title="This is a Bottom tooltip">.tooltip-bottom</span>
<!-- Acción de Hover -->
<button class="tooltip medium orange pill" data-content="#tooltipcontentID">Hover Over Me</button>

<!-- Acción de Click -->
<button class="tooltip medium blue pill" data-content="#tooltipcontentID" data-action="click">Click Me</button>

<!-- Contenido en Tooltip -->
<div class="tooltip-content" id="tooltipcontentID"><h5>HTML Content</h5>
<img src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
<p>Esto es más contenido HTML. Puede colocar todo el código HTML en este tooltip.</p></div>

Reglas horizontales

HR


HR.alt1


HR.alt2


<!-- HR -->
<hr />

<!-- HR.alt1 -->
<hr class="alt1" />

<!-- HR.alt2 -->
<hr class="alt2" />

Iconos/Glifos

Seleccione el icono de abajo y copia el código HTML a utilizar:

<span class="icon x-large gray" data-icon="!"></span>
Crea tu fuente de icono personalizado con IcoMoon.¡La mejor fuente de iconos en el planeta! Por KeyaMoon

Código/Pre

PRE HTML

<html>
<head><title>Esto es un título</title></head>
<body class="subpage">
	<!-- Contenido aquí -->
</body>
</html>

PRE CSS

body{
font-weight:bold;
color:#000;
line-height:150%;
}

PRE JS

$(document).ready(function(){
	alert('jQuery');
});
<!-- código HTML -->
<pre>
…El código va aquí… 
</pre>
<!-- código CSS -->
<pre>
…El código va aquí… 
</pre>
<!-- código Javascript -->
<pre>
…El código va aquí… 
</pre>
<!-- código PHP -->
<pre>
…El código va aquí… 
</pre>

Botones

Botones


A.button



Botones con Iconos




Colores de botón


.orange


Estilos de botón



.pop

Barra de botones

  
     
<!-- Tamaños de botón -->
<button>botón</button>
<a class="button" href="">A.button</a>
<button class="small">Pequeño</button>
<button class="small" disabled="disabled">Pequeño (inhabilitado)</button>
<button class="medium">Medio</button>
<button class="large">Grande</button>
<!-- Botones con iconos -->
<button class="small"><span class="icon">0</span>Pequeño</button>
<button class="medium"><span class="icon medium">M</span>Medio</button>
<button class="large"><span class="icon large">F</span>Grande</button></pre>
	
<!-- Colores de botón -->
<button class="blue">.blue</button>
<a class="button orange" href="">.orange</a>
<button class="small pink">.pink</button>
<button class="small" disabled="disabled">Small (disabled)</button>
<button class="medium green">.green</button>
<button class="large red">.red</button>
<!-- Por defecto (no estilo) -->
<button>default</button>

<!-- Pill -->
<button class="pill"><span class="icon" data-icon="f"></span>.pill</button>

<!-- Pop -->
<a class="button pop" href=""><span class="icon" data-icon="3"></span>.pop</a>

<!-- Inset -->
<button class="inset"><span class="icon" data-icon="p"></span>.inset</button>

<!-- Square -->
<button class="square"><span class="icon" data-icon="M"></span>.square</button>
<!-- Barra de botones -->
<ul class="button-bar">
<li><a href=""><span class="icon" data-icon="7"></span> Editar</a></li>
<li><a href=""><span class="icon" data-icon="B"></span> Etiquetar</a></li>
<li><a href=""><span class="icon" data-icon=")"></span> Subir</a></li>
<li><a href=""><span class="icon" data-icon="p"></span></a></li>
</ul>

Tabs

Tabs.izquierda

Tab1
Tab2
Tab3

Tabs.centro

Tab1
Tab2 con un icono.
Tab3

Tabs.derecha

Tab1
Tab2
Tab3
<!-- Tabs izquierda -->
<ul class="tabs left">
<li><a href="#tabr1">Tab1</a></li>
<li><a href="#tabr2">Tab2</a></li>
<li><a href="#tabr3">Tab3</a></li>
</ul>

<div id="tabr1" class="tab-content">Tab1</div>
<div id="tabr2" class="tab-content">Tab2</div>
<div id="tabr3" class="tab-content">Tab3</div>
<!-- Tabs centrado -->
<ul class="tabs center">
<li><a href="#tabc1">Tab1</a></li>
<li><a href="#tabc2"><span class="icon">=</span>Tab2</a></li>
<li><a href="#tabc3">Tab3</a></li>
</ul>

<div id="tabc1" class="tab-content">Tab1</div>
<div id="tabc2" class="tab-content">Tab2 con un icono.</div>
<div id="tabc3" class="tab-content">Tab3</div>
<!-- Tabs derecha -->
<ul class="tabs right">
<li><a href="#tabr1">Tab1</a></li>
<li><a href="#tabr2">Tab2</a></li>
<li><a href="#tabr3">Tab3</a></li>
</ul>

<div id="tabr1" class="tab-content">Tab1</div>
<div id="tabr2" class="tab-content">Tab2</div>
<div id="tabr3" class="tab-content">Tab3</div>
<!-- Breadcrumbs -->
<ul class="breadcrumbs">
<li><a href="">Inicio</a></li>
<li><a href="">Categoría</a></li>
<li><a href="">Sub Categoría</a></li>
<li><a href="">Título de página</a></li>
</ul>
<!-- Alternative Style -->
<ul class="breadcrumbs alt1">
<li><a href="">Inicio</a></li>
<li><a href="">Categoría</a></li>
<li><a href="">Sub Categoría</a></li>
<li><a href="">Título de página</a></li>
</ul>

Grids/Columnas

col_12
col_1
col_11
col_2
col_10
col_3
col_9
col_4
col_8
col_5
col_7
col_6
col_6
col_7
col_5
col_8
col_4
col_9
col_3
col_10
col_2
col_11
col_1
col_12
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
<!-- Columns/Grid -->
<div class="col_12">col_12</div>
<div class="col_1">col_1</div><div class="col_11">col_11</div>
<div class="col_2">col_2</div><div class="col_10">col_10</div>
<div class="col_3">col_3</div><div class="col_9">col_9</div>
<div class="col_4">col_4</div><div class="col_8">col_8</div>
<div class="col_5">col_5</div><div class="col_7">col_7</div>
<div class="col_6">col_6</div><div class="col_6">col_6</div>
<div class="col_7">col_7</div><div class="col_5">col_5</div>
<div class="col_8">col_8</div><div class="col_4">col_4</div>
<div class="col_9">col_9</div><div class="col_3">col_3</div>
<div class="col_10">col_10</div><div class="col_2">col_2</div>
<div class="col_11">col_11</div><div class="col_1">col_1</div>
<div class="col_12">col_12</div>

<!-- 4 COLUMNAS -->
<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

<!-- 3 COLUMNAS -->
<div class="col_4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

<!-- MITAD & MITAD -->
<div class="col_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

Imágenes

Placeholder

IMG.style1

IMG.style2

IMG.style3

 

IMG.caption

 

IMG.align-left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

IMG.align-right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

IMG.full-width

<!-- Placeholder -->
<img src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
<!-- Style1 -->
<img class="style1" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
<!-- Style2 -->
<img class="style2" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
<!-- Style3 -->
<img class="style3" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
<!-- Caption -->
<img class="caption" title="Esto es un pie de foto" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" />
<!-- Align Left -->
<img class="align-left" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat.</p>
<!-- Align Right -->
<img class="align-right" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat.</p>
<!-- Full Width -->
<img class="full-width" src="http://placehold.it/260x200/4D99E0/ffffff.png&text=full+width" />

Slideshow

  • Slide Anything

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Características

  • Presenta cualquier contenido HTML
  • Iframes
  • Vídeos
  • Imágenes
  • Peso ligero
  • Presentaciones múltiples
  • No necesita instalación
  • Etiquetado Flexible
  • Lista desordenada (por defecto)
<!-- Slideshow -->
<ul class="slideshow" width="550" height="350">
<li><img src="http://placehold.it/550x350/4D99E0/ffffff.png&text=550x350" width="550" height="350" /></li>
<li><img src="http://placehold.it/550x350/75CC00/ffffff.png&text=550x350" width="550" height="350" /></li>
<li><img src="http://placehold.it/550x350/E49800/ffffff.png&text=550x350" width="550" height="350" /></li>
<li><h3>Slide Anything</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></li>
</ul>

Media

Video Placeholder

Mapa Placholder

Calendario

<!-- Video Placeholder -->
<a class="video-placeholder" href="http://youtu.be/lfnAb11wKQc"><img src="http://placehold.it/250x200/222222/999999.png" width="250" height="200" /></a>
<!-- Mapa Placeholder -->
<iframe class="map-placeholder" width="100%" height="200" src="http://maps.google.com/maps?f=q&t=m&z=5&output=embed"  frameborder="0"></iframe>
<!-- Calendario -->
<div class="calendar" data-month="2" data-year="2012"></div>

<!-- Ajustar mes -->
data-month="2"

<!-- Ajustar año -->
data-year="2012"

Formularios

Form.vertical

Casillas de verificación

Radios

Esto es un aviso de error
Esto es una advertencia
Esto es un aviso de éxito

Campos de formulario en línea (por defecto)

 

Tamaños de entradas/etiquetas

<!-- Campo de texto -->
<label for="text1">Text Field</label>
<input id="text1" type="text" />

<!-- Placeholder Text -->
<label for="text2">Placeholder</label>
<input id="text2" type="text" placeholder="Placeholder Text" />

<!-- Campo deshabilitado -->
<label for="text3" class="disabled">Campo deshabilitado</label>
<input id="text3" type="text" disabled="disabled" />

<!-- Etiqueta con pista a la derecha -->
<label for="text4">Etiqueta con pista a la derecha <span class="right">A-Z, 0-9</span></label>
<input id="text4" type="text" />

<!-- Etiqueta con pista -->
<label for="text5">Etiqueta con pista <span>A-Z, 0-9</span></label>
<input id="text5" type="text" />

<!-- Campo de texto de Error -->
<label for="text6" class="error">Campo de texto (Error)</label>
<input id="text6" class="error" type="text" />
<!-- Select -->
<label for="select1">Select Field</label>
<select id="select1">
<option value="0">-- Elige --</option>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>
<!-- Checkbox -->
<input type="checkbox" id="check1" />
<label for="check1" class="inline">Campo casilla de verificación</label>
<!-- Radio -->
<input type="radio" name="radio" id="radio1" />
<label for="radio1" class="inline">Opción1</label>
<!-- Fieldset -->
<fieldset>
<legend>casilla de verificación</legend>
	<!-- Form Fields Here -->
</fieldset>
<!-- Textarea -->
<textarea id="textarea1" placeholder="Placeholder Text"></textarea>
<!-- Error -->
<div class="notice error">Esto es un aviso de error</div>

<!-- Advertencia -->
<div class="notice warning">Esto es un aviso de advertencia</div>

<!-- Éxito -->
<div class="notice success">Esto es un aviso de éxitoe</div>

Extras/Ayudas

Ítem Descripción
.left .center .right Alinear texto
a.lightbox Abrir enlace en lightbox. Detecciones automáticas, iframe, contenido en línea, etc.
.clear Añade esta clase a un div u otro elemento para limpiar floats.
.clearfix Añade esta clase a los contenedores que tienen ‘hijos’ de float dentro de sus floats interiores.
a href="#anchor" Desplaza automáticamente la página al objeto deseado con id="anchor".
li.first li.last El primer y último ítem <li></li> obtienen automáticamente las clases .first y .last respectivamente.
.column Todas las columnas tienen la clase .column añadida para una personalización global fácil.
.visible Añade estas columnas para verlo durante la producción. Añade un fondo gris claro a las columnas.
div.inner Todas las columnas tienen un contenedor div.inner generado dentro para un estilo CSS fácil, añadiendo y eliminando el relleno de las columnas.
.hide .show .hide para esconder el contenido (display:none). .show para mostrar el contenido (display:block).
tr.first tr.last El primer y último ítem <tr></tr> obtienen automáticamente las clases .first y .last respectivamente.
tr.alt Cada fila alterna de la tabla obtiene la clase .alt automáticamente.