Cuando necesitamos agrupar el botón en una sola línea, usamos un modificador is- grouped en el contenedor de campo. Para agrupar los botones en una sola línea pondremos todos los botones en un div y le daremos la clase is-grouped en el contenedor de campo.
Clase grupal de Bulma Button:
- is-grouped: En Bulma la clase is-grouped se usa para agrupar todos los botones en una sola línea.
Sintaxis:
<div class="field is-grouped">
<p class="control">
<button class="button">
...
</button>
</p>
</div>
Ejemplo 1: en el siguiente ejemplo, usamos un modificador is-grouped para la etiqueta div.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Button Group</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="field is-grouped"> <p class="control"> <button class="button is-success"> GFG </button> </p> <p class="control"> <button class="button"> Learn </button> </p> <p class="control"> <button class="button is-success"> Practice </button> </p> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, usamos un modificador is-grouped para la etiqueta div.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Button Group</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="field is-grouped"> <p class="control"> <button class="button is-success"> GFG </button> </p> <p class="control"> <button class="button is-success"> Tutorials </button> </p> <p class="control"> <button class="button is-success"> Student </button> </p> <p class="control"> <button class="button is-success"> Jobs </button> </p> <p class="control"> <button class="button is-success"> Courses </button> </p> <p class="control"> <button class="button is-success"> Python </button> </p> <p class="control"> <button class="button is-success"> Java </button> </p> </div> </body> </html>
Producción:
Enlace de referencia: https://bulma.io/documentation/elements/button/#button-group
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA