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 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.
- Copie la ruta de la siguiente liga de nuestra hoja de estilos que se encuentra alojada
en nuestro CDN:
https://framework-gb.cdn.gob.mx/gm/v4/css/main.css
- 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/gm/v4/css/main.css" rel="stylesheet"> </head>
- Copie la ruta de la siguiente liga de nuestro archivo de javascript que se encuentra alojada en
nuestro CDN:
https://framework-gb.cdn.gob.mx/gm/v4/js/gobmx.js
- 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/gm/v4/js/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/gm/v4/qa/css/main.css
Para el archivo javascript, la ruta en ambiente prueba será el siguiente: https://framework-gb.cdn.gob.mx/gm/v4/qa/js/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á en los sitios:
Ambiente de producción con certificado SSL- Hoja de estilos:
https://framework-gb.cdn.gob.mx/gm/v4/css/main.css
- Archivo javascript:
https://framework-gb.cdn.gob.mx/gm/v4/js/gobmx.js
- Hoja de estilos:
https://framework-gb.cdn.gob.mx/gm/v4/qa/css/main.css
- Archivo javascript:
https://framework-gb.cdn.gob.mx/gm/v4/qa/js/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 4.4.0. Para más información consultar la documentación
- Jquery versión 3.5.1. Para más información consultar la documentación
- Modernizr versión 3.11.0. Para más información consultar la documentación
- Popper versión 1.16.1. Para más información consultar la documentación
- Montserrat (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="https://framework-gb.cdn.gob.mx/gm/v4/image/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 3.0.0 o
mayor.
Para los 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="https://framework-gb.cdn.gob.mx/gm/v4/image/favicon.ico" rel="shortcut icon">
<link href="https://framework-gb.cdn.gob.mx/gm/v4/css/main.css" rel="stylesheet">
</head>
<body>
<!-- Contenido -->
<main class="page">
<div class="container"> </div>
</main>
<!-- JS -->
<script src="https://framework-gb.cdn.gob.mx/gm/v4/js/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.
Ejemplo:
<div class="row">
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
</div>
<div class="row">
<div class="col-8">.col-8</div>
<div class="col-4">.col-4</div>
</div>
<div class="row">
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
</div>
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
Gama de colores
El cuerpo de texto dentro de los documentos, deberá ir en negro #545454 y el resto de los colores que pueden ser utilizados, son los siguientes:
- #9F2241
- #235B4E
- #DDC9A3
- #98989A
- #691C32
- #10312B
- #FFFFFF
- #BC955C
- #6F7271
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 uso particular. 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
<nav class="navbar navbar-expand-md navbar-dark bg-light sub-navbar navbar-fixed-top">
<div class="container">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#subNavBarDropdown" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand sub-navbar" href="#">Semarnat</a>
<div class="collapse navbar-collapse" id="subNavBarDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link subnav-link" href="#">Enlace</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link subnav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Desplegable
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Acción</a>
<a class="dropdown-item" href="#">Otra acción</a>
<div class="dropdown-divider""></div>
<a class="dropdown-item" href="#">Algo más aquí</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link subnav-link" href="#">Enlace</a>
</li>
</ul>
</div>
</div>
</nav>
Uso de logotipos
Los logotipos de cada secretaría o dependencia, se deberán de colocar 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 elementos
<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
<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.
<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-groups
por filas de cuadrícula
derminadas con .row
.
<form class=role="form">
<div class="form-group row">
<label class="col-3 col-form-label" for="email-03">Correo electrónico:</label>
<div class="col-9">
<input class="form-control" id="email-03" placeholder="Correo electrónico" type="text">
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label" for="password-03">Contraseña:</label>
<div class="col-9">
<input class="form-control" id="password-03" placeholder="Contraseña" type="password">
</div>
</div>
<div class="form-group row">
<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 row">
<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).
<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.
<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.
<!-- Botón básico -->
<button type="button" class="btn btn-secondary">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
,
o .btn-sm
para modificar el tamaño del botón.
<p>
<button class="btn btn-secondary btn-lg" type="button">Grande</button>
<button class="btn btn-primary btn-lg" type="button">Grande</button>
</p>
<p>
<button class="btn btn-secondary" type="button">Básico</button>
<button class="btn btn-primary" type="button">Básico</button>
</p>
<p>
<button class="btn btn-secondary btn-sm" type="button">Chico</button>
<button class="btn btn-primary btn-sm" type="button">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>
.
<button class="btn btn-secondary 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.
<button class="btn btn-secondary 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.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-secondary">Izquierda</button>
<button type="button" class="btn btn-secondary">Centro</button>
<button type="button" class="btn btn-secondary">Derecha</button>
</div>
Grupo de botones vertical
Conjunto de botones que aparecerán apilados verticalmente en lugar de horizontal.
<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.
<div class="btn-group d-flex" 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.
<!-- Icono del lado izquierdo del botón -->
<button class="btn btn-secondary" type="button">
<span class="bootstrap-icons" aria-hidden="true"><i class="bi bi-search"></i></span>
Ejemplo
</button>
<!-- Icono del lado derecho del botón -->
<button class="btn btn-primary" type="button">
Ejemplo
<span class="bootstrap-icons" aria-hidden="true"><i class="bi bi-search"></i></span>
</button>
Paginación
En esta sección se describe todo lo relacionado con paginadores.
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
Texto
separado
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
Ejemplo texto
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 del 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
- 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.
<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
- Uno
- Dos
- Tres
<ul class="list-inline">
<li class="list-inline-item">....</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
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table">
...
</table>
Filas marcadas con franjas
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-striped">
...
</table>
Tablas bordeadas
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table table-bordered">
...
</table>
Tablas responsivas
# |
|
|
|
|
|
|
---|---|---|---|---|---|---|
1 |
|
|
|
|
|
|
2 |
|
|
|
|
|
|
3 |
|
|
|
|
|
|
<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
).
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Ejemplo de alerta con botón de cerrar
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<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.
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="icon icon-home"></i></a></li>
<li class="breadcrumb-item"><a href="#">Inicio</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Archivo</a></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-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip en la izquierda">Tooltip en la izquierda</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip arriba">Tooltip arriba</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip abajo">Tooltip abajo</button>
<button type="button" class="btn btn-secondary" 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.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Bloque 1</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Bloque 2</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Ambos</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
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="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-parent="#accordion2" data-toggle="collapse" href="#panel-02" aria-expanded="true" aria-controls="panel-02">
Título del bloque 1
</a>
</h4>
<button type="button" class="collpase-button collapsed" data-parent="#accordion2" data-toggle="collapse" href="#panel-02"></button>
</div>
<div class="panel-collapse collapse" id="panel-02">
<div class="panel-body">
<p>...</p>
</div>
</div>
</div>
</div>
Pestañas (tabs)
Permiten mostrar diferentes tipos de contenido dependiendo de la pestaña seleccionada.
<div>
<p>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-tab-01" data-toggle="tab" href="#nav-01" role="tab" aria-controls="nav-01" aria-selected="true">Pestaña 1</a>
<a class="nav-link" id="nav-tab-02" data-toggle="tab" href="#nav-02" role="tab" aria-controls="nav-02" aria-selected="false">Pestaña 2</a>
<a class="nav-link" id="nav-tab-03" data-toggle="tab" href="#nav-03" role="tab" aria-controls="nav-03" aria-selected="false">Pestaña 3</a>
<a class="nav-link" id="nav-tab-04" data-toggle="tab" href="#nav-04" role="tab" aria-controls="nav-04" aria-selected="false">Pestaña 4</a>
</div>
</p>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-01" role="tabpanel" aria-labelledby="nav-tab-01">
<p>...</p>
</div>
<div class="tab-pane fade" id="nav-02" role="tabpanel" aria-labelledby="nav-tab-02">
<p>...</p>
</div>
<div class="tab-pane fade" id="nav-03" role="tabpanel" aria-labelledby="nav-tab-03">
<p>...</p>
</div>
<div class="tab-pane fade" id="nav-04" role="tabpanel" aria-labelledby="nav-tab-04">
<p>...</p>
</div>
</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.
<div class="modal" tabindex="1">
<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-secondary" 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" class="btn btn-primary" 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.
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ónhttps://framework-gb.cdn.gob.mx/gm/v4/qa/js/jquery-ui-datepicker.js
Ambiente de producción con certificado SSL
https://framework-gb.cdn.gob.mx/gm/v4/qa/js/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.12.0
o mayor para que exista un correcto
funcionamiento del mismo.
Selector de fechas básico
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="bootstrap-icons" aria-hidden="true"><i class="bi bi-calendar"></i></span>
</div>
...
Javascript:
$gmx(document).ready(function() {
$('#calendar').datepicker();
});
Selector de fechas con selección de año
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="bootstrap-icons" aria-hidden="true"><i class="bi bi-calendar"></i></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>
Bootstrap icons
Se incluye los íconos de bootstrap icons en formato de fuente.
Prácticamente pueden ser utilizados en cualquier lugar, colocando el siguiente código.
<span class="bootstrap-icons" aria-hidden="true">
<i class="bi bi-search"></i>
</span>
Estos son algunos de los iconos mas comunes, la lista completa se puede consultar aquí
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