La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
El grupo de botones de interfaz de usuario semántica ofrece grupos de botones categorizados que permiten agrupar botones a lo largo de la misma línea, horizontal o verticalmente. Los botones a agrupar están anidados dentro de un elemento <div>.
Clases de grupo de botones de interfaz de usuario semántica:
- botones: esta clase se utiliza para crear un grupo de botones.
- botones de icono : esta clase se utiliza para crear un grupo de botones de icono.
Sintaxis:
<div class="ui buttons"> <button class="ui button">...</button> ... </div>
El siguiente ejemplo ilustrará el grupo de botones de interfaz de usuario semántica:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
button {
width: 150px;
}
.container {
width: 600px;
margin-left: 15%;
}
</style>
</head>
<body>
<center>
<h1 class="ui green">Geeksforgeeks</h1>
<strong>Semantic UI Button Group</strong>
</center>
<br><br>
<div class="container">
<strong>Buttons:</strong>
<div class="ui buttons">
<button class="ui inverted purple button">
Trash
</button>
<button class="ui inverted green button">
Subscribe
</button>
<button class="ui inverted red button">
Unsubscribe
</button>
</div>
<br><br>
<strong>Icon Buttons:</strong>
<div class="ui icon button">
<button class="ui icon button">
<i class="cloud icon"></i>
</button>
<button class="ui icon button">
<i class="bed icon"></i>
</button>
<button class="ui icon button">
<i class="fire icon"></i>
</button>
</div>
</div>
</body>
</html>
Producción:
Grupos de botones de interfaz de usuario semántica
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA