Elemento de interfaz de usuario semántica Descripción Contenido

Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.

El contenido del elemento de interfaz de usuario semántica nos ofrece diferentes contenidos como imagen, contenido, encabezado, metadatos, enlace, descripción, contenido adicional y calificación. En este artículo, discutiremos y aprenderemos sobre el contenido de la descripción que juega un papel importante en el contenido del artículo.

La clase Semantic-UI Item Content Description se utiliza para crear la descripción de un elemento, que es una de las cosas más requeridas en el contenido.

Clase de descripción de contenido de elemento de interfaz de usuario semántica:

  • descripción: esta clase se utiliza para crear la parte de descripción del contenido.

Sintaxis:

<div class="description">
     <p>...</p>
</div>

El siguiente ejemplo ilustra la descripción del contenido del elemento de la interfaz de usuario semántica:

Ejemplo: En este artículo usaremos Geeksforgeeks como elemento, adjuntaremos una imagen (logotipo de GFG) junto a la que colocaremos el encabezado y la descripción.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Item Content Description</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
          
        <strong>Semantic-UI Item Content Description</strong>
        <br><br>
    </center>
  
    <div class="ui items">
        <div class="item">
            <a class="ui small image">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png">
            </a>
  
            <div class="content">
                <a class="header">GeeksforGeeks</a>
                <div class="description">
                    <p>
                        Free Tutorials, Millions of Articles,
                        Live, Online and Classroom Courses, 
                        Frequent Coding Competitions, 
                        Webinars by Industry Experts,
                        Internship opportunities and Job 
                        Opportunities.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Semantic-UI Item Content Description

Descripción del contenido del elemento de interfaz de usuario semántica

Referencia: https://semantic-ui.com/views/item.html#description

Publicación traducida automáticamente

Artículo escrito por skyridetim 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 *