Semantic UI CSS jQuery este artículo, veremos cómo crear una lista de tipos con viñetas en Semantic UI.
Un tipo con viñetas es un tipo de lista que tiene viñetas como marcadores.
Clase de tipo con viñetas de interfaz de usuario semántica:
- viñetas : esta clase es necesaria para formar una lista de tipos con viñetas.
Hay 2 métodos para crear una lista de tipos con viñetas, que se detallan a continuación:
Usando la etiqueta <div>: este método se puede usar para crear la lista usando el . ui clase de lista con viñetas.
Sintaxis:
<div class='ui bulleted list'>
<div class='item' > ... </a>
<div class='item'> ... </a>
</div>
Ejemplo: Este es el ejemplo básico que ilustra el tipo de lista con viñetas en Semantic-UI, donde se utiliza la etiqueta <div> para hacer la lista.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI List Bulleted Type</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Semantic-UI List Bulleted Type </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity= "sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <h1>GeeksforGeeks</h1> <h4>Semantic-UI List Bulleted Type</h4> <h4>Today's tasks:</h4> <div class="ui bulleted list"> <div class="item">Buying milk</div> <div class="item">Going to gym</div> <div class="item"> Completing school homework <div class="list"> <div class="item"> Maths: Calculus </div> <div class="item"> Science : project on electricity </div> <div class="item"> Social Studies : Great History of India </div> </div> </div> <div class="item"> Reading the following blogs: <div class="list"> <a href="#" class="item"> GeeksforGeeks post </a> <a href="#" class="item"> bulleted list post </a> </div> </div> </div> </body> </html>
Producción:
Usando la etiqueta <ul>: También puede crear una lista de tipos con viñetas usando una etiqueta < ul> . Con este método, no necesita especificar la clase con viñetas en su etiqueta. Además, todas las etiquetas < li> se considerarán como elementos secundarios de la etiqueta < ul> .
Sintaxis:
<ul class='ui list'>
<li>Content</li>
<li>Content</li>
</ul>
Ejemplo: Este es el ejemplo básico que ilustra el tipo de lista con viñetas en Semantic-UI, donde se utiliza la etiqueta <ul> para hacer la lista.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI List Bulleted Type</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Semantic-UI List Bulleted Type </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity= "sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <h1>GeeksforGeeks</h1> <h4>Semantic-UI List Bulleted Type</h4> <h4>Today's tasks:</h4> <ul class="ui list"> <li>Buying milk</li> <li>Going to gym</li> <li> Completing school homework <ul> <li>Maths: Calculus</li> <li>Science : project on electricity</li> <li>Social Studies : Great History of India</li> </ul> </li> <li> <ul> <li><a href="#">GeeksforGeeks post</a></li> <li><a href="#">bulleted list post</a></li> </ul> </li> </ul> </body> </html>
Salida :
Referencia : https://semantic-ui.com/elements/list.html#bulleted
Publicación traducida automáticamente
Artículo escrito por mycodenotein y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA