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. El tipo de encabezado de página es uno de los tipos de encabezado de interfaz de usuario semántica. Usando esta clase, los encabezados pueden orientarse para dar la jerarquía de una sección en el contexto de la página. Para crear un encabezado de página, agregue el encabezado ui de clase al elemento de encabezado (h1, h2, h3, h4, h5, h6) .
Clase de tipo de encabezados de página de interfaz de usuario semántica:
- header: esta clase se utiliza para hacer un encabezado de página. Da la jerarquía de una sección en el contexto de la página.
Sintaxis:
<heading_element class="ui header">
....
</heading_element >
Ejemplo 1: este ejemplo demuestra la clase de tipos de encabezado de interfaz de usuario semántica de encabezados de página con elementos de encabezado h1, h3 .
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://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 Page Headers Type</h3> <br> <hr> <div class="ui container"> <br> <h1 class="ui header"> Page Headers Type with <h1> heading </h1> <br> <h3 class="ui header"> Page Headers Type with <h3> heading </h3> <br> </div> <hr> </center> </body> </html>
Producción:
Tipo de encabezados de página 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 página con elementos de encabezado h2, h4, h5.
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://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 Page Headers Type</h3> <br> <hr> <div class="ui container"> <br> <h2 class="ui header"> Page Headers Type with <h2> heading </h2> <h4 class="ui header"> Page Headers Type with <h4> heading </h4> <h5 class="ui header"> Page Headers Type with <h5> heading </h5> <br> </div> <hr> </center> </body> </html>
Producción:
Tipo de encabezados de página de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/header.html#page-headers
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA