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 su uso y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente y receptivo. El elemento Tarjeta de interfaz de usuario semántica muestra el contenido del sitio utilizando las clases de interfaz de usuario semántica como si fuera un naipe. Las tarjetas de interfaz de usuario semántica tienen varias secciones, como contenido, contenido adicional y descripción. En este artículo, aprenderemos sobre el bloque de contenido de la tarjeta de IU semántica. El bloque de contenido de la tarjeta de la interfaz de usuario semántica se utiliza para contener el contenido principal de la tarjeta. Es esencialmente el cuerpo de la tarjeta. Usamos la clase de contenido para agregar contenido a la tarjeta en la interfaz de usuario semántica. Puede haber múltiples <div> con el contenido de la clase en una sola tarjeta.
Clase de bloque de contenido de tarjeta de interfaz de usuario semántica:
- contenido: esta clase se utiliza para agregar bloques de contenido a la tarjeta de interfaz de usuario semántica.
Sintaxis:
<div class="ui card"> <div class="content"> ... </div> </div>
Ejemplo 1: el siguiente ejemplo muestra la tarjeta básica con una sección de contenido utilizando la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="padding: 20px;"> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>Semantic UI Card Content</strong> <br> </center> <div class="ui card"> <div class="content"> Here content block starts. <h1 style="color: green">GeeksforGeeks</h1> <div class="description"> This is a basic card made using Semantic UI. </div> Here, content block ends. </div> </div> </body> </html>
Producción:
Producción
Ejemplo 2: El siguiente ejemplo muestra la tarjeta básica con múltiples secciones de contenido utilizando la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="padding: 20px;"> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>Semantic UI Card Content</strong> <br> </center> <div class="ui card"> <div class="content"> First Content block. </div> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="content"> Second content block. </div> </div> </body> </html>
Producción:
Producción
Referencia: https://semantic-ui.com/views/card.html#content
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA