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. La mejor parte de este marco es que crea diseños hermosos y receptivos, ya que contiene componentes semánticos preconstruidos.
El menú es un componente que muestra un grupo de elementos que sirven como navegación entre una sección del sitio web y otra. Es un componente imprescindible y siempre presente en cualquier sitio web para facilitar la navegación del usuario. En este artículo, discutiremos el tipo de texto del menú de la interfaz de usuario semántica. Se utiliza para dar formato a cualquier contenido de texto en el menú.
Clase de tipo de texto de menú de interfaz de usuario semántica:
- texto: esta clase se utiliza para dar formato al contenido de texto de un menú.
Sintaxis:
<div class="ui text menu">
<div class="header item">....</div>
<a class="active item">
....
</a>
......
</div>
Ejemplo 1: a continuación se muestra el código de ejemplo que demuestra el uso del tipo de texto de menú de IU semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic UI Menu text Type</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="margin-inline: 10px;"> <br> <h1>GeeksforGeeks</h1> <strong>Semantic UI Menu text Type</strong> <br><br> <div class="ui text menu"> <div class="header item">GeeksforGeeks</div> <a class="item"> Tutorials </a> <a class="active item"> Jobs </a> <a class="item"> Events </a> <a class="item"> Courses </a> </div> </body> </html>
Producción:
Tipo de texto del menú de interfaz de usuario semántica
Ejemplo 2: a continuación se muestra otro código de ejemplo que demuestra el uso del tipo de texto del menú de la interfaz de usuario semántica mediante un enlace.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic UI Menu text Type</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="margin-inline: 10px;"> <br> <h1>GeeksforGeeks</h1> <strong>Semantic UI Menu text Type</strong> <br><br> <div class="ui text menu"> <div class="header item"> GeeksforGeeks </div> <a class="item" href= "https://www.geeksforgeeks.org/array-data-structure/?ref=ghm"> Tutorials </a> <a class="active item" href= "https://practice.geeksforgeeks.org/jobs?ref=ghm"> Jobs </a> <a class="item" href= "https://practice.geeksforgeeks.org/events/?ref=ghm"> Events </a> <a class="item" href= "https://practice.geeksforgeeks.org/courses?ref=ghm"> Courses </a> </div> </body> </html>
Producción:
Tipo de texto del menú de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/menu.html#text
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA