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.
Los tipos de elementos de interfaz de usuario semántica nos ofrecen elementos que se han utilizado para crear varios elementos. La vista Elemento presenta grandes colecciones de contenido del sitio para su visualización.
Clase de tipo de elemento de interfaz de usuario semántica:
- Artículos: este es el único tipo en el artículo.
Sintaxis:
<div class="ui items"> ... </div>
Los siguientes ejemplos ilustran el tipo de elemento de interfaz de usuario semántica:
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong>Semantic-UI Item Types</strong> </center> <br><br> <strong>Items Type:</strong> <br> <div class="ui divided items container"> <div class="item"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="content"> <a class="header" href="https://www.geeksforgeeks.org/"> Geeksforgeeks </a> <div class="meta"> <span>A Computer Science Portal for Geeks</span> </div> <div class="extra"> This is where GeeksforGeeks comes into picture - A computer science portal for geeks, by geeks. ...GeeksforGeeks.org was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. </div> </div> </div> </div> </body> </html>
Producción:
Tipo de elemento de interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong>Semantic-UI Item Types</strong> </center> <br><br> <strong>Items Type:</strong> <br> <div class="ui divided items container"> <div class="item"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="content"> <a class="header" href="https://www.geeksforgeeks.org/"> Geeksforgeeks </a> <div class="meta"> <span>A Computer Science Portal for Geeks</span> </div> <div class="extra"> This is where GeeksforGeeks comes into picture - A computer science portal for geeks, by geeks. ...GeeksforGeeks.org was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. </div> </div> </div> <div class="item"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220211141617/Screenshot20220211141558-200x189.png"> </div> <div class="content"> <a class="header">Sandeep Jain</a> <div class="meta"> <span>Founder of Geeksforgeeks</span> </div> <div class="extra"> <p> Expert Advice series, we’re constantly trying to provide you with several enriching advice and mentorship every month to resolve all your career-related concerns and make your journey smoother. </p> <div class="ui right floated green button"> Connect </div> </div> </div> </div> </div> </body> </html>
Producción:
Tipo de elemento de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/item.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA