Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
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. En este artículo, discutiremos el contenido de la sección Breadcrumb junto con ejemplos.
Clase de contenido de la sección Breadcrumb de la interfaz de usuario semántica:
- Sección: esta clase se usa para definir la ruta de navegación como una sección que se puede formatear como un enlace o algún texto.
Sintaxis:
<div class="ui breadcrumb">
<a class="section">...</a>
<div class="divider"> / </div>
<div class="active section"
<a href="#">...</a>
</div>
</div>
Ejemplo 1: a continuación se muestra el código que ilustra el uso del contenido de la sección Breadcrumb.
HTML
<html> <head> <title>Semantic-UI Breadcrumb Section Content</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <br> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Breadcrumb Section Content </h3> <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> </center> </body> </html>
Producción:
Contenido de la sección Breadcrumb de IU semántica
Ejemplo 2: a continuación hay otro código que ilustra el uso del contenido de la sección Breadcrumb.
HTML
<html> <head> <title>Semantic-UI Breadcrumb Section Content</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <br> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Breadcrumb Section Content </h3> <div class="ui breadcrumb"> <div class="section"> GeeksforGeeks Home </div> <div class="divider"> -> </div> <div class="section"> Courses </div> <div class="divider"> -> </div> <div class="active section"> <a href= "https://practice.geeksforgeeks.org/courses/complete-interview-preparation"> Complete Interview Preparation - Self Paced </a> </div> </div> </center> </body> </html>
Producción:
Contenido de la sección Breadcrumb de IU semántica
Enlace de referencia: https://semantic-ui.com/collections/breadcrumb.html#section
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA