Aa+ Aa-
Inicio Herramientas Diseños Guía

Guía

Pestañas

Contenido de pestaña 1
Contenido de pestaña 2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<ul class="nav nav-tabs" role="tablist"> <li class="nav-item"><a aria-controls="pestana1" aria-selected="true" class="nav-link active" data-toggle="tab" href="#pestana1" role="tab">Pesta&amp;ntilde;a 1</a></li> <li class="nav-item"><a aria-controls="pestana2" aria-selected="false" class="nav-link" data-toggle="tab" href="#pestana2" role="tab">Pesta&amp;ntilde;a 2</a></li> <li class="nav-item"><a aria-controls="pestana3" aria-selected="false" class="nav-link" data-toggle="tab" href="#pestana3" role="tab">Pesta&amp;ntilde;a 3 - Acordi&amp;oacute;n</a></li> </ul> <div class="tab-content"> <div aria-labelledby="pestana1-tab" class="tab-pane fade show active" id="pestana1" role="tabpanel">Contenido de pesta&amp;ntilde;a 1</div> <div aria-labelledby="pestana2-tab" class="tab-pane fade" id="pestana2" role="tabpanel">Contenido de pesta&amp;ntilde;a 2</div> <div aria-labelledby="pestana3-tab" class="tab-pane fade" id="pestana3" role="tabpanel"> <div class="accordion" id="tab-acordion-padre"> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#tab-acordion-01" data-toggle="collapse" type="button">Acordion 1 <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse" data-parent="#tab-acordion-padre" id="tab-acordion-01"> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&amp;#39;t heard of them accusamus labore sustainable VHS.</p> </div> </div> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#tab-acordion-02" data-toggle="collapse" type="button">Acordion 2 <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse" data-parent="#tab-acordion-padre" id="tab-acordion-02"> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&amp;#39;t heard of them accusamus labore sustainable VHS.</p> </div> </div> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#tab-acordion-03" data-toggle="collapse" type="button">Acordion 3 <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse " data-parent="#tab-acordion-padre" id="tab-acordion-03"> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&amp;#39;t heard of them accusamus labore sustainable VHS.</p> </div> </div> </div> </div> </div>

Acordión

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div class="accordion" id="acordion-padre"> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#acordion-00" data-toggle="collapse" type="button">Cartilla Anticorrupci&amp;oacute;n - Edici&amp;oacute;n Abreviada <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse" data-parent="#acordion-padre" id="acordion-00"><object data="https://www.gob.mx/cms/uploads/attachment/file/194144/Manual_SNA.pdf"></object></div> </div> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#acordion-01" data-toggle="collapse" type="button">Informe FEAI - Octubre 2019 <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse" data-parent="#acordion-padre" id="acordion-01"> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&amp;#39;t heard of them accusamus labore sustainable VHS.</p> </div> </div> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#acordion-02" data-toggle="collapse" type="button">Informe FEAI - Septiembre 2019 <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse" data-parent="#acordion-padre" id="acordion-02"> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&amp;#39;t heard of them accusamus labore sustainable VHS.</p> </div> </div> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#acordion-03" data-toggle="collapse" type="button">Acuerdo A01219 por el que se instala la Fiscal&amp;iacute;a Especializada en Asuntos Internos <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse " data-parent="#acordion-padre" id="acordion-03"> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&amp;#39;t heard of them accusamus labore sustainable VHS.</p> </div> </div> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#acordion-04" data-toggle="collapse" type="button">Pol&amp;iacute;tica Antisoborno <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse" data-parent="#acordion-padre" id="acordion-04"> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&amp;#39;t heard of them accusamus labore sustainable VHS.</p> </div> </div> </div>

Acordión Bicolor

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div class="accordion acordion-bicolor" id="acordion-padre"> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#acordion-00" data-toggle="collapse" type="button">Cartilla Anticorrupci&amp;oacute;n - Edici&amp;oacute;n Abreviada <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse" data-parent="#acordion-padre" id="acordion-00"><object data="https://www.gob.mx/cms/uploads/attachment/file/194144/Manual_SNA.pdf"></object></div> </div> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#acordion-01" data-toggle="collapse" type="button">Informe FEAI - Octubre 2019 <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse" data-parent="#acordion-padre" id="acordion-01"> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&amp;#39;t heard of them accusamus labore sustainable VHS.</p> </div> </div> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#acordion-02" data-toggle="collapse" type="button">Informe FEAI - Septiembre 2019 <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse" data-parent="#acordion-padre" id="acordion-02"> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&amp;#39;t heard of them accusamus labore sustainable VHS.</p> </div> </div> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#acordion-03" data-toggle="collapse" type="button">Acuerdo A01219 por el que se instala la Fiscal&amp;iacute;a Especializada en Asuntos Internos <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse " data-parent="#acordion-padre" id="acordion-03"> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&amp;#39;t heard of them accusamus labore sustainable VHS.</p> </div> </div> <div class="bloque"> <div class="acordion-barra"><button aria-expanded="false" data-target="#acordion-04" data-toggle="collapse" type="button">Pol&amp;iacute;tica Antisoborno <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></button></div> <div class="collapse" data-parent="#acordion-padre" id="acordion-04"> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&amp;#39;t heard of them accusamus labore sustainable VHS.</p> </div> </div> </div>

Acordión folder animado

Nombre Documento
Nombre del documento PDF
Nombre Documento
Nombre del documento PDF
Nombre del documento PDF
Nombre del documento PDF
Nombre del documento PDF

 

<div id="accordion-0"> <hr class="separador" /> <h3>Acordi&amp;oacute;n folder animado</h3> <div id="accordion-1"> <div class="card"> <div class="card-header" id="heading-01"> <h5 class="folder-icon-02"><button aria-controls="collapse-01" aria-expanded="false" class="btn btn-light" data-target="#collapse-01" data-toggle="collapse">&nbsp;Acorde&amp;oacute;n simple</button></h5> </div> <div aria-labelledby="heading-01" class="collapse" data-parent="#accordion-0" id="collapse-01"> <div class="card-body"> <table class="table table-striped"> <thead> <tr> <th class="alert alert-secondary" scope="col">Nombre</th> <th class="alert alert-secondary" scope="col" style="text-align: center;">Documento</th> </tr> </thead> <tbody> <tr> <td>Nombre del documento</td> <td style="text-align: center;"><a button="" class="btn btn-01" href="http://ruta/a/mi/documento.pdf" target="_blank">PDF</a></td> </tr> </tbody> </table> </div> </div> </div> </div> <div id="accordion-2"> <div class="card"> <div class="card-header" id="heading-02"> <h5 class="folder-icon-01"><button aria-controls="collapse-02" aria-expanded="false" class="btn btn-light" data-target="#collapse-02" data-toggle="collapse">&nbsp;Acorde&amp;oacute;n anidado</button></h5> </div> <div aria-labelledby="heading-02" class="collapse" data-parent="#accordion-0" id="collapse-02"> <div class="card-body"> <div id="accordion-3"> <div class="card"> <div class="card-header" id="heading-03"> <h5 class="folder-icon-02"><button aria-controls="collapse-03" aria-expanded="false" class="btn btn-light" data-target="#collapse-03" data-toggle="collapse">&nbsp;Titulo del acorde&amp;oacute;n</button></h5> </div> <div aria-labelledby="heading-03" class="collapse" data-parent="#accordion-3" id="collapse-03"> <div class="card-body"> <table class="table"> <thead> <tr> <th class="alert alert-secondary" scope="col">Nombre</th> <th class="alert alert-secondary" scope="col" style="text-align: center;">Documento</th> </tr> </thead> <tbody> <tr> <td>Nombre del documento</td> <td style="text-align: center;"><a button="" class="btn btn-01" href="http://ruta/a/mi/documento.pdf" target="_blank">PDF</a></td> </tr> <tr> <td>Nombre del documento</td> <td style="text-align: center;"><a button="" class="btn btn-01" href="http://ruta/a/mi/documento.pdf" target="_blank">PDF</a></td> </tr> <tr> <td>Nombre del documento</td> <td style="text-align: center;"><a button="" class="btn btn-01" href="http://ruta/a/mi/documento.pdf" target="_blank">PDF</a></td> </tr> <tr> <td>Nombre del documento</td> <td style="text-align: center;"><a button="" class="btn btn-01" href="http://ruta/a/mi/documento.pdf" target="_blank">PDF</a></td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div>

 


Acordión flecha animado

Nombre Documento
Nombre del documento PDF
Nombre Documento
Nombre del documento PDF
Nombre del documento PDF
Nombre del documento PDF
Nombre del documento PDF

 

<div id="accordion-4"> <hr class="separador" /> <h3>Acordi&amp;oacute;n flecha animado</h3> <div id="accordion-5"> <div class="card"> <div class="card-header caret-header" id="heading-04"> <h5 class="caret-icon-02"><button aria-controls="collapse-04" aria-expanded="false" class="btn btn-light caret-button" data-target="#collapse-04" data-toggle="collapse">&nbsp;Acorde&amp;oacute;n simple</button></h5> </div> <div aria-labelledby="heading-04" class="collapse" data-parent="#accordion-4" id="collapse-04"> <div class="card-body"> <table class="table"> <thead> <tr> <th class="alert alert-secondary" scope="col">Nombre</th> <th class="alert alert-secondary" scope="col" style="text-align: center;">Documento</th> </tr> </thead> <tbody> <tr> <td>Nombre del documento</td> <td style="text-align: center;"><a button="" class="btn btn-01" href="http://ruta/a/mi/documento.pdf" target="_blank">PDF</a></td> </tr> </tbody> </table> </div> </div> </div> </div> <div id="accordion-6"> <div class="card"> <div class="card-header caret-header" id="heading-05"> <h5 class="caret-icon-01"><button aria-controls="collapse-05" aria-expanded="false" class="btn btn-light caret-button" data-target="#collapse-05" data-toggle="collapse">&nbsp;Acorde&amp;oacute;n anidado</button></h5> </div> <div aria-labelledby="heading-05" class="collapse" data-parent="#accordion-4" id="collapse-05"> <div class="card-body"> <div id="accordion-7"> <div class="card"> <div class="card-header caret-header" id="heading-06"> <h5 class="caret-icon-02"><button aria-controls="collapse-06" aria-expanded="false" class="btn btn-light caret-button" data-target="#collapse-06" data-toggle="collapse">&nbsp;Titulo del acorde&amp;oacute;n</button></h5> </div> <div aria-labelledby="heading-06" class="collapse" data-parent="#accordion-6" id="collapse-06"> <div class="card-body"> <table class="table"> <thead> <tr> <th class="alert alert-secondary" scope="col">Nombre</th> <th class="alert alert-secondary" scope="col" style="text-align: center;">Documento</th> </tr> </thead> <tbody> <tr> <td>Nombre del documento</td> <td style="text-align: center;"><a button="" class="btn btn-01" href="http://ruta/a/mi/documento.pdf" target="_blank">PDF</a></td> </tr> <tr> <td>Nombre del documento</td> <td style="text-align: center;"><a button="" class="btn btn-01" href="http://ruta/a/mi/documento.pdf" target="_blank">PDF</a></td> </tr> <tr> <td>Nombre del documento</td> <td style="text-align: center;"><a button="" class="btn btn-01" href="http://ruta/a/mi/documento.pdf" target="_blank">PDF</a></td> </tr> <tr> <td>Nombre del documento</td> <td style="text-align: center;"><a button="" class="btn btn-01" href="http://ruta/a/mi/documento.pdf" target="_blank">PDF</a></td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div>

 


Botones

Boton azul - link Boton gris - link Boton blanco - link

<button class="btn btn-01">Boton azul - button</button> <a class="btn btn-01" href="#">Boton azul - link</a><button class="btn btn-02">Boton gris - button</button> <a class="btn btn-02" href="#">Boton gris - link</a><button class="btn btn-03">Boton blanco - button</button> <a class="btn btn-03" href="#">Boton blanco - link</a>

Encabezados

<h1>H1</h1> <h2>H2 - Para t&amp;iacute;tulos</h2> <h2>H2 - Para t&amp;iacute;tulos</h2> <h2 class="titulo">H2 - Con class=&amp;quot;titulo&amp;quot;</h2> <h2 class="titulo"><a href="#">H2 - Con link y class=&amp;quot;titulo&amp;quot;</a></h2> <h3>H3 - Para subt&amp;iacute;tulos</h3> <h3 class="titulo">H3 - Con class=&amp;quot;titulo&amp;quot;</h3> <h3 class="titulo"><a href="#">H3 - Con link y class=&amp;quot;titulo&amp;quot;</a></h3> <h4>H4 - Para encabezados abajo de un subt&amp;iacute;tulo</h4> <h4><a href="#">H4 - Con link</a></h4> <h5>H5</h5> <h5><a href="#">H5 con link</a></h5> <h6>H6</h6> <h6><a href="#">H6 con link</a></h6>

Listas

Lista ordenada

  1. Lorem ipsum dolor sit ame.
  2. Consectetur adipiscing elit.
    1. Ipsum dolor sit ame
    2. Lorem a tellus pulvinar
    3. ullamcorper lacus et
  3. Cras ac lorem a tellus pulvinar.
  4. In dignissim tortor id libero vulputate mollis.

Lista desordenada

  • Lorem ipsum dolor sit ame.
  • Consectetur adipiscing elit.
    • Ipsum dolor sit ame
    • Lorem a tellus pulvinar
    • ullamcorper lacus et
  • Cras ac lorem a tellus pulvinar.
  • In dignissim tortor id libero vulputate mollis.
<h4>Lista ordenada</h4> <ol> <li>Lorem ipsum dolor sit ame.</li> <li>Consectetur adipiscing elit. <ol type="a"> <li>Ipsum dolor sit ame</li> <li>Lorem a tellus pulvinar</li> <li>ullamcorper lacus et</li> </ol> </li> <li>Cras ac lorem a tellus pulvinar.</li> <li>In dignissim tortor id libero vulputate mollis.</li> </ol> <h4>Lista desordenada</h4> <ul> <li>Lorem ipsum dolor sit ame.</li> <li>Consectetur adipiscing elit. <ul> <li>Ipsum dolor sit ame</li> <li>Lorem a tellus pulvinar</li> <li>ullamcorper lacus et</li> </ul> </li> <li>Cras ac lorem a tellus pulvinar.</li> <li>In dignissim tortor id libero vulputate mollis.</li> </ul>

Tablas

Mes Ingresos Egresos
Enero $100 $50
Febrero $200 $50
Marzo $250 $80
Abril $100 $100
Mayo $200 $10
Total $750 $190
<table class="tabla tabla-01"> <thead> <tr> <th>Mes</th> <th>Ingresos</th> <th>Egresos</th> </tr> </thead> <tbody> <tr> <td>Enero</td> <td>$100</td> <td>$50</td> </tr> <tr> <td>Febrero</td> <td>$200</td> <td>$50</td> </tr> <tr> <td>Marzo</td> <td>$250</td> <td>$80</td> </tr> <tr> <td>Abril</td> <td>$100</td> <td>$100</td> </tr> <tr> <td>Mayo</td> <td>$200</td> <td>$10</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>$750</td> <td>$190</td> </tr> </tfoot> </table>

Alertas

<div class="alert alert-primary" role="alert">Alerta primario (alert-primary). Ejemplo de <a class="alert-link" href="#">link</a></div> <div class="alert alert-secondary" role="alert">Alerta secudario (alert-secondary). Ejemplo de <a class="alert-link" href="#">link</a></div> <div class="alert alert-success" role="alert">Alerta de &amp;eacute;xito (alert-success). Ejemplo de <a class="alert-link" href="#">link</a></div> <div class="alert alert-danger" role="alert">Alerta de peligro (alert-danger). Ejemplo de <a class="alert-link" href="#">link</a></div> <div class="alert alert-warning" role="alert">Alerta de advertencia (alert-warning). Ejemplo de <a class="alert-link" href="#">link</a></div> <div class="alert alert-info" role="alert">Alerta de informaci&amp;oacute;n (alert-info). Ejemplo de <a class="alert-link" href="#">link</a></div> <div class="alert alert-light" role="alert">Alerta en color claro (alert-light). Ejemplo de <a class="alert-link" href="#">link</a></div> <div class="alert alert-dark" role="alert">Alerta en color oscuro (alert-light). Ejemplo de <a class="alert-link" href="#">link</a></div>

Tooltips en texto

Ejemplo de tooltip arriba

Ejemplo de tooltip derecho

Ejemplo de tooltip izquierdo

Ejemplo de tooltip abajo

Tooltips en botones

<h3>Tooltips en texto</h3> <p>Ejemplo de <strong data-placement="top" data-toggle="tooltip" title="Tooltip arriba">tooltip arriba</strong></p> <p>Ejemplo de <strong data-placement="right" data-toggle="tooltip" title="Tooltip derecho">tooltip derecho</strong></p> <p>Ejemplo de <strong data-placement="left" data-toggle="tooltip" title="Tooltip izquierdo">tooltip izquierdo</strong></p> <p>Ejemplo de <strong data-placement="bottom" data-toggle="tooltip" title="Tooltip abajo">tooltip abajo</strong></p> <h3>Tooltips en botones</h3> <button class="btn btn-01" data-placement="left" data-toggle="tooltip" title="Tooltip izquierdo" type="button">tooltip izquierdo</button><button class="btn btn-01" data-placement="top" data-toggle="tooltip" title="Tooltip arriba" type="button">tooltip arriba</button><button class="btn btn-01" data-placement="bottom" data-toggle="tooltip" title="Tooltip abajo" type="button">tooltip abajo</button><button class="btn btn-01" data-placement="right" data-toggle="tooltip" title="Tooltip derecho" type="button">tooltip derecho</button>

Ventana Modal

Abrir ventana modal (link)

<button class="btn btn-01" data-target="#modalEjemplo" data-toggle="modal" type="button">Abrir ventana modal (button)</button> <a class="btn btn-01" data-target="#modalEjemplo" data-toggle="modal" href="#"> Abrir ventana modal (link) </a> <!-- MODAL EJEMPLO --> <div aria-hidden="true" aria-labelledby="exampleModalCenterTitle" class="modal fade" id="modalEjemplo" role="dialog" tabindex="-1"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenterTitle">Aqu&amp;iacute; va el t&amp;iacute;tulo</h5> <button aria-label="Close" class="close" data-dismiss="modal" type="button"><i class="fas fa-times-circle"></i></button></div> <div class="modal-body"> <p>Contenido</p> </div> <div class="modal-footer"><button class="btn btn-01" type="button">Enviar</button></div> </div> </div> </div>

Iconos

Se emplean los iconos de Font Awesome. La galería de iconos se puede consultar en: https://fontawesome.com/icons?d=gallery


Multimedia

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/KM8-PaqYPu4"></iframe>

Audio

Spot Visitel lengua maya

<source src="img-ejemplo/audio-ejemplo.mp3" type="audio/mpeg" />