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. 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, duplicación. En este artículo, analizaremos la variación del recuento de columnas del grupo de tarjetas de la interfaz de usuario semántica.
Variaciones de tarjeta de IU semántica Recuento de columnas La variante de grupo de tarjetas hace que el grupo de tarjetas se organice en un diseño con el número deseado de columnas. Usamos el número de columnas como la clase junto con la IU y las clases de tarjetas de la IU semántica para crear la variación del grupo de tarjetas de conteo de columnas.
Variaciones de tarjeta de interfaz de usuario semántica Número de columnas Grupo de tarjetas Clase de variante:
- column-count: esta clase se usa para forzar al grupo de tarjetas a un diseño del número deseado de columnas donde el número de columnas en sí se usa como clase.
Sintaxis:
<div class="UI <number-of-columns> cards">
<div class="ui card">
</div>
</div>
Ejemplo 1: el siguiente ejemplo demuestra la variación del número de columnas del grupo de tarjetas de la IU semántica. Este ejemplo tiene un grupo de tarjetas de 5 columnas.
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 column count 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;"> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>Semantic UI card column count Variation</strong> </center><br> <div class="ui five cards"> <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 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> </div> </body> </html>
Producción:
Producción
Ejemplo 2: el siguiente ejemplo demuestra la variación del número de columnas del grupo de tarjetas de la IU semántica. Este ejemplo tiene un grupo de tarjetas de 3 columnas.
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 column count 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;"> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>Semantic UI card column count Variation</strong> </center><br> <div class="ui three cards"> <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 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> </div> </body> </html>
Producción:
Producción
Referencia: https://semantic-ui.com/views/card.html#column-count
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA