Bileşenler
Neredeyse tüm bileşenlerimizi temel ve değiştirici sınıflarla yanıt vererek nasıl ve neden oluşturduğumuzu öğrenin.
Temel sınıflar
Bootstrap bileşenleri büyük ölçüde bir temel değiştirici isimlendirme ile oluşturulmuştur. Mümkün olduğunca çok sayıda paylaşılan özelliği, gibi bir temel sınıfta .btn
gruplandırırız ve ardından her bir değişken için ayrı stilleri, like .btn-primary
veya gibi değiştirici sınıflarda gruplandırırız .btn-success
.
Değiştirici sınıflarımızı oluşturmak için @each
bir Sass haritası üzerinde yineleme yapmak için Sass döngülerini kullanırız. Bu, özellikle bizim tarafımızdan bir bileşenin $theme-colors
varyantlarını oluşturmak ve her kesme noktası için duyarlı varyantlar oluşturmak için yararlıdır. Bu Sass haritalarını özelleştirip yeniden derledikçe, değişikliklerinizin bu döngülere yansıdığını otomatik olarak göreceksiniz.
Bu döngüleri nasıl özelleştireceğiniz ve Bootstrap'in temel değiştirici yaklaşımını kendi kodunuza nasıl genişleteceğiniz konusunda Sass haritalarımıza ve döngü belgelerimize göz atın .
değiştiriciler
Bootstrap bileşenlerinin çoğu, temel değiştirici sınıf yaklaşımıyla oluşturulmuştur. Bu, .btn
stil varyasyonlarının değiştirici sınıflarla (örn .btn-danger
. Bu değiştirici sınıflar, değiştirici sınıflarımızın $theme-colors
sayısını ve adını özelleştirmek için haritadan oluşturulmuştur.
İşte ve bileşenlerine $theme-colors
değiştiriciler oluşturmak için harita üzerinde nasıl döngü yaptığımıza dair iki örnek ..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);
}
Duyarlı
Bu Sass döngüleri de renkli haritalarla sınırlı değildir. Ayrıca bileşenlerinizin duyarlı varyasyonlarını da oluşturabilirsiniz. Örneğin, bir medya sorgusu içeren Sass haritası @each
için bir döngüyü karıştırdığımız açılır menülerin duyarlı hizalamamızı ele alalım.$grid-breakpoints
// 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;
}
}
}
}
'nizi değiştirirseniz $grid-breakpoints
, değişiklikleriniz o harita üzerinde yinelenen tüm döngülere uygulanacaktır.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Sass haritalarımızı ve değişkenlerimizi nasıl değiştireceğimize dair daha fazla bilgi ve örnekler için, lütfen Grid belgelerinin Sass bölümüne bakın .
Kendinizinkini yaratmak
Kendi bileşenlerinizi oluşturmak için Bootstrap ile derleme yaparken bu yönergeleri benimsemenizi öneririz. Bu yaklaşımı, belgelerimizdeki ve örneklerimizdeki özel bileşenlere genişlettik. Açıklamalarımız gibi bileşenler, temel ve değiştirici sınıflarla sağlanan bileşenlerimiz gibi oluşturulur.
<div class="callout">...</div>
CSS'nizde, stilin büyük kısmının .callout
. Ardından, her bir varyant arasındaki benzersiz stiller, değiştirici sınıf aracılığıyla kontrol edilir.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Ek bilgiler için, bu benzersiz stil yalnızca bir border-left-color
. Bu temel sınıfı, bu değiştirici sınıflardan biriyle birleştirdiğinizde, eksiksiz bileşen ailenizi elde edersiniz: