Bileşenler

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 .btngruplandırırız ve ardından her bir değişken için ayrı stilleri, like .btn-primaryveya 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 @eachbir Sass haritası üzerinde yineleme yapmak için Sass döngülerini kullanırız. Bu, özellikle bizim tarafımızdan bir bileşenin $theme-colorsvaryantları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, .btnstil 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-colorssayısını ve adını özelleştirmek için haritadan oluşturulmuştur.

İşte ve bileşenlerine $theme-colorsdeğ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ı @eachiç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: