framework-gb.cdn.gob.mx
Open in
urlscan Pro
2.16.187.16
Public Scan
URL:
http://framework-gb.cdn.gob.mx/
Submission: On April 25 via manual from GB — Scanned from GB
Submission: On April 25 via manual from GB — Scanned from GB
Form analysis 7 forms found in the DOM
<form>
<div class="form-group">
<label for="exampleInputEmail1">Correo electrónico:</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Ingresa tu email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Contraseña:</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Ingresa tu contraseña">
</div>
<div class="form-group hidden-xs ">
<label for="exampleInputFile">Subir archivo:</label>
<input type="file" id="exampleInputFile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Acepto los términos </label>
</div>
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary pull-right">Enviar</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Correo Electrónico</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Ingresa tu email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Contraseña</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Ingresa tu contraseña">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Recordarme </label>
</div>
<button type="submit" class="btn btn-primary">Ingresar</button>
</form><form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-3 control-label" for="email-03">Nombre:</label>
<div class="col-sm-9">
<input class="form-control" id="email-03" placeholder="Ingresa tu nombre" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="password-03">Contraseña:</label>
<div class="col-sm-9">
<input class="form-control" id="password-03" placeholder="Ingresa tu contraseña" type="password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox"> Recordarme </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary pull-right" type="submit">Enviar</button>
</div>
</div>
</form><form role="form">
<div class="form-group">
<input class="form-control" placeholder="Área de texto" type="text">
</div>
</form><form role="form">
<div class="form-group">
<textarea class="form-control" placeholder="Área de texto" rows="3"></textarea>
</div>
</form><form role="form">
<p>
<strong>Ejemplo de casillas de verificación (checkbox)</strong>
</p>
<div class="checkbox">
<label>
<input checked="" name="checkbox-01" type="checkbox" value="opcion-01">Opción 1 </label>
</div>
<div class="checkbox">
<label>
<input name="checkbox-01" type="checkbox" value="opcion-02">Opción 2 </label>
</div>
<div class="checkbox">
<label>
<input name="checkbox-01" type="checkbox" value="opcion-03">Opción 3 </label>
</div>
<p>
<strong>Ejemplo de botón de opción (radio)</strong>
</p>
<div class="radio">
<label>
<input checked="" name="radio-01" type="radio" value="opcion-01">Opción 1 </label>
</div>
<div class="radio">
<label>
<input name="radio-01" type="radio" value="opcion-02">Opción 2 </label>
</div>
<div class="radio">
<label>
<input name="radio-01" type="radio" value="opcion-03">Opción 3 </label>
</div>
</form><form role="form">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select class="form-control" multiple="">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>Text Content
Interruptor de Navegación
* Trámites
* Gobierno
* Búsqueda
BIENVENIDOS A LA GUÍA DE ESTILO PARA GOB.MX
OBJETIVO
--------------------------------------------------------------------------------
Con el objetivo de estandarizar la estructura de los contenidos en las
dependencias, se ha realizado el siguiente documento, que funciona como una guía
compuesta por un conjunto de elementos específicos que se deben de cumplir al
momento de realizar la maquetación de los trámites en línea.
La gráfica base sirve como referencia para organizar la información y la forma
en la que esta estará disponible, para facilitar a nuestros usuarios que accedan
de manera sencilla a todo el contenido que solicite.
CONFIGURACIÓN BÁSICA
--------------------------------------------------------------------------------
Este framework tiene la capacidad de insertar la cabecera y pie de página de
www.gob.mx de manera dinámica. El único requisito para lograr ese objetivo es
ingresar una hoja de estilo y un javascript en todos los htmls que lo requieran.
Es importante no descargar ningún archivo, se deben ocupar únicamente los
alojados en nuestro CDN, ya que estos podrán cambiar de manera constante y sin
previo aviso.
1. Copie la ruta de la siguiente liga de nuestra hoja de estilos que se
encontrará alojada en nuestro CDN:
https://framework-gb.cdn.gob.mx/assets/styles/main.css
2. Antes de cerrarse la etiqueta <head> de cada html ingrese la ruta copiada de
la hoja de estilo de la siguiente forma :
...
<link href="https://framework-gb.cdn.gob.mx/assets/styles/main.css" rel="stylesheet">
</head>
3. Copie la ruta de la siguiente liga de nuestro archivo de javascript que se
encontrará alojada en nuestro CDN: https://framework-gb.cdn.gob.mx/gobmx.js
4. Antes de cerrarse la etiqueta <body> de cada html ingrese la ruta del script
copiada de la siguiente forma :
...
<script src="https://framework-gb.cdn.gob.mx/gobmx.js"></script>
</body>
AMBIENTE DE PRUEBA
Para un mayor control y calidad se ha incluido un ambiente de QA en el que se va
a liberar cada actualización de gráfica base y donde se podrán realizar
cualquier tipo de pruebas correspondientes.
Para la hoja de estilos, la ruta en ambiente prueba será la siguiente:
https://framework-gb.cdn.gob.mx/qa/assets/styles/main.css
Para el archivo javascript, la ruta en ambiente prueba será el siguiente:
https://framework-gb.cdn.gob.mx/qa/gobmx.js
RUTAS DE ARCHIVOS CON CONEXIÓN SEGURA (HTTPS)
Las ligas de Gráfica Base cuentan con conexión segura, sin embargo es importante
considerar que, aunque el sitio NO cuente con certificado SSL, siempre deberán
utilizarse las siguientes rutas, esto no afectará negativamente en los sitios:
Ambiente de producción con certificado SSL
* Hoja de estilos: https://framework-gb.cdn.gob.mx/assets/styles/main.css
* Archivo javascript: https://framework-gb.cdn.gob.mx/gobmx.js
Ambiente QA con certificado SSL
* Hoja de estilos: https://framework-gb.cdn.gob.mx/qa/assets/styles/main.css
* Archivo javascript: https://framework-gb.cdn.gob.mx/qa/gobmx.js
ESTA GUÍA YA INCLUYE LOS SIGUIENTES FRAMEWORKS Y LIBRERÍAS Y POR LO TANTO SE
RECOMIENDA NO AGREGARLOS DENTRO DE LOS HTMLS:
* Bootstrap versión 3.3.0. Para más información consultar la documentación
* Jquery versión 1.11.1. Para más información consultar la documentación
* Modernizr versión 2.8.3. Para más información consultar la documentación
* Open Sans (fuente tipográfica). Para más información consultar documentación
USO DE TÍTULO
Todas las páginas que utilicen la gráfica base deberán tener un título
utilizando la etiqueta <title> dentro de la etiqueta <head>.
<head>
...
<title>Ejemplo de nueva página para GOB.mx</title>
...
</head>
USO DE FAVICON
Descargar las imágenes favicon aquí y agregar el archivo favicon.ico en el
directorio raíz del sitio. Posteriormente se deberá vincular la imagen
utilizando la etiqueta <link> dentro de la etiqueta <head>.
<head>
...
<link href="/favicon.ico" rel="shortcut icon">
...
</head>
AVISO IMPORTANTE
Se debe ocupar el siguiente código para ejecutar cualquier script:
$gmx(document).ready(function(){ ... });
Aunque jQuery ofrece el evento $(document).ready(), el cual se disparará
únicamente hasta que todos los assets se hayan recibido correctamente, en el
caso particular para el framework de gob.mx será necesario
$gmx(document).ready(), para asegurarnos que todos los scripts y plugins que han
sido llamados dinámicamente hayan terminado de cargarse de manera correcta.
<script>
$gmx(document).ready(function() {
...
});
</script>
CASOS ESPECIALES PARA USO DE JQUERY
En casos donde sea necesario ocupar una versión distinta de Jquery, esta podrá
incluirse dentro la etiqueta <head> aunque es requisito que la versión sea 1.9.0
o mayor.
Para casos donde se necesiten dos versiones distintas de jQuery dentro del mismo
archivo (no recomendable), leer este documento.
EJEMPLO BÁSICO
--------------------------------------------------------------------------------
Este es el template básico para agregar una nueva página. Para que el framework
funcione correctamente se debe incorporar la liga de los estilos dentro de la
etiqueta <head>, y la liga del script antes de cerrarse la etiqueta <body>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo de nueva página para GOB.mx</title>
<!-- CSS -->
<link href="/favicon.ico" rel="shortcut icon">
<link href="https://framework-gb.cdn.gob.mx/assets/styles/main.css" rel="stylesheet">
<!-- Respond.js soporte de media queries para Internet Explorer 8 -->
<!-- ie8.js EventTarget para cada nodo en Internet Explorer 8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ie8/0.2.2/ie8.js"></script>
<![endif]-->
</head>
<body>
<!-- Contenido -->
<main class="page">
<div class="container">...</div>
</main>
<!-- JS -->
<script src="https://framework-gb.cdn.gob.mx/gobmx.js"></script>
</body>
</html>
SISTEMA DE RETÍCULA
--------------------------------------------------------------------------------
Se incluyó un sistema responsivo, este sistema de fluido se escala de manera
apropiada hasta 12 columnas de acuerdo al tamaño del dispositivo o ventana
gráfica.
Guía de estilo para diseño
* Objetivo
* Configuración básica
* Ejemplo básico
* Sistema de retícula
* Colores
* Barra de subnavegación
* Formulario
* Botones
* Encabezados
* Separadores
* Cuerpo de texto
* Tablas
* Alertas
* Breadcrumbs
* Tooltips
* Paneles colapsables
* Pestañas (tabs)
* Ventanas modales
* Selector de fechas
* Calendario citas
* Íconos
* Iframes
* Clases de ayuda
* Formulario básico
* Pasos de formulario
* Migración a gob.mx
* Páginas de error
* Preguntas frecuentes
* Manual de uso
* changelog
EJEMPLO:
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
GAMA DE COLORES
--------------------------------------------------------------------------------
Los colores aquí especificados son los que deberán utilizarse en el contenido.
El cuerpo de texto dentro de los documentos deberá ir en negro #545454.
#000000 #272829 #393C3E #545454 #DDDDDD #F6F6F6 #FFFFFF #D0021B #4D92DF
BARRA DE SUBNAVEGACIÓN
--------------------------------------------------------------------------------
La barra de subnavegación es un componente que podrá contener encabezados de
navegación en su aplicación o sitio para un uso muy particular. En vistas de
móviles están expandidos, y se vuelven horizontales cuando aumenta el ancho de
la ventanilla disponible. En caso de utilizar, se deberá de crear justo después
de que se haya abierto la etiqueta <main>.
EJEMPLO BÁSICO
Toggle navigation Semarnat
* Enlace
* Desplegable
* Acción
* Otra acción
* Algo más aquí
*
* Enlace separado
* Enlace
<nav class="navbar navbar-inverse sub-navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#subenlaces">
<span class="sr-only">Interruptor de Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Semarnat</a>
</div>
<div class="collapse navbar-collapse" id="subenlaces">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Enlace</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Desplegable <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Acción</a></li>
<li><a href="#">Otra acción</a></li>
<li><a href="#">Algo más aquí</a></li>
<li class="divider"></li>
<li><a href="#">Enlace separado</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
USO DE LOGOTIPOS
Los logotipos de cada secretaría o dependencia se deberán de colorar en la parte
superior justo después del breadcrumb. Cada logotipo deberá tener un máximo
proporcional a 120px de ancho.
FORMULARIO
--------------------------------------------------------------------------------
Los controles de formularios individuales reciben automáticamente algunos
estilos globales. Todos los elemento <input>, <textarea> y <select> con la clase
.form-control se componen de un ancho de 100% de forma predeterminada. Para un
espaciado más óptimo se deben envolver las etiquetas y los controles con la
clase .form-group .
EJEMPLO BÁSICO
Correo electrónico:
Contraseña:
Subir archivo:
Acepto los términos
Enviar
<form role="form">
<div class="form-group">
<label class="control-label" for="email-01">Correo electrónico:</label>
<input class="form-control" id="email-01" placeholder="Correo electrónico" type="text">
</div>
<div class="form-group">
<label class="control-label" for="password-01">Contraseña</label>
<input class="form-control" id="password-01" placeholder="Contraseña" type="password">
</div>
<div class="form-group">
<label class="control-label" for="file-01">Cargar archivo:</label>
<input id="file-01" type="file">
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Acepto los términos
</label>
</div>
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
<button class="btn btn-primary pull-right" type="submit">Enviar</button>
</form>
FORMULARIO LINEAL
Se debe añadir la clase .form-inline al <form> para los controles con alineación
a la izquierda y de tipo inline-block. Esto únicamente se aplica a las formas
con ventanas que son al menos 768px de ancho.
Correo Electrónico
Contraseña
Recordarme
Ingresar
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email-02">Correo electrónico:</label>
<input class="form-control" id="email-02" placeholder="Ingrese su email" type="text">
</div>
<div class="form-group">
<label class="sr-only" for="password-02">Contraseña</label>
<input class="form-control" id="password-02" placeholder="Ingrese su contraseña" type="password">
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Recordarme
</label>
</div>
<button class="btn btn-primary" type="submit">Ingresar</button>
</form>
HORIZONTAL
Utilice las clases de cuadrícula predefinidos para alinear las etiquetas y los
grupos de controles de formulario en una disposición horizontal añadiendo-
.form-horizontal al formulario. El agregar esa clase cambiará el comportamiento
de .form-groups por filas de cuadrícula, así que no hay necesidad de .row.
Nombre:
Contraseña:
Recordarme
Enviar
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-3 control-label" for="email-03">Correo electrónico:</label>
<div class="col-sm-9">
<input class="form-control" id="email-03" placeholder="Correo electrónico" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="password-03">Contraseña:</label>
<div class="col-sm-9">
<input class="form-control" id="password-03" placeholder="Contraseña" type="password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox">
Recordarme
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button class="btn btn-primary pull-right" type="submit">Enviar</button>
</div>
</div>
</form>
CAJA SENCILLA DE TEXTO
Elemento que sirve para insertar una sola línea de texto.
<input class="form-control" placeholder="Area de texto" type="text">
CAJAS PARA MÚLTIPLES LÍNEAS DE TEXTO
Elemento que sirve para insertar múltiples líneas de texto.
<textarea class="form-control" placeholder="Área de texto" rows="3"></textarea>
CASILLAS DE VERIFICACIÓN Y BOTONES DE OPCIÓN
Ejemplos para agregar casillas de verificación (checkbox) y botones de opción
(radio).
Ejemplo de casillas de verificación (checkbox)
Opción 1
Opción 2
Opción 3
Ejemplo de botón de opción (radio)
Opción 1
Opción 2
Opción 3
<div class="checkbox">
<label>
<input type="checkbox" value="opcion-01"> Opción 1
</label>
<label>
<input type="checkbox" value="opcion-02"> Opción 2
</label>
<label>
<input type="checkbox" value="opcion-03"> Opción 3
</label>
</div>
...
<div class="radio">
<label>
<input type="radio" name="radio-01" value="opcion-01" checked="checked"> Opción 1
</label>
<label>
<input type="radio" name="radio-01" value="opcion-02" checked="checked"> Opción 2
</label>
<label>
<input type="radio" name="radio-01" value="opcion-03" checked="checked"> Opción 3
</label>
</div>
CAMPOS DE SELECCIÓN
Usa el comportamiento nativo o agrega el atributo multiple para seleccionar
múltiples opciones.
1 2 3 4 5
1 2 3 4 5
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
...
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
BOTONES
--------------------------------------------------------------------------------
Los botones en una interfaz son elementos vitales, ya que en la mayoría de los
casos reúnen muchas de las capacidades de navegación que su creador ha
concebido.
Utilice cualquiera de las clases de botones disponibles para crear rápidamente
un botón con estilo.
Para más información ingrese a: ejemplos de caso de uso.
Básico Error Primario Hipervínculo
<!-- Botón básico -->
<button type="button" class="btn btn-default">Básico</button>
<!-- Botón de error -->
<button type="button" class="btn btn-danger">Error</button>
<!-- Botón primario -->
<button type="button" class="btn btn-primary">Primario</button>
<!-- Botón tipo hipervínculo -->
<button type="button" class="btn btn-link">Hipervínculo</button>
TAMAÑOS DE BOTONES
Aquí se detalla los diferentes tamaños que tienen los botones. Agrega la clase
.btn-lg, .btn-sm, o .btn-xs para modificar el tamaño del botón.
Grande Grande
Básico Básico
Chico Chico
Extra chico Extra chico
<p>
<button class="btn btn-default btn-lg" type="button">Grande</button>
<button class="btn btn-primary btn-lg" type="button">Grande</button>
</p>
<p>
<button class="btn btn-default" type="button">Básico</button>
<button class="btn btn-primary" type="button">Básico</button>
</p>
<p>
<button class="btn btn-default btn-sm" type="button">Chico</button>
<button class="btn btn-primary btn-sm" type="button">Chico</button>
</p>
<p>
<button class="btn btn-default btn-xs" type="button">Extra chico</button>
<button class="btn btn-primary btn-xs" type="button">Extra chico</button>
</p>
ESTADO ACTIVO
Los botones aparecen con una sombra interna, color de fondo y borde más oscuro.
Agrega la clase .active sólo para las etiquetas <a> o <button>.
Ejemplo Ejemplo
<button class="btn btn-default btn-lg active" type="button">Ejemplo</button>
<button class="btn btn-primary btn-lg active" type="button">Ejemplo</button>
BOTONES DESHABILITADOS
Los botones deshabilitados funcionan igual que los activos. Si se desea cambiar
la apariencia del botón agrega la clase .disabled a los botones que necesites
deshabilitar.
Ejemplo Ejemplo
<button class="btn btn-default btn-lg disabled" type="button">Ejemplo</button>
<button class="btn btn-primary btn-lg disabled" type="button">Ejemplo</button>
GRUPO DE BOTONES
Serie de botones a la vez en una sola línea con el grupo de botones.
Izquierda Centro Derecha
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Izquierda</button>
<button type="button" class="btn btn-default">Centro</button>
<button type="button" class="btn btn-default">Derecha</button>
</div>
GRUPO DE BOTONES VERTICAL
Conjunto de botones que aparecerán apilados verticalmente en lugar de
horizontal.
Botón Botón
Dropdown
* Dropdown link
* Dropdown link
Botón Botón
Dropdown
* Dropdown link
* Dropdown link
Dropdown
* Dropdown link
* Dropdown link
Dropdown
* Dropdown link
* Dropdown link
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
GRUPO DE BOTONES JUSTIFICADOS
Grupo de botones que abarcarán todo el ancho de su contenedor. También funciona
con menús desplegables de los botones dentro del grupo de botones.
Izquierda Centro Derecha
Izquierda Centro
Desplegable
* Action
* Another action
* Something else here
*
* Separated link
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
BOTONES CON ÍCONO
Estos botones van acompañados de un ícono que representa su acción, además del
texto.
Ejemplo Ejemplo Ejemplo Ejemplo
<!-- Icono del lado izquierdo del botón -->
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
Ejemplo
</button>
<!-- Icono del lado derecho del botón -->
<button class="btn btn-primary" type="button">
Ejemplo
<span class="glyphicon glyphicon-search"></span>
</button>
PAGINACIÓN
--------------------------------------------------------------------------------
En esta sección se describe todo lo relacionado con paginadores.
* «
* 1
* 2
* 3
* 4
* 5
* »
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
ENCABEZADOS
--------------------------------------------------------------------------------
Los siguientes son ejemplos de encabezados con diferentes tamaños de letra.
H1. EJEMPLO TEXTO
H2. EJEMPLO TEXTO
H3. EJEMPLO TEXTO
H4. EJEMPLO TEXTO
H5. EJEMPLO TEXTO
H6. EJEMPLO TEXTO
Los títulos y subtítulos deberán ocupar sólo 2/3 del formulario web, es decir, 8
columnas. El tamaño de fuente de los títulos corresponderá a h1, y el de los
subtitulos a h2. En caso de que el título sea muy extenso podrá colocarlo en h2.
<h1>h1. Ejemplo Texto</h1>
<h2>h2. Ejemplo Texto</h2>
<h3>h3. Ejemplo Texto</h3>
<h4>h4. Ejemplo Texto</h4>
<h5>h5. Ejemplo Texto</h5>
<h6>h6. Ejemplo Texto</h6>
SEPARADORES
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
El uso de separadores se podrá aplicar cuando se necesite mostrar una separación
de contenido. La etiqueta <hr> agregará márgenes posteriores y superiores en el
documento.
<p>Lorem ipsum dolor...</p>
<hr>
<p>Lorem ipsum dolor...</p>
SEPARADORES PARA ENCABEZADOS
--------------------------------------------------------------------------------
Existen los separadores que vienen acompañados de un encabezado. Para ese caso
se le agregará la clase red para crear un separador con un pequeño rectángulo
rojo. <hr class= "red">
<h3>h3. Ejemplo texto</h3>
<hr class="red">
CUERPO DE TEXTO
--------------------------------------------------------------------------------
El tamaño de fuente estandarizado es de 18px, con un interlineado de 1.428. Esto
se aplica a todo el contenido dentro de body. El tamaño mínimo recomendable para
el texto es de 16px.
Para más información ingrese a: ejemplos de caso de uso.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur libero
id gravida volutpat. Nunc mauris lorem, sodales eu suscipit id, fermentum vitae
neque.
Mauris nec massa sem. Etiam quis ipsum in quam consequat bibendum et in ipsum.
Suspendisse faucibus metus lacus, vitae adipiscing lacus tincidunt vel.
Praesent id dui suscipit, consectetur ante eget, commodo velit. Vivamus ac
turpis nec lectus tincidunt vestibulum vel in odio. Sed ullamcorper eu massa
quis porta. Cras at erat lectus.
Ut vel varius felis. Suspendisse potenti. Curabitur luctus eros vel massa
adipiscing lacinia. Sed bibendum interdum mi nec interdum. Integer nec erat
enim.
<p>Lorem ipsum dolor...</p>
LISTA DESORDENADA
* Lorem ipsum dolor sit amet, consectetur adipiscing elit.
* Vivamus sed leo mollis, ullamcorper lacus et, aliquet nibh.
* Nunc nec accumsan nunc. Cras ac lorem a tellus pulvinar pulvinar.
* In dignissim tortor id libero vulputate mollis.
<ul>
<li>Lorem ipsum dolor...</li>
</ul>
LISTA ORDENADA
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Vivamus sed leo mollis, ullamcorper lacus et, aliquet nibh.
3. Nunc nec accumsan nunc. Cras ac lorem a tellus pulvinar pulvinar.
4. In dignissim tortor id libero vulputate mollis.
<ol>
<li>Lorem ipsum dolor...</li>
</ol>
LISTA SIN ESTILOS
* Lorem ipsum dolor sit amet
* Consectetur adipiscing elit
* 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>...</li>
</ul>
LISTADO HORIZONTAL
* Lorem ipsum
* Phasellus iaculis
* Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>
TABLAS
--------------------------------------------------------------------------------
Para el relleno básico estilo-luz y sólo divisores horizontales se debe añadir
la clase base .table a cualquier tabla.
EJEMPLO BÁSICO
Título opcional de la tabla. # First Name Last Name Username 1 Mark Otto @mdo 2
Jacob Thornton @fat 3 Larry the Bird @twitter
<table class="table">
...
</table>
FILAS MARCADAS CON FRANJAS
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry
the Bird @twitter
<table class="table table-striped">
...
</table>
TABLAS BORDEADAS
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry
the Bird @twitter
<table class="table table-bordered">
...
</table>
TABLAS RESPONSIVAS
# Encabezado de cuadro Encabezado de cuadro Encabezado de cuadro Encabezado de
cuadro Encabezado de cuadro Encabezado de cuadro 1 Celda de cuadro Celda de
cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro 2 Celda
de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda
de cuadro 3 Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro
Celda de cuadro Celda de cuadro
<table class="table table-responsive">
...
</table>
ALERTAS
--------------------------------------------------------------------------------
EJEMPLO DE ALERTA BÁSICO
Agrega cualquier texto y un botón opcional de cerrar dentro de la clase .alert,
después agrega una de las clases contextuales (ej. .alert-success).
¡Felicidades! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
¡Sugerencia! Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim.
¡Precaución! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
porttitor.
¡Error de registro! Vestibulum eget felis nec purus commodo convallis. Aliquam
erat volutpat.
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>
EJEMPLO DE ALERTA CON BOTÓN DE CERRAR
× ¡Precaución! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>¡Precaución!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
BREADCRUMBS
--------------------------------------------------------------------------------
Indican la ubicación de la página actual dentro de una jerarquía de navegación.
1.
2. Inicio
3. Archivo
<ol class="breadcrumb">
<li><a href="#"><i class="icon icon-home"></i></a></li>
<li><a href="#">Inicio</a></li>
<li class="active">Archivo</li>
</ol>
TOOLTIPS
--------------------------------------------------------------------------------
Información contextualizada.
Lorem ipsum dolor sit adipisicing elit, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo
pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo pariatur.
Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua, enim ad minim veniam, quis nostrud consectetur
ullamco laboris nisi ut aliquip.
* Tiam feugiat dolor elit suscipit elementum orci fringilla.
* Integer elementum massa at nulla placerat varius. massa.
* Morbi ltiam feugiat suscipit in elementum orci fringilla.
* Praesent tempus draesent tempus dictum nibh ac ullamcorper.
* Vivamus et volutpat mi. Donec nec est eget dolor.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip en la izquierda">Tooltip en la izquierda</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip arriba">Tooltip arriba</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip abajo">Tooltip abajo</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip a la derecha">Tooltip a la derecha</button>
POR RAZONES DE RENDIMIENTO, EL TOOLTIP SE DEBERÁ INICIALIZAR MANUALMENTE:
$gmx(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
PANELES COLAPSABLES
--------------------------------------------------------------------------------
Paneles colapsables para mostrar/ocultar bloques de forma simultánea.
TÍTULO DE BLOQUE 1
Lorem ipsum dolor sit amet de. Nulla vitae elit libero, avehicula pharetra
augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id
nibh ultricies vehicula ut id elit.
<div class="panel-group ficha-collapse" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-parent="#accordion" data-toggle="collapse" href="#panel-01" aria-expanded="true" aria-controls="panel-01">
Título del bloque 1
</a>
</h4>
<button type="button" class="collpase-button collapsed" data-parent="#accordion" data-toggle="collapse" href="#panel-01"></button>
</div>
<div class="panel-collapse collapse in" id="panel-01">
<div class="panel-body">
Lorem ipsum dolor sit amet de. Nulla vitae elit libero, avehicula pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
</div>
</div>
</div>
</div>
TÍTULO DEL BLOQUE 1
Lorem ipsum dolor sit amet de. Nulla vitae elit libero, avehicula pharetra
augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id
nibh ultricies vehicula ut id elit.
PESTAÑAS (TABS)
--------------------------------------------------------------------------------
Permiten mostrar diferentes tipos de contenido dependiendo de la pestaña
seleccionada.
* Título 1
* Título Pestaña 2
* Título 3
* Título 4
Fusce ut neque justo, et aliquet enim. In hac habitasse dictumst. Nullam commodo
que erat, vitae facilisis erat. Cras at mauris ut tortor vestibulum fringilla
vel sed metus. Donec interdum purus a justo feugiat rutrum. Sed ac neque ut
neque dictum accumsan. Cras lacinia rutrum risus, id viverra metus dictum sit
amet. Fusce venenatis, urna eget cursus placerat, dui nisl fringilla purus, nec
tincidunt sapien justo ut nisl. Curabitur lobortis semper neque et varius. Etiam
eget lectus risus, a varius orci. Nam placerat mauris at dolor imperdiet at
aliquet lectus ultricies. Duis tincidunt mi at quam condimentum lobortis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id neque nec enim
ultricies congue quis a lectus. Nulla placerat pellentesque enim eu pharetra.
Nullam ornare velit vel est porttitor convallis. Nullam lobortis erat a iaculis
vulputate. Vivamus vel nibh nec metus aliquam placerat in et magna. Donec
ornare, metus vel ultricies porta, nisl sem vulputate sapien, sed ullamcorper
purus nisi at quam. Duis sollicitudin pharetra condimentum. Mauris enim felis,
placerat ac luctus id, sagittis id mauris. In varius rutrum arcu, vitae
tristique urna ultrices nec. Maecenas purus turpis, congue in consequat
elementum, rutrum id purus. Donec quis arcu ultricies erat viverra pretium
eleifend dignissim urna.
Fusce ultrices dapibus risus, ac pellentesque sem pretium vel. Phasellus laoreet
egestas lectus, nec fringilla elit sollicitudin et. Nam lectus purus, interdum
et fringilla vitae, luctus vitae arcu. Praesent interdum, purus quis vehicula
ultricies, odio libero imperdiet neque, eu dignissim nibh urna at tellus. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed posuere arcu.
Maecenas fringilla nisi et pharetra iaculis. Nam neque tortor, egestas eget nunc
ac, tempus facilisis justo. Ut et tempus dui.
* Pellentesque ultrices eros ac scelerisque pharetra.
* Donec tincidunt condimentum felis. Vestibulum vehicula vulputate magna nec
fermentum.
* Cras ornare nulla eros, nec scelerisque augue faucibus et.
Aenean euismod, eros dignissim interdum venenatis, elit neque sodales ligula,
sed pretium ante velit pulvinar risus. Vestibulum at sem rhoncus turpis
vestibulum ullamcorper et ut erat. Vivamus sit amet consectetur velit, eget
pretium nibh.
Maecenas eu placerat ante. Fusce ut neque justo, et aliquet enim. In hac
habitasse dictumst. Nullam commodo que erat, vitae facilisis erat. Cras at
mauris ut tortor vestibulum fringilla vel sed metus. Donec interdum purus a
justo feugiat rutrum. Sed ac neque ut neque dictum accumsan. Cras lacinia rutrum
risus, id viverra metus dictum sit amet. Fusce venenatis, urna eget cursus
placerat, dui nisl fringilla purus, nec tincidunt sapien justo ut nisl.
Curabitur lobortis semper neque et varius. Etiam eget lectus risus, a varius
orci. Nam placerat mauris at dolor imperdiet at aliquet lectus ultricies. Duis
tincidunt mi at quam condimentum lobortis.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab-01">Título 1</a></li>
<li><a data-toggle="tab" href="#tab-04">Título 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-01">...</div>
<div class="tab-pane" id="tab-04">...</div>
</div>
VENTANAS MODALES
--------------------------------------------------------------------------------
Las ventanas modales son indicaciones de diálogo flexibles y dinámicas que
permiten mostrar información sobre toda las demás ventanas de la misma
aplicación.
EJEMPLO DE VENTANA MODAL
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur libero
id gravida volutpat. Nunc mauris lorem, sodales eu suscipit id, fermentum vitae
neque.
Cerrar Guardar
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Ejemplo de ventana modal</h4>
</div>
<div class="modal-body">
<p>Ejemplo de texto interno.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Guardar</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
MODO DE USO
MEDIANTE DATA-ATTRIBUTES
Se pueden activar ventanas modales sin tener que escribir una línea individual
de javascript mediante etiquetas. Se debe establecer data-toggle="modal" en un
elemento controlador, como botón, así como data-target="#foo" o href="#foo" para
apuntar a un modal en específico para alternar.
<button type="button" data-toggle="modal" data-target="#foo">Abrir ventana modal</button>
MEDIANTE JAVASCRIPT
El siguiente ejemplo llamará a una ventana modal con un id de myModal con la
siguiente línea de Javascript.
$('#myModal').modal(options)
Para más información leer la siguiente documentación: Bootstrap Javascript
modals.
SELECTOR DE FECHAS (DATEPICKER)
--------------------------------------------------------------------------------
El selector de fechas (Datepicker) nos proporciona un calendario personalizable,
en el cual podremos realizar selecciones de fechas y asociarlo a elementos HTML.
AntSig
Abril 2023
LunMarMieJueVieSábDom 123456789101112131415161718192021222324252627282930
MODO DE USO
Para el funcionamiento correcto de este plugin se deberá agregar la siguiente
ruta de script después del script de gobmx.js:
Ambiente producción
https://framework-gb.cdn.gob.mx/assets/scripts/jquery-ui-datepicker.js
Ambiente de producción con certificado SSL
https://framework-gb.cdn.gob.mx/assets/scripts/jquery-ui-datepicker.js
IMPORTANTE
En caso de hacer uso de este plugin se deberá incluir de manera manual dentro
del documento el script de jQuery 1.9.0 o mayor para que exista un correcto
funcionamiento del mismo.
SELECTOR DE FECHAS BÁSICO
Ejemplo de selector de fechas dentro de un campo
HTML:
...
<div class="form-group datepicker-group">
<label class="control-label" for="calendar">Calendario:</label>
<input class="form-control" id="calendar" type="text">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
</div>
...
JAVASCRIPT:
$gmx(document).ready(function() {
$('#calendar').datepicker();
});
SELECTOR DE FECHAS CON SELECCIÓN DE AÑO
Ejemplo de selector de fechas dentro de un campo
HTML:
...
<div class="form-group datepicker-group">
<label class="control-label" for="calendarYear">Calendario:</label>
<input class="form-control" id="calendarYear" type="text">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
</div>
...
JAVASCRIPT:
$gmx(document).ready(function() {
$('#calendarYear').datepicker({changeYear: true});
});
Para más información leer la siguiente documentación: jQuery Datepicker.
ÍCONOS
--------------------------------------------------------------------------------
ÍCONOS ESPECIALES PARA GOB.MX
Íconos creados para específicamente para gob.mx los cuales tendrán una mayor
prioridad en cuanto a los demás íconos.
* icon-home
* icon-search
* icon-user
* icon-calendar
* icon-infocircle
* icon-world
* icon-phone
* icon-tramite
* icon-others
* icon-caret-right
* icon-caret-down
* icon-arrow
* icon-printing
<span class="icon-home" aria-hidden="true"></span>
GLYPHICONS
Incluye 200 íconos en formato de fuente del conjunto Glyphicon.
Por motivos de rendimiento, todos los íconos requieren una clase base y clase
ícono individual. Para utilizarlo, coloque el código siguiente prácticamente en
cualquier lugar.
* glyphicon glyphicon-asterisk
* glyphicon glyphicon-plus
* glyphicon glyphicon-euro
* glyphicon glyphicon-minus
* glyphicon glyphicon-cloud
* glyphicon glyphicon-envelope
* glyphicon glyphicon-pencil
* glyphicon glyphicon-glass
* glyphicon glyphicon-music
* glyphicon glyphicon-search
* glyphicon glyphicon-heart
* glyphicon glyphicon-star
* glyphicon glyphicon-star-empty
* glyphicon glyphicon-user
* glyphicon glyphicon-film
* glyphicon glyphicon-th-large
* glyphicon glyphicon-th
* glyphicon glyphicon-th-list
* glyphicon glyphicon-ok
* glyphicon glyphicon-remove
* glyphicon glyphicon-zoom-in
* glyphicon glyphicon-zoom-out
* glyphicon glyphicon-off
* glyphicon glyphicon-signal
* glyphicon glyphicon-cog
* glyphicon glyphicon-trash
* glyphicon glyphicon-home
* glyphicon glyphicon-file
* glyphicon glyphicon-time
* glyphicon glyphicon-road
* glyphicon glyphicon-download-alt
* glyphicon glyphicon-download
* glyphicon glyphicon-upload
* glyphicon glyphicon-inbox
* glyphicon glyphicon-play-circle
* glyphicon glyphicon-repeat
* glyphicon glyphicon-refresh
* glyphicon glyphicon-list-alt
* glyphicon glyphicon-lock
* glyphicon glyphicon-flag
* glyphicon glyphicon-headphones
* glyphicon glyphicon-volume-off
* glyphicon glyphicon-volume-down
* glyphicon glyphicon-volume-up
* glyphicon glyphicon-qrcode
* glyphicon glyphicon-barcode
* glyphicon glyphicon-tag
* glyphicon glyphicon-tags
* glyphicon glyphicon-book
* glyphicon glyphicon-bookmark
* glyphicon glyphicon-print
* glyphicon glyphicon-camera
* glyphicon glyphicon-font
* glyphicon glyphicon-bold
* glyphicon glyphicon-italic
* glyphicon glyphicon-text-height
* glyphicon glyphicon-text-width
* glyphicon glyphicon-align-left
* glyphicon glyphicon-align-center
* glyphicon glyphicon-align-right
* glyphicon glyphicon-align-justify
* glyphicon glyphicon-list
* glyphicon glyphicon-indent-left
* glyphicon glyphicon-indent-right
* glyphicon glyphicon-facetime-video
* glyphicon glyphicon-picture
* glyphicon glyphicon-map-marker
* glyphicon glyphicon-adjust
* glyphicon glyphicon-tint
* glyphicon glyphicon-edit
* glyphicon glyphicon-share
* glyphicon glyphicon-check
* glyphicon glyphicon-move
* glyphicon glyphicon-step-backward
* glyphicon glyphicon-fast-backward
* glyphicon glyphicon-backward
* glyphicon glyphicon-play
* glyphicon glyphicon-pause
* glyphicon glyphicon-stop
* glyphicon glyphicon-forward
* glyphicon glyphicon-fast-forward
* glyphicon glyphicon-step-forward
* glyphicon glyphicon-eject
* glyphicon glyphicon-chevron-left
* glyphicon glyphicon-chevron-right
* glyphicon glyphicon-plus-sign
* glyphicon glyphicon-minus-sign
* glyphicon glyphicon-remove-sign
* glyphicon glyphicon-ok-sign
* glyphicon glyphicon-question-sign
* glyphicon glyphicon-info-sign
* glyphicon glyphicon-screenshot
* glyphicon glyphicon-remove-circle
* glyphicon glyphicon-ok-circle
* glyphicon glyphicon-ban-circle
* glyphicon glyphicon-arrow-left
* glyphicon glyphicon-arrow-right
* glyphicon glyphicon-arrow-up
* glyphicon glyphicon-arrow-down
* glyphicon glyphicon-share-alt
* glyphicon glyphicon-resize-full
* glyphicon glyphicon-resize-small
* glyphicon glyphicon-exclamation-sign
* glyphicon glyphicon-gift
* glyphicon glyphicon-leaf
* glyphicon glyphicon-fire
* glyphicon glyphicon-eye-open
* glyphicon glyphicon-eye-close
* glyphicon glyphicon-warning-sign
* glyphicon glyphicon-plane
* glyphicon glyphicon-calendar
* glyphicon glyphicon-random
* glyphicon glyphicon-comment
* glyphicon glyphicon-magnet
* glyphicon glyphicon-chevron-up
* glyphicon glyphicon-chevron-down
* glyphicon glyphicon-retweet
* glyphicon glyphicon-shopping-cart
* glyphicon glyphicon-folder-close
* glyphicon glyphicon-folder-open
* glyphicon glyphicon-resize-vertical
* glyphicon glyphicon-resize-horizontal
* glyphicon glyphicon-hdd
* glyphicon glyphicon-bullhorn
* glyphicon glyphicon-bell
* glyphicon glyphicon-certificate
* glyphicon glyphicon-thumbs-up
* glyphicon glyphicon-thumbs-down
* glyphicon glyphicon-hand-right
* glyphicon glyphicon-hand-left
* glyphicon glyphicon-hand-up
* glyphicon glyphicon-hand-down
* glyphicon glyphicon-circle-arrow-right
* glyphicon glyphicon-circle-arrow-left
* glyphicon glyphicon-circle-arrow-up
* glyphicon glyphicon-circle-arrow-down
* glyphicon glyphicon-globe
* glyphicon glyphicon-wrench
* glyphicon glyphicon-tasks
* glyphicon glyphicon-filter
* glyphicon glyphicon-briefcase
* glyphicon glyphicon-fullscreen
* glyphicon glyphicon-dashboard
* glyphicon glyphicon-paperclip
* glyphicon glyphicon-heart-empty
* glyphicon glyphicon-link
* glyphicon glyphicon-phone
* glyphicon glyphicon-pushpin
* glyphicon glyphicon-usd
* glyphicon glyphicon-gbp
* glyphicon glyphicon-sort
* glyphicon glyphicon-sort-by-alphabet
* glyphicon glyphicon-sort-by-alphabet-alt
* glyphicon glyphicon-sort-by-order
* glyphicon glyphicon-sort-by-order-alt
* glyphicon glyphicon-sort-by-attributes
* glyphicon glyphicon-sort-by-attributes-alt
* glyphicon glyphicon-unchecked
* glyphicon glyphicon-expand
* glyphicon glyphicon-collapse-down
* glyphicon glyphicon-collapse-up
* glyphicon glyphicon-log-in
* glyphicon glyphicon-flash
* glyphicon glyphicon-log-out
* glyphicon glyphicon-new-window
* glyphicon glyphicon-record
* glyphicon glyphicon-save
* glyphicon glyphicon-open
* glyphicon glyphicon-saved
* glyphicon glyphicon-import
* glyphicon glyphicon-export
* glyphicon glyphicon-send
* glyphicon glyphicon-floppy-disk
* glyphicon glyphicon-floppy-saved
* glyphicon glyphicon-floppy-remove
* glyphicon glyphicon-floppy-save
* glyphicon glyphicon-floppy-open
* glyphicon glyphicon-credit-card
* glyphicon glyphicon-transfer
* glyphicon glyphicon-cutlery
* glyphicon glyphicon-header
* glyphicon glyphicon-compressed
* glyphicon glyphicon-earphone
* glyphicon glyphicon-phone-alt
* glyphicon glyphicon-tower
* glyphicon glyphicon-stats
* glyphicon glyphicon-sd-video
* glyphicon glyphicon-hd-video
* glyphicon glyphicon-subtitles
* glyphicon glyphicon-sound-stereo
* glyphicon glyphicon-sound-dolby
* glyphicon glyphicon-sound-5-1
* glyphicon glyphicon-sound-6-1
* glyphicon glyphicon-sound-7-1
* glyphicon glyphicon-copyright-mark
* glyphicon glyphicon-registration-mark
* glyphicon glyphicon-cloud-download
* glyphicon glyphicon-cloud-upload
* glyphicon glyphicon-tree-conifer
* glyphicon glyphicon-tree-deciduous
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
IFRAMES
--------------------------------------------------------------------------------
Los iframes deberán utilizarse únicamente en caso de ser necesario.
EJEMPLO BÁSICO
<iframe frameborder="0" height="430" src="http://portaltransparencia.gob.mx/" width="100%"></iframe>
CLASES DE AYUDA
--------------------------------------------------------------------------------
Existen 3 clases de ayuda que servirán para dar un margen de 64px ya sea
superior, inferior o ambos.
margen superior: .top-buffer margen inferior: .bottom-buffer margen vertical:
.vertical-buffer
ENLACES
* Participa
* Publicaciones Oficiales
* Marco Jurídico
* Plataforma Nacional de Transparencia
* Alerta
* Denuncia
¿QUÉ ES GOB.MX?
Es el portal único de trámites, información y participación ciudadana. Leer más
* Portal de datos abiertos
* Declaración de accesibilidad
* Aviso de privacidad integral
* Aviso de privacidad simplificado
* Términos y Condiciones
* Política de seguridad
* Mapa de sitio
DENUNCIA CONTRA SERVIDORES PÚBLICOS
SÍGUENOS EN
*
*