Bulma es un marco CSS de código abierto que se envía con elementos y componentes prediseñados que facilitan el desarrollo de interfaces web receptivas y hermosas. En este artículo, veremos cómo el elemento de etiqueta en Bulma se puede combinar con otros elementos. La propia Bulma combina el elemento de etiqueta con el elemento de eliminación.
Clases de combinación de etiquetas de Bulma: no hay ninguna clase aquí, combinaremos etiquetas con color, por lo que si tiene conocimientos de color y etiquetas, puede crear cualquier combinación de etiquetas.
Sintaxis:
<span class="tag is-success is-large"> Mission Successful <button class="delete is-large"></button> </span>
Ejemplo: El siguiente ejemplo muestra cómo combinar el elemento de etiqueta con el elemento de eliminación.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Input Colors</title>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.container.is-fluid>span{
margin-top: 20px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Tags Combinations</b>
<div class="container is-fluid">
<span class="tag is-success is-large">
Algorithms
<button class="delete is-large"></button>
</span>
<br>
<span class="tag is-danger is-medium">
Data Structures
<button class="delete is-medium"></button>
</span>
<br>
<span class="tag is-info is-small">
Java
<button class="delete is-small"></button>
</span>
</div>
</body>
</html>
Producción:
Combinaciones de etiquetas de Bulma
Referencia: https://bulma.io/documentation/elements/tag/#combinations