Documentación sobre estilos en la Plataforma UNJuVirtual

Tipografía general

Títulos de encabezamientos

Puede utilizar distintos tipos de estilos para los títulos en HTML, desde <h1> hasta <h6>. A la vez puede adicionar textos secundarios en cualquier encabezamiento con la etiqueta <small> o la clase .small.

h1 heading Secondary text

h2 heading Secondary text

h3 heading Secondary text

h4 heading Secondary text
h5 heading Secondary text
h6 heading Secondary text
 
<h1>h1 heading <small>Secondary text</small></h1>
<h2>h2 heading <small>Secondary text</small></h2>
<h3>h3 heading <small>Secondary text</small></h3>
<h4>h4 heading <small>Secondary text</small></h4>
<h5>h5 heading <small>Secondary text</small></h5>
<h6>h6 heading <small>Secondary text</small></h6>

Destacar parte del cuerpo de un texto

Para destacar un párrafo, puede añadir la clase .lead:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

<p class="lead">...</p>
<p>...</p>

Blockquotes

Para citar bloques de contenido de otras fuentes dentro de su documento puede utilizar la etiqueta blockquotes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Algún autor famoso como Fuente
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Algún autor famoso como <cite title="Source Title">Fuente</cite></footer>
</blockquote>

Estilos de listas

Lista de elementos en los que el orden no importa explícitamente.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
<ul>
  <li>...</li>
</ul>

Lista de elementos en los que el orden si importa.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Phasellus iaculis neque
<ol>
  <li>...</li>
</ol>

Añadir un estilo de lista para listas personalizadas:

  • list-style-1
  • list-style-1
  • list-style-1
  • list-style-2
  • list-style-2
  • list-style-2
  • list-style-3
  • list-style-3
  • list-style-3
<ul class="list-style-1"> | <ul class="list-style-2"> | <ul class="list-style-3">
  <li>...</li>
</ul>

Añadir color a las listas personalizadas anteriormente creadas (agregar colored):

  • list-style-1
  • list-style-1
  • list-style-1
  • list-style-2
  • list-style-2
  • list-style-2
  • list-style-3
  • list-style-3
  • list-style-3
<ul class="list-style-1 colored"> | <ul class="list-style-2 colored"> | <ul class="list-style-3 colored">
  <li>...</li>
</ul>

Énfasis, Resaltado y Alerta

Combine las clases .label, .alert y sus contextos (por ejemplo, .text-success) para aplicar estilos a los mensajes en función de su contexto.

muted - Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh

success - Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

info - Maecenas sed diam eget risus varius blandit sit amet non magna.

warning - Etiam porta sem malesuada magna mollis euismod.

danger - Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
Default Success Info Warning Danger 
<span class="label label-default">Default</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

Titulares

Puede agregar una etiqueta .headline para los titulares. Utilice este estilo para definir una jerarquía en sus cursos o para marcar secciones específicas.

Importante: Los colores para los titulares son los utilizados como 'color principal' definido en el estilo general del Sitio Web, no pudiendose cambiar directamente.

Headline-v1 Sample Heading

Headline-v2 Sample Heading

Headline-v3 Sample Heading

Headline-v1 Heading and Icon

Headline-v2 Heading and Icon

Headline-v3 Heading and Icon

 
<p class="headline headline-v1">Headline-v1 Sample Heading</p>
<p class="headline headline-v2">Headline-v2 Sample Heading</p>
<p class="headline headline-v3">Headline-v3 Sample Heading</p>

<p class="headline headline-v1"><i class="fa fa-folder-open"></i> Headline-v1 Heading and Icon</p>
<p class="headline headline-v2"><i class="fa fa-folder-open"></i> Headline-v2 Heading and Icon</p>
<p class="headline headline-v3"><i class="fa fa-folder-open"></i> Headline-v3 Heading and Icon</p>

Imágenes

Agregar clases a una etiqueta <img> para aplicar estilos a imágenes es muy fácil y rápido...

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">