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.
La interfaz de usuario semántica ofrece varias variaciones de tarjetas, como tarjeta fluida, tarjeta centrada, tarjeta en relieve, tarjeta de enlace, contenido flotante, alineación de texto, color, recuento de columnas, apilable y duplicación. En este artículo, aprenderemos sobre todas las variaciones de cartas.
Variaciones de la tarjeta de interfaz de usuario semántica:
- Fluido : se utiliza para obligar al elemento de la tarjeta a ocupar todo el ancho del contenedor.
- Centrado : toda la tarjeta debe incluirse en la clase .centered para centrar la tarjeta.
- En relieve : El conjunto debe adjuntarse a esta clase para permitir el levantamiento de la tarjeta de la página anterior.
- Enlace : Habilita una carta levantada que se mueve cuando se desplaza.
- Flotado : Esto se usa para hacer flotar el contenido en el lado izquierdo/derecho.
- Alineación de texto : se utiliza para alinear el texto dentro de una tarjeta.
- Coloreado : Esto se utiliza para establecer el color de la tarjeta.
- Recuento de columnas : Esto se usa para establecer cuántas tarjetas deben existir en una fila.
- Apilable : Esto se usa para apilar automáticamente un grupo de tarjetas en filas en una sola columna en dispositivos de teléfonos móviles.
- Duplicación : esto se usa para forzar al grupo de tarjetas a un diseño de columna con el ancho de la tarjeta el doble que el original tan pronto como el ancho de la ventana cruza el punto de interrupción de ancho inferior a 990px. Esta clase ayuda a crear un grupo de tarjetas que pueden duplicar el ancho de su columna para dispositivos móviles.
Sintaxis:
<div class="ui Card-Variations card">
<div class="image">
...
</div>
<div class="content">
...
</div>
</div>
Ejemplo 1: a continuación se muestra el código que demuestra el uso de las variaciones fluidas de la tarjeta de interfaz de usuario semántica .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Card Variations</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="margin-inline: 10px;"> <h1>GeeksforGeeks</h1> <strong>Semantic UI card fluid</strong> <br> <div class="ui three column grid"> <div class="column"> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> <div class="content"> <a class="header"> geeksforgeeks </a> </div> </div> </div> <div class="column"> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> <div class="content"> <a class="header"> geeksforgeeks </a> </div> </div> </div> <div class="column"> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> <div class="content"> <a class="header"> geeksforgeeks </a> </div> </div> </div> </div> </body> </html>
Producción:
Variaciones de la tarjeta de interfaz de usuario semántica
Ejemplo 2: a continuación se muestra el código que demuestra el uso de variaciones centradas en la tarjeta de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Card Variations</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <center> <h1 class="header ui green">GeeksforGeeks</h1> <strong>Semantic UI Card Centered Variation</strong> </center> <div class="ui centered card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> <div class="content"> <a class="header">GeeksforGeeks</a> </div> </div> </body> </html>
Producción:
Variaciones de la tarjeta de interfaz de usuario semántica
Ejemplo 3: a continuación se muestra el código que demuestra el uso de las variaciones elevadas de la tarjeta de interfaz de usuario semántica .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Card Raised Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="header ui green">GeeksforGeeks</h1> <strong>Semantic UI Card Raised Variation</strong> <div class="ui raised card"> <div class="content"> <div class="header">GeeksforGeeks</div> <div class="meta"> <span class="category"> Website for interview preparation </span> </div> <div class="description"> <p> Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. </p> </div> </div> <div class="extra content"> <div class="right floated author"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> GeeksforGeeks </div> </div> </div> </center> </body> </html>
Producción:
Variaciones de la tarjeta de interfaz de usuario semántica
Ejemplo 4: a continuación se muestra el código que demuestra el uso de variaciones de enlace de tarjeta de interfaz de usuario semántica .
HTML
<html> <head> <title>Semantic-UI Card Link Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="header ui green">GeeksforGeeks</h1> <strong>Semantic UI Card Link Variation</strong> <div class="ui link card"> <div class="content"> <div class="header">GeeksforGeeks</div> <div class="meta"> <span class="category"> Website for interview preparation </span> </div> <div class="description"> <p> Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. </p> </div> </div> <div class="extra content"> <div class="right floated author"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> GeeksforGeeks </div> </div> </div> </center> </body> </html>
Producción:
Variaciones de la tarjeta de interfaz de usuario semántica
Ejemplo 5: a continuación se muestra el código que demuestra el uso de las variaciones 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:
Variaciones de la tarjeta de interfaz de usuario semántica
Ejemplo 6: a continuación se muestra el código que demuestra el uso de las variaciones de alineación de texto de la tarjeta de interfaz de usuario semántica .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic UI card</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="margin-inline: 10px;"> <center> <h1>GeeksforGeeks</h1> <strong>Semantic UI card fluid</strong> <br> <div class="ui card"> <div class="content"> <div class="left aligned header">Jenny Hess</div> <div class="right aligned description"> <p>GeeksforGeeks is a Computer Science Portal.</p> </div> </div> <div class="extra content"> <div class="center aligned author"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220303125025/gfglogo.png"> GfG </div> </div> </div> </center> </body> </html>
Producción:
Variaciones de la tarjeta de interfaz de usuario semántica
Ejemplo 7: a continuación se muestra el código que demuestra el uso de las variaciones de color de la tarjeta de interfaz de usuario semántica .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Card Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <center> <h1>Geeksforgeeks</h1> <strong> Semantic UI card colored-variations </strong><br/><br/> </center> <div class="ui four cards"> <div class="red card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="orange card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="yellow card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="olive card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="green card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="teal card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="blue card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="violet card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> </div> </body> </html>
Producción:
Variaciones de la tarjeta de interfaz de usuario semántica
Ejemplo 8: a continuación se muestra el código que demuestra el uso de las variaciones de recuento de columnas de la tarjeta de interfaz de usuario semántica .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Card Variations</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="margin-inline: 10px;"> <center> <h1>GeeksforGeeks</h1> <strong>Semantic UI card column count</strong> <br><br><br> <div class="ui two cards"> <div class="card"> GeeksforGeeks is a Computer Science portal. </div> <div class="card"> GeeksforGeeks is a Computer Science portal. </div> <div class="card"> GeeksforGeeks is a Computer Science portal. </div> </div> </center> </body> </html>
Producción:
Variaciones de la tarjeta de interfaz de usuario semántica
Ejemplo 9: a continuación se muestra el código que demuestra el uso de las variaciones apilables de la tarjeta de interfaz de usuario semántica .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Card Variations</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="margin-inline: 10px;"> <center> <h1>GeeksforGeeks</h1> <strong>Semantic UI card stackable</strong> <br><br><br> <div class="ui four stackable cards"> <div class="card"> GeeksforGeeks is Computer Science Portal! </div> <div class="card"> GeeksforGeeks is Computer Science Portal! </div> <div class="card"> GeeksforGeeks is Computer Science Portal! </div> <div class="card"> GeeksforGeeks is Computer Science Portal! </div> <div class="card"> GeeksforGeeks is Computer Science Portal! </div> <div class="card"> GeeksforGeeks is Computer Science Portal! </div> </div> </center> </body> </html>
Producción:
Variaciones de la tarjeta de interfaz de usuario semántica
Ejemplo 10: a continuación se muestra el código que demuestra el uso de las variaciones de duplicación de la tarjeta de 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"> <title>Semantic UI card Doubling variation</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="padding: 20px;"> <h1>GeeksforGeeks</h1> <strong>Semantic UI card Doubling Variation</strong> <br> <!-- doubling refers to a group of cards can double its column width for mobile--> <div class="ui three doubling cards"> <!-- fluid card takes up the width of its parent container--> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> </div> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> </div> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> </div> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> </div> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> </div> </div> </body> </html>
Producción:
Variaciones de la tarjeta de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/card.html#fluid-card
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA