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.
Crearemos una interfaz de usuario para mostrar los diferentes tipos de encabezados. Después de crear esta plantilla básica, puede trabajar con diferentes componentes de la interfaz de usuario semántica.
Tipos de encabezado de interfaz de usuario semántica:
- Encabezados de página : en esta clase, los encabezados pueden estar orientados para dar la jerarquía de una sección en el contexto de la página.
- Encabezados de contenido : en esta clase, los encabezados pueden orientarse para dar la importancia de una sección en el contexto del contenido que la rodea.
- Encabezados de iconos : en esta clase, se puede formatear un encabezado para enfatizar un icono.
- Subencabezados : en esta clase, los encabezados se pueden formatear para etiquetar contenido más pequeño o sin énfasis.
Sintaxis:
<div class="ui Header-Types header"> .... </div>
Ejemplo 1: este ejemplo demuestra la clase de tipos de encabezado de interfaz de usuario semántica de encabezados de página.
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" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center><br> <h1 class="ui green header"> GeeksforGeeks </h1> <h3>Semantic UI Header Types</h3> <hr> <div class="ui container"> <h1 class="ui header">First header</h1> <h2 class="ui header">Second header</h2> <h3 class="ui header">Third header</h3> <h4 class="ui header">Fourth header</h4> <h5 class="ui header">Fifth header</h5> </div> <hr> </center> </body> </html>
Producción:
Tipos de encabezado de interfaz de usuario semántica
Ejemplo 2: este ejemplo demuestra la clase de tipos de encabezado de interfaz de usuario semántica de encabezados de contenido.
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" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center><br> <h1 class="ui green header"> GeeksforGeeks </h1> <h3>Semantic UI Header Types - Content Headers</h3> <hr> <div class="ui size vertical segment"> <h1 class="ui huge header">First header</h1> <h2 class="ui large header">Second header</h2> <h3 class="ui medium header">Third header</h3> <h4 class="ui small header">Fourth header</h4> <h5 class="ui tiny header">Fifth header</h5> </div> <hr> </center> </body> </html>
Producción:
Tipos de encabezado de interfaz de usuario semántica
Ejemplo 3: Este ejemplo demuestra la clase Tipos de encabezado de interfaz de usuario semántica de encabezados de icono.
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" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center><br> <h1 class="ui green header"> GeeksforGeeks </h1> <h3>Semantic UI Header Types - Icon Headers</h3> <hr> <div class="ui container"> <h3 class="ui center aligned icon header"> <i class="circular users icon"></i> Users </h3> <h3 class="ui center aligned icon header"> <i class="circular chess icon"></i> Chess </h3> </div> <hr> </center> </body> </html>
Producción:
Tipos de encabezado de interfaz de usuario semántica
Ejemplo 4: Este ejemplo demuestra la clase Tipos de encabezado de interfaz de usuario semántica de subencabezados.
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" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center><br> <h1 class="ui green header"> GeeksforGeeks </h1> <h3>Semantic UI Header Types - Sub Headers</h3> <hr> <div class="ui horizontal list"> <div class="item"> <i class="circular users icon"></i> <div class="content"> <div class="ui sub header">Users</div> Login/SignUp </div> </div> <div class="item"> <i class="circular chess icon"></i> <div class="content"> <div class="ui sub header">Chess</div> Play </div> </div> </div> <hr> </center> </body> </html>
Producción:
Tipos de encabezado de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/header.html#types
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA