Alcaldía Municipal de Acacías

Documentación tipografía

Encabezados

Todas los encabezados en HTML desde el, <h1> hasta el <h6> están disponibles.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non accumsan tellus. Vivamus varius, quam ut consectetur pellentesque, libero est porta orci, nec semper enim neque a risus. Vivamus molestie rutrum augue ut varius. Nam ipsum neque, pretium ut risus mattis, interdum sagittis diam. Maecenas luctus faucibus mi, elementum vestibulum diam laoreet eu. Quisque luctus turpis finibus libero consectetur efficitur. Nulla eleifend lacus id sem vestibulum iaculis.

Énfasis

Para enfatizar un fragmento de texto con cursiva usamos <em>

El siguiente fragmento de texto se representa como texto en cursiva.

Contenido

El tamaño de fuente font-size global de la web es 16px, con una altura de línea line-height de 1.42em. Esto se aplica a <body> y todos los párrafos. Además, <p> reciben un margen inferior de 9px por defecto.

En cuanto a la tipografia usamos el Framework de Boostrap para mejorar la visualización de los contenidos. El tipo de fuente para el contenido es Roboto y los encabezados es Roboto Condensed

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Negrita

El siguiente fragmento de texto es traducido como texto en negrita .

El siguiente fragmento de texto se muestra como texto en negrita.

 

Pequeño

Para enfatizar una línea o bloque de texto, use el tag small.

Esta línea de texto está destinada a ser tratada como letra pequeña

 

 

Estilos informativos

Use el tag <p> con la clase success, warning, info o danger.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Citas en bloque

Para citar bloques de contenido de otra fuente dentro de su documento. Use el tag <blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Opciones del bloque

Puede cambiar el color del borde, La etiqueta es border-color. Ejemplo: border-amber.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Puede alinearlo, con la etiqueta pull-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Listados

No ordenadas

Esto mostrará una lista de elementos en los que el pedido no tiene importancia explícita.

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem

Ordenadas

Esto mostrará una lista de elementos en los que el orden es de forma explícita (lista numerada).

  1. Lorem ipsum dolor sit amet
  2. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  3. Faucibus porta lacus fringilla vel
  4. Eget porttitor lorem

Unstyled

Esto mostrará una lista de elementos sin estilo o viñeta. La clase a aplicar es list-unstyled

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem

Tablas

Diseño de una tabla.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Estilos opcionales. Se pueden agregar algunas clases para mejorar la visualización.

  • table-striped Agrega rayas de cebra a cualquier fila de la tabla dentro de la tabla. (no disponible en IE7-IE8).
  • table-bordered Añade bordes y esquinas redondeadas a la tabla.
  • table-hover Habilitar un estado hover en las filas de la tabla dentro de la tabla
  • table-condensed HAce que las celdas sean más compactas
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Utilice las clases contextuales para colorear las filas de la tabla.

Clase Descripción
.success Indica una acción completa o positiva.
.danger Indica una acción peligrosa o potencialmente negativa.
.warning Indica una advertencia que podría necesitar atención.
.info Se utiliza como una alternativa a los estilos predeterminados.

Formularios

Example block-level help text here.

Botones

 

Tener en cuenta

La etiqueta para los botones de colores es btn-color Ejemplo: color-purple

Iconos

Font Awesome es un lenguaje pictográfico de acciones relacionadas con la web que ofrece más de 300 iconos. Puede ver toda la libreria en su página oficial.

Para agregar un icono solo es cuestión de añadir la clase fa fa-nombre-icon. Ejemplo: fa fa-rocket

 

 

 

Paleta de Colores

 
 

COLOR PRIMARY

#C84F3B, #A23E2D

 
 

AMBER

#B23600, #8E2B00

 
 

PURPLE

#6A006F, #550059

 
 

RED

#A62935, #85212a

 
 

YELLOW

#FFCC0A, #D4A800

 
 

LIME

#B8C91A, #93A115

Otros Colores

 
 

BLUE

#1F4788, #19396D

 
 

LIGHT GRAY

#F5F7FA, #E6E9ED

 
 

MEDIUM GRAY

#CCD1D9, #AAB2BD

 
 

DARK GRAY

#656D78, #434A54


Número de visitas a esta página 268
Fecha de publicación 23/02/2017
Última modificación 21/03/2017