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 se usa generalmente para dividir el contenido de manera concisa en diferentes secciones. La interfaz de usuario semántica tiene 3 tipos diferentes de divisores, que pueden tener 5 variaciones diferentes, como se indica a continuación. En este artículo, analicemos las diferentes variaciones de divisor del tipo de divisor horizontal compatibles con la interfaz de usuario semántica.
Variaciones del divisor de interfaz de usuario semántica: como mencionamos en el párrafo anterior, tenemos tres tipos de divisor y cada tipo tiene la variante fija de 5 divisores.
- Invertido : la variación invertida invertirá los colores originales a su color directamente opuesto.
- Ajustado : la variación ajustada se ajustará al divisor sin dejar espacio arriba y abajo.
- Oculto : la variación oculta crea un divisor que está oculto .
- Sección : la variación de la sección proporciona grandes márgenes para dividir las secciones del contenido web.
- Borrado : Borrado de variación, borre el contenido sobre el divisor.
Sintaxis:
<div class="ui Divider-Variation divider">
...
</div>
Los siguientes ejemplos ilustran las variaciones del divisor de interfaz de usuario semántica:
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI vertical divider</title> <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</strong> <br><br> <strong>Inverted Divider:</strong> <div class="ui inverted segment"> <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. It uses predefined CSS and jQuery to incorporate different frameworks. </p> <div class="ui inverted 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. It uses predefined CSS and jQuery to incorporate different frameworks. </p> </div> <strong>Fitted Divider:</strong> <div class="ui segment"> Geeksforgeeks <div class="ui fitted divider"> We provide a variety of services for you to learn, thrive and also have fun! </div> </div> </body> </html>
Producción:
Variaciones del divisor de interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI vertical divider</title> <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</strong> <br><br> <hr><hr> <strong>Hidden Divider:</strong> <br> <strong class="ui header">GeeksforGeeks</strong> <p> Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <div class="ui hidden divider"></div> <strong class="ui header">Geeks Portal</strong> <p> Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <hr><hr> <strong>Section Divider:</strong> <br> <strong class="ui header">GeeksforGeeks</strong> <p> Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <div class="ui section divider"></div> <strong class="ui header">Geeks Portal</strong> <p> Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <hr><hr> <strong>Clearing Divider:</strong> <br> <div class="ui segment"> <strong class="ui right floated header"> Geeks Portal </strong> <div class="ui clearing divider"></div> <p> Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/divider.html
Publicación traducida automáticamente
Artículo escrito por jssuriyakumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA