Semantic UI es un marco de desarrollo front-end gratuito de código abierto que está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar . Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
Un divisor de interfaz de usuario semántica generalmente se usa para dividir el contenido de manera concisa en diferentes secciones. La interfaz de usuario semántica tiene 3 tipos diferentes de divisores, cada tipo puede tener 5 variaciones diferentes. En este artículo, analicemos las variaciones ajustadas en las variaciones del divisor admitidas en la interfaz de usuario semántica.
En este artículo, analicemos la variación ajustada en la clase divisora admitida en la interfaz de usuario semántica. El divisor de interfaz de usuario semántico generalmente se usa para dividir el contenido de manera concisa en diferentes secciones.
Semantic-UI Divider Clase de variación ajustada:
- equipado: Esta clase se utiliza para ser equipado, sin ningún espacio por encima o por debajo de ella.
Sintaxis:
<div class ="ui segment">
<div class="ui fitted divider">
...
</div>
....
</div>
El siguiente ejemplo ilustra la variante ajustada de variaciones del divisor de interfaz de usuario semántica
Ejemplo 1: El siguiente ejemplo demuestra la variación ajustada de la clase del divisor .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <h1>GeeksforGeeks</h1> <strong> Semantic-UI Divider Variations Fitted Variant </strong> <div class="ui segment"> <p> CSS(Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. </p> <div class="ui fitted divider"></div> <p> JavaScript is the world most popular lightweight, interpreted compiled programming language. It is also known as scripting language for web pages. It is well-known for the development of web pages, many non-browser environments also use it. </p> </div> </body> </html>
Producción:
Ejemplo 2: el segundo ejemplo muestra una ligera variación de la variación del divisor ajustado con el encabezado y los párrafos sin dejar espacios adicionales entre las secciones.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <h1>GeeksforGeeks</h1> <strong> Semantic-UI Divider Variations Fitted Variant </strong> <h3 class="ui header"> Semantic UI </h3> <div class="ui fitted divider"></div> <p> Semantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. In terms of user-friendliness, Semantic UI is better than Bootstrap. </p> <h3 class="ui header"> Semantic UI - Fitted type Divider </h3> <div class="ui fitted divider"></div> <p> A conventional divider leaves some space above and below the divider whereas, the fitted variation divides the section without leaving any space above or below the divider. </p> </body> </html>
Producción:
Variaciones del divisor de interfaz de usuario semántica Variante ajustada
Referencia: https://semantic-ui.com/elements/divider.html#fitted
Publicación traducida automáticamente
Artículo escrito por jssuriyakumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA