Manual de estilos CSS del portal institucional de la Universidad Central, código basado en bootstrap 4.0.
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Paleta de colores
1. PALETA DE COLORES PRINCIPALES
Colores institucionales |
Pantone (impresión) |
CMYK (impresión) |
RGB (pantalla) |
Web |
Pantone 378 |
C: 34 M: 0 Y: 100 K: 60 |
R: 99 G: 111 B: 7 |
#636F07 | |
Pantone 484 |
C: 0 M: 95 Y: 100 K: 29 |
R: 177 G: 31 B: 22 |
#B11F16 | |
Pantone Negro |
C: 0 M: 0 Y: 0 K: 100 |
R: 26 G: 23 B: 27 |
#1A171B | |
Pantone 384 |
C: 18 M: 0 Y: 100 K: 31 |
R: 172 G: 170 B: 0 |
#ACAA00 | |
Pantone 468 |
C: 6 M: 9 Y: 23 K: 0 |
R: 243 G: 231 B: 204 |
#F3E7CC |
2. PALETA DE COLORES SECUNDARIOS
Color complementarios |
Pantone (impresión) |
CMYK (impresión) |
RGB (pantalla) |
Web |
Pantone 300 |
C: 100 M: 70 Y: 0 K: 0 |
R: 0 G: 81 B: 158 |
#00519E | |
Pantone 294 |
C: 100 M: 100 Y: 30 K: 30 |
R: 18 G: 34 B: 83 |
#122253 | |
Pantone 108 |
C: 0 M: 20 Y: 90 K: 0 |
R: 254 G: 205 B: 26 |
#FECD1A | |
Pantone Orange 021 |
C: 0 M: 75 Y: 100 K: 0 |
R: 233 G: 93 B: 15 |
#E95D0F | |
Pantone 476 |
C: 30 M: 50 Y: 100 K: 75 |
R: 75 G: 54 B: 11 |
#4B360B | |
Pantone 3292 |
C: 80 M: 40 Y: 60 K: 30 |
R: 42 G: 97 B: 85 |
#2A6155 | |
Pantone 325 |
C: 60 M: 0 Y: 35 K: 0 |
R: 106 G: 191 B: 178 |
#6ABFB2 |
Componentes para la diagramación
3. TIPOGRAFIA EN TÍTULOS
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
4. LEAD
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">
Texto...
</p>
5. ETIQUETAS DE TEXTO EN LÍNEA
5.1 TEXTO DESTACADO
You can use the mark tag to highlight text.
<mark>Texto destacado... </mark>
5.2 TEXTO TACHADO
This line of text is meant to be treated as no longer accurate.
<del>Texto tachado... </del>
5.3 TEXTO SUBRAYADO
This line of text is meant to be treated as an addition to the document.
<ins>Texto subrayado... </ins>
5.4 TEXTO PIE DE NOTA
This line of text is meant to be treated as fine print.
<small>Texto pie de nota... </small>
5.5 TEXTO NEGRILLA
This line rendered as bold text.
<strong>Texto en negrilla... </strong>
5.6 TEXTO INCLINADO (ITALICA)
This line rendered as italicized text.
<em>Texto inclinado... </em>
6. CITAS EN BLOQUE (Blockquotes)
6.1 CITA BLOQUE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere.
<blockquote class="quote">
<p>Texto... </p>
</blockquote>
6.2 CITA BLOQUE CON AUTOR
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ipsum dolor sit amet, consectetur adipiscing elit Integer posuere.
— Autor Título...
<blockquote class="quote-con-autor">
<p >Texto... </p>
<footer class="blockquote-autor">— Autor... <cite title="Source Title">Título... </cite></footer>
</blockquote>
7. LISTADO (Viñetas)
7.1 LISTA TIPO 1
- Lorem ipsum dolor sit amet
- Phasellus iaculis
- Consectetur adipiscing
- Purus sodales
- Integer posuere
<ul class="list-unstyled">
<li>Primer nivel</li>
<ul>
<li>Segundo nivel
<ul>
<li>Tercer nivel</li>
</ul>
</li>
</ul>
</ul>
7.2 LISTA TIPO 2
- Lorem ipsum dolor sit amet.
- Integer posuere erat a ipsum
- Phasellus iaculis
- Consectetur adipiscing
- Purus sodales
- Consectetur adipiscing
<ul>
<li>Primer nivel</li>
<ul>
<li>Segundo nivel
<ul>
<li>Tercer nivel</li>
</ul>
</li>
</ul>
</ul>
7.1 LISTA TIPO 3
- Lorem ipsum dolor sit amet.
- Phasellus iaculis
- Consectetur adipiscing
- Purus sodales
- Consectetur adipiscing
<ol>
<l>Primer nivel</li>
<ol>
<li>Segundo nivel
<ol>
<li>Tercer nivel</li>
</ol>
</li>
</ol>
</ol>
8. Descripción
- Description lists
- A description list is perfect for defining terms.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Truncated term is truncated
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Nesting
-
- Nested definition list
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<dl class="row descripcion">
<dt class="col-sm-3">Descripción: </dt>
<dd class="col-sm-9">Texto... </dd>
<dt class="col-sm-3">Descripción parrafo: </dt>
<dd class="col-sm-9">
<p>Texto... </p>
<p>Texto... </p>
</dd>
<dt class="col-sm-3 text-truncate">Texto contínuo: </dt>
<dd class="col-sm-9">Texto... </dd>
<dt class="col-sm-3">Texto anidado: </dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Descripción; </dt>
<dd class="col-sm-8">Texto... </dd>
</dl>
</dd>
</dl>
9. ALERTAS
9.1 ALERTA INFORMACIÓN DE NIVEL 1
<div class="alert alert-primary" role="alert">
Texto...
</div>
9.2 ALERTA INFORMACIÓN DE NIVEL 2
<div class="alert alert-secondary" role="alert">
Texto...
</div>
9.3 ALERTA DE INFORMACIÓN
<div class="alert alert-success" role="alert">
Texto...
</div>
9.4 ALERTA INFORMACIÓN URGENTE
<div class="alert alert-danger" role="alert">
Texto...
</div>
9.5 ALERTA INFORMACIÓN DE ADVERTENCIA
<div class="alert alert-warning" role="alert">
Texto...
</div>
9.6 ALERTA INFORMACIÓN DE INTERÉS
<div class="alert alert-info" role="alert">
Texto...
</div>
9.7 ALERTA INFORMACIÓN FONDO BLANCO
<div class="alert alert-light" role="alert">
Texto...
</div>
9.8 ALERTA INFORMACIÓN FONDO GRIS
<div class="alert alert-dark" role="alert">
Texto...
</div>
9.9 ALERTA INFORMACIÓN FONDO VERDE CLARO
<div class="alert alert-cuarta" role="alert">
Texto...
</div>
9.10 ALERTA INFORMACIÓN FONDO GRIS PLATA
<div class="alert alert-quinta" role="alert">
Texto...
</div>
9.11 ALERTA INFORMACIÓN FONDO AMARILLO CAQUI
<div class="alert alert-sexta" role="alert">
Texto...
</div>
9.12 ALERTA INFORMACIÓN FONDO AMARILLO MOCASÍN
<div class="alert alert-septima" role="alert">
Texto...
</div>
9.13 ALERTA INFORMACIÓN CON ENLACE (link)
<div class="alert alert-primary" role="alert">
Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-secondary" role="alert">
Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-success" role="alert">
Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-danger" role="alert">
Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-warning" role="alert">
Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-info" role="alert">
Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-light" role="alert">
Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-dark" role="alert">
Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-cuarta" role="alert">
Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-quinta" role="alert">
Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-sexta" role="alert">
Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-septima" role="alert">
Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
9.14 Alerta con cierre
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
10. Botones
<a class="btn boton_descargar" href="#">
<span class="fa fa-download"> </span>
Descargar
</a>
<a class="btn boton_mas_informacion" href="#">
<span class="fa fa-plus"> </span>
Más información
</a>
<a class="btn boton_registrese" href="#">
<span class="fa fa-pencil"> </span>
Registrese aquí
</a>
<a class="btn boton-reproducir" href="#">
<span class="fa fa-play"> </span>
Reproducir
</a>
<a class="btn btn-comodin1" href="#">
<span class="fa fa-angle-double-left"> </span>
Comodín 1
</a>
<a class="btn btn-comodin2" href="#">
<span class="fa fa-angle-double-right"> </span>
Comodín 2
</a>
<a class="btn btn-comodin2" href="#">
<span class="fa fa-angle-double-down"> </span>
Comodín 3
</a>
<a class="btn btn-comodin4" href="#">
<span class="fa fa-angle-double-left"> </span>
Comodín 4
</a>
<a class="btn btn-primary boton-tipo-1" href="#">
boton
</a>
<a class="btn btn-primary boton-tipo-2" href="#">
boton
</a>
<a class="btn btn-primary boton-tipo-3" href="#">
boton
</a>
<a class="btn btn-primary boton-tipo-4" href="#">
boton
</a>
<a class="btn btn-primary boton-tipo-5" href="#">
boton
</a>
<a class="btn btn-primary boton-tipo-6" href="#">
boton
</a>
<a class="btn btn-primary boton-tipo-7" href="#">
boton
</a>
<a class="btn btn-primary boton-tipo-8" href="#">
boton
</a>
<button class="btn btn-outline-primary btn-outline-tipo-1" type="button">
boton
</button>
<button class="btn btn-outline-secondary" type="button">
boton
</button>
<button class="btn btn-outline-success" type="button">
boton
</button>
<button class="btn btn-outline-danger" type="button">
boton
</button>
<button class="btn btn-outline-warning" type="button">
boton
</button>
<button class="btn btn-outline-info" type="button">
boton
</button>
11. Destacados
Información destacada naranja
With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.
Más informaciónInformación destacada azul
With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.
Regístrese aquí
Información destacada verde
With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.
DescargarInformación destacada para reproducir
With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.
Reproducir
Destacado Texto
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Acordeon
<div id="accordion">
<div class="card">
<div class="cabezote-acordeon" id="headingOne">
<h5 class="mb-0">
<button aria-controls="collapseOne" aria-expanded="true" class="btn btn-acordeon collapsed" data-target="collapseOne" data-toggle="collapse">
Titulo acordeon
<span class="fa fa-angle-double-down"> </span>
</button>
</h5>
</div>
<div aria-labelledby="headingOne" class="collapse show" data-parent="#accordion" id="collapseOne">
<div class="cuerpo-acordeon">Texto acordeon...</div>
</div>
</div>
<div class="card">
<div class="cabezote-acordeon" id="headingTwo">
<h5 class="mb-0">
<button aria-controls="collapseTwo" aria-expanded="false" class="btn btn-acordeon collapsed" data-target="collapseTwo" data-toggle="collapse">
Titulo acordeon 2
<span class="fa fa-angle-double-down"> </span>
</button>
</h5>
</div>
<div aria-labelledby="headingTwo" class="collapse" data-parent="#accordion" id="collapseTwo">
<div class="cuerpo-acordeon">Texto acordeon 2...</div>
</div>
</div>
<div class="card">
<div class="cabezote-acordeon" id="headingThree">
<h5 class="mb-0">
<button aria-controls="collapseThree" aria-expanded="false" class="btn btn-acordeon collapsed" data-target="collapseThree" data-toggle="collapse">
Titulo acordeon 3
<span class="fa fa-angle-double-down"> </span>
</button>
</h5>
</div>
<div aria-labelledby="headingThree" class="collapse" data-parent="#accordion" id="collapseThree">
<div class="cuerpo-acordeon">Texto acordeon 3...</div>
</div>
</div>
</div>
Formulario
Caja de alerta
Comunidad Unicentralista
Por emergencia en el sector, les pedimos evacuen las instalaciones de la sede centro
Tablas
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Firstname | Lastname | |
---|---|---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
Tabla horizontal
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
Tabla vertical
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.
Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.
Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.
Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.
Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.
Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.
Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.
Modulo imagen
Diagramacion imagen texto
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur, nostrum. Quae provident sed corrupti officia perspiciatis error aliquam dolore exercitationem ab non nostrum nulla dolor nihil voluptatibus, ad, pariatur! Consequatur quisquam fugiat illo voluptas fugit sit quos, voluptatem cupiditate, veritatis architecto sequi voluptates aliquam doloremque, voluptate eum labore. Omnis est voluptatum reiciendis minima accusantium nihil vero amet, reprehenderit alias quam cum aliquid doloremque quisquam, obcaecati eaque rerum quasi, sequi repellendus? Quasi soluta doloremque distinctio enim sapiente aperiam non atque, quia qui delectus sit officiis, dolor animi incidunt iusto aut et doloribus. Dignissimos sapiente ad culpa sed enim at, suscipit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur, nostrum. Quae provident sed corrupti officia perspiciatis error aliquam dolore exercitationem ab non nostrum nulla dolor nihil voluptatibus, ad, pariatur! Consequatur quisquam fugiat illo voluptas fugit sit quos, voluptatem cupiditate, veritatis architecto sequi voluptates aliquam doloremque, voluptate eum labore. Omnis est voluptatum reiciendis minima accusantium nihil vero amet, reprehenderit alias quam cum aliquid doloremque quisquam, obcaecati eaque rerum quasi, sequi repellendus? Quasi soluta doloremque distinctio enim sapiente aperiam non atque, quia qui delectus sit officiis, dolor animi incidunt iusto aut et doloribus. Dignissimos sapiente ad culpa sed enim at, suscipit!
Diagramacion texto imagen
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur, nostrum. Quae provident sed corrupti officia perspiciatis error aliquam dolore exercitationem ab non nostrum nulla dolor nihil voluptatibus, ad, pariatur! Consequatur quisquam fugiat illo voluptas fugit sit quos, voluptatem cupiditate, veritatis architecto sequi voluptates aliquam doloremque, voluptate eum labore. Omnis est voluptatum reiciendis minima accusantium nihil vero amet, reprehenderit alias quam cum aliquid doloremque quisquam, obcaecati eaque rerum quasi, sequi repellendus? Quasi soluta doloremque distinctio enim sapiente aperiam non atque, quia qui delectus sit officiis, dolor animi incidunt iusto aut et doloribus. Dignissimos sapiente ad culpa sed enim at, suscipit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur, nostrum. Quae provident sed corrupti officia perspiciatis error aliquam dolore exercitationem ab non nostrum nulla dolor nihil voluptatibus, ad, pariatur! Consequatur quisquam fugiat illo voluptas fugit sit quos, voluptatem cupiditate, veritatis architecto sequi voluptates aliquam doloremque, voluptate eum labore. Omnis est voluptatum reiciendis minima accusantium nihil vero amet, reprehenderit alias quam cum aliquid doloremque quisquam, obcaecati eaque rerum quasi, sequi repellendus? Quasi soluta doloremque distinctio enim sapiente aperiam non atque, quia qui delectus sit officiis, dolor animi incidunt iusto aut et doloribus. Dignissimos sapiente ad culpa sed enim at, suscipit!
Diagramacion video texto
Esto es un video
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur, nostrum. Quae provident sed corrupti officia perspiciatis error aliquam dolore exercitationem ab non nostrum nulla dolor nihil voluptatibus, ad, pariatur! Consequatur quisquam fugiat illo voluptas fugit sit quos, voluptatem cupiditate, veritatis architecto sequi voluptates aliquam doloremque, voluptate eum labore. Omnis est voluptatum reiciendis minima accusantium nihil vero amet, reprehenderit alias quam cum aliquid doloremque quisquam, obcaecati eaque rerum quasi, sequi repellendus? Quasi soluta doloremque distinctio enim sapiente aperiam non atque, quia qui delectus sit officiis, dolor animi incidunt iusto aut et doloribus. Dignissimos sapiente ad culpa sed enim at, suscipit!
Esto es un video
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur, nostrum. Quae provident sed corrupti officia perspiciatis error aliquam dolore exercitationem ab non nostrum nulla dolor nihil voluptatibus, ad, pariatur! Consequatur quisquam fugiat illo voluptas fugit sit quos, voluptatem cupiditate, veritatis architecto sequi voluptates aliquam doloremque, voluptate eum labore. Omnis est voluptatum reiciendis minima accusantium nihil vero amet, reprehenderit alias quam cum aliquid doloremque quisquam, obcaecati eaque rerum quasi, sequi repellendus? Quasi soluta doloremque distinctio enim sapiente aperiam non atque, quia qui delectus sit officiis, dolor animi incidunt iusto aut et doloribus. Dignissimos sapiente ad culpa sed enim at, suscipit!
Diagramación 2 VIDEOS
Diagramación 3 VIDEOS
Diagramación 3 Columnas
Aquí va un título
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.
Aquí va un título
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.
Aquí va un título
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.
Diagramación variada
Aquí va un título
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.
Tablas
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Firstname | Lastname | |
---|---|---|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum aliquam blanditiis ipsum quibusdam consequatur, sapiente fuga ullam ducimus in facilis. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ipsum. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolores deleniti suscipit, error. Consequatur, aspernatur? Error. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae, alias odit? | Lorem ipsum dolor sit amet, consectetur adipisicing. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum aliquam blanditiis ipsum quibusdam consequatur, sapiente fuga ullam ducimus in facilis. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ipsum. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolores deleniti suscipit, error. Consequatur, aspernatur? Error. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae, alias odit? | Lorem ipsum dolor sit amet, consectetur adipisicing. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. |
Firstname | Lastname | |
---|---|---|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum aliquam blanditiis ipsum quibusdam consequatur, sapiente fuga ullam ducimus in facilis. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ipsum. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolores deleniti suscipit, error. Consequatur, aspernatur? Error. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae, alias odit? | Lorem ipsum dolor sit amet, consectetur adipisicing. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum aliquam blanditiis ipsum quibusdam consequatur, sapiente fuga ullam ducimus in facilis. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ipsum. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolores deleniti suscipit, error. Consequatur, aspernatur? Error. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae, alias odit? | Lorem ipsum dolor sit amet, consectetur adipisicing. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. |
tabs-tipo-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper dui vitae erat ornare eleifend. Vestibulum eu mi fermentum odio tincidunt ornare non aliquam dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer laoreet id lacus et interdum. Mauris id lacus facilisis, euismod leo sed, maximus justo. Curabitur imperdiet dignissim erat, at volutpat nisi fringilla ac. Donec consectetur feugiat tincidunt. Aliquam at metus diam. In facilisis nisl at dictum sodales. In sit amet dictum turpis. In efficitur viverra ipsum, in rhoncus ligula cursus a. Curabitur molestie eleifend volutpat.
Nullam a ligula lacinia, gravida mi sed, imperdiet quam. Nunc egestas interdum sapien, quis rhoncus massa dictum non. Etiam scelerisque quis est nec maximus. Etiam ac lacus dictum, mattis orci nec, laoreet elit. Morbi ut aliquam urna, sit amet dignissim eros. Sed finibus nibh in facilisis malesuada. Nulla gravida arcu eget enim tincidunt pulvinar. Nullam imperdiet, nunc non scelerisque rhoncus, metus leo porta risus, in tristique ante felis sit amet nulla. Vestibulum auctor in augue non varius. Aliquam erat volutpat. Vivamus faucibus finibus urna non interdum. Curabitur ultrices viverra erat, facilisis fermentum eros fermentum imperdiet. Nam posuere turpis vel enim dictum, vel fringilla magna fermentum. Sed eu efficitur nisl. Praesent fermentum enim et dui imperdiet, et ultrices arcu rhoncus. Vestibulum cursus consectetur finibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget bibendum magna. Curabitur sed imperdiet massa. Cras commodo metus quis nibh tincidunt, vel semper nulla rutrum. Sed at eros justo. Donec sit amet auctor risus. In enim urna, finibus ac interdum nec, molestie euismod nisi. Aliquam erat volutpat. Phasellus fermentum viverra orci sed rutrum.
Aliquam hendrerit porta ligula, a sodales nulla feugiat eu. In eget sodales neque, sed iaculis nulla. Fusce iaculis porttitor leo, ac laoreet leo gravida sit amet. Cras molestie tincidunt elementum. Proin cursus ex at mattis venenatis. Maecenas laoreet aliquet faucibus. Maecenas ultricies est eros, nec faucibus nisi cursus porttitor.
Morbi eu finibus ligula, id pretium massa. Nullam vitae scelerisque libero, eget fringilla neque. Nullam vitae est dictum nisi tempor lacinia vitae ac sem. Pellentesque lobortis justo vel lectus sodales eleifend. Proin commodo magna sapien, a lacinia lorem feugiat a. Aenean varius, ipsum et volutpat placerat, metus nulla pulvinar dolor, et porta metus orci non lorem. Quisque dapibus est in nulla suscipit condimentum non a massa. Curabitur mollis, augue sit amet hendrerit mattis, lectus justo semper nunc, non blandit libero metus ut ante. Mauris dapibus neque placerat elementum rutrum. Morbi ipsum augue, blandit ac orci at, luctus lobortis urna. Vivamus malesuada turpis sit amet erat euismod, quis vehicula elit lacinia. Quisque vel convallis dui, ut molestie diam. Ut laoreet nunc sed lacus aliquam, pharetra sagittis dui consectetur. Etiam dignissim mi et bibendum euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
tabs-tipo-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper dui vitae erat ornare eleifend. Vestibulum eu mi fermentum odio tincidunt ornare non aliquam dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer laoreet id lacus et interdum. Mauris id lacus facilisis, euismod leo sed, maximus justo. Curabitur imperdiet dignissim erat, at volutpat nisi fringilla ac. Donec consectetur feugiat tincidunt. Aliquam at metus diam. In facilisis nisl at dictum sodales. In sit amet dictum turpis. In efficitur viverra ipsum, in rhoncus ligula cursus a. Curabitur molestie eleifend volutpat.
Nullam a ligula lacinia, gravida mi sed, imperdiet quam. Nunc egestas interdum sapien, quis rhoncus massa dictum non. Etiam scelerisque quis est nec maximus. Etiam ac lacus dictum, mattis orci nec, laoreet elit. Morbi ut aliquam urna, sit amet dignissim eros. Sed finibus nibh in facilisis malesuada. Nulla gravida arcu eget enim tincidunt pulvinar. Nullam imperdiet, nunc non scelerisque rhoncus, metus leo porta risus, in tristique ante felis sit amet nulla. Vestibulum auctor in augue non varius. Aliquam erat volutpat. Vivamus faucibus finibus urna non interdum. Curabitur ultrices viverra erat, facilisis fermentum eros fermentum imperdiet. Nam posuere turpis vel enim dictum, vel fringilla magna fermentum. Sed eu efficitur nisl. Praesent fermentum enim et dui imperdiet, et ultrices arcu rhoncus. Vestibulum cursus consectetur finibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget bibendum magna. Curabitur sed imperdiet massa. Cras commodo metus quis nibh tincidunt, vel semper nulla rutrum. Sed at eros justo. Donec sit amet auctor risus. In enim urna, finibus ac interdum nec, molestie euismod nisi. Aliquam erat volutpat. Phasellus fermentum viverra orci sed rutrum.
Aliquam hendrerit porta ligula, a sodales nulla feugiat eu. In eget sodales neque, sed iaculis nulla. Fusce iaculis porttitor leo, ac laoreet leo gravida sit amet. Cras molestie tincidunt elementum. Proin cursus ex at mattis venenatis. Maecenas laoreet aliquet faucibus. Maecenas ultricies est eros, nec faucibus nisi cursus porttitor.
Morbi eu finibus ligula, id pretium massa. Nullam vitae scelerisque libero, eget fringilla neque. Nullam vitae est dictum nisi tempor lacinia vitae ac sem. Pellentesque lobortis justo vel lectus sodales eleifend. Proin commodo magna sapien, a lacinia lorem feugiat a. Aenean varius, ipsum et volutpat placerat, metus nulla pulvinar dolor, et porta metus orci non lorem. Quisque dapibus est in nulla suscipit condimentum non a massa. Curabitur mollis, augue sit amet hendrerit mattis, lectus justo semper nunc, non blandit libero metus ut ante. Mauris dapibus neque placerat elementum rutrum. Morbi ipsum augue, blandit ac orci at, luctus lobortis urna. Vivamus malesuada turpis sit amet erat euismod, quis vehicula elit lacinia. Quisque vel convallis dui, ut molestie diam. Ut laoreet nunc sed lacus aliquam, pharetra sagittis dui consectetur. Etiam dignissim mi et bibendum euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
tabs-tipo-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper dui vitae erat ornare eleifend. Vestibulum eu mi fermentum odio tincidunt ornare non aliquam dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer laoreet id lacus et interdum. Mauris id lacus facilisis, euismod leo sed, maximus justo. Curabitur imperdiet dignissim erat, at volutpat nisi fringilla ac. Donec consectetur feugiat tincidunt. Aliquam at metus diam. In facilisis nisl at dictum sodales. In sit amet dictum turpis. In efficitur viverra ipsum, in rhoncus ligula cursus a. Curabitur molestie eleifend volutpat.
Nullam a ligula lacinia, gravida mi sed, imperdiet quam. Nunc egestas interdum sapien, quis rhoncus massa dictum non. Etiam scelerisque quis est nec maximus. Etiam ac lacus dictum, mattis orci nec, laoreet elit. Morbi ut aliquam urna, sit amet dignissim eros. Sed finibus nibh in facilisis malesuada. Nulla gravida arcu eget enim tincidunt pulvinar. Nullam imperdiet, nunc non scelerisque rhoncus, metus leo porta risus, in tristique ante felis sit amet nulla. Vestibulum auctor in augue non varius. Aliquam erat volutpat. Vivamus faucibus finibus urna non interdum. Curabitur ultrices viverra erat, facilisis fermentum eros fermentum imperdiet. Nam posuere turpis vel enim dictum, vel fringilla magna fermentum. Sed eu efficitur nisl. Praesent fermentum enim et dui imperdiet, et ultrices arcu rhoncus. Vestibulum cursus consectetur finibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget bibendum magna. Curabitur sed imperdiet massa. Cras commodo metus quis nibh tincidunt, vel semper nulla rutrum. Sed at eros justo. Donec sit amet auctor risus. In enim urna, finibus ac interdum nec, molestie euismod nisi. Aliquam erat volutpat. Phasellus fermentum viverra orci sed rutrum.
Aliquam hendrerit porta ligula, a sodales nulla feugiat eu. In eget sodales neque, sed iaculis nulla. Fusce iaculis porttitor leo, ac laoreet leo gravida sit amet. Cras molestie tincidunt elementum. Proin cursus ex at mattis venenatis. Maecenas laoreet aliquet faucibus. Maecenas ultricies est eros, nec faucibus nisi cursus porttitor.
Morbi eu finibus ligula, id pretium massa. Nullam vitae scelerisque libero, eget fringilla neque. Nullam vitae est dictum nisi tempor lacinia vitae ac sem. Pellentesque lobortis justo vel lectus sodales eleifend. Proin commodo magna sapien, a lacinia lorem feugiat a. Aenean varius, ipsum et volutpat placerat, metus nulla pulvinar dolor, et porta metus orci non lorem. Quisque dapibus est in nulla suscipit condimentum non a massa. Curabitur mollis, augue sit amet hendrerit mattis, lectus justo semper nunc, non blandit libero metus ut ante. Mauris dapibus neque placerat elementum rutrum. Morbi ipsum augue, blandit ac orci at, luctus lobortis urna. Vivamus malesuada turpis sit amet erat euismod, quis vehicula elit lacinia. Quisque vel convallis dui, ut molestie diam. Ut laoreet nunc sed lacus aliquam, pharetra sagittis dui consectetur. Etiam dignissim mi et bibendum euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
tabs-tipo-6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper dui vitae erat ornare eleifend. Vestibulum eu mi fermentum odio tincidunt ornare non aliquam dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer laoreet id lacus et interdum. Mauris id lacus facilisis, euismod leo sed, maximus justo. Curabitur imperdiet dignissim erat, at volutpat nisi fringilla ac. Donec consectetur feugiat tincidunt. Aliquam at metus diam. In facilisis nisl at dictum sodales. In sit amet dictum turpis. In efficitur viverra ipsum, in rhoncus ligula cursus a. Curabitur molestie eleifend volutpat.
Nullam a ligula lacinia, gravida mi sed, imperdiet quam. Nunc egestas interdum sapien, quis rhoncus massa dictum non. Etiam scelerisque quis est nec maximus. Etiam ac lacus dictum, mattis orci nec, laoreet elit. Morbi ut aliquam urna, sit amet dignissim eros. Sed finibus nibh in facilisis malesuada. Nulla gravida arcu eget enim tincidunt pulvinar. Nullam imperdiet, nunc non scelerisque rhoncus, metus leo porta risus, in tristique ante felis sit amet nulla. Vestibulum auctor in augue non varius. Aliquam erat volutpat. Vivamus faucibus finibus urna non interdum. Curabitur ultrices viverra erat, facilisis fermentum eros fermentum imperdiet. Nam posuere turpis vel enim dictum, vel fringilla magna fermentum. Sed eu efficitur nisl. Praesent fermentum enim et dui imperdiet, et ultrices arcu rhoncus. Vestibulum cursus consectetur finibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget bibendum magna. Curabitur sed imperdiet massa. Cras commodo metus quis nibh tincidunt, vel semper nulla rutrum. Sed at eros justo. Donec sit amet auctor risus. In enim urna, finibus ac interdum nec, molestie euismod nisi. Aliquam erat volutpat. Phasellus fermentum viverra orci sed rutrum.
Aliquam hendrerit porta ligula, a sodales nulla feugiat eu. In eget sodales neque, sed iaculis nulla. Fusce iaculis porttitor leo, ac laoreet leo gravida sit amet. Cras molestie tincidunt elementum. Proin cursus ex at mattis venenatis. Maecenas laoreet aliquet faucibus. Maecenas ultricies est eros, nec faucibus nisi cursus porttitor.
Morbi eu finibus ligula, id pretium massa. Nullam vitae scelerisque libero, eget fringilla neque. Nullam vitae est dictum nisi tempor lacinia vitae ac sem. Pellentesque lobortis justo vel lectus sodales eleifend. Proin commodo magna sapien, a lacinia lorem feugiat a. Aenean varius, ipsum et volutpat placerat, metus nulla pulvinar dolor, et porta metus orci non lorem. Quisque dapibus est in nulla suscipit condimentum non a massa. Curabitur mollis, augue sit amet hendrerit mattis, lectus justo semper nunc, non blandit libero metus ut ante. Mauris dapibus neque placerat elementum rutrum. Morbi ipsum augue, blandit ac orci at, luctus lobortis urna. Vivamus malesuada turpis sit amet erat euismod, quis vehicula elit lacinia. Quisque vel convallis dui, ut molestie diam. Ut laoreet nunc sed lacus aliquam, pharetra sagittis dui consectetur. Etiam dignissim mi et bibendum euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
tabs-tipo-8
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper dui vitae erat ornare eleifend. Vestibulum eu mi fermentum odio tincidunt ornare non aliquam dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer laoreet id lacus et interdum. Mauris id lacus facilisis, euismod leo sed, maximus justo. Curabitur imperdiet dignissim erat, at volutpat nisi fringilla ac. Donec consectetur feugiat tincidunt. Aliquam at metus diam. In facilisis nisl at dictum sodales. In sit amet dictum turpis. In efficitur viverra ipsum, in rhoncus ligula cursus a. Curabitur molestie eleifend volutpat.
Nullam a ligula lacinia, gravida mi sed, imperdiet quam. Nunc egestas interdum sapien, quis rhoncus massa dictum non. Etiam scelerisque quis est nec maximus. Etiam ac lacus dictum, mattis orci nec, laoreet elit. Morbi ut aliquam urna, sit amet dignissim eros. Sed finibus nibh in facilisis malesuada. Nulla gravida arcu eget enim tincidunt pulvinar. Nullam imperdiet, nunc non scelerisque rhoncus, metus leo porta risus, in tristique ante felis sit amet nulla. Vestibulum auctor in augue non varius. Aliquam erat volutpat. Vivamus faucibus finibus urna non interdum. Curabitur ultrices viverra erat, facilisis fermentum eros fermentum imperdiet. Nam posuere turpis vel enim dictum, vel fringilla magna fermentum. Sed eu efficitur nisl. Praesent fermentum enim et dui imperdiet, et ultrices arcu rhoncus. Vestibulum cursus consectetur finibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget bibendum magna. Curabitur sed imperdiet massa. Cras commodo metus quis nibh tincidunt, vel semper nulla rutrum. Sed at eros justo. Donec sit amet auctor risus. In enim urna, finibus ac interdum nec, molestie euismod nisi. Aliquam erat volutpat. Phasellus fermentum viverra orci sed rutrum.
Aliquam hendrerit porta ligula, a sodales nulla feugiat eu. In eget sodales neque, sed iaculis nulla. Fusce iaculis porttitor leo, ac laoreet leo gravida sit amet. Cras molestie tincidunt elementum. Proin cursus ex at mattis venenatis. Maecenas laoreet aliquet faucibus. Maecenas ultricies est eros, nec faucibus nisi cursus porttitor.
Morbi eu finibus ligula, id pretium massa. Nullam vitae scelerisque libero, eget fringilla neque. Nullam vitae est dictum nisi tempor lacinia vitae ac sem. Pellentesque lobortis justo vel lectus sodales eleifend. Proin commodo magna sapien, a lacinia lorem feugiat a. Aenean varius, ipsum et volutpat placerat, metus nulla pulvinar dolor, et porta metus orci non lorem. Quisque dapibus est in nulla suscipit condimentum non a massa. Curabitur mollis, augue sit amet hendrerit mattis, lectus justo semper nunc, non blandit libero metus ut ante. Mauris dapibus neque placerat elementum rutrum. Morbi ipsum augue, blandit ac orci at, luctus lobortis urna. Vivamus malesuada turpis sit amet erat euismod, quis vehicula elit lacinia. Quisque vel convallis dui, ut molestie diam. Ut laoreet nunc sed lacus aliquam, pharetra sagittis dui consectetur. Etiam dignissim mi et bibendum euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Panel
titulo
NombrePepita Perez
Correo: ocepedav@ucentral.edu.co
titulo
NombrePepita Perez
Correo: ocepedav@ucentral.edu.co
titulo
NombrePepita Perez
Correo: ocepedav@ucentral.edu.co
Efectos para imagen
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.
Imagen con pie
button dropdowns
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Clases para la diagramación
Ancho para todos los elementos
Propiedad | Clase |
---|---|
Width 25% | w-25 |
Width 50% | w-50 |
Width 75% | w-75 |
Width 100% | w-100 |
Alto para todos los elementos
Propiedad | Clase |
---|---|
Height 25% | h-25 |
Height 50% | h-50 |
Height 75% | h-75 |
Height 100% | h-100 |
Maximo ancho - Maximo alto
Propiedad | Clase |
---|---|
max-width: 100% | mw-100 |
max-height: 100% | mh-100 |
Centrar horizontal
Propiedad | Clase |
---|---|
# | mx-auto |
# | centrar_caja |
Espacios entre elementos
Espacio arriba y abajo
Propiedad | Clase |
---|---|
margin: 1rem 0; | espacio-1-tb |
margin: 1.5rem 0; | espacio-2-tb |
margin: 2rem 0; | espacio-3-tb |
Espacio solo arriba
Propiedad | Clase |
---|---|
margin: 1rem 0 0 0; | espacio-1-t |
margin: 1.5rem 0 0 0; | espacio-2-t |
margin: 2rem 0 0 0; | espacio-3-t |
Espacio solo abajo
Propiedad | Clase |
---|---|
margin: 0 0 1rem 0; | espacio-1-b |
margin: 0 0 1.5rem 0; | espacio-2-b |
margin: 0 0 2rem 0; | espacio-3-b |
Alinear texto
Propiedad | Clase |
---|---|
Alinear a la izquierda | text-left |
Alinear al centro | text-center |
Alinear a la derecha | text-right |
Borde
Propiedad | Clase |
---|---|
Borde en los cuatro lados | border |
Borde solo arriba | border-top |
Borde solo a la derecha | border-right |
Borde solo abajo | border-bottom |
Borde solo a la izquierda | border-left |
Centrar imagen a nivel de bloque
Forma de uso | Clase |
---|---|
<img src="..." class="mx-auto d-block" alt="..."> |
mx-auto d-block |
Centrar imagen sin nivel de bloque
Forma de uso | Clase |
---|---|
<div class="text-center"> <img src="..." class="" alt="..."> </div> |
text-center |
Clases para botones
Propiedad | Forma de uso | Clase |
---|---|---|
Boton de nivel de bloque, abarca todo el ancho de un elemento primario |
<button type="button" class="btn btn-primary btn-block">... </button> |
btn-block |