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