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 de manera similar a un naipe que utiliza las clases de interfaz de usuario semántica. 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 IU semántica organiza el contenido de la tarjeta en secciones. Para agregar contenido a la tarjeta en la interfaz de usuario semántica, usamos la clase de contenido. En una sola tarjeta, puede haber varios <div> con el contenido de la clase. Usamos la clase de «contenido» de la interfaz de usuario semántica para agregar contenido a la tarjeta de la interfaz de usuario semántica.
Clase de bloque de contenido de tarjeta de interfaz de usuario semántica:
- contenido: esta clase se utiliza para dividir las tarjetas en secciones y contiene la información más importante de la tarjeta que se debe enfatizar más.
Sintaxis:a
<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 rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="padding: 20px;"> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>Semantic UI card content block</strong> </center><br> <div class="ui card"> <div class="content"> <h1 style="color: green">GeeksforGeeks</h1> This is a basic card made using Semantic UI. </div> </div> </body> </html>
Producción:
Bloque de contenido de tarjeta de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo demuestra los múltiples bloques de contenido en una sola tarjeta de interfaz de usuario semántica. Podemos observar diferentes secciones de la tarjeta con la clase de contenido.
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 rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="padding: 20px;"> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>Semantic UI card content block</strong> </center><br> <div class="ui card"> <div class="content"> <div class="header" style="color: green;"> GeeksforGeeks </div> </div> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="content"> <h4 class="ui sub header">Goal</h4> <div class="ui small feed"> <div class="content"> <div class="summary"> To provide best in class computer science education in the world. </div> </div> </div> </div> <div class="extra content"> <button class="ui green button"> Visit Website </button> </div> </div> </body> </html>
Producción:
Bloque de contenido de tarjeta de interfaz de usuario semántica
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