Komponen

Kelas asas

Komponen Bootstrap sebahagian besarnya dibina dengan tatanama pengubah suai asas. Kami mengumpulkan seberapa banyak sifat kongsi yang mungkin ke dalam kelas asas, seperti .btn, dan kemudian mengumpulkan gaya individu untuk setiap varian ke dalam kelas pengubah suai, seperti .btn-primaryatau .btn-success.

Untuk membina kelas pengubah suai kami, kami menggunakan @eachgelung Sass untuk mengulangi peta Sass. Ini amat berguna untuk menjana varian komponen oleh kami $theme-colorsdan mencipta varian responsif untuk setiap titik putus. Semasa anda memperibadikan peta Sass ini dan menyusun semula, anda akan melihat perubahan anda secara automatik ditunjukkan dalam gelung ini.

Lihat dokumen peta dan gelung Sass kami untuk cara menyesuaikan gelung ini dan melanjutkan pendekatan pengubah suai asas Bootstrap kepada kod anda sendiri.

Pengubah suai

Banyak komponen Bootstrap dibina dengan pendekatan kelas pengubah asas. Ini bermakna sebahagian besar penggayaan terkandung pada kelas asas (cth, .btn) manakala variasi gaya terhad kepada kelas pengubah suai (cth, .btn-danger). Kelas pengubah suai ini dibina daripada $theme-colorspeta untuk membuat penyesuaian nombor dan nama kelas pengubah suai kami.

Berikut ialah dua contoh cara kita melingkari $theme-colorspeta untuk menjana pengubah kepada komponen .alertdan ..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

Gelung Sass ini juga tidak terhad kepada peta warna. Anda juga boleh menjana variasi responsif komponen anda. Sebagai contoh, penjajaran responsif kami pada lungsur turun di mana kami mencampurkan @eachgelung untuk $grid-breakpointspeta Sass dengan termasuk pertanyaan media.

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

Sekiranya anda mengubah suai anda $grid-breakpoints, perubahan anda akan digunakan pada semua gelung yang berulang di atas peta itu.

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

Untuk mendapatkan maklumat lanjut dan contoh tentang cara mengubah suai peta dan pembolehubah Sass kami, sila rujuk bahagian Sass dalam dokumentasi Grid .

Mencipta sendiri

Kami menggalakkan anda untuk menerima pakai garis panduan ini apabila membina dengan Bootstrap untuk mencipta komponen anda sendiri. Kami telah meluaskan pendekatan ini sendiri kepada komponen tersuai dalam dokumentasi dan contoh kami. Komponen seperti serlahan ciri kami dibina sama seperti komponen yang kami sediakan dengan kelas asas dan pengubah suai.

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

Dalam CSS anda, anda akan mempunyai sesuatu seperti berikut di mana sebahagian besar penggayaan dilakukan melalui .callout. Kemudian, gaya unik antara setiap varian dikawal melalui kelas pengubah suai.

// Base class
.callout {}

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

Untuk butiran, penggayaan unik itu hanyalah border-left-color. Apabila anda menggabungkan kelas asas itu dengan salah satu daripada kelas pengubah suai tersebut, anda mendapat keluarga komponen lengkap anda: