Components
Fêr bibin ka çawa û çima em hema hema hemî pêkhateyên xwe bi bersiv û bi çînên bingehîn û guhêrbar ava dikin.
Dersên bingehîn
Parçeyên Bootstrap bi piranî bi navgînek bingehîn-guhêrbar têne çêkirin. Em bi qasî ku pêkan taybetmendiyên hevpar di çînek bingehîn de kom dikin, mîna .btn
, û dûv re şêwazên kesane yên ji bo her variantekê di çînên guhêrbar kom dikin, mîna .btn-primary
an .btn-success
.
Ji bo avakirina çînên xweyên guhêrbar, em lûpên Sass bikar tînin @each
ku li ser nexşeyek Sass dubare bikin. Ev bi taybetî ji bo afirandina guhertoyên pêkhateyek ji hêla me ve $theme-colors
û afirandina guhertoyên bersivdar ji bo her xala veqetandinê arîkar e. Gava ku hûn van nexşeyên Sass-ê xweş bikin û ji nû ve berhev bikin, hûn ê bixweber guheztinên xwe yên ku di van lûkan de têne xuyang kirin bibînin.
Nexşeyên Sass û belgeyên meyên lûfên me binihêrin ka meriv çawa van lûleyan xweş bike û nêzîkatiya bingehîn-guhêrbar a Bootstrap li koda xwe dirêj bike.
Modifiers
Gelek hêmanên Bootstrap bi nêzîkatiyek çîna bingehîn-guhêrbar têne çêkirin. Ev tê vê wateyê ku piraniya şêwazê di çînek bingehîn de ye (mînak, .btn
) dema ku guhertoyên şêwazê bi çînên guhêrbar (mînak, .btn-danger
) ve têne sînordar kirin. Van çînên guhêrbar ji $theme-colors
nexşeyê têne çêkirin da ku hejmar û navê çînên me yên guhêrbar xweş bikin.
Li vir du mînak hene ku em çawa li ser $theme-colors
nexşeyê digerînin da ku guhezkerên pêkhateyan .alert
û .list-group
pêkhateyan biafirînin.
// 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);
}
Pêrakirin
Van lûfên Sass bi nexşeyên rengîn re jî sînorkirî ne. Her weha hûn dikarin guhertoyên bersivdar ên pêkhateyên xwe biafirînin. Mînakî lihevhatina meya bersivdar a dakêşanan bigire ku em @each
ji bo $grid-breakpoints
nexşeya Sass dorpêkek bi pirsek medyayê re tê de tevlihev dikin.
// 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;
}
}
}
}
Ger hûn $grid-breakpoints
guhertoya xwe biguherînin, dê guheztinên we li hemî lûpên ku li ser wê nexşeyê dubare dibin bicîh bibin.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Ji bo bêtir agahdarî û nimûneyên li ser ka meriv çawa nexşe û guhêrbarên me yên Sass biguhezîne, ji kerema xwe serî li beşa Sass ya belgeya Grid bidin .
Afirandina xwe
Em ji we re teşwîq dikin ku hûn van rêwerzan gava ku bi Bootstrap-ê re çêdikin da ku pêkhateyên xwe biafirînin qebûl bikin. Me di belgekirin û mînakên xwe de ev nêzîkatî bi hêmanên xwerû re dirêj kiriye. Hêmanên mîna bangên me mîna pêkhateyên me yên peydakirî bi çînên bingehîn û guhêrbar têne çêkirin.
<div class="callout">...</div>
Di CSS-ya xwe de, hûn ê tiştek mîna ya jêrîn hebe ku piraniya şêwazê bi riya .callout
. Dûv re, şêwazên bêhempa yên di navbera her guhertoyê de bi pola guhêrbar ve têne kontrol kirin.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Ji bo bangan, ew şêwaza bêhempa tenê yek e border-left-color
. Gava ku hûn wê çîna bingehîn bi yek ji wan çînên guhêrbar re bikin yek, hûn malbata pêkhateya xweya bêkêmasî digirin: