loko
Ampitahao ny dikany amin'ny alalan'ny color
kilasy fampiasa miloko vitsivitsy. Ahitana fanohanana ho an'ny rohy styling 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 :hover
sy :focus
milaza.
.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>
Fampitaovana ny dikan'ny teknôlôjia manampy
Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa 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-hidden
kilasy.
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 fametahana 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 color
fitaovana ampiasaina dia novokarin'ny loko loha-hevitray, naverina 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 hamokarana fitaovana rehetra.
$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
);
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,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),