Bootstrap - Farver

Bootstrap har sine egne selektorer for at knytte bestemte fraver til knapper etc. og baggrunde:

Knapper

En knap kan gives en af 6 forskellige standardfarver eller være et link. De identificeres ikke ved deres farvenavn, men ved eb 'situationsbeskrivelse':

Fuldfarvede knapper
primary		secondary
info		success
warning		danger
link
Outline
primary		secondary
info		success
warning		danger

Selektor strukturen for de 6 farver er ens. For link er den lidt anderledes.

'Default'-knappen vises når 'btn-xxx' udelades.

Outline knapperne vises når 'btn-xxx' ændres til 'btn-xxx-outline'. (Ikke etableret for Info).

Farver

Farverne for en knap styres via 6 sæt selektorer (her primary farven.):

.btn-primary {
    color: #fff;
    background-color: #0275d8;
    border-color: #0275d8;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #025aa5;
    border-color: #01549b;
}

.btn-primary:hover {
    color: #fff;
    background-color: #025aa5;
    border-color: #01549b;
}

.btn-primary:active,
.btn-primary.active,
.open > .btn-primary.dropdown-toggle {
    background-image: none;
}

.btn-primary.disabled:focus,
.btn-primary.disabled.focus,
.btn-primary:disabled:focus,
.btn-primary:disabled.focus,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary.focus {
    background-color: #0275d8;
    border-color: #0275d8;
}

.btn-primary.disabled:hover,
.btn-primary:disabled:hover,
fieldset[disabled] .btn-primary:hover {
    background-color: #0275d8;
    border-color: #0275d8;
}

Er der behov for at overstyre en af farverne kan dens farveselektorer indsættes i 'Bootcss' og farvekoderne ændres til det ønskede.

Er der derimod behov for en ekstra farve farveselektorer indsættes i 'Egencss'. Navnet ændres da (f.eks til tekstnavnet på hovedfarven) og farvekoderne ændret til det ønskede.

Link

Farverne til et link styres af følgende selektorer:

.btn-link {
    font-weight: normal;
    color: #0275d8;
    border-radius: 0;
}

.btn-link,
.btn-link:active,
.btn-link.active,
.btn-link:disabled,
fieldset[disabled] .btn-link {
    background-color: transparent;
}

.btn-link,
.btn-link:focus,
.btn-link:active {
    border-color: transparent;
}

.btn-link:hover {
    border-color: transparent;
}

.btn-link:focus,
.btn-link:hover {
    color: #014c8c;
    text-decoration: underline;
    background-color: transparent;
}

.btn-link:disabled:focus,
.btn-link:disabled:hover,
fieldset[disabled] .btn-link:focus,
fieldset[disabled] .btn-link:hover {
    color: #818a91;
    text-decoration: none;
}

Er der behov for flere forskelligt udseende links kan de indsættes i Egencss baseret på standardkoden og individualisering f.eks. via løbenumre.

Generel baggrundsfarve

Den generelle baggrundsfarve 'hvid' styres i Bootstrap fra denne selektor:

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
background-color: #fff;
}

Baggrundsfarven kan ændres ved at indsætte denne kode i Bootcss.css filen:

body {
background-color: gyldig farvekode;
}

Øvrige farver

Udover ovennævnte anvendes farver så mange steder og på så forskellige måder rundt om i Bootstrap, at en beskrivelse ikke vil være overkommelig. Ved behov for viden om en farve vil det være nødvendigt, at finde den i Bootstrap-filen og derfra håndtere det aktuelle behov.