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. Utiliza una clase para agregar CSS a los elementos. Semantic-UI tiene encabezados realmente geniales que se pueden usar con texto, íconos y muchos más.
Un encabezado proporciona un breve resumen del contenido. Semantic-UI tiene encabezados realmente geniales que se pueden usar con texto, íconos y muchos más. La interfaz de usuario semántica tiene diferentes tipos de variaciones de encabezado, como encabezados de página, encabezados de contenido, encabezados de iconos y encabezados de subencabezados. En este artículo, aprenderemos sobre el encabezado del subtítulo en la interfaz de usuario semántica.
El subencabezado es un elemento de encabezado que tiene formato de contenido más pequeño o sin énfasis. Para convertir un encabezado en un subencabezado en la interfaz de usuario semántica, usamos la clase .sub junto con las clases .ui y .header . La clase .sub convierte el encabezado de la interfaz de usuario semántica en un subencabezado quitando énfasis al contenido con una fuente más pequeña. La clase .sub se puede usar en los elementos <div>, <span> y <h1> a <h6>.
Clase de encabezado de subtítulo de IU semántica:
- sub: la clase .sub convierte el elemento del encabezado en el subencabezado reduciendo el tamaño de la fuente.
Sintaxis:
<h2 class="ui header">
...content
<div class="ui sub header">
...Content
</div>
</h2>
Ejemplo 1: este ejemplo muestra una comparación entre un encabezado básico y un subencabezado en la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Semantic UI subheader header</strong> <br /><br /> </center> <div class="ui header"> Geeksforgeeks header </div> <div class="ui sub header"> Geeksforgeeks subheader </div> <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> </body> </html>
Producción:
Producción
Ejemplo 2: este ejemplo muestra un subtítulo en la interfaz de usuario semántica mediante el uso de elementos <span>, <div> y <h1> a <h6>.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Semantic UI subheader header</strong> <br /><br /> </center> <div class="ui sub header"> div element Geeksforgeeks subheader </div> <span class="ui sub header"> span element Geeksforgeeks subheader </span> <h1 class="ui sub header"> h1 element Geeksforgeeks subheader </h1> <h2 class="ui sub header"> h2 element Geeksforgeeks subheader </h2> <h3 class="ui sub header"> h3 element Geeksforgeeks subheader </h3> <h4 class="ui sub header"> h4 element Geeksforgeeks subheader </h4> <h5 class="ui sub header"> h5 element Geeksforgeeks subheader </h5> <h6 class="ui sub header"> h6 element Geeksforgeeks subheader </h6> <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> </body> </html>
Producción:
Producción
Referencia:https://semantic-ui.com/elements/header.html#subheader
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA