Tipografía

Tamaños y tipografía (Roboto, Helvetica, Arial, sans-serif)

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet" />
Typography h6 small
Typography h5 small

Typography h4 small

Typography h3 small

Typography h2 small

Typography h1 small

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,

Columnas

El uso de span debe estar dentro de un contenedor "row" para corregir el problema de elementos flotantes no deseados.

Los span en total van de 1 a 12. Siendo 12 el 100% del contenedor padre.

Para el uso correcto de los span la formula es dividir el numero de columnas entre 12. Si deseamos 4 columnas iguales la formula seria: 12/4 = 3. Debemos usar 4 elementos span3 para obtener el resultado.

Automaticamente en responsivo todas las columnas se vuelven de un 100% del ancho de pantalla.

1/12
1/11
1/1
1/10
1/2
1/9
1/3
1/8
1/4
1/7
1/5
1/6
1/6
1/4
1/4
1/4
1/3
1/3
1/3
1/3
1/2
1/2
1/2
1/2
1/2
1/2

Prefijos y sufijos.

Un "prefix" crea un margen a la izquierda del elemento, y el "suffix" crea el margen a la derecha. Los tamaños funcionan igual que un span.

1/5 suffix2
1/5
1/4 prefix8
1/3 suffix9
1/2
1/2 prefix8

Botones

Los botones se pueden usar de dos maneras, por link o elemento button. En el link deberá agregar la clase btn.

Para botones default .btn

Para botones de aviso use .btn-warning

Para botones de alerta use .btn-alert

Para botones de exito use .btn-success

Para botones con un color use .btn-colored

Button link Button link without href Button link disabled Button link flat
Button link Button link without href Button link disabled Button link flat
Button link Button link without href Button link disabled Button link flat
Button link Button link without href Button link disabled Button link flat
Button link Button link without href Button link disabled Button link flat

Formulários

Dropdown Menú

Los iconos aquí mostrados depende de la libreria de google:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Menus con links, si no coloca un href automaticamente aparecera como desactivado.

Puede abrir el menu hacía la derecha usando la clase ".to-left" en div.dropmenu

Puede usar la clase ".with-icon" en el div principal "div.dropmenu" para crear a todos los links del menu un espacio para colocar un icono ó puede colocar en cada link la clase ".with-icon" para únicamente crear el espacio del icono para ese link.

El icono debe llevar la clase ".icon" para colocarse en el espacio reservado.

Modal

Link abrir modal Button link abrir modal

Parallax

Toggles

Toggle

Pregunta 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate

Pregunta 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate

Accordion

Pregunta 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate

Pregunta 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate

Multi-Tabs

  • Tab 1
  • Tab 2 (desactivado)
  • Tab 3
tab 1
tab 2
El tab 2, solo es accesible por un boton, o accion.
tab 3