Komponen

Kelas dasar

Komponen Bootstrap sebagian besar dibangun dengan nomenklatur pengubah dasar. Kami mengelompokkan sebanyak mungkin properti bersama ke dalam kelas dasar, seperti .btn, lalu mengelompokkan gaya individual untuk setiap varian ke dalam kelas pengubah, seperti .btn-primaryatau .btn-success.

Untuk membangun kelas pengubah kami, kami menggunakan @eachloop Sass untuk beralih di atas peta Sass. Ini sangat membantu untuk menghasilkan varian komponen oleh kami $theme-colorsdan membuat varian responsif untuk setiap breakpoint. Saat Anda menyesuaikan peta Sass ini dan mengkompilasi ulang, Anda akan secara otomatis melihat perubahan Anda tercermin dalam loop ini.

Lihat peta Sass dan dokumen loop kami untuk cara menyesuaikan loop ini dan memperluas pendekatan pengubah dasar Bootstrap ke kode Anda sendiri.

Pengubah

Banyak komponen Bootstrap dibangun dengan pendekatan kelas pengubah dasar. Ini berarti sebagian besar gaya terdapat pada kelas dasar (misalnya, .btn) sedangkan variasi gaya terbatas pada kelas pengubah (misalnya, .btn-danger). Kelas pengubah ini dibangun dari $theme-colorspeta untuk menyesuaikan jumlah dan nama kelas pengubah kami.

Berikut adalah dua contoh bagaimana kita mengulang $theme-colorspeta untuk menghasilkan pengubah ke komponen .alertand .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);
}

Responsif

Loop Sass ini juga tidak terbatas pada peta warna. Anda juga dapat menghasilkan variasi responsif dari komponen Anda. Ambil contoh penyelarasan responsif kami dari dropdown di mana kami mencampur @eachloop untuk $grid-breakpointspeta Sass dengan media query include.

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

Jika Anda memodifikasi $grid-breakpoints, perubahan Anda akan berlaku untuk semua loop yang berulang di atas peta itu.

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

Untuk informasi lebih lanjut dan contoh tentang cara memodifikasi peta dan variabel Sass kami, silakan merujuk ke bagian Sass dari dokumentasi Grid .

Membuat Anda sendiri

Kami mendorong Anda untuk mengadopsi panduan ini saat membangun dengan Bootstrap untuk membuat komponen Anda sendiri. Kami telah memperluas pendekatan ini sendiri ke komponen kustom dalam dokumentasi dan contoh kami. Komponen seperti info kami dibuat seperti komponen yang kami sediakan dengan kelas dasar dan pengubah.

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

Di CSS Anda, Anda akan memiliki sesuatu seperti berikut ini di mana sebagian besar penataan dilakukan melalui .callout. Kemudian, gaya unik antara setiap varian dikontrol melalui kelas pengubah.

// Base class
.callout {}

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

Untuk info, gaya unik itu hanyalah border-left-color. Saat Anda menggabungkan kelas dasar itu dengan salah satu kelas pengubah itu, Anda mendapatkan keluarga komponen lengkap Anda: