Dathanna
Cuir an bhrí in iúl colorle dornán de ranganna áirgiúlachta datha. Áirítear leis sin tacaíocht do naisc stílithe le stáit hover, freisin.
Dathanna
Dathaigh téacs le fóntais datha. Más mian leat naisc a dhathú, is féidir leat na .link-*ranganna cúntóra a bhfuil :hoveragus :focusstáit acu a úsáid.
.téacs-bunscoile
.téacs-tánaisteach
.téacs-rath
.téacs-chontúirt
.téacs-rabhadh
.téacs-eolas
.téacs-éadrom
.téacs-dorcha
.téacs-chomhlacht
.téacs-bhalbhaithe
.téacs-bán
.téacs-dubh-50
.téacs-bán-50
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>.text-opacity-*fóntais agus athróga CSS curtha leis le haghaidh fóntais téacs,
.text-black-50agus
.text-white-50tá siad dímheasta mar v5.1.0. Bainfear iad i v6.0.0.
Brí a chur in iúl do theicneolaíochtaí cúnta
Ní thugann úsáid dath chun brí a chur leis ach tásc amhairc, nach gcuirfear in iúl d’úsáideoirí na dteicneolaíochtaí cúnta – mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas atá sainaitheanta leis an dath soiléir ón ábhar féin (m.sh. an téacs infheicthe), nó go n-áirítear í ar mhodhanna eile, mar théacs breise i bhfolach leis an .visually-hiddenrang.
Teimhneacht
Curtha leis i v5.1.0
Ó v5.1.0, gintear fóntais datha téacs le Sass ag baint úsáide as athróga CSS. Ligeann sé seo athruithe datha fíor-ama gan athruithe trédhearcachta alfa a thiomsú agus dinimiciúla.
Conas a oibríonn sé
Smaoinigh ar ár .text-primarybhfóntas réamhshocraithe.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Bainimid úsáid as leagan RGB dár n- athróg CSS --bs-primary(le luach 13, 110, 253) agus ceanglaímid an dara athróg CSS, --bs-text-opacity, don trédhearcacht alfa (le luach réamhshocraithe 1a bhuíochas d'athróg CSS áitiúil). Ciallaíonn sé sin am ar bith a úsáideann tú anois, is é do luach .text-primaryríofa . Seachnaíonn an athróg CSS áitiúil laistigh de gach rang saincheisteanna oidhreachta agus mar sin ní bhíonn trédhearcacht alfa modhnaithe go huathoibríoch ag cásanna neadaithe de na fóntais.colorrgba(13, 110, 253, 1).text-*
Sampla
Chun an teimhneacht sin a athrú, sáraigh --bs-text-opacitytrí stíleanna saincheaptha nó stíleanna inlíne.
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>Nó, roghnaigh ó aon cheann de na .text-opacityfóntais:
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>Sainiúlacht
Uaireanta ní féidir ranganna comhthéacsúla a chur i bhfeidhm mar gheall ar shainiúlacht roghnóir eile. I gcásanna áirithe, is réiteach leordhóthanach é ábhar do dhúile a chuimilt in <div>eilimint shéimeantach nó níos mó leis an rang atá ag teastáil.
Sass
Chomh maith leis an bhfeidhmiúlacht Sass seo a leanas, smaoinigh ar léamh faoi ár n- airíonna saincheaptha CSS (aka athróga CSS) le haghaidh dathanna agus níos mó.
Athróga
Is iad ár dathanna téama a ghintear formhór colorna bhfóntas, arna n-athshannadh ónár n-athróg cineálach pailéad dathanna.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
Tá dathanna liathscála ar fáil freisin, ach ní úsáidtear ach fo-thacar chun aon fhóntais a ghiniúint.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Léarscáil
Ansin cuirtear dathanna téamaí isteach ar léarscáil Sass ionas gur féidir linn lúb a chur orthu chun ár bhfóntais, ár modhnóirí comhpháirteanna agus go leor eile a ghiniúint.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Tá dathanna liathscála ar fáil freisin mar léarscáil Sass. Ní úsáidtear an léarscáil seo chun aon fhóntais a ghiniúint.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
Gintear dathanna RGB ó léarscáil Sass ar leith:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Agus tógann teimhneachtaí datha air sin lena léarscáil féin a úsáideann an API fóntais:
$utilities-text: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");
Utilities API
Déantar fóntais dath a dhearbhú inár bhfóntas API i scss/_utilities.scss. Foghlaim conas an API fóntais a úsáid.
"color": (
property: color,
class: text,
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
(
"muted": $text-muted,
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"reset": inherit,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),