Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox. Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo.
Las etiquetas de Bulma son un elemento muy útil. Podemos adjuntar información a un bloque u otro componente. Es más pequeño que los botones, lo que hace que sea más útil mostrarlo en números y hacer una larga lista de elementos. En este artículo, aprenderemos sobre los complementos de etiquetas y sus usos.
Clases de complementos de etiquetas de Bulma:
- has-addons: cuando necesitamos adjuntar etiquetas, usamos el modificador has-addons en la clase de etiqueta.
Sintaxis:
<div class="tags has-addons"> ....... </div>
Ejemplo 1: El siguiente ejemplo ilustra los complementos de etiquetas de Bulma. Podemos unir etiquetas usando el modificador has-addons .
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Tag Addons</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Tag Addons</b><br><br> <div class="tags has-addons is-centered"> <span class="tag is-success">GeeksforGeeks</span> <span class="tag">Courses</span> </div> </body> </html>
Producción:
Complementos de etiquetas de Bulma
Ejemplo 2: También podemos adjuntar la etiqueta de eliminación con la etiqueta de texto usando la clase is-delete .
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Tag Addons</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Tag Addons</b><br><br> <div class="tags has-addons is-centered"> <span class="tag is-success is-grouped">Courses</span> <a class="tag is-delete"></a> </div> </body> </html>
Producción:
Complementos de etiquetas de Bulma
Referencia: https://bulma.io/documentation/elements/tag/#tag-addons
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA