Bulma Button List se utiliza para agrupar botones en una lista. La lista de botones se puede crear envolviendo los botones en un div HTML con botones de clase. Si la lista es más larga que el ancho de la ventana gráfica actual, los botones se ajustarán en varias líneas mientras se mantiene constante el espacio entre los botones.
Clases de lista de botones:
- botones: esta clase se usa en el contenedor de todos los botones para hacer una lista de botones.
- is-centered: esta clase se utiliza para alinear la lista de botones al centro.
- is-right: esta clase se utiliza para alinear la lista de botones a la derecha.
- has-addons: esta clase se usa en el contenedor de botones para adjuntar los botones dentro de él.
Sintaxis:
<div class="buttons">
<button class="button">Button 1</button>
</div>
Listas de botones simples: en este ejemplo, creamos un div HTML simple con botones de clase y creamos tres botones dentro del contenedor de botones . Esto hace una lista de botones.
Ejemplo 1: Este es un ejemplo de una lista de botones simple.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Simple Button Lists</title> <link rel='stylesheet' href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b>Bulma Simple Button Lists</b> <div class="container" style="margin-top: 30px;"> <div class="buttons is-centered"> <button class="button is-success">Button 1</button> <button class="button is-link">Button 2</button> <button class="button is-warning">Button 3</button> </div> </div> </body> </html>
Producción:
Lista de botones envueltos: cuando la lista de botones va más allá del ancho de la ventana gráfica, los botones se envolverán en las siguientes líneas. El siguiente ejemplo muestra lo mismo.
Ejemplo 2: Este es un ejemplo de una lista de botones envueltos.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Wrapped Button Lists</title> <link rel='stylesheet' href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b>Bulma Wrapped Button Lists</b> <div class="container" style="margin-top: 30px;"> <div class="buttons is-centered"> <button class="button is-success">Button 1</button> <button class="button is-link">Button 2</button> <button class="button is-warning">Button 3</button> <button class="button is-success">Button 4</button> <button class="button is-link">Button 5</button> <button class="button is-warning">Button 6</button> <button class="button is-success">Button 7</button> <button class="button is-link">Button 8</button> <button class="button is-warning">Button 9</button> <button class="button is-success">Button 10</button> <button class="button is-link">Button 11</button> <button class="button is-warning">Button 12</button> <button class="button is-success">Button 13</button> <button class="button is-link">Button 14</button> <button class="button is-warning">Button 15</button> <button class="button is-success">Button 16</button> <button class="button is-link">Button 17</button> <button class="button is-warning">Button 18</button> <button class="button is-success">Button 19</button> <button class="button is-link">Button 20</button> </div> </div> </body> </html>
Producción:
Alineación de la lista de botones: la lista de botones está alineada a la izquierda de forma predeterminada. Los modificadores is-centered y is-right se pueden usar para alinear el contenido en el centro o a la derecha, respectivamente.
Sintaxis:
<div class="buttons is-centered">
<button class="button">Button 1</button>
</div>
Ejemplo 3: Este es un ejemplo de una alineación de lista de botones. La lista de botones superior está alineada a la izquierda de manera predeterminada, la lista de botones del medio usa un modificador centrado para alinear los botones al centro de la página, mientras que la lista de botones inferior usa un modificador a la derecha para alinear los botones a la derecha.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Button Lists Alignment</title> <link rel='stylesheet' href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b>Bulma Button Lists Alignment</b> <div class="container" style="margin-top: 30px;"> <div class="buttons"> <button class="button is-success">Default Align</button> <button class="button is-link">Default Align</button> <button class="button is-warning">Default Align</button> <button class="button is-info">Default Align</button> </div> <div class="buttons is-centered"> <button class="button is-success">Center Align</button> <button class="button is-link">Center Align</button> <button class="button is-warning">Center Align</button> <button class="button is-info">Center Align</button> </div> <div class="buttons is-right"> <button class="button is-success">Right Align</button> <button class="button is-link">Right Align</button> <button class="button is-warning">Right Align</button> <button class="button is-info">Right Align</button> </div> </div> </body> </html>
Producción:
Botones en la lista como complementos: los botones en una lista se pueden adjuntar usando el modificador has-addon en el contenedor del botón. Para diferenciar un botón de otros, se puede usar cualquier clase personalizada para modificar los estilos, pero se debe usar un modificador seleccionado con la clase de modificador para asegurarse de que el botón seleccionado esté por encima de sus hermanos.
Syntax:
<div class="buttons has-addons">
<button class="button">Button 1</button>
</div>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Button Lists</title> <link rel='stylesheet' href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b>Bulma Button Lists</b> <div class="container" style="margin-top: 30px;"> <div class="buttons has-addons is-centered"> <button class="button is-success">Button 1</button> <button class="button is-link">Button 2</button> <button class="button is-warning">Button 3</button> <button class="button is-info">Button 4</button> </div> <div class="buttons is-centered"> <button class="button">Button 1</button> <button class="button is-link is-selected">Button 2</button> <button class="button">Button 3</button> <button class="button">Button 4</button> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/elements/button/#list-of-buttons