Sintaxis de modificadores de Bulma

Los modificadores en Bulma se usan para manipular una clase en particular para obtener el resultado deseado. Para implementar los modificadores, uno tiene que usar la clase de modificador is- o has- antes del nombre del modificador. Es fundamental conocer la sintaxis de estos modificadores para poder implementarlos en nuestro código.

Sintaxis:

<div class = "is-modifier-name"
    ...
</div>

or 
    
<div class = "has-modifier-name"
    ...
</div>

es-modificador-nombre: Este modificador-nombre toma varios valores como es-principal, es-enlace, es-info, es-éxito, es-advertencia, es-peligro, etc.
tiene-modificador-nombre: este modificador-nombre toma varios valores como tiene-principal, tiene-enlace, tiene-info, tiene-éxito, tiene-advertencia, tiene-peligro, etc.

Profundicemos en este tema, echando un vistazo a un ejemplo práctico de modificadores.

Ejemplo 1: En el siguiente ejemplo, hemos usado modificadores de color para hacer que las columnas sean coloridas y darles un color de fondo.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!--Adding Bulma-->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
</head>
  
<body>
    <br>
    <div class="content">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <strong>
            Color Modifiers
        </strong>
    </div>
  
    <!--Modifier for background color -->
    <section class="section has-background-light ">
        <div class="container ">
            <span class="title">
                Popular Sportsman
            </span><br><br>
  
            <div class="columns ">
                <div class="column">
                    <div class="notification is-info"
                        style="width: 160px;">
                        <p>Virat</p>
                    </div>
  
                    <div class="column">
                        <div class="notification is-danger"
                            style="width: 160px;">
                            <p>Messi</p>
                        </div>
  
                        <div class="column">
                            <div class="notification is-primary"
                                style="width: 160px;">
                                <p>Nadal</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
  
</html>

Producción:

Ejemplo 2: Veamos ahora otro ejemplo, en el que crearemos botones y usaremos modificadores de tamaño para tener botones de diferentes tamaños.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!--Linking Bulma -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
</head>
  
<body>
    <div class="content">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <strong>Size Modifiers</strong>
    </div>
    <br />
  
    <button class="button is-medium is-danger">
        This is medium
    </button>
    <br /><br />
  
    <button class="button is-success">
        This is regular
    </button>
    <br /><br />
  
    <button class="button is-small is-link">
        This is small
    </button>
    <br /><br />
  
    <button class="button is-large is-warning">
        This is large
    </button>
    <br />
</body>
  
</html>

Producción:

Enlace de referencia: https://bulma.io/documentation/overview/modifiers/

Publicación traducida automáticamente

Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta