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. Utiliza una clase para agregar CSS a los elementos.
Un feed muestra la actividad del usuario. Por ejemplo Newsfeed en Facebook.
Ejemplo 1: Este ejemplo crea el contenido del feed usando Semantic-ui.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div style="margin-top: 20px" class="ui container"> <div class="ui feed"> <div class="event"> <div class="label"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200510132051/image30.png"> </div> <div class="content"> <div class="summary"> <a class="user"> Geeksforgeeks </a> starting following you. <div class="date"> 2 Hour Ago </div> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 1k Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200510132051/image30.png"> </div> <div class="content"> <div class="summary"> <a>Geeksforgeeks</a> changed </br> thier profile picture <div class="date"> 6 days ago </div> </div> <div class="extra images"> <a><img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200510132051/image30.png"></a> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 120k Like </a> </div> </div> </div> <div class="event"> <div class="label"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200510132051/image30.png"> </div> <div class="content"> <div class="summary"> <a>Geeksforgeeks</a> <div class="date"> 3 days ago </div> </div> <div class="extra text"> New courses are available on</br> 20% discount for summer. </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 5 Likes </a> </div> </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo crea el contenido de la fuente con un ícono usando Semantic-ui.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div style="margin-top: 20px" class="ui container"> <div class="ui feed"> <div class="event"> <div class="label"> <i class="computer icon"></i> </div> <div class="content"> <div class="summary"> Geeksforgeeks just launched new Courses. <div class="date"> 1 hour ago. </div> </div> </div> </div> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA