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 el tipo de cinta de etiquetas de la interfaz de usuario semántica del marco de la interfaz de usuario semántica. Los tipos de cinta de etiquetas de interfaz de usuario semántica se utilizan para agregar una etiqueta que puede aparecer como una cinta que se adjunta a un elemento.
Clases de tipo de cinta de etiqueta de interfaz de usuario semántica:
- cinta: esta clase se utiliza para adjuntar una cinta al lado izquierdo de un elemento.
- cinta derecha: esta clase se utiliza para adjuntar una cinta al lado derecho de un elemento.
Sintaxis:
<div class="ui raised segment">
<a class="ui red ribbon label"> Content... </a>
<span> Content... </span>
...
</div>
Ejemplo 1: este ejemplo describe los usos del tipo de cinta de etiquetas de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Ribbon Type </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 Ribbon Type</h3> </div> <br> <div class="ui container three column grid"> <div class="column"> <div class="ui raised segment"> <a href="https://www.geeksforgeeks.org/html/" class="ui ribbon label">HTML</a> <strong>HTML Tutorials</strong> <p> HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages. </p> </div> </div> <div class="column"> <div class="ui raised segment"> <a href="https://www.geeksforgeeks.org/css/" class="ui ribbon label">CSS</a> <strong>CSS Tutorials</strong> <p> CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page. </p> </div> </div> <div class="column"> <div class="ui raised segment"> <a href="https://www.geeksforgeeks.org/javascript/" class="ui ribbon label">JavaScript</a> <strong>HTML Tutorials</strong> <p> JavaScript is the world most popular lightweight, interpreted compiled programming language. It is also known as scripting language for web pages. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. </p> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe los usos del tipo de cinta de etiquetas de interfaz de usuario semántica con variaciones de color y tamaño.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Ribbon Type </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 Ribbon Type</h3> </div> <br> <div class="ui container three column grid"> <div class="column"> <div class="ui raised segment"> <a href="https://www.geeksforgeeks.org/html/" class="ui green small ribbon label">HTML</a> <strong>HTML Tutorials</strong> <p> HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages. </p> </div> </div> <div class="column"> <div class="ui raised segment"> <a href="https://www.geeksforgeeks.org/css/" class="ui blue large ribbon label">CSS</a> <strong>CSS Tutorials</strong> <p> CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page. </p> </div> </div> <div class="column"> <div class="ui raised segment"> <a href="https://www.geeksforgeeks.org/javascript/" class="ui red big ribbon label">JavaScript</a> <strong>HTML Tutorials</strong> <p> JavaScript is the world most popular lightweight, interpreted compiled programming language. It is also known as scripting language for web pages. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. </p> </div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/label.html#ribbon
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA