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 adjunto de etiqueta de interfaz de usuario semántica del marco de interfaz de usuario semántica. El tipo adjunto de etiqueta de interfaz de usuario semántica se utiliza para adjuntar una etiqueta al segmento de contenido.
Clases de tipo adjunto de etiqueta de interfaz de usuario semántica:
- adjunto superior: esta clase se utiliza para adjuntar una etiqueta en la parte superior del contenido.
- adjunto inferior: esta clase se utiliza para adjuntar una etiqueta al final del contenido.
- adjunto a la derecha: esta clase se utiliza para adjuntar una etiqueta a la derecha del contenido.
- adjunto a la izquierda: esta clase se utiliza para adjuntar una etiqueta a la izquierda del contenido.
Sintaxis:
<div class="ui top attached label"> Content... </div>
Ejemplo 1: este ejemplo describe los usos del tipo adjunto de etiqueta de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Attached 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 Attached Type</h3> </div> <br> <div class="ui container three column grid"> <div class="column"> <div class="ui raised segment"> <div class="ui top attached label"> <strong>HTML Tutorials</strong> </div> <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"> <div class="ui bottom attached label"> <strong>CSS Tutorials</strong> </div> <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"> <div class="ui bottom right attached label"> <strong>HTML Tutorials</strong> </div> <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 class="column"> <div class="ui raised segment"> <div class="ui left bottom attached label"> <strong>jQuery Tutorials</strong> </div> <p> jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, it simplifies HTML document traversing and manipulation. </p> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui top left attached label"> <strong>ReactJS Tutorials</strong> </div> <p> React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It's 'V' in MVC. ReactJS is an open-source, component-based front- end library responsible only for the view layer of the application. It is maintained by Facebook. It uses for single page applications. </p> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui top right attached label"> <strong>PHP Tutorials</strong> </div> <p> The term PHP is an acronym for Hypertext Preprocessor. It is a server-side scripting language that is used for web development. HTML codes can also be written in a PHP file. The PHP codes are executed on the server-side whereas HTML codes are directly executed on the browser. </p> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe los usos del tipo adjunto de etiqueta de interfaz de usuario semántica con variaciones de color y tamaño.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Attached 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 Attached Type</h3> </div> <br> <div class="ui container three column grid"> <div class="column"> <div class="ui raised segment"> <div class="ui top attached green label"> <strong>HTML Tutorials</strong> </div> <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"> <div class="ui bottom attached blue label"> <strong>CSS Tutorials</strong> </div> <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"> <div class="ui bottom right attached red label"> <strong>HTML Tutorials</strong> </div> <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 class="column"> <div class="ui raised segment"> <div class="ui left bottom attached yellow small label"> <strong>jQuery Tutorials</strong> </div> <p> jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, it simplifies HTML document traversing and manipulation. </p> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui top left attached red medium label"> <strong>ReactJS Tutorials</strong> </div> <p> React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It's 'V' in MVC. ReactJS is an open-source, component-based front- end library responsible only for the view layer of the application. It is maintained by Facebook. It uses for single page applications. </p> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui top right attached green large label"> <strong>PHP Tutorials</strong> </div> <p> The term PHP is an acronym for Hypertext Preprocessor. It is a server-side scripting language that is used for web development. HTML codes can also be written in a PHP file. The PHP codes are executed on the server-side whereas HTML codes are directly executed on the browser. </p> </div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/label.html#attached
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA