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 texto acepta mucho valor en Bulma, cuyas propiedades están cubiertas en forma de clase. Usando esta clase podemos colorear cualquier texto. En CSS, lo hacemos usando la propiedad CSS Color.
Sintaxis:
<tag class="has-text-*">
Text
</tag>
Clases de color de texto
Podemos usar cualquiera de estos colores enumerados a continuación en el lugar de * en la sintaxis anterior:
- tiene-texto-blanco: Esta clase solía establecer el color de prueba blanco.
- has-text-black: Esta clase solía establecer el color de prueba negro.
- tiene-texto-luz: Esta clase se utiliza para establecer la crema de color de prueba.
- has-text-dark: Esta clase solía establecer el color de prueba marrón oscuro.
- has-text-primary: esta clase solía establecer el color de prueba cian claro.
- tiene-texto-enlace: Esta clase solía establecer el color de prueba azul.
- has-text-info: esta clase solía establecer el color de prueba azul claro.
- tiene-texto-éxito: Esta clase solía establecer el color de prueba verde.
- tiene-texto-advertencia: Esta clase solía establecer el color de prueba amarillo.
- tiene-texto-peligro: Esta clase solía establecer el color rojo de la prueba.
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> <title>Bulma Panel</title> <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 Text 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/#text-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