En este artículo, aprenderemos a usar el contenido del divisor de migas de pan de la interfaz de usuario semántica del marco de la interfaz de usuario semántica. El contenido del divisor de migas de pan de la interfaz de usuario semántica se utiliza para mostrar la relación entre varias secciones dentro de los elementos de migas de pan.
La interfaz de usuario semántica es un marco de código abierto de uso gratuito que ofrece múltiples clases para crear una interfaz de usuario hermosa y receptiva. Hace uso de jQuery y CSS para crear una interfaz de usuario increíble que es muy similar a bootstrap . Tiene muchas clases que se utilizan para diseñar diferentes elementos en la estructura de la página web HTML.
Semantic UI ofrece muchos componentes para que los usuarios diseñen su interfaz. Uno de ellos es “ Breadcrumb ”. Una ruta de navegación es un contenedor que puede contener secciones a las que se les puede dar formato de enlace o de texto. Breadcrumb 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. Uno de ellos es Divider Content.
Clase de contenido del divisor de migas de pan de IU semántica:
- divisor: En breadcrumb se pueden usar varios tipos de divisores para mostrar la relación entre varias secciones. Puede ser un icono o un texto según sus necesidades.
Sintaxis:
<div class="ui breadcrumb">
<a class="section">...</a>
<div class="divider"> / </div>
<div class="active section"
<a href="#">...</a>
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra la clase de divisor de contenido de migas de pan.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Breadcrumb Divider Content</title> <!-- Compressed Semantic UI CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Semantic UI: Breadcrumb Divider Content</h3> <br> <div class="ui breadcrumb"> <a class="section">Home</a> <i class="divider"> / </i> <a class="section">GeeksforGeeks</a> <i class="divider"> / </i> <a class="section">Articles</a> <i class="divider"> / </i> <div class="active section">Semantic UI</div> </div> <br> <div class="ui breadcrumb"> <a class="section">Home</a> <i class="right chevron icon divider"></i> <a class="section">GeeksforGeeks</a> <i class="right chevron icon divider"></i> <a class="section">Articles</a> <i class="right chevron icon divider"></i> <div class="active section">Semantic UI</div> </div> <br> <div class="ui breadcrumb"> <a class="section">Home</a> <i class="right arrow icon divider"></i> <a class="section">GeeksforGeeks</a> <i class="right arrow icon divider"></i> <a class="section">Articles</a> <i class="right arrow icon divider"></i> <div class="active section">Semantic UI</div> </div> </center> </body> </html>
Producción:
Contenido del divisor de migas de pan de interfaz de usuario semántica
Ejemplo 2 : El siguiente ejemplo demuestra la clase divisora de contenido de migas de pan con la clase de enlace de contenido.
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed Semantic UI CSS --> <title>Semantic UI Breadcrumb Divider Content</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Semantic UI: Breadcrumb Divider Content</h3> <br> <div class="ui breadcrumb"> <a class="section">Home</a> <i class="right chevron icon divider"></i> <a class="section">GeeksforGeeks</a> <i class="right chevron icon divider"></i> <a class="section">Articles</a> <i class="right chevron icon divider"></i> <div class="active section"> Semantic Ref : <a href= "https://www.geeksforgeeks.org/semantic-ui/"> Semantic UI </a> </div> </div> <br> <div class="ui breadcrumb"> <a class="section">Home</a> <i class="right arrow icon divider"></i> <a class="section">GeeksforGeeks</a> <i class="right arrow icon divider"></i> <a class="section">Articles</a> <i class="right arrow icon divider"></i> <div class="active section"> Semantic Ref : <a href= "https://www.geeksforgeeks.org/semantic-ui/"> Semantic UI </a> </div> </div> <br> <div class="ui breadcrumb"> <a class="section">Home</a> <i class="divider"> / </i> <a class="section">GeeksforGeeks</a> <i class="divider"> / </i> <a class="section">Articles</a> <i class="divider"> / </i> <div class="active section"> Semantic Ref : <a href= "https://www.geeksforgeeks.org/semantic-ui/"> Semantic UI </a> </div> </div> </center> </body> </html>
Producción:
Contenido del divisor de migas de pan de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/breadcrumb.html
Publicación traducida automáticamente
Artículo escrito por omkarbhusnale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA