En este artículo, aprenderemos sobre Bulma Reset. Bulma reset() es un mixin que se usa para crear un botón o cualquier otro elemento en el que no se pueda hacer clic. El mixin reset() aplica un restablecimiento de estilo suave en el elemento HTML. Este mixin se usa principalmente en elementos <button> .
Clase de reinicio de Bulma: para crear una mezcla de botón de reinicio, Bulma no proporciona una clase específica, sino que creamos nuestra clase y la diseñamos usando mezclas SASS.
Sintaxis:
<button class="button bulma-reset-mixin">
...
</button>
.bulma-reset-mixin {
@include reset;
}
Ejemplo 1: El siguiente ejemplo ilustra la mezcla de reinicio de Bulma en un botón normal.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bulma Reset</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <script src= "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> </script> <link rel="stylesheet" href="demo.css"> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeekforGeeks</h1> <h1 class="subtitle">Bulma Reset</h1> <!-- Below is Bulma reset mixin --> <button>Normal button</button> <button class="bulma-reset-mixin"> Reset button </button> </div> </body> </html>
CSS
@mixin reset() {
appearance: none;
background: 0 0;
border: none;
font-family: inherit;
font-size: 1em;
margin: 0;
padding: 0;
}
.bulma-reset-mixin {
@include reset;
}
Producción:
Restablecer Bulma
Ejemplo 2: El siguiente ejemplo ilustra la mezcla de reinicio de Bulma en un botón de Bulma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bulma Reset</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <script src= "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> </script> <link rel="stylesheet" href="demo.css"> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeekforGeeks</h1> <h1 class="subtitle">Bulma Reset</h1> <!-- Below is Bulma reset mixin --> <button class="button is-primary"> Bulma default </button> <button class="button bulma-reset-mixin"> Bulma reset </button> </div> </body> </html>
CSS
@mixin reset() {
appearance: none;
background: 0 0;
border: none;
font-family: inherit;
font-size: 1em;
margin: 0;
padding: 0;
}
.bulma-reset-mixin {
@include reset;
}
Producción:
Restablecer Bulma
Referencia: https://bulma.io/documentation/utilities/mixins/#reset
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA