Contenido de la lista de IU semántica

Posted on by Rudeus Greyrat

Semantic UI es un marco de código abierto que tiene algunas clases predefinidas para hacer que nuestro sitio web se vea hermoso y receptivo. Es similar a bootstrap ya que tiene clases predefinidas para su uso. Usó CSS ​​y jQuery para construir la interfaz. Tiene algunos tipos diferentes de elementos que nos ayudan a crear un sitio web hermoso. 

La lista de interfaz de usuario semántica se utiliza para agrupar contenido relacionado entre sí. En este artículo, discutiremos el contenido de la lista de IU semántica .

Contenido de la lista de IU semántica:

  • item : esta clase se utiliza para crear una lista de elementos.
  • icon : esta clase se utiliza para crear elementos con iconos.
  • imagen : esta clase se utiliza para crear los elementos con imágenes.
  • enlace : esta clase se utiliza para crear los elementos con enlaces.
  • header : esta clase se utiliza para crear el encabezado del elemento.
  • description : esta clase se utiliza para crear la descripción del artículo.

Sintaxis:

<div class="ui list">
  <div class="List-Content-Class">
     ....
  </div>
  ....
</div>

Ejemplo 1: el siguiente código muestra el contenido del elemento de la lista de la interfaz de usuario semántica .

HTML

<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI List Content </title>
  <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
 
<body>
  <div class="ui container">
    <h2 class="ui header green"> GeeksforGeeks </h2>
    <h3> Semantic-UI List Content - Item </h3>
   
    <div class="ui list">
      <div class="item">
        GeeksforGeeks1
      </div>
      <div class="item">
        GeeksforGeeks2
      </div>
      <div class="item">
        GeeksforGeeks3
      </div>
      <div class="item">
        GeeksforGeeks4
      </div>
      <div class="item">
        GeeksforGeeks5
      </div>
      <div class="item">
        GeeksforGeeks6
      </div>
      <div class="item">
        GeeksforGeeks7
      </div>
    </div>
  </div>
</body>
</html>

Producción:

 Contenido de elemento de lista de interfaz de usuario semántica

Ejemplo 2: el siguiente código demuestra el contenido del icono de la lista de IU semántica .

HTML

<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI List Content </title>
  <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
 
<body>
  <div class="ui container">
    <h2 class="ui header green"> GeeksforGeeks </h2>
    <h3> Semantic-UI List Content - Icon </h3>
 
    <div class="ui list">
      <a class="item">
        <i class="book icon"></i>
        <div class="content">
          <div class="header"> GeeksforGeeks: </div>
          <div class="description">
            A Computer Science portal
          </div>
        </div>
      </a>
      <a class="item">
        <i class="right triangle icon"></i>
        <div class="content">
          <div class="header">GFG:</div>
          <div class="description">
            Computer science and
            programming articles.
          </div>
        </div>
      </a>
    </div>
  </div>
</body>
</html>

Producción:

Contenido de icono de lista de interfaz de usuario semántica

Ejemplo 3: el siguiente código muestra el contenido de la imagen de la lista de la interfaz de usuario semántica .

HTML

<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI List Content </title>
  <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
 
<body>
  <div class="ui container">
    <h2 class="ui header green"> GeeksforGeeks </h2>
    <h3> Semantic-UI List Content - Image </h3>
 
    <div class="ui list">
      <a class="item">
        <img class="ui avatar image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
        <div class="content">
          <div class="header"> GeeksforGeeks: </div>
          <div class="description">
            A Computer Science portal
          </div>
        </div>
      </a>
      <a class="item">
        <img class="ui avatar image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png">
        <div class="content">
          <div class="header">GFG:</div>
          <div class="description">
            Computer science and
            programming articles.
          </div>
        </div>
      </a>
    </div>
  </div>
</body>
</html>

Producción:

Contenido de imagen de lista de interfaz de usuario semántica

Ejemplo 4: el siguiente código muestra el contenido del enlace de la lista de la interfaz de usuario semántica .

HTML

<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI List Content </title>
  <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
 
<body>
  <div class="ui container">
    <h2 class="ui header green"> GeeksforGeeks </h2>
    <h3> Semantic-UI List Content - Link </h3>
 
    <div class="ui link list">
      <div class="active item"> GeeksforGeeks </div>
      <a class="item"> Coding </a>
      <a class="item"> DSA </a>
      <a class="item"> Java </a>
      <a class="item"> Python </a>
    </div>
  </div>
</body>
</html>

Producción:

Contenido de enlace de lista de interfaz de usuario semántica

Ejemplo 5: el siguiente código muestra el contenido del encabezado de la lista de la interfaz de usuario semántica .

HTML

<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI List Content </title>
  <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
 
<body>
  <div class="ui container">
    <h2 class="ui header green"> GeeksforGeeks </h2>
    <h3> Semantic-UI List Content - Header </h3>
 
    <div class="ui list">
      <div class="item">
        <a class="header">GeeksforGeeks</a>
        A Computer Science portal for geeks.
      </div>
      <div class="item">
        <a class="header">GFG</a>
        Portal for geeks.
      </div>
      <div class="item">
        <a class="header">About GFG</a>
        A Computer Science portal for geeks.
      </div>
    </div>
  </div>
</body>
</html>

Producción:

Contenido de encabezado de lista de interfaz de usuario semántica

Ejemplo 6: el siguiente código muestra el contenido de la descripción de la lista de la interfaz de usuario semántica .

HTML

<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI List Content </title>
  <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
 
<body>
  <div class="ui container">
    <h2 class="ui header green"> GeeksforGeeks </h2>
    <h3> Semantic-UI List Content - Description </h3>
 
    <div class="ui list">
      <div class="item">
        <div class="content">
          <a class="header"> GeeksforGeeks </a>
          <div class="description">
            A Computer Science portal for geeks.
          </div>
        </div>
      </div>
 
      <div class="item">
        <div class="content">
          <a class="header"> GFG </a>
          <div class="description">
            Portal for geeks.
          </div>
        </div>
      </div>
 
      <div class="item">
        <div class="content">
          <a class="header">About GFG</a>
          <div class="description">
            A Computer Science portal
          </div>
        </div>
      </div>
 
    </div>
  </div>
</body>
</html>

Producción:

Lista de IU semántica Descripción Contenido

Referencia: https://semantic-ui.com/elements/list.html

Publicación traducida automáticamente

Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *