Inicio Libros Tutoriales Eventos Foro Buscar

Bootstrap 3, el manual oficial

Captulo 1.
Primeros pasos
1.2. Contenidos de Bootstrap
1.3. La primera plantilla Bootstrap
1.4. La comunidad Bootstrap
1.5. Desactivando el diseo responsive
1.6. Actualizacin de Bootstrap 2.X a 3.0
1.7. Compatibilidad con los navegadores
1.8. Accesibilidad
1.9. La licencia de Bootstrap
1.10. Personalizando Bootstrap

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Captulo 2.
Diseando con rejilla
2.2. Tipos de rejillas
2.3. Reseteando columnas
2.4. Desplazando columnas
2.5. Anidando columnas
2.6. Reordenando las columnas
2.7. Variables y mixins de LESS

Captulo 3.
Tipografa
3.1. Titulares
3.2. Texto
3.3. nfasis
3.4. Clases CSS
3.5. Abreviaturas
3.6. Direcciones
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 3.7. Blockquotes
3.8. Listas
3.9. Cdigo

Captulo 4.
Elementos CSS
4.1. Tablas
4.2. Imgenes
4.3. Utilidades

Captulo 5.
Formularios
5.1. Formulario bsico
5.2. Formulario en lnea
5.3. Formularios horizontales
5.4. Campos de formulario
5.5. Estados de formulario
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 5.6. Redimensionando campos de formulario
5.7. Mensajes de ayuda
5.8. Botones

Captulo 6.
Componentes
6.1. Iconos (glyphicons)
6.2. Mens desplegables
6.3. Grupos de botones
6.4. Botones desplegables
6.5. Grupos de campos de formulario
6.6. Elementos de navegacin
6.7. Barras de navegacin
6.8. Migas de pan
6.9. Paginadores
6.10. Etiquetas
6.11. Badges
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 6.12. Jumbotron
6.13. Encabezado de pgina
6.14. Imgenes en miniatura
6.15. Mensajes de alerta
6.16. Barras de progreso
6.17. Objetos multimedia
6.18. Listas de elementos
6.19. Paneles
6.20. Pozos

Captulo 7.
Plugins de JavaScript

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Inicio Libros Tutoriales Eventos Foro Buscar

Libros / Bootstrap 3, el manual oficial / Captulo 3. Tipografa

Captulo 3. Tipografa
Los estilos relacionados con la tipografa y el texto de los contenidos son esenciales en
cualquier framework CSS. Por esa razn, Bootstrap 3 incluye decenas de estilos para los
principales elementos utilizados en los sitios y aplicaciones web.

Anterior Siguiente
2.7. Variables y mixins de LESS 3.1. Titulares
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Inicio Libros Tutoriales Eventos Foro Buscar

Libros / Bootstrap 3, el manual oficial / Captulo 3. Tipografa / 3.1. Titulares

3.1. Titulares
Bootstrap 3 define estilos por defecto para todos los niveles de titulares de las pginas,
desde <h1> hasta <h6> . Ejemplo:

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 <h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

As se ve este ejemplo en tu navegador:

Semibold 36px

h1. Bootstrap heading

Semibold 30px

h2. Bootstrap heading

Semibold 24px
h3. Bootstrap heading
Semibold 18px
h4. Bootstrap heading

Semibold 14px
h5. Bootstrap heading

Semibold 12px
h6. Bootstrap heading

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 A continuacin se muestra una imagen del aspecto que debera tener este ejemplo, para
que puedas comparar los dos:

Figura 3.1 Titulares por defecto en Bootstrap 3

Bootstrap tambin define estilos especiales para los elementos <small> incluidos
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 dentro de un titular y utilizados habitualmente para mostrar informacin secundaria.
Ejemplo:

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

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

As se ve este ejemplo en tu navegador:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

Y esta es la imagen del aspecto que debera tener este ejemplo:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Figura 3.2 Titulares con elementos secundarios en Bootstrap 3

Anterior Siguiente
Captulo 3. Tipografa 3.2. Texto

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Inicio Libros Tutoriales Eventos Foro Buscar

Libros / Bootstrap 3, el manual oficial / Captulo 3. Tipografa / 3.2. Texto

3.2. Texto
El tamao de letra ( font-size ) por defecto de Bootstrap 3 es 14px y el interlineado
( line-height ) es 1.428. Estos valores se aplican tanto al <body> como a todos los
prrafos. Estos ltimos tambin incluyen un margen inferior cuyo valor es la mitad que
su interlineado (10px por defecto).

Ejemplo:

<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoq
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoq
ue penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nul
lam id dolor id nibh ultricies vehicula.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur

ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis m
ollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia o
dio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>

<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec
id elit non mi porta gravida at eget metus. Duis mollis, est non commodo
luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>

As se ve este ejemplo en tu navegador:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus
auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec
ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis
mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Y esta es la imagen del aspecto que debera tener este ejemplo:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Figura 3.3 Texto normal en Bootstrap 3

3.2.1. Texto destacado

Para destacar un prrafo sobre los dems, aade la clase .lead . Ejemplo:

<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus

dolor auctor. Duis mollis, est non commodo luctus.</p>

As se ve este ejemplo en tu navegador:

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

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.4 Texto destacado en Bootstrap 3

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 3.2.2. Variables de LESS
La escala tipogrfica de tamaos de letra se basa en dos variables LESS definidas en el
archivo variables.less: @font-size-base y @line-height-base .

La primera variable es el tamao de letra base y la segunda es el interlineado base del

texto. Como estos valores se utilizan para calcular los mrgenes, rellenos e interlineados
de todos los elementos, si modificas sus valores Bootstrap adaptar automticamente
todo el diseo.

Anterior Siguiente
3.1. Titulares 3.3. nfasis

INDICE DE CONTENIDOS
1. Primeros pasos

2. Diseando con rejilla

Captulo 3. Tipografa
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Inicio Libros Tutoriales Eventos Foro Buscar

Libros / Bootstrap 3, el manual oficial / Captulo 3. Tipografa / 3.3. nfasis

3.3. nfasis
Bootstrap 3 permite aadir nfasis a determinadas partes del texto mediante las
etiquetas HTML habituales.

3.3.1. Texto poco importante

Para marcar una parte del texto o todo un bloque de texto como poco importante, utiliza

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 la etiqueta <small> . Bootstrap muestra ese contenido con un tamao de letra igual al
85% del tamao de letra de su elemento padre. En el caso de los titulares ( <h1> , ...,
<h6> ) el tamao de los elementos <small> se ajusta de otra forma para que tengan un
mejor aspecto.

Ejemplo:

<p><small>Este contenido de texto se ver ms pequeo y puede ser utiliza

do por ejemplo para "la letra pequea" de la pgina.</small></p>

As se ve este ejemplo en tu navegador:

Este contenido de texto se ver ms pequeo y puede ser utilizado por ejemplo para "la letra pequea" de la pgina.

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.5 Texto poco importante en Bootstrap 3

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 3.3.2. Texto en negrita
Utiliza la etiqueta <bold> para aadir nfasis a un texto mostrndolo en negrita.

Ejemplo:

<p>El siguiente trozo de texto <strong>se muestra en negrita</strong>.</p

>

As se ve este ejemplo en tu navegador:

El siguiente trozo de texto se muestra en negrita.

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.6 Texto en negrita en Bootstrap 3

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 3.3.3. Texto en cursiva
Utiliza la etiqueta <em> para aadir nfasis a un texto mostrndolo en cursiva. Este
nfasis es de menor importancia que el definido por la etiqueta <strong> .

Ejemplo:

<p>El siguiente trozo de texto <em>se muestra en cursiva</em>.</p>

As se ve este ejemplo en tu navegador:

El siguiente trozo de texto se muestra en cursiva.

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.7 Texto en cursiva en Bootstrap 3

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 3.3.4. Etiquetas alternativas
Cuando creas pginas HTML5, tambin puedes emplear las etiquetas <b> y <i> . La
etiqueta <b> se emplea para destacar palabras o frases sin darles nfasis o importancia.
La etiqueta <i> se emplea sobre todo para marcar trminos tcnicos, etc.

Anterior Siguiente
3.2. Texto 3.4. Clases CSS

INDICE DE CONTENIDOS
1. Primeros pasos

2. Diseando con rejilla

Captulo 3. Tipografa

3.1. Titulares

3.2. Texto

3.3. nfasis

3.4. Clases CSS

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Inicio Libros Tutoriales Eventos Foro Buscar

Libros / Bootstrap 3, el manual oficial / Captulo 3. Tipografa / 3.4. Clases CSS

3.4. Clases CSS

3.4.1. Clases CSS para alinear texto
Bootstrap 3 define varias clases CSS para alinear de diferentes formas el contenido de
texto de los elementos.

Ejemplo:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 <p class="text-left">Texto alineado a la izquierda.</p>
<p class="text-center">Texto centrado.</p>
<p class="text-right">Texto alineado a la derecha.</p>

As se ve este ejemplo en tu navegador:

Texto alineado a la izquierda.

Texto centrado.

Texto alineado a la derecha.

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.8 Texto alineado en Bootstrap 3

3.4.2. Clases CSS para indicar el tipo de contenido

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Aunque no es una prctica recomendada desde el punto de vista de la accesibilidad,
Bootstrap 3 tambin define varias clases CSS para mostrar el tipo de contenido a travs
del color del texto.

Ejemplo:

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mau

ris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id
elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat po
rttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet
non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</
p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla
.</p>

As se ve este ejemplo en tu navegador:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.9 Texto de color segn su significado en Bootstrap 3

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Inicio Libros Tutoriales Eventos Foro Buscar

Libros / Bootstrap 3, el manual oficial / Captulo 3. Tipografa / 3.5. Abreviaturas

Zip Code Get a Quote

3.5. Abreviaturas
Si empleas la etiqueta <abbr> de HTML para marcar las abreviaturas y los acrnimos,
los usuarios podrn ver su contenido completo al pasar el ratn por encima de ellas.
Adems, si la abreviatura define el atributo title , Bootstrap aade un fino borde
inferior punteado para indicar al usuario que puede pasar el ratn por encima (tambin
cambia el tipo de puntero que se muestra al pasar el ratn por encima).

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 3.5.1. Abreviaturas bsicas
Incluye la definicin completa del elemento <abbr> dentro de su atributo title .
Ejemplo:

<p>Este texto contiene abreviaturas como <abbr title="seor">Sr.</abbr> y

<abbr title="seora">Sra.</abbr></p>

As se ve este ejemplo en tu navegador:

Este texto contiene abreviaturas como Sr. y Sra.

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.10 Texto con abreviaturas en Bootstrap 3

3.5.2. Iniciales

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Aade la clase .initialism (iniciales en ingls) a un elemento <abbr> para reducir
ligeramente su tamao de letra y as hacer que el texto se lea mejor. Ejemplo:

<p>Esta pgina est escrita con <abbr title="HyperText Markup Language" c

lass="initialism">HTML</abbr></p>

As se ve este ejemplo en tu navegador:

Esta pgina est escrita con HTML

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.11 Texto con iniciales en Bootstrap 3

Anterior Siguiente
3.4. Clases CSS 3.6. Direcciones

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Inicio Libros Tutoriales Eventos Foro Buscar

Libros / Bootstrap 3, el manual oficial / Captulo 3. Tipografa / 3.6. Direcciones

Zip Code Get a Quote

3.6. Direcciones
Utiliza la etiqueta <address> para mostrar la informacin de contacto de tu sitio o
pgina. No olvides aadir <br> al final de cada lnea para mantener el texto de la
direccin bien formateado. Ejemplo:

<address>
<strong>Empresa S.A.</strong><br>
Avenida Principal 123<br>

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Ciudad, Provincia 00000<br>
<abbr title="Phone">Tel:</abbr> 9XX 123 456
</address>

<address>
<strong>Nombre Apellido</strong><br>
<a href="mailto:#">[email protected]</a>
</address>

As se ve este ejemplo en tu navegador:

Empresa S.A.
Avenida Principal 123
Ciudad, Provincia 00000
Tel: 9XX 123 456

Nombre Apellido
[email protected]

Y esta es la imagen del aspecto que debera tener este ejemplo:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Figura 3.12 Texto con direcciones en Bootstrap 3

Anterior Siguiente
3.5. Abreviaturas 3.7. Blockquotes

INDICE DE CONTENIDOS
1. Primeros pasos

2. Diseando con rejilla

Captulo 3. Tipografa

3.1. Titulares

3.2. Texto
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Inicio Libros Tutoriales Eventos Foro Buscar

Libros / Bootstrap 3, el manual oficial / Captulo 3. Tipografa / 3.7. Blockquotes

Zip Code Get a Quote

3.7. Blockquotes
Estos elementos se emplean para incluir en tus pginas trozos de contenidos de otras
fuentes.

3.7.1. Blockquote por defecto

Utiliza el elemento <blockquote> para encerrar el contenido que se va a incluir en la

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 pgina. Tambin se recomienda utilizar el elemento <p> para encerrar el texto dentro
del <blockquote> . Ejemplo:

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pos
uere erat a ante.</p>
</blockquote>

As se ve este ejemplo en tu navegador:

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

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.13 Texto citado con blockquote en Bootstrap 3

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 3.7.2. Opciones para los elementos blockquote
Adems del estilo por defecto del elemento <blockquote> , Bootstrap 3 define algunos
estilos adicionales para los otros elementos que se pueden aadir a los elementos
<blockquote> .

3.7.2.1. Mostrando la fuente

Utiliza el elemento <small> para mostrar la fuente original del contenido y encierra el
nombre concreto de la fuente (una persona, una publicacin, un sitio web, etc.) con el
elemento <cite> . Ejemplo:

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pos
uere erat a ante.</p>
<small>Frase clebre de <cite title="Nombre Apellidos">Nombre Apellidos
</cite></small>
</blockquote>

As se ve este ejemplo en tu navegador:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Frase clebre de Nombre Apellidos

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.14 Texto citado que muestra la fuente en Bootstrap 3

3.7.2.2. Modificando la alineacin

Algunos autores prefieren modificar la alineacin de las citas creadas con
<blockquote> para que destaquen ms sobre el resto del texto. Para ello, utiliza la calse
.pull-right . Ejemplo:

<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pos

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 uere erat a ante.</p>
<small>Frase clebre de <cite title="Nombre Apellidos">Nombre Apellidos
</cite></small>
</blockquote>

As se ve este ejemplo en tu navegador:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Frase clebre de Nombre Apellidos

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.15 Texto citado que muestra la fuente y cambia su alineacin en Bootstrap 3

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Inicio Libros Tutoriales Eventos Foro Buscar

Libros / Bootstrap 3, el manual oficial / Captulo 3. Tipografa / 3.8. Listas

3.8. Listas
3.8.1. Listas no ordenadas
Utilzalas para agrupar elementos para los que su orden no importa. Bootstrap 3 tambin
incluye los estilos adecuados para las las listas anidadas. Ejemplo:

<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 <li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>

As se ve este ejemplo en tu navegador:

Lorem ipsum dolor sit amet

Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Y esta es la imagen del aspecto que debera tener este ejemplo:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Figura 3.16 Listas no ordenadas en Bootstrap 3

3.8.2. Listas ordenadas

En este caso, el orden de los elementos s es importante y por eso se muestran numerados.
Ejemplo:

<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 <li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>

As se ve este ejemplo en tu navegador:

1. Lorem ipsum dolor sit amet

2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Y esta es la imagen del aspecto que debera tener este ejemplo:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Figura 3.17 Listas ordenadas en Bootstrap 3

3.8.3. Listas sin estilo

Como resulta muy habitual mostrar las listas sin vietas y sin margen izquierdo, Bootstrap 3
incluye una clase CSS llamada .list-unstyled para aplicar esos estilos.

La nica pega de esta clase es que slo se aplica a los elementos de una lista y no a los
elementos de sus listas anidadas. As que si quieres aplicar los estilos a todos los elementos,
aade la clase .list-unstyled tambin a las listas anidadas. Ejemplo:

<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 <li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>

As se ve este ejemplo en tu navegador:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Y esta es la imagen del aspecto que debera tener este ejemplo:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Figura 3.18 Listas sin estilo en Bootstrap 3

3.8.4. Listas en lnea

Tambin resulta habitual mostrar los elementos de una lista horizontalmente, como por
ejemplo en el men principal de navegacin. Para ello, Bootstrap 3 define una clase CSS
llamada .inline-block . Ejemplo:

<ul class="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>

As se ve este ejemplo en tu navegador:

Lorem ipsum Phasellus iaculis Nulla volutpat

Y esta es la imagen del aspecto que debera tener este ejemplo:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Figura 3.19 Listas en lnea en Bootstrap 3

3.8.5. Listas de definicin

No se utilizan mucho, pero Bootstrap 3 tambin incluye estilos por defecto para las listas de
definicin, formadas por pares trmino + definicin. Ejemplo:

<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem n
ec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

As se ve este ejemplo en tu navegador:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 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.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.20 Listas de definicin en Bootstrap 3

3.8.5.1. Listas de definicin horizontales

Si lo prefieres, tambin es posible mostrar la lista de definicin horizontalmente aadiendo la
clase .dl-horizontal . Ejemplo:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 <dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem n
ec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh
, ut fermentum massa justo sit amet risus.</dd>
</dl>

As se ve este ejemplo en tu navegador:

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.
Malesuada porta Etiam porta sem malesuada magna mollis euismod.
Felis euismod semp Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 3.21 Listas de definicin horizontal en Bootstrap 3

Cuando una lista de definicin se muestra horizontalmente, se cortan automticamente con

text-overflow los trminos que son demasiado largos. En los dispositivos pequeos, los
trminos no se cortan pero se muestran verticalmente uno encima de otro.

Anterior Siguiente
3.7. Blockquotes 3.9. Cdigo

Zip Code Get a Quote

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com