color bulma

Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox . Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo.

Color es un ayudante en Bulma que cambia el color del texto o del fondo. Veremos como podemos cambiar el color del texto y del fondo usando las clases de color.

Clases de color de texto: podemos cambiar el color del texto usando las siguientes clases.

  • tiene-texto-blanco
  • tiene-texto-negro
  • tiene-texto-luz
  • tiene-texto-oscuro
  • tiene-texto-principal
  • tiene-texto-enlace
  • tiene-texto-peligro

Ejemplo 1: el siguiente código demuestra la clase has-text-primary .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Color</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
  
<body class="has-text-centered">
    <b>Bulma Color</b>
    <br> <br>
  
    <div class="">
        <p class="has-text-primary">
            GeeksforGeeks1
        </p>
  
        <p class="has-text-primary">
            GeeksforGeeks2
        </p>
    </div>
</body>
  
</html>

Producción:

Ejemplo 2: El siguiente código demuestra la clase has-text-danger .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Color</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
  
<body class="has-text-centered">
    <b>Bulma Color</b>
    <br> <br>
  
    <div class="">
        <p class="has-text-danger">
            GeeksforGeeks1
        </p>
  
        <p class="has-text-danger">
            GeeksforGeeks2
        </p>
    </div>
</body>
  
</html>

Producción:

Clases de color de fondo: podemos usar las siguientes clases para diferentes colores y tonos de fondo.

  • tiene-fondo-blanco
  • tiene-fondo-negro
  • tiene-luz-de-fondo
  • tiene-fondo-oscuro
  • tiene-fondo-blanco
  • tiene-antecedentes-primario
  • tiene-antecedentes-advertencia
  • tiene-fondo-gris-oscuro

Ejemplo 3: El siguiente código demuestra la clase has-background-dark .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Color</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
  
<body class="has-text-centered">
    <b>Bulma Color</b>
    <br> <br>
      
    <div class="has-background-dark">
        <p class="has-text-danger">
            GeeksforGeeks1
        </p>
  
        <p class="has-text-danger">
            GeeksforGeeks2
        </p>
    </div>
</body>
  
</html>

Producción:

Ejemplo 4: El siguiente código demuestra la clase has-background-warning .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Color</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
  
<body class="has-text-centered">
    <b>Bulma Color</b>
    <br> <br>
  
    <div class="has-background-warning">
        <p class="has-text-danger">
            GeeksforGeeks1
        </p>
  
        <p class="has-text-danger">
            GeeksforGeeks2
        </p>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *