Komponen

Kelas dhasar

Komponen Bootstrap umume dibangun kanthi nomenklatur modifier basa. Kita nglumpukake akeh properti sing dienggo bareng dadi kelas dhasar, kaya .btn, banjur klompok gaya individu kanggo saben varian dadi kelas modifier, kaya .btn-primaryutawa .btn-success.

Kanggo mbangun kelas modifier, kita nggunakake @eachputeran Sass kanggo ngulang peta Sass. Iki utamané mbiyantu kanggo ngasilake varian saka komponen dening kita $theme-colorslan nggawe varian responsif kanggo saben breakpoint. Nalika sampeyan ngatur peta Sass iki lan kompilasi maneh, sampeyan bakal kanthi otomatis ndeleng owah-owahan sing dibayangke ing puteran iki.

Priksa peta Sass lan puteran docs kanggo carane ngatur puteran iki lan ngluwihi pendekatan basis-modifier Bootstrap kanggo kode dhewe.

Modifiers

Akeh komponen Bootstrap dibangun kanthi pendekatan kelas modifier dhasar. Iki tegese akeh gaya ana ing kelas dhasar (contone, .btn) nalika variasi gaya diwatesi ing kelas modifier (contone, .btn-danger). Kelas modifier iki dibangun saka $theme-colorspeta kanggo nggawe kustomisasi nomer lan jeneng kelas modifier kita.

Ing ngisor iki ana rong conto carane kita daur ulang liwat $theme-colorspeta kanggo generate modifiers menyang .alertlan .list-groupkomponen.

// 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);
}

Responsif

Daur ulang Sass iki ora diwatesi ing peta warna. Sampeyan uga bisa ngasilake variasi responsif saka komponen sampeyan. Contone, alignment responsif saka dropdowns ing ngendi kita nyampur @eachloop kanggo $grid-breakpointspeta Sass kanthi query media kalebu.

// 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;
      }
    }
  }
}

Yen sampeyan ngowahi $grid-breakpoints, pangowahan sampeyan bakal ditrapake kanggo kabeh puteran ing peta kasebut.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Kanggo informasi luwih lengkap lan conto babagan carane ngowahi peta lan variabel Sass, waca bagean Sass saka dokumentasi Grid .

Nggawe dhewe

Disaranake sampeyan nggunakake pedoman kasebut nalika mbangun nganggo Bootstrap kanggo nggawe komponen sampeyan dhewe. Kita wis nggedhekake pendekatan iki kanggo komponen khusus ing dokumentasi lan conto. Komponen kaya callout kita dibangun kaya komponen sing diwenehake karo kelas dasar lan modifier.

<div class="callout">...</div>

Ing CSS sampeyan, sampeyan bakal duwe kaya ing ngisor iki ing ngendi akeh gaya ditindakake liwat .callout. Banjur, gaya unik ing antarane saben varian dikontrol liwat kelas modifier.

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

Kanggo callouts, sing noto unik mung border-left-color. Yen sampeyan nggabungake kelas dhasar kasebut karo salah sawijining kelas modifier, sampeyan entuk kulawarga komponen lengkap: