loko
Ampitahao ny dikany amin'ny alalan'ny colorkilasy fampiasa miloko vitsivitsy. Ahitana fanohanana ho an'ny rohy styling miaraka amin'ny fanjakana hover ihany koa.
loko
Lokoo ny lahatsoratra miaraka amin'ny fitaovana miloko. Raha te hanisy loko rohy ianao dia azonao ampiasaina ny .link-*kilasy mpanampy izay manana :hoversy :focusmilaza.
.text-primary
.text-secondary
.text-fahombiazana
.text-loza
.fampitandremana an-tsoratra
.text-info
.text-light
.text-maizina
.text-body
.text-muted
.text-white
.text-black-50
.text-white-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-*sy ny fari-piadidiana CSS ho an'ny kojakoja lahatsoratra,
.text-black-50ary
.text-white-50tsy ampiasaina intsony amin'ny v5.1.0. Hesorina amin'ny v6.0.0 izy ireo.
Fampitaovana ny dikan'ny teknôlôjia manampy
Ny fampiasana loko mba hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa ny teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .visually-hiddenkilasy.
hatevin'ny
Nampiana v5.1.0
Amin'ny v5.1.0, ny fitaovana miloko lahatsoratra dia noforonina miaraka amin'ny Sass amin'ny fampiasana ny fari-piadidiana CSS. Izany dia ahafahana manova loko amin'ny fotoana tena izy tsy misy fanangonana sy fanovana mangarahara alpha mavitrika.
Ny fomba fiasa
Eritrereto ny .text-primaryfitaovana ampiasainay.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Mampiasa dikan-teny RGB amin'ny anay izahay --bs-primary(miaraka amin'ny sandan'ny 13, 110, 253) fari-pahaizan'ny CSS ary ampifandraisina ny fari-piadidiana CSS faharoa, --bs-text-opacity, ho an'ny mangarahara alpha (miaraka amin'ny sanda mahazatra 1noho ny fari-piadidiana CSS eo an-toerana). Midika izany fa amin'ny fotoana rehetra ampiasainao .text-primaryizao, ny colorsanda kajy dia rgba(13, 110, 253, 1). Ny fari-piadidiana CSS eo an-toerana ao anatin'ny .text-*kilasy tsirairay dia misoroka ny olan'ny lova ka tsy manana fangarahara alpha novaina ho azy ny tranganà fampiasa amin'ny fitaovana.
OHATRA
Mba hanovana io tsy fahampiana io dia aforeto --bs-text-opacityamin'ny alàlan'ny fomba mahazatra na fomba an-tsipika.
<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>Na, misafidiana amin'ny iray amin'ireo .text-opacityfitaovana:
<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>manokana
Indraindray ny kilasy contextual dia tsy azo ampiharina noho ny fahasamihafan'ny mpifidy hafa. Amin'ny toe-javatra sasany, ny vahaolana ampy dia ny famenoana ny votoatin'ny <div>singanao amin'ny singa semantika iray na maromaro miaraka amin'ny kilasy tiana.
Sass
Ho fanampin'ity fampiasa Sass manaraka ity, diniho ny famakiana momba ny fanananay manokana CSS nampidirina (aka CSS variables) ho an'ny loko sy ny maro hafa.
hiovaova
Ny ankamaroan'ny colorfitaovana dia novokarin'ny loko loha-hevitray, navaozina avy amin'ny fari-piainan'ny palette miloko.
$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;
Misy ihany koa ny loko grayscale, saingy ampahany kely ihany no ampiasaina hamoronana fitaovana.
$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;
Sarintany
Apetraka ao amin'ny sarintany Sass avy eo ny lokon'ny lohahevitra mba ahafahantsika mihodinkodina eo amboniny mba hamoronana ny kojakojantsika, ny mpanova singa, sy ny maro hafa.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Ny loko grayscale dia azo alaina amin'ny sarintany Sass. Ity sari-tany ity dia tsy ampiasaina hamoronana fitaovana.
$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
);
Ny loko RGB dia novokarina avy amin'ny sarintany Sass misaraka:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Ary ny tsy fahampian'ny loko dia miorina amin'ny sarintany manokana izay lanin'ny API fitaovana:
$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
Ny fitaovana miloko dia nambara ao amin'ny API fampiasanay ao amin'ny scss/_utilities.scss. Ianaro ny fomba fampiasana ny utility API.
"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
)
),