Osagaiak
Ikasi nola eta zergatik eraikitzen ditugun gure osagai ia guztiak erantzuteko eta oinarrizko eta modifikatzaile klaseekin.
Oinarrizko klaseak
Bootstrap-en osagaiak, neurri handi batean, oinarri-aldatzaileen nomenklatura batekin eraikitzen dira. Ahalik eta propietate partekatu gehien oinarrizko klase batean taldekatzen ditugu, adibidez .btn
, eta, ondoren, aldaera bakoitzaren estilo indibidualak modifikatzaile klaseetan multzokatzen ditugu, bezalako .btn-primary
edo .btn-success
.
Gure modifikatzaile-klaseak eraikitzeko, Sass-en @each
begiztak erabiltzen ditugu Sass mapa batean errepikatzeko. Hau bereziki lagungarria da gure osagai baten aldaerak $theme-colors
sortzeko eta eten puntu bakoitzerako aldaera sentikorrak sortzeko. Sass mapa hauek pertsonalizatzen eta birkonpilatzen dituzun heinean, automatikoki ikusiko dituzu zure aldaketak begizta hauetan islatuta.
Begiratu gure Sass mapak eta begiztak dokumentuak begizta hauek pertsonalizatzeko eta Bootstrap-en oinarri-aldagailuaren ikuspegia zure kodera nola zabaldu.
Aldatzaileak
Bootstrap-en osagai asko oinarri-aldatzaile klaseen ikuspegi batekin eraiki dira. Horrek esan nahi du estiloaren zatirik handiena oinarrizko klase batean dagoela (adibidez, .btn
) eta estilo-aldakuntzak modifikatzaile-klaseetara mugatzen direla (adibidez, .btn-danger
). Mugatzaile-klase hauek $theme-colors
mapatik eraikitzen dira gure modifikatzaile-klaseen zenbakia eta izena pertsonalizatzeko.
Hona hemen bi adibide maparen gainean nola errepasatzen dugun eta osagaien $theme-colors
aldatzaileak sortzeko ..alert
.list-group
// 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);
}
Erantzunkorra
Sass begizta hauek ez dira kolore-mapetara mugatzen, gainera. Zure osagaien aldaera sentikorrak ere sor ditzakezu. Hartu adibidez gure goitibekien lerrokatze erantzunkorra, non Sass maparako @each
begizta bat nahasten dugun $grid-breakpoints
multimedia-kontsulta batekin.
// 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;
}
}
}
}
Zure . aldatzen baduzu $grid-breakpoints
, zure aldaketak mapa horretan errepikatzen diren begizta guztiei aplikatuko zaizkie.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Gure Sass mapak eta aldagaiak aldatzeari buruzko informazio eta adibide gehiago lortzeko, begiratu Sass atala Grid dokumentazioaren .
Zurea sortzea
Bootstrap-ekin eraikitzean jarraibide hauek hartzera animatzen zaituztegu zure osagaiak sortzeko. Ikuspegi hau gure dokumentazio eta adibideetako osagai pertsonalizatuetara hedatu dugu. Gure deiak bezalako osagaiak eskaintzen ditugun osagaiak bezala eraikitzen dira oinarrizko eta modifikatzaile klaseekin.
<div class="callout">...</div>
Zure CSS-n, estiloaren zatirik handiena .callout
. Ondoren, aldaera bakoitzaren arteko estilo bereziak modifikatzaile klasearen bidez kontrolatzen dira.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Deialdietarako, estilo berezi hori bat besterik ez da border-left-color
. Oinarrizko klase hori aldatzaile klase horietako batekin konbinatzen duzunean, zure osagai-familia osoa lortzen duzu: