Una lista es un registro de información que facilita la búsqueda de elementos mediante viñetas.
Hay 3 tipos de listas compatibles con Bootstrap que son:
- Listas desordenadas: en las listas desordenadas, los elementos se marcan con viñetas.
- Listas ordenadas: en las listas ordenadas, los elementos se marcan con viñetas numéricas como 1,2, i, ii, etc.
- Listas de definición: En las listas de definición, los elementos se definen con su descripción.
Veamos la implementación de la lista anterior.
Ejemplo 1: En este ejemplo, usaremos listas desordenadas. En las listas desordenadas, los elementos se marcan con viñetas. Las listas desordenadas se crean usando la etiqueta <ul> y luego los elementos se enumeran usando la etiqueta <li>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <title>Bootstrap 4 Unstyled List</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <h2 class="mb-3">Unordered List</h2> <ul> <li>Chocolates</li> <li>Biscuits</li> <ul> <li>Jim-Jam</li> <li>Oreo</li> </ul> <li>Fruits</li> <li>Gifts</li> </ul> </body> </html>
Producción:
Explicación: En el ejemplo anterior, se crea una lista desordenada y los elementos se marcan con viñetas. Los elementos con pequeños círculos negros (viñetas de disco) son elementos de la lista desordenada y los elementos con círculos son elementos de galletas. Por lo tanto, también podemos crear lista en lista.
Ejemplo 2: En este ejemplo, usaremos listas ordenadas. En las listas ordenadas, los elementos están marcados con viñetas numéricas como 1, 2, i, ii. Las listas ordenadas se crean con la etiqueta <ol> y los elementos de la lista se inician con la etiqueta <li>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <title>Bootstrap 4 Unstyled List</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <h2 class="mb-3">Ordered List</h2> <ol> <li>Chocolates</li> <li>Biscuits</li> <ol type="i"> <li>Jim-Jam</li> <li>Oreo</li> </ol> <li>Fruits</li> <li>Gifts</li> </ol> </body> </html>
Producción:
Explicación: En el ejemplo anterior, se crean listas ordenadas y los elementos se marcan con viñetas numéricas. Los artículos marcados con 1,2,3 son de listas ordenadas y los artículos marcados con I, ii son de Galletas. Por lo tanto, podemos enumerar en la lista.
Ejemplo 3: En este ejemplo, usaremos la lista de definición que se usa para dar una descripción específica al elemento de la lista. En las listas de definición, los elementos se definen con su descripción. Las listas de definición se crean utilizando la etiqueta <dl>.
- Etiqueta <dt> que especifica la descripción de la lista.
- Etiqueta <dd> que define los detalles de la descripción.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <title>Bootstrap 4 Unstyled List</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <h2 class="mb-3">Definition List</h2> <dl> <dt>HTML</dt> <dd>Hyper Text Markup Language</dd> <dt>CN</dt> <dd>Computer Network</dd> <dt>DBMS</dt> <dd>Database Management System</dd> </dl> </body> </html>
Producción:
Explicación: En el ejemplo anterior, se crea una lista de definiciones en la que los elementos se especifican con su definición. Aquí, HTML es un elemento y HyperText Markup Language es su descripción.
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA