Semantic UI es un marco de código abierto que tiene algunas clases predefinidas para hacer que nuestro sitio web se vea hermoso y receptivo. Es similar a bootstrap ya que tiene clases predefinidas para su uso. Usó CSS y jQuery para construir la interfaz. Tiene algunos tipos diferentes de elementos que nos ayudan a crear un sitio web hermoso.
Los encabezados semánticos de la interfaz de usuario se utilizan para proporcionar un breve resumen del contenido. Podemos usar estos encabezados con texto, íconos, etc. Los encabezados de contenido de IU semántica se usan para dar importancia a las secciones. Hay muchos tipos de encabezados, como enorme, grande, mediano, pequeño, diminuto , etc.
En este artículo, discutiremos el tipo de encabezados de contenido en la interfaz de usuario semántica.
Clases de tipo de encabezados de contenido de interfaz de usuario semántica:
- enorme: esta clase se utiliza para crear el encabezado de gran tamaño.
- grande: esta clase se utiliza para crear el encabezado de gran tamaño.
- medium: esta clase se utiliza para crear un encabezado de tamaño mediano.
- pequeño: esta clase se utiliza para crear un encabezado de tamaño pequeño.
- tiny: esta clase se utiliza para crear el encabezado de tamaño minúsculo.
Sintaxis:
<div class="ui Content-Headers-Type-Class header"> .... </div>
Ejemplo 1: el siguiente código demuestra el tipo de encabezados de contenido de la interfaz de usuario semántica utilizando clases enormes y grandes .
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Content Headers Type </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 class="ui header green"> GeeksforGeeks </h2> <h3> Semantic-UI Content Headers Type </h3> <div class="ui segment"> <div class="ui huge header"> GeeksforGeeks Huge header </div> <p> A Computer Science portal for geeks. </p> <div class="ui large header"> GeeksforGeeks Large header </div> <p> Portal for geeks. </p> </div> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente código demuestra el tipo de encabezados de contenido de la interfaz de usuario semántica mediante las clases medium , small y tiny .
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Content Headers Type </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 class="ui header green"> GeeksforGeeks </h2> <h3> Semantic-UI Content Headers Type </h3> <div class="ui segment"> <div class="ui medium header"> GeeksforGeeks Medium header </div> <p> A Computer Science portal for geeks. </p> <div class="ui small header"> GeeksforGeeks Small header </div> <p> Portal for geeks. </p> <div class="ui tiny header"> GeeksforGeeks Tiny header </div> <p> Computer Science portal. </p> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/header.html#content-headers
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA