Colores
Bootstrap 5 Colores
Colores Contacta
Usamos un subconjunto de todos los colores para crear una paleta de colores de contacta más pequeña para generar esquemas de color,
también disponibles en el archivo contacta@1.0/dist/css/cdn.contacta.css con Bootstrap.
<!-- Ejemplo 1 -->
<div class="bg-contacta-100"></div>
<div class="bg-contacta-200"></div>
<div class="bg-contacta-300"></div>
<div class="bg-contacta-400"></div>
<div class="bg-contacta-500"></div>
<div class="bg-contacta-600"></div>
<div class="bg-contacta-700"></div>
<div class="bg-contacta-800"></div>
/* --- Ejemplo 1 --- */
body {
background-color: var(--bg-contacta-100);
background-color: var(--bg-contacta-200);
background-color: var(--bg-contacta-300);
background-color: var(--bg-contacta-400);
background-color: var(--bg-contacta-500);
background-color: var(--bg-contacta-600);
background-color: var(--bg-contacta-700);
background-color: var(--bg-contacta-800);
}
/* --- Ejemplo 2 --- */
.clase {
background-color: #05AFF2;
background-color: #03658C;
background-color: #05DBF2;
background-color: #05F2F2;
background-color: #0072AF;
background-color: #54B4D3;
background-color: #005B8E;
background-color: #00426B;
}
$theme-colors: (
"bg-contacta-100": $bg-contacta-100,
"bg-contacta-200": $bg-contacta-200,
"bg-contacta-300": $bg-contacta-300,
"bg-contacta-400": $bg-contacta-400,
"bg-contacta-500": $bg-contacta-500,
"bg-contacta-600": $bg-contacta-600,
"bg-contacta-700": $bg-contacta-700,
"bg-contacta-800": $bg-contacta-800,
);
Todos estos colores estarán disponibles como un mapa Sass, $theme-colors en el archivo
@contacta1.1/dist/css/_variables.scss en la siguiente version.
CSS. Puedes usarlos directamente en el proyecto sin copilar ningun scss.
Background
Configura facilmente el fondo utilizando las clases de color .bg-*
<!-- Ejemplo 1 -->
<div class="bg-primary"></div>
<div class="bg-secondary"></div>
<div class="bg-success"></div>
<div class="bg-danger"></div>
<div class="bg-warning"></div>
<div class="bg-info"></div>
<div class="bg-light"></div>
<div class="bg-dark"></div>
<div class="bg-white"></div>
<div class="bg-transparent"></div>
/* --- Ejemplo 1 --- */
body {
background-color: var(--bg-primary);
background-color: var(--bg-secondary);
background-color: var(--bg-success);
background-color: var(--bg-danger);
background-color: var(--bg-warning);
background-color: var(--bg-info);
background-color: var(--bg-light);
background-color: var(--bg-dark);
background-color: var(--bg-white);
background-color: var(--bg-transparent);
}
/* --- Ejemplo 2 --- */
.clase {
background-color: #025373;
background-color: #7B809A;
background-color: #4CAF50;
background-color: #F44335;
background-color: #FB8C00;
background-color: #1A73E8;
background-color: #F0F2F5;
background-color: #344767;
background-color: #FFFFFF;
background-color: #FFFFFF80;
}
Background Gradient
Al agregar una clase .bg-gradient, se agrega un degradado lineal como imagen de fondo.
Este degradado comienza con un blanco semitransparente que se desvanece hasta el fondo.
<!-- Ejemplo 1 -->
<div class="p-3 mb-2 bg-gradient-primary text-white"> .bg-gradient-primary </div>
<div class="p-3 mb-2 bg-gradient-secondary text-white"> .bg-gradient-secondary </div>
<div class="p-3 mb-2 bg-gradient-success text-white"> .bg-gradient-success </div>
<div class="p-3 mb-2 bg-gradient-danger text-white"> .bg-gradient-danger </div>
<div class="p-3 mb-2 bg-gradient-warning text-white"> .bg-gradient-warning </div>
<div class="p-3 mb-2 bg-gradient-info text-white"> .bg-gradient-info </div>
<div class="p-3 mb-2 bg-gradient-light text-white"> .bg-gradient-light </div>
<div class="p-3 mb-2 bg-gradient-dark text-white"> .bg-gradient-dark </div>
Text
Colorea el texto con utilidades de color.
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
<!-- codigo form-floating -->
<p class="text-primary"> .text-primary </label>
<p class="text-primary"> .text-secondary </label>
<p class="text-primary"> .text-success </label>
<p class="text-primary"> .text-danger </label>
<p class="text-primary"> .text-warning </label>
<p class="text-primary"> .text-info </label>
<p class="text-primary"> .text-light </label>
<p class="text-primary"> .text-dark </label>
.text-opacity-* utilidades y variables CSS para utilidades de texto,
.text-black-50 & .text-white-50 están obsoletos a partir de Bootstrap v5.1.0. Se eliminarán en v6.0.0.
Links
Puede utilizar las clases .link-* para colorear enlaces. A diferencia de las clases
.text-* estas clases tienen un estado :hover y
:focus
<!-- codigo form-floating -->
<a href="#" class="link-primary"> Primary Link </a>
<a href="#" class="link-secondary"> Secondary Link </a>
<a href="#" class="link-success"> Success Link </a>
<a href="#" class="link-danger"> Danger Link </a>
<a href="#" class="link-warning"> Warning Link </a>
<a href="#" class="link-info"> Info Link </a>
<a href="#" class="link-light"> Light Link </a>
<a href="#" class="link-dark"> Dark Link </a>
Components
También utilizamos colores de tema como colores predefinidos para algunos componentes, por ejemplo, botones.
<!-- Ejemplo 1 -->
<button type="button" class="btn btn-primary"> Primary </button>
<button type="button" class="btn btn-primary"> Secondary </button>
<button type="button" class="btn btn-primary"> Success </button>
<button type="button" class="btn btn-primary"> Danger </button>
<button type="button" class="btn btn-primary"> Warning </button>
<button type="button" class="btn btn-primary"> Info </button>
<button type="button" class="btn btn-primary"> Light </button>
<button type="button" class="btn btn-primary"> Dark </button>