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 interfaz de usuario semántica ofrece un componente Breadcrumb para que los usuarios muestren el orden o la clasificación en el contenido. Se utiliza para mostrar cierta jerarquía entre el contenido. Hay diferentes representaciones de contenido de breadcrumb. Hay diferentes clases que ayudan en la gestión de la jerarquía entre los contenidos de la página web.
Clase de contenido de ruta de navegación de interfaz de usuario semántica:
- Divisor : puede usar diferentes tipos de indicadores o divisores para representar la relación entre las diferentes secciones. Puede ser un icono o un texto según sus necesidades.
- Sección : la ruta de navegación puede contener secciones que se pueden formatear como un enlace o algún texto.
- Enlace : la ruta de navegación puede contener enlaces.
Sintaxis:
<div class="ui breadcrumb">
<a class="section">...</a>
<div class="divider"> / </div>
<div class="active section"
<a href="#">...</a>
</div>
</div>
El siguiente ejemplo ilustra el contenido de la ruta de navegación de la interfaz de usuario semántica:
Ejemplo 1: El siguiente ejemplo demuestra la clase de divisor de contenido de migas de pan.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1>GeeksforGeeks</h1> <strong>Semantic UI Breadcrumb Content Divider</strong> </center> <br> <div class="ui breadcrumb" style="margin:20px;"> <a class="section" style="color:green;"> GeeksforGeeks </a> <div class="divider"> / </div> <a class="section" style="color:green;">Articles</a> <div class="divider"> / </div> <div class="active section">Breadcrumb</div> </div> <br /> <div class="ui breadcrumb" style="margin:20px;"> <a class="section" style="color:green;"> GeeksforGeeks </a> <i class="right angle icon divider"></i> <a class="section" style="color:green;"> Articles </a> <i class="right arrow icon divider"></i> <div class="active section"> Breadcrumb </div> </div> </body> </html>
Producción:
Contenido de la ruta de navegación de la interfaz de usuario semántica
Ejemplo 2: El siguiente código demuestra la clase de sección Contenido de migas de pan.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1>GeeksforGeeks</h1> <strong>Semantic UI Breadcrumb Content Section</strong> </center> <br> <div class="ui breadcrumb" > <div class="section"> Home section </div> <div class="divider"> / </div> <div class="section"> Articles section </div> <div class="divider"> / </div> <div class="active section"> This is active section </div> </div> </body> </html>
Producción:
Contenido de la ruta de navegación de la interfaz de usuario semántica
Ejemplo 3: El siguiente código muestra la sección de migas de pan con la clase de enlace.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1>GeeksforGeeks</h1> <strong>Semantic UI Breadcrumb Content Link</strong> </center> <br> <div class="ui breadcrumb" > <div class="section"> Home section </div> <div class="divider"> / </div> <div class="active section"> Section with link : <a href= "https://www.geeksforgeeks.org/introduction-to-semantic-ui/"> Semantic UI tutorials </a> </div> </div> </body> </html>
Salida: ;
Contenido de la ruta de navegación de la interfaz de usuario semántica
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA