Bulma es un marco CSS de código abierto que proporciona componentes prediseñados que se pueden combinar para crear sitios web y aplicaciones web receptivos. Podemos elegir la visualización de botones en Bulma según nuestra elección. Principalmente hay cuatro pantallas de botones disponibles en Bulma.
Bulma Muestra Clase:
- Normal: el botón tiene una visualización normal por defecto.
- is-small: Para dar una pequeña visualización al botón usamos la clase is-small.
- is-medium: Para dar una pequeña visualización al botón usamos la clase is-medium.
- is-large: Para dar una pequeña visualización al botón usamos la clase is-large.
Sintaxis:
<button class="button display-class">
...
</button>
Ejemplo 1: En el siguiente ejemplo, estamos tratando de ilustrar las clases de visualización de botones.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Button Displays</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 Button Displays</b><br> <button class="button is-small is-success">Small</button> <button class="button is-success">Normal</button> <button class="button is-medium is-success">Medium</button> <button class="button is-large is-success">Large</button> </body> </html>
Producción:
Pantallas de botones de Bulma
Ejemplo 2: En el siguiente ejemplo, estamos tratando de ilustrar las clases de visualización de botones.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Button Displays</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 Button Displays</b><br> <button class="button is-small is-success">GeeksforGeeks</button> <button class="button is-success">GeeksforGeeks</button> <button class="button is-medium is-success">GeeksforGeeks</button> <button class="button is-large is-success">GeeksforGeeks</button> </body> </html>
Producción:
Pantallas de botones de Bulma
Referencia: https://bulma.io/documentation/elements/button/#displays
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA