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.
Semantic-UI Button Variations nos ofrece tantas variaciones en botones como botones sociales, de tamaño, flotantes, de color, compactos, de alternancia, positivos, negativos, fluidos, circulares, verticales y horizontales adjuntos. En este artículo, discutiremos la variación flotante . Botón de interfaz de usuario semántica Las variaciones flotantes se utilizan para crear un botón flotante en diferentes lados.
Botón de interfaz de usuario semántica Clase de variaciones flotantes:
- left floated: esta clase se usa para hacer que el botón quede flotante.
- right floated: esta clase se usa para hacer que el botón flote a la derecha.
Sintaxis:
<button class="ui left floated button">
....
</button>
Ejemplo: El siguiente ejemplo ilustra la variante flotante del botón de IU semántica. En este ejemplo, crearemos 2 pares de botones que flotarán en los lados izquierdo y derecho de la pantalla . Un par serán botones normales y el otro par será un botón básico. Puede aplicar una variante flotante en cualquier tipo de botón.
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>
.container {
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Semantic-UI Button Floated Variations</strong>
</center>
<br><br>
<div class="container">
<strong>Floated Variant Normal buttons:</strong>
<br>
<button class="ui right floated green button">
Right Floated
</button>
<button class="ui left floated green button">
Left Floated
</button>
<br><br>
<strong>Floated Variant Basic buttons:</strong>
<br>
<button class="ui right floated green basic button">
Right Floated
</button>
<button class="ui left floated green basic button">
Left Floated
</button>
</div>
</body>
</html>
Producción:
Variaciones flotantes del botón de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/button.html#floated
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA