Semantic UI ofrece muchos componentes para que los usuarios diseñen su interfaz. Nos ofrece diferentes tipos de encabezados, diferentes tipos de contenido que contienen encabezados, estados de encabezado en diferentes variaciones.
En este artículo, aprenderemos sobre las variaciones del encabezado de la interfaz de usuario semántica . Las variaciones de encabezado tienen muchas variedades de encabezados, como encabezados divididos, de bloque, adjuntos, flotantes, de alineación de texto, coloreados e invertidos. Estos se pueden utilizar para modificar el comportamiento del encabezado de acuerdo con el requisito.
Clases de variaciones de encabezado de interfaz de usuario semántica:
- dividiendo : esta variación del encabezado se usa para dividirse del contenido debajo de él.
- bloque : esta variación del encabezado se usa para formatear para que aparezca dentro de un bloque de contenido
- adjunto : esta variación del encabezado se usa para adjuntar a otro contenido, como un segmento.
- floated : esta variación del encabezado se usa a la izquierda o a la derecha de otro contenido.
- alineación de texto : esta variación del encabezado se usa para el texto alineado a un lado.
- coloreado : esta variación del encabezado se usa para formatear con diferentes colores.
- invertido : Esta variación de la cabecera se utiliza para colores invertidos para el contraste.
Sintaxis:
<div class="ui Header-Variations header">
...
</div >
Los siguientes ejemplos ilustran las variaciones del encabezado de la interfaz de usuario semántica:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
.container {
margin-left: 15px;
}
</style>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<strong>Semantic UI Header Variations</strong>
<br><br>
</center>
<div class="container">
<strong>Dividing Header:</strong>
<div class="ui dividing header">
Geeksforgeeks
</div>
<strong>Block Header:</strong>
<div class="ui block header">
Geeksforgeeks
</div>
<strong>Attached Header:</strong>
<div class="ui top attached header">
Geeksforgeeks
</div>
<div class="ui attached segment">
<p>A Computer Science Portal for Geeks</p>
</div>
<div class="ui attached header">
Keep yourself Updated
</div>
<div class="ui attached segment">
<p>
Web-Development is an art using
CSS with the help of pre-processors
are not cup of tea that's why developers
really on frameworks like Semantic-UI.
</p>
</div>
<div class="ui bottom attached header">
Geeks Class
</div>
</div>
</body>
</html>
Producción:
Variaciones de encabezado de interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
.container {
margin-left: 15px;
}
</style>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<strong>Semantic UI Header Variations</strong>
<br><br>
</center>
<div class="container">
<strong>Floated Header:</strong>
<div class="ui clearing segment">
<h4 class="ui right floated header">
Next Class
</h4>
<h4 class="ui left floated header">
Previous Class
</h4>
</div>
<strong>Text-alignment Header:</strong>
<div class="ui segment">
<h4 class="ui right aligned header">
GeeksforGeeks
</h4>
<h4 class="ui left aligned header">
GeeksforGeeks
</h4>
<h4 class="ui justified header">
GeeksforGeeks: A Computer Science portal
</h4>
<h4 class="ui center aligned header">
Geeksforgeeks
</h4>
</div>
<strong>Colored Header:</strong>
<h4 class="ui green header">Geeksforgeeks:</h4>
<span class="ui red header">A</span>
<span class="ui orange header">Computer</span>
<span class="ui yellow header">Science</span>
<span class="ui olive header">Portal</span>
<span class="ui purple header">for</span>
<span class="ui teal header">Geeks</span>
<strong>Inverted Header:</strong>
<div class="ui inverted segment">
<h4 class="ui green header">Geeksforgeeks:</h4>
<span class="ui red header">A</span>
<span class="ui orange header">Computer</span>
<span class="ui yellow header">Science</span>
<span class="ui olive header">Portal</span>
<span class="ui purple header">for</span>
<span class="ui teal header">Geeks</span>
</div>
</div>
</body>
</html>
Producción:
Variaciones de encabezado de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/header.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA