Las clases de colores de Bulma se utilizan para establecer el color del texto y el fondo. Si desea diseñar su texto o cualquier contenido específico, esta clase es muy útil. Todas las clases de color se mencionan y describen a continuación.
Clase de colores de Bulma: todas las clases mencionadas a continuación también se pueden usar para colorear el texto y el fondo.
- blanco: este color se usa para establecer el color blanco puro y el valor calculado es hsl (0, 0%, 100%).
- negro: este color se usa para establecer el color negro puro y el valor calculado es hsl (0, 0%, 4%).
- claro: este color se usa para establecer el color gris claro y el valor calculado es hsl (0, 0%, 96%).
- oscuro: este color se usa para establecer el color de gris más oscuro y el valor calculado es hsl (0, 0%, 21%).
- primario: este color se usa para establecer el color turquesa y el valor calculado es hsl (171, 100%, 41%).
- enlace: este color se usa para establecer el color azul y el valor calculado es hsl (217, 71%, 53%)
- información: este color se usa para establecer el color de cian y el valor calculado es hsl (204, 86%, 53%).
- éxito: este color se usa para establecer el color verde y el valor calculado es hsl (141, 53%, 53%).
- advertencia: este color se usa para establecer el color amarillo y el valor calculado es hsl (48, 100%, 67%).
- peligro: este color se usa para establecer el color rojo y el valor calculado es hsl (348, 100%, 61%).
Bulma también ofrece unas tonalidades, pero con alguna limitación que solo contiene tonalidades de gris entre el blanco y el negro.
Bulma Shades Colors Clase:
- black-bis: esta clase solía establecer el color negro puro y el valor es hsl (0, 0%, 7%).
- black-ter: esta clase solía establecer el color semi negro y el valor es hsl (0, 0%, 14%).
- gris-oscuro: esta clase solía establecer el color gris más oscuro y el valor es hsl (0, 0%, 21%).
- gris-oscuro: esta clase solía establecer el color gris oscuro y el valor es hsl (0, 0%, 29%).
- grey-light: esta clase solía establecer el color gris claro y el valor es hsl (0, 0%, 71%).
- grey-lighter: esta clase solía establecer el color gris más claro y el valor es hsl (0, 0%, 86%).
- white-ter: esta clase se usa para establecer el color blanco crema y el valor es hsl (0, 0%, 96%).
- white-bis: Esta clase solía establecer el color blanco puro y el valor es hsl (0, 0%, 98%).
Sintaxis:
Para establecer el color del texto:
<element class="has-text-black"> ... </element>
Para establecer el color de fondo:
<element class="has-background-warning"> ... </element>
Los siguientes ejemplos ilustran los colores de Bulma:
Ejemplo 1: En este ejemplo, usaremos la clase de colores para el texto y para el fondo.
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success" > GeeksforGeeks </h1> <b>Bulma Colors</b> <div class="has-text-left ml-4 mr-4"> .has-text-white | .has-background-danger <p class="has-text-white box has-background-danger"> A Computer Science Portal for Geeks </p> .has-thas-black | .has-background-warning <p class="has-text-black box has-background-warning"> A Computer Science Portal for Geeks </p> .has-text-light | .has-background-success <p class="has-text-light box has-background-success"> A Computer Science Portal for Geeks </p> .has-text-dark | .has-background-info <p class="has-text-dark box has-background-info"> A Computer Science Portal for Geeks </p> .has-text-primary | .has-background-link <p class="has-text-primary box has-background-link"> A Computer Science Portal for Geeks </p> .has-text-link | .has-background-primary <p class="has-text-link box has-background-primary"> A Computer Science Portal for Geeks </p> .has-text-info | .has-background-dark <p class="has-text-info box has-background-dark"> A Computer Science Portal for Geeks </p> .has-text-success | .has-background-light <p class="has-text-success box has-background-light"> A Computer Science Portal for Geeks </p> .has-text-warning | .has-background-black <p class="has-text-warning box has-background-black"> A Computer Science Portal for Geeks </p> .has-text-danger | .has-background-white <p class="has-text-danger box has-background-white"> A Computer Science Portal for Geeks </p> </div> </body> </html>
Producción:
Colores Bulma
Ejemplo 2: En este ejemplo usaremos diferentes tonos de blanco y negro.
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success" > GeeksforGeeks </h1> <b>Bulma Colors</b> <div class="has-text-left ml-4 mr-4"> .has-text-white-bis | .has-background-black-bis <p class="has-text-white-bis box has-background-black-bis"> A Computer Science Portal for Geeks </p> .has-text-white-ter | .has-background-black-ter <p class="has-text-white-ter box has-background-black-ter"> A Computer Science Portal for Geeks </p> .has-text-grey-lighter | .has-background-grey-darker <p class="has-text-grey-lighter box has-background-grey-darker"> A Computer Science Portal for Geeks </p> .has-text-dark | .has-background-info <p class="has-text-grey-light box has-background-grey-dark"> A Computer Science Portal for Geeks </p> .has-text-grey-dark | .has-background-grey-light <p class="has-text-grey-dark box has-background-grey-light"> A Computer Science Portal for Geeks </p> .has-text-grey-darker | .has-background-grey-lighter <p class="has-text-grey-darker box has-background-grey-lighter"> A Computer Science Portal for Geeks </p> .has-text-black-ter | .has-background-white-ter <p class="has-text-black-ter box has-background-white-ter"> A Computer Science Portal for Geeks </p> .has-text-black-bis | .has-background-white-bis <p class="has-text-black-bis box has-background-white-bis"> A Computer Science Portal for Geeks </p> </div> </body> </html>
Producción:
Colores Bulma
Referencia: https://bulma.io/documentation/overview/colors/
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA