En este artículo, conoceremos Spectre Button Group, sus diversas clases disponibles y lo entenderemos a través de los ejemplos. El botón es una característica importante de cualquier sitio web o en cualquier aplicación. A veces necesitará categorizar los botones. La clase de grupo Spectre Button se utiliza para establecer la categoría del botón.
Clase de grupo de botones:
- btn-group: si desea colocar los botones como un grupo sin ningún margen, puede usar esta clase.
- btn-group-block: si desea colocar los botones como un grupo con cualquier margen, puede usar esta clase.
El siguiente ejemplo ilustra los grupos de botones en Spectre.
Ejemplo: En este ejemplo, veremos los diferentes grupos de botones.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Buttons Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1>GeeksforGeeks</h1> <strong>SPECTRE Button Groups Class</strong> <br> <div class="btn-group"> <button class="btn btn-primary"> Primary Button </button> <button class="btn btn-success"> Success Button </button> <button class="btn btn-error"> Erorr Button </button> </div> <br><br> <div class="btn-group-block"> <button class="btn btn-primary"> Primary Button </button> <button class="btn btn-success"> Success Button </button> <button class="btn btn-error"> Erorr Button </button> </div> <br><br> <div class="btn-group btn-group-block"> <button class="btn btn-primary"> Primary Button </button> <button class="btn btn-success"> Success Button </button> <button class="btn btn-error"> Erorr Button </button> </div> </center> </body> </html>
Producción:
Clase de grupo de botones de espectro
Referencia: https://picturepan2.github.io/spectre/elements/buttons.html#buttons-groups
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA