La interfaz de usuario semántica es un marco que se utiliza para crear una excelente interfaz de usuario. Es un marco de código abierto que utiliza CSS y jQuery. 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.
Se utiliza una etiqueta de interfaz de usuario semántica para crear clasificaciones de contenido significativas. En este artículo, aprenderemos a usar las variaciones circulares de la etiqueta de la interfaz de usuario semántica del marco de la interfaz de usuario semántica. La variación circular de etiqueta de interfaz de usuario semántica se utiliza para agregar una etiqueta circular al elemento.
Clase de variaciones circulares de etiqueta de interfaz de usuario semántica:
- circular: esta clase se utiliza para crear la etiqueta circular.
Sintaxis:
<a class="ui red circular label"> Content... </a>
Ejemplo 1: este ejemplo describe los usos de las variaciones circulares de etiquetas de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Circular Variations </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Label Circular Variations</h3> <a class="ui red circular mini label"></a> <a class="ui orange circular tiny label"></a> <a class="ui yellow circular small label"></a> <a class="ui olive circular label"></a> <a class="ui green circular medium label"></a> <a class="ui teal circular large label"></a> <a class="ui blue circular big label"></a> <a class="ui violet circular large label"></a> <a class="ui purple circular medium label"></a> <a class="ui pink circular label"></a> <a class="ui brown circular small label"></a> <a class="ui grey circular tiny label"></a> <a class="ui black circular mini label"></a> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe los usos de las variaciones circulares de etiqueta de interfaz de usuario semántica con contenido de etiqueta.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Circular Variations </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Label Circular Variations</h3> <a class="ui red circular label">G</a> <a class="ui orange circular label">e</a> <a class="ui yellow circular label">e</a> <a class="ui olive circular label">k</a> <a class="ui green circular label">s</a> <a class="ui teal circular label">f</a> <a class="ui blue circular label">o</a> <a class="ui violet circular label">r</a> <a class="ui purple circular label">G</a> <a class="ui pink circular label">e</a> <a class="ui brown circular label">e</a> <a class="ui grey circular label">k</a> <a class="ui black circular label">s</a> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/label.html#circular
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA