En este artículo, aprenderemos a utilizar las variaciones de tamaño de la ruta de navegación de la interfaz de usuario semántica del marco de la interfaz de usuario semántica. Las variaciones de tamaño de la ruta de navegación de la interfaz de usuario semántica se utilizan para agregar diferentes tamaños de los elementos de la ruta de navegación.
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. Crearemos una interfaz de usuario para mostrar las diferentes variaciones de tamaño de la ruta de navegación.
Clases de variaciones de tamaño de ruta de navegación de interfaz de usuario semántica:
- mini : esta clase se utiliza para mostrar la ruta de navegación de tamaño mini.
- tiny : esta clase se utiliza para mostrar la ruta de navegación de tamaño minúsculo.
- small : esta clase se utiliza para mostrar la ruta de navegación de tamaño pequeño.
- grande : esta clase se utiliza para mostrar la ruta de navegación de gran tamaño.
- big : esta clase se usa para mostrar la ruta de navegación de gran tamaño.
- enorme : esta clase se utiliza para mostrar la ruta de navegación de gran tamaño.
- masivo : esta clase se utiliza para mostrar la ruta de navegación de tamaño masivo.
Sintaxis:
<div class="ui large breadcrumb">
Large Breadcrumb
</div>
Ejemplo 1: este ejemplo describe los usos de las variaciones de tamaño de ruta de navegación de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed Semantic UI CSS --> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <h3>Semantic UI: Breadcrumb Size Variation</h3> <h6>Mini</h6> <div class="ui mini breadcrumb"> <a class="section">Home</a> <i class="right chevron icon divider"></i> <a class="section">Article</a> <i class="right chevron icon divider"></i> <div class="active section">Semantic UI</div> </div> <br> <h5>tiny</h5> <div class="ui tiny breadcrumb"> <a class="section">Home</a> <i class="right chevron icon divider"></i> <a class="section">Article</a> <i class="right chevron icon divider"></i> <div class="active section">Semantic UI</div> </div> <br> <h4>small</h4> <div class="ui small breadcrumb"> <a class="section">Home</a> <i class="right chevron icon divider"></i> <a class="section">Article</a> <i class="right chevron icon divider"></i> <div class="active section">Semantic UI</div> </div> <br> <h3>large</h3> <div class="ui large breadcrumb"> <a class="section">Home</a> <i class="right chevron icon divider"></i> <a class="section">Article</a> <i class="right chevron icon divider"></i> <div class="active section">Semantic UI</div> </div> <br> <h2>big</h2> <div class="ui big breadcrumb"> <a class="section">Home</a> <i class="right chevron icon divider"></i> <a class="section">Article</a> <i class="right chevron icon divider"></i> <div class="active section">Semantic UI</div> </div> <br> <h1>huge</h1> <div class="ui huge breadcrumb"> <a class="section">Home</a> <i class="right chevron icon divider"></i> <a class="section">Article</a> <i class="right chevron icon divider"></i> <div class="active section">Semantic UI</div> </div> <br> <h1>massive</h1> <div class="ui massive breadcrumb"> <a class="section">Home</a> <i class="right chevron icon divider"></i> <a class="section">Article</a> <i class="right chevron icon divider"></i> <div class="active section">Semantic UI</div> </div> </center> </body> </html>
Producción:
Variación del tamaño de la ruta de navegación de la interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Semantic UI: Breadcrumb Size Variation</h3> <h6>Mini</h6> <div class="ui mini breadcrumb"> <a class="section">Home</a> <i class="divider">/</i> <a class="section">Article</a> <i class="divider">/</i> <div class="active section">Semantic UI</div> </div> <br> <h5>tiny</h5> <div class="ui tiny breadcrumb"> <a class="section">Home</a> <i class="divider">/</i> <a class="section">Article</a> <i class="divider">/</i> <div class="active section">Semantic UI</div> </div> <br> <h4>small</h4> <div class="ui small breadcrumb"> <a class="section">Home</a> <i class="divider">/</i> <a class="section">Article</a> <i class="divider">/</i> <div class="active section">Semantic UI</div> </div> <br> <h3>large</h3> <div class="ui large breadcrumb"> <a class="section">Home</a> <i class="divider">/</i> <a class="section">Article</a> <i class="divider">/</i> <div class="active section">Semantic UI</div> </div> <br> <h2>big</h2> <div class="ui big breadcrumb"> <a class="section">Home</a> <i class="divider">/</i> <a class="section">Article</a> <i class="divider">/</i> <div class="active section">Semantic UI</div> </div> <br> <h1>huge</h1> <div class="ui huge breadcrumb"> <a class="section">Home</a> <i class="divider">/</i> <a class="section">Article</a> <i class="divider">/</i> <div class="active section">Semantic UI</div> </div> <br> <h1>massive</h1> <div class="ui massive breadcrumb"> <a class="section">Home</a> <i class="divider">/</i> <a class="section">Article</a> <i class="divider">/</i> <div class="active section">Semantic UI</div> </div> </center> </body> </html>
Producción:
Variación del tamaño de la ruta de navegación de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/breadcrumb.html#size
Publicación traducida automáticamente
Artículo escrito por omkarbhusnale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA