Listas

Tipos

En HTML/CSS, las listas son una forma de estructurar y presentar información de manera organizada. Existen principalmente tres tipos de listas:

Nombre Descripción Recomendación
Listas no ordenadas (ul) Las listas no ordenadas (ul) son conjuntos de elementos de lista (li) que no siguen un orden específico. Cada elemento se muestra con un viñeta o marcador. Se utilizan para agrupar elementos relacionados que no tienen un orden jerárquico. Son ideales para listas de ítems donde el orden no es relevante, como características de un producto, tareas pendientes, o puntos de discusión.
Listas ordenadas (ol) Las listas ordenadas (ol) son conjuntos de elementos de lista (li) que siguen un orden específico. Cada elemento se muestra con un número o letra. Son útiles cuando el orden de los elementos es importante, como en instrucciones paso a paso, rankings, o listas de prioridad.
Listas de definición (dl) Las listas de definición (dl) se utilizan para definir términos o conceptos. Consisten en términos (dt) y descripciones (dd). Son ideales para glosarios, definiciones, pares de pregunta y respuesta, o listas de atributos.

Listas No Ordenadas

En las listas no ordenadas manejamos iconos que se obtienen de la librería de Fontawesome. El estilo CSS se llama ".bullets". La estructura del código HTML integra las etiquetas ul para definir el tipo de lista y li para enlistar el contenido.

Lista

  • Item
  • Item
  • Item
  • Item
  • Item

Lista anidada

  • Item
    • SubItem
      • SubSubItem
      • SubSubItem
    • SubItem
    • SubItem
    • SubItem
  • Item
  • Item
  • Item
  • Item

Código HTML:

								

<!-- Lista -->
<div class="col-md-12 bullets">
	<ul>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
	</ul>
</div>

<!-- Lista anidada -->
<div class="col-md-12 bullets">
	<ul>
		<li>Item</li>
		<ul>
			<li>SubItem</li>
				<ul>
					<li>SubSubItem</li>
					<li>SubSubItem</li>
				</ul>
			<li>SubItem</li>
			<li>SubItem</li>
			<li>SubItem</li>
		</ul>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
	</ul>
</div>

Listas Ordenadas

Manejamos 4 opciones de listas ordenadas: dígitos, doble dígito, romanos y abecedario. La estructura del código HTML integra las etiquetas ol para definir el tipo de lista y li para enlistar el contenido.

Lista dígitos

  1. Item
    1. Item
    2. Item
    3. Item
  2. Item
  3. Item
  4. Item
  5. Item

Lista doble dígito

  1. Item
    1. Item
    2. Item
    3. Item
  2. Item
  3. Item
  4. Item
  5. Item

Lista romanos

  1. Item
    1. Item
    2. Item
    3. Item
  2. Item
  3. Item
  4. Item
  5. Item

Lista abecedario

  1. Item
    1. Item
    2. Item
    3. Item
  2. Item
  3. Item
  4. Item
  5. Item

Código HTML:

								

<!-- Lista dígitos -->
<div class="col-md-12 bullets-digitos">
	<ol>
		<li>Item</li>
			<ol>
				<li>Item</li>
				<li>Item</li>
				<li>Item</li>
			</ol>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		</ol>
</div>

<!-- Lista doble dígito -->
<div class="col-md-12 bullets-doble-digito">
	<ol>
		<li>Item</li>
			<ol>
				<li>Item</li>
				<li>Item</li>
				<li>Item</li>
			</ol>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
	</ol>
</div>

<!-- Lista romanos -->
<div class="col-md-12 bullets-romanos">
	<ol>
		<li>Item</li>
			<ol>
				<li>Item</li>
				<li>Item</li>
				<li>Item</li>
			</ol>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
	</ol>
</div>

<!-- Lista abecedario -->
<div class="col-md-12 bullets-abecedario">
	<ol>
		<li>Item</li>
			<ol>
				<li>Item</li>
				<li>Item</li>
				<li>Item</li>
			</ol>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
	</ol>
</div>

Listas de Definición

Para las listas de definición manejamos el estilo nativo de Bootstrap. La estructura del código HTML integra las etiquetas dl para definir el tipo de lista, dt para los términos y dd para las descripciones.

Ejemplo:

Término
Descripción
Término
Descripción

Código HTML:

								

<div class="col-md-12">
	<dl>
		<dt>Término</dt>
		<dd>Descripción</dd>
		<dt>Término</dt>
		<dd>Descripción</dd>
	</dl>
</div>

CSS para listas

Código CSS:

								

/*============================================================
BULLETS
============================================================*/

/* Generales */
.bullets-abecedario .bullets-digitos .bullets-doble-digito .bullets-romanos ul, ol {
	list-style:none;
	padding-left: 0;
	text-indent: -20px;
	margin-left: 20px;
}
.bullets-abecedario .bullets-digitos .bullets-doble-digito .bullets-romanos ul li, ol li {
	margin-bottom: 10px;
}
li::marker {
	font-weight: bold;
	color: #908233;
}

/* Listas solo bullets */
.bullets ul {
	text-indent: -20px;
	margin-left: 20px;
}
.bullets ul li {
	display: block;
	line-height: 24px;
	margin-bottom: 10px;
}
.bullets ul li a {
	text-decoration: underline;
}
.bullets ul li:before {
	content: "\f105 ";
	font-family: 'FontAwesome';
	font-size: 16px;
	padding-right: 10px;
	color: #908233;
}
.bullets ul ul li:before {
	content: "\f068 ";
	font-family: 'FontAwesome';
}
.bullets ul ul ul li:before {
	content: "\f0da ";
	font-family: 'FontAwesome';
}

/* Listas digitos */
.bullets-digitos ol {
	list-style-type: decimal;
}
.bullets-digitos ol li:before {
    content: "";
	padding-right: 20px;
}
.bullets-digitos ol ol li:before {
    content: "";
	padding-right: 20px;
}
.bullets-digitos ol ol ol li:before {
    content: "";
	padding-right: 20px;
}

/* Listas doble digito */
.bullets-doble-digito ol {
	list-style-type: decimal-leading-zero;
	margin-left: 30px;
}
.bullets-doble-digito ol li:before {
    content: "";
	padding-right: 20px;
}
.bullets-doble-digito ol ol li:before {
    content: "";
	padding-right: 20px;
}
.bullets-doble-digito ol ol ol li:before {
    content: "";
	padding-right: 20px;
}

/* Listas romanos */
.bullets-romanos ol {
	list-style-type: upper-roman;
	margin-left: 30px;
}
.bullets-romanos ol li:before {
	content: "";
	padding-right: 20px;
}
.bullets-romanos ol ol li:before {
	content: "";
	padding-right: 20px;
}
.bullets-romanos ol ol ol li:before {
	content: "";
	padding-right: 20px;
}

/* Listas letras */
.bullets-abecedario ol {
	list-style-type: lower-alpha;
}
.bullets-abecedario ol li:before {
	content: "";
	padding-right: 20px;
}
.bullets-abecedario ol ol li:before {
	content: "";
	padding-right: 20px;
}
.bullets-abecedario ol ol ol li:before {
	content: "";
	padding-right: 20px;
}

Última actualización: Abril 2, 2025