Íhlutir
Lærðu hvernig og hvers vegna við smíðum næstum alla íhluti okkar á móttækilegan hátt og með grunn- og breytingaflokkum.
Grunnflokkar
Íhlutir Bootstrap eru að mestu byggðir með grunnbreytingarheiti. Við flokkum eins marga sameiginlega eiginleika og mögulegt er í grunnflokk, eins og .btn
, og flokkum síðan einstaka stíla fyrir hvert afbrigði í breytingaflokka, eins og .btn-primary
eða .btn-success
.
Til að byggja upp breytiklasa okkar notum við @each
lykkjur Sass til að endurtaka yfir Sass kort. Þetta er sérstaklega gagnlegt til að búa til afbrigði af íhlut hjá okkur $theme-colors
og búa til móttækileg afbrigði fyrir hvern brotpunkt. Þegar þú sérsníður þessi Sass kort og endurtekið saman muntu sjálfkrafa sjá breytingarnar þínar endurspeglast í þessum lykkjum.
Skoðaðu Sass kortin og lykkjuskjölin okkar til að sjá hvernig á að sérsníða þessar lykkjur og útvíkka grunnbreytingaraðferð Bootstrap í þinn eigin kóða.
Breytingar
Margir af íhlutum Bootstrap eru smíðaðir með grunnbreytingarflokksaðferð. Þetta þýðir að meginhluti stílsins er innifalinn í grunnflokki (td .btn
) á meðan stílafbrigði eru bundin við breytingaflokka (td .btn-danger
). Þessir breytingaflokkar eru byggðir út frá $theme-colors
kortinu til að sérsníða fjölda og heiti breytingaflokkanna okkar.
Hér eru tvö dæmi um hvernig við lykkjum yfir $theme-colors
kortið til að búa til breytingar á .alert
og .list-group
íhlutunum.
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
}
}
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
Móttækilegur
Þessar Sass lykkjur takmarkast heldur ekki við litakort. Þú getur líka búið til móttækileg afbrigði af íhlutunum þínum. Tökum til dæmis móttækilega röðun okkar á fellilistanum þar sem við blandum @each
lykkju fyrir $grid-breakpoints
Sass kortið með miðlunarfyrirspurn.
// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-start {
--bs-position: start;
&[data-bs-popper] {
right: auto;
left: 0;
}
}
.dropdown-menu#{$infix}-end {
--bs-position: end;
&[data-bs-popper] {
right: 0;
left: auto;
}
}
}
}
Ef þú breytir $grid-breakpoints
, munu breytingarnar þínar gilda um allar lykkjur sem endurtaka sig yfir það kort.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Fyrir frekari upplýsingar og dæmi um hvernig á að breyta Sass kortum okkar og breytum, vinsamlegast skoðaðu Sass hlutann í Grid skjölunum .
Að búa til þitt eigið
Við hvetjum þig til að samþykkja þessar leiðbeiningar þegar þú smíðar með Bootstrap til að búa til þína eigin íhluti. Við höfum útvíkkað þessa nálgun sjálf til sérsniðnu íhlutanna í skjölum okkar og dæmum. Íhlutir eins og útskýringar okkar eru smíðaðir alveg eins og íhlutir sem við fáum með grunn- og breytingaflokkum.
<div class="callout">...</div>
Í CSS þínum, þú vilt hafa eitthvað eins og eftirfarandi þar sem megnið af stílnum er gert með .callout
. Síðan er einstökum stílum á milli hvers afbrigða stjórnað með breytingaflokki.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Fyrir útkallana er þessi einstaka stíll bara border-left-color
. Þegar þú sameinar þennan grunnflokk við einn af þessum breytingaflokkum færðu heildarfjölskyldu íhluta þinna: