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 IU semántica muestra el contenido del sitio de manera similar a un naipe que usa las clases de IU semántica. Las tarjetas de interfaz de usuario semántica tienen varias secciones, como contenido, contenido adicional, aprobación y descripción. En este artículo, aprenderemos sobre el bloque de aprobación de la tarjeta de interfaz de usuario semántica. La variación de contenido flotante de tarjeta de interfaz de usuario semántica se usa para mostrar el contenido de la tarjeta en el lado izquierdo o derecho usando flotante. Para colocar el contenido en el lado derecho, usaremos la clase flotante derecha, y para colocar el contenido en el lado izquierdo, usaremos la clase flotante izquierda .clase. De forma predeterminada, el contenido flota hacia el lado izquierdo.
Clases de variación de contenido flotante de tarjeta de interfaz de usuario semántica:
- left floated: esta clase se usa para hacer flotar el contenido en el lado izquierdo.
- right floated: esta clase se usa para hacer flotar el contenido en el lado derecho.
Sintaxis:
<div class="ui card">
...
<div class="right floated">
...
</div>
...
</div>
Ejemplo 1: en este ejemplo, describiremos la variación de contenido flotante de la tarjeta de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Card Floated Content Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="header ui green"> GeeksforGeeks </h2> <h3>Semantic-UI Card Floated Content Variation</h3> <div class="ui card"> <div class="content"> <div class="header">GeeksforGeeks</div> <hr> <div class="meta"> <span class="time"> Published: 1 March 2022 </span> </div> <hr> <div class="description"> <p class="ui justified container"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, ... </p> </div> </div> <div class="extra content"> <div class="right floated author"> <div class="description"> Author: <i>Sandeep Jain</i> </div> </div> </div> </div> </div> </body> </html>
Producción:
Variación de contenido flotante de tarjeta de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, describiremos la variación de contenido flotante de la tarjeta de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Card Floated Content Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="header ui green"> GeeksforGeeks </h2> <h3>Semantic-UI Card Floated Content Variation</h3> <div class="ui card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400.jpg"> </div> <div class="extra content"> <div class="left floated"> <i class="comments icon"></i> 101 </div> <div class="right floated author"> Author: <i>Sandeep Jain</i> </div> </div> </div> </div> </body> </html>
Producción:
Variación de contenido flotante de tarjeta de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/card.html#floated-content
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA