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.
Una tarjeta es un elemento esencial en nuestro sitio web cuando queremos mostrar información como título, imagen, etc. en forma de tarjeta que viene en diferentes formas y tamaños.
Tipos de tarjetas de IU semántica: Hay dos tipos de tarjetas en la IU semántica.
- Tarjeta: Se utiliza para mostrar una sola tarjeta.
- Tarjetas: Se utiliza para mostrar varias tarjetas.
Sintaxis:
<div class="ui cards">
<div class="card">
....
</div>
....
</div>
Ejemplo 1: En el siguiente programa, estaremos haciendo una sola tarjeta usando la tarjeta tipo.
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"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header">Card</div> <br> <div class="ui card"> <!--Creating a single card--> <!--Inserting an image into the card--> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217085640/geeksimage-200x145.png"> </div> <div class="content"> <!--Giving the title --> <a class="header">GeeksforGeeks </a> <div class="meta"> <span class="founded">Founded in 2009</span> </div> <!--Information about the card--> <div class="description"> GeeksforGeeks provides a variety of services for you to learn, thrive and also have fun such as Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions,etc. </div> </div> <!--Adding extra content at the bottom of the card --> <div class="extra content"> <a> <i class="user icon"></i> 50M Followers </a> </div> </div> </body> </html>
Producción:
Tipos de tarjetas de interfaz de usuario semántica
Ejemplo 2: En el siguiente ejemplo, crearemos varias tarjetas utilizando el tipo de tarjetas.
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"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header">Cards</div> <br> <!--Creating Cards--> <div class="ui cards"> <!--Making the border blue--> <div class="blue card"> <div class="content"> <!--Title of card--> <div class="header"> Sachin Tendulkar </div> <div class="meta"> Sport: Cricket </div> <!--Information of card--> <div class="description"> Sachin Tendulkar is known as the God of Cricket. </div> <!--Extra content at the bottom--> <div class="extra content"> <a> <i class="user icon"></i> 225M Followers </a> </div> <!--Button at the bottom--> <div class="ui bottom attached button"> <i class="add icon"></i> Follow </div> </div> </div> <!--Making the border green--> <div class="green card"> <div class="content"> <!--Title of card--> <div class="header"> Roger Federer </div> <div class="meta"> Sport: Tennis </div> <!--Information of card--> <div class="description"> Roger Federer is the best Tennis player of the decade. </div> <!--Extra content at the bottom--> <div class="extra content"> <a> <i class="user icon"></i> 205M Followers </a> </div> <!--Button at the bottom--> <div class="ui bottom attached button"> <i class="add icon"></i> Follow </div> </div> <!--Second card content over--> </div> <!--Second card ends--> <div class="red card"> <!--Making the border red--> <div class="content"> <div class="header"> <!--Title of card--> Mo Salah </div> <div class="meta"> Sport: Football </div> <!--Information of card--> <div class="description"> Mo Salah has scored the most goals in Premier League. </div> <!--Extra content at the bottom--> <div class="extra content"> <a> <i class="user icon"></i> 150M Followers </a> </div> <!--Button at the bottom--> <div class="ui bottom attached button"> <i class="add icon"></i> Follow </div> </div> </div> </div> </body> </html>
Producción:
Tipos de tarjetas de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/card.html
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA