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 proporciona a los usuarios varios íconos diferentes que se pueden usar para diferentes propósitos con una hermosa interfaz de usuario. Los subtítulos agregan contenido sin énfasis al sitio web que la representación textual principal. En este artículo, veamos las clases de tipos de subencabezados junto con ejemplos.
Clases de tipos de encabezados de iconos de interfaz de usuario semántica:
- subencabezados: en esta clase, los encabezados pueden formatearse para etiquetar contenido más pequeño o sin énfasis.
Sintaxis:
<div class="ui sub header">
...
</div>
Ejemplo 1: El siguiente código de ejemplo demuestra el tipo de subencabezados usando algún texto.
HTML
<html> <head> <title>Semantic-UI Icon sub Headers Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Icon sub Headers Type </h3> <h2 class="ui sub header"> Geeksforgeeks </h2> <span> It is a computer Science portal </span> </center> <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Tipo de subencabezados de interfaz de usuario semántica
Ejemplo 2: El siguiente código de ejemplo demuestra el tipo de subencabezados usando una imagen.
HTML
<html> <head> <title>Semantic-UI Icon sub Headers Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Icon sub Headers Type </h3> <div class="ui horizontal list"> <div class="item"> <img class="ui mini circular image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220306131409/one2optimizedmin-300x184.png"> <div class="content"> <div class="ui sub header">Sandeep Jain</div> Founder Geeksforgeeks </div> </div> <div class="item"> <img class="ui mini circular image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220306131521/two.png"> <div class="content"> <div class="ui sub header">Pranay Bansal</div> Course Instructor Geeksforgeeks </div> </div> </div> </center> <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Tipo de subencabezados de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/header.html#sub-headers
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA