Guía de Estilos para aplicar a sitios web del Gobierno del Estado de Chiapas

Objetivo


publicado 14-01-2020

El objetivo de esta guía es brindar los elementos de diseño necesarios para estandarizar los contenidos de los sitios web con la identidad gráfica del Gobierno de Chiapas.

Fortalecer la identidad gubernamental al homologar la funcionalidad e imagen de todos los sitios web para mejorar la experiencia del usuario, promover la modernización tecnológica y administrativa al interior de las instancias gubernamentales.

Configuración básica


publicado 14-01-2020

La configuración de la cabecera y pie de página con la identidad gráfica del Gobierno de Chiapas en los sitios web es dinámica y muy facil de implementar.

Para la configuración de la cabecera y pie de página no es necesario descargar ningún archivo. Solo ingrese una hoja de estilo y un archivo con código javascript en los documentos html que así lo requiera. Estos archivos (css y javascript) se encargaran de crear la cabecera y pié de página del sitio web similar a la del sitio www.chiapas.gob.mx

La hoja de estilo y el archivo con código javascript se encuentran alojados en nuestro CDN (Content Delivery Network - Red de Distribución de Contenidos). Se recomienda ocupar los archivos alojados en el CDN, ya que así las actualizaciones se reflejarán en automático en los sitios web.

  1. Copie la ruta de la hoja de estilos alojado en nuestro CDN: https://chiapas.gob.mx/cdnchiapas/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://chiapas.gob.mx/cdnchiapas/styles/main.css"  rel= "stylesheet">
    										</head>
    									
    								
  3. Copie la ruta del archivo de javascript alojado en nuestro CDN: https://chiapas.gob.mx/cdnchiapas/chisjs.js
  4. Antes de cerrarse la etiqueta <body> de cada html ingrese la ruta copiada del script de la siguiente forma :

    									
    										...
    										    <script src="https://chiapas.gob.mx/cdnchiapas/chisjs.js"></script>
    										</body>
    									
    								

Ejemplo básico


publicado 14-01-2020

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 CHIAPAS.GOB.mx</title>
								
								
									<!-- CSS -->
									<link href="/favicon.ico" rel="shortcut icon">
									<link href="https://chiapas.gob.mx/cdnchiapas/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://chiapas.gob.mx/cdnchiapas/chisjs.js"></script>
								
								  </body>
								</html>
							
						

Diseño web adaptable


publicado 14-01-2020

El diseño web adaptable (también diseño web adaptativo o responsivo), se basa en el diseño y desarrollo web cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se este utilizando. Hoy día las páginas web se ven en multitud de dispositivos como tabletas, teléfonos inteligentes, libros electrónicos, portátiles, PC, etcétera. Esta tecnología pretende que con un único diseño web, todo se vea correctamente en cualquier dispositivo.

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


publicado 14-01-2020

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 #0C0206.

#000000
#621132
#560F2C
#310919
#0C0206
#f6f6f6
#FFFFFF
#D0021B
#585f69

Barra de subnavegación


publicado 14-01-2020

Este framework tiene la capacidad de insertar la cabecera y pie de página de www.chiapas.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 encontrará alojada en nuestro CDN: https://chiapas.gob.mx/cdnchiapas/styles/main.css Antes de cerrarse la etiqueta de cada html ingrese la ruta copiada de la hoja de estilo de la siguiente forma : Copie la ruta de la siguiente liga de nuestro archivo de javascript que se encontrará alojada en nuestro CDN: https://chiapas.gob.mx/cdnchiapas/styles/main.css Antes de cerrarse la etiqueta de cada html ingrese la ruta del script copiada de la siguiente forma :

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

												<nav class="navbar navbar-submenu 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>

Formulario


publicado 14-01-2020

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

<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.

Botones


publicado 14-01-2020

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-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.

<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>.

<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.

<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.

<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.

<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 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.

<!-- 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


publicado 14-01-2020

En esta sección se describe todo lo relacionado con paginadores.

<ul class="pagination">
						<li><a href="#">&laquo;</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="#">&raquo;</a></li>
					  </ul>

Encabezados


publicado 14-01-2020

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


publicado 14-01-2020


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


publicado 14-01-2020

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


publicado 14-01-2020

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.

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


publicado 14-01-2020

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


publicado 14-01-2020

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.
<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">&times;</span></button>
						<strong>¡Precaución!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					  </div>

Tooltips


publicado 14-01-2020

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


publicado 14-01-2020

Paneles colapsables para mostrar/ocultar bloques de forma simultánea.

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>
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)


publicado 14-01-2020

Permiten mostrar diferentes tipos de contenido dependiendo de la pestaña seleccionada.

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


publicado 14-01-2020

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 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


publicado 14-01-2020

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ón
https://code.jquery.com/jquery-1.12.4.js
Ambiente de producción con certificado SSL
https://code.jquery.com/ui/1.12.1/jquery-ui.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

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:
$(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="glyphicon glyphicon-calendar" aria-hidden="true"></span>
						</div>
					  ...
Javascript:
$(function() {
						$('#calendarYear').datepicker({changeYear: true});
					  });
					  

Para más información leer la siguiente documentación: jQuery Datepicker.

Íconos


publicado 14-01-2020

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


publicado 14-01-2020

Los iframes deberán utilizarse únicamente en caso de ser necesario.

Ejemplo básico

<iframe frameborder="0" height="430" src="https://dnt.icti.chiapas.gob.mx/cti/" width="100%"></iframe>