Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño. La clase de fondo acepta mucho valor en Bulma, cuyas propiedades están cubiertas en forma de clase. Usando esta clase podemos colorear cualquier fondo. En CSS, lo hacemos usando la propiedad CSS Color.
Sintaxis:
<tag class="has-background-*">
Text
</tag>
Clases de color de fondo
Podemos usar cualquiera de estos colores enumerados a continuación en el lugar de * en la sintaxis anterior:
- tiene-fondo-blanco: Esta clase solía establecer el color de fondo blanco.
- has-background-black: Esta clase solía establecer el color de fondo negro.
- has-background-light: Esta clase se utiliza para establecer el color crema de fondo.
- has-background-dark: Esta clase solía establecer el color de fondo marrón oscuro.
- has-background-primary: esta clase se utiliza para establecer el color de fondo cian claro.
- has-background-link: Esta clase solía establecer el color de fondo azul.
- has-background-info: esta clase solía establecer el color de fondo azul claro.
- tiene-fondo-éxito: Esta clase solía establecer el color de fondo verde.
- tiene-fondo-advertencia: Esta clase solía establecer el color de fondo amarillo.
- has-background-danger: Esta clase solía establecer el color de fondo rojo.
Nota: Puede configurar cualquier elemento en uno de los 10 colores o 9 tonos de gris. Puedes usar cada color en sus versiones clara y oscura. Simplemente agregue * -light o * -dark . El siguiente ejemplo ilustra el color del texto en Bulma:
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css"> </head> <body> <h1 class="is-size-2"> GeeksforGeeks </h1> <b>Bulma Background Color Class</b> <br> <div> <p class="has-text-white has-background-black"> A Computer Science Portal for Geeks </p> <p class="has-text-black has-background-white"> A Computer Science Portal for Geeks </p> <p class="has-text-light has-background-dark"> A Computer Science Portal for Geeks </p> <p class="has-text-dark has-background-light"> A Computer Science Portal for Geeks </p> <p class="has-text-primary has-background-link"> A Computer Science Portal for Geeks </p> <p class="has-text-link has-background-primary"> A Computer Science Portal for Geeks </p> <p class="has-text-info has-background-success"> A Computer Science Portal for Geeks </p> <p class="has-text-success has-background-info"> A Computer Science Portal for Geeks </p> <p class="has-text-warning has-background-danger"> A Computer Science Portal for Geeks </p> <p class="has-text-danger has-background-warning"> A Computer Science Portal for Geeks </p> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/helpers/color-helpers/#background-color
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA