Zigawo
Phunzirani momwe ndi chifukwa chomwe timapangira pafupifupi magawo athu onse momvera komanso ndi makalasi oyambira ndi osintha.
Maphunziro oyambira
Zida za Bootstrap zimamangidwa kwambiri ndi dzina losintha-modifier. Timagawa zinthu zambiri zomwe timagawana momwe tingathere m'magulu oyambira, monga .btn
, ndiyeno timayika masitayelo amtundu uliwonse kukhala magulu osintha, monga .btn-primary
kapena .btn-success
.
Kuti tipange makalasi athu osinthira, timagwiritsa ntchito @each
malupu a Sass kubwereza mapu a Sass. Izi ndizothandiza kwambiri popanga mitundu yosiyanasiyana mwazinthu zathu $theme-colors
ndikupanga mitundu yomvera pagawo lililonse. Mukakonza mamapu awa a Sass ndikuphatikizanso, mudzawona zosintha zanu zikuwonekera mu malupu awa.
Onani mamapu athu a Sass ndi malupu amomwe mungasinthire malupuwa ndikukulitsa njira yosinthira maziko a Bootstrap ku code yanu.
Zosintha
Zambiri mwazinthu za Bootstrap zimamangidwa ndi njira yosinthira kalasi yoyambira. Izi zikutanthauza kuti kuchuluka kwa makongoletsedwe kuli m'gulu loyambira (mwachitsanzo, .btn
) pomwe masitayelo amangochitika m'makalasi osintha (mwachitsanzo, .btn-danger
). Makalasi osinthira awa amapangidwa kuchokera $theme-colors
pamapu kuti asinthe makonda a nambala ndi dzina la makalasi athu osintha.
Nazi zitsanzo ziwiri za momwe timayendera $theme-colors
mapu kuti tipange zosintha ku .alert
ndi .list-group
zigawo.
// 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);
}
Womvera
Malupu a Sass awa samangokhala mamapu amitundu, mwina. Mukhozanso kupanga mitundu yosiyanasiyana ya zigawo zanu. @each
Tengani mwachitsanzo masanjidwe athu otsika pomwe timasakaniza kuzungulira kwa $grid-breakpoints
mapu a Sass ndifunso lawayilesi .
// 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;
}
}
}
}
Mukasintha $grid-breakpoints
, zosintha zanu zidzagwira ntchito pamalupu onse omwe akupitilira pamapuwo.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Kuti mumve zambiri ndi zitsanzo zamomwe mungasinthire mamapu athu a Sass ndi zosintha, chonde onani gawo la Sass la zolembedwa za Gridi .
Kupanga zanu
Tikukulimbikitsani kutsatira malangizowa pomanga ndi Bootstrap kuti mupange zida zanu. Tawonjezera njira iyi kuzinthu zomwe zili muzolemba zathu ndi zitsanzo. Zida monga ma callout athu amamangidwa ngati zida zomwe tapatsidwa zokhala ndi makalasi oyambira ndi osintha.
<div class="callout">...</div>
Mu CSS yanu, mungakhale ndi china chonga chotsatirachi pomwe kuchuluka kwa makongoletsedwe kumachitika kudzera pa .callout
. Kenako, masitayelo apadera pakati pa mtundu uliwonse amawongoleredwa ndi gulu la modifier.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Kwa ma callouts, makongoletsedwe apaderawa ndi a border-left-color
. Mukaphatikiza kalasi yoyambira ndi imodzi mwamakalasi osinthira, mumapeza banja lanu lathunthu: