Komponén

Kelas dasar

Komponén Bootstrap umumna diwangun ku nomenklatur base-modifier. Urang grup saloba sipat dibagikeun sabisa kana kelas dasar, siga .btn, lajeng grup gaya individu pikeun tiap varian kana kelas modifier, kawas .btn-primaryatawa .btn-success.

Pikeun ngawangun kelas modifier kami, kami nganggo @eachloop Sass pikeun ngulang peta Sass. Ieu hususna mantuan pikeun ngahasilkeun varian komponén ku urang $theme-colorsjeung nyieun varian responsif pikeun tiap breakpoint. Nalika anjeun ngaluyukeun peta Sass ieu sareng kompilasi deui, anjeun bakal otomatis ningali parobahan anjeun ditingali dina puteran ieu.

Pariksa peta Sass sareng puteran docs kami pikeun kumaha carana ngaropea loop ieu sareng manjangkeun pendekatan dasar-modifier Bootstrap kana kode anjeun sorangan.

Modifiers

Loba komponén Bootstrap urang diwangun ku pendekatan kelas base-modifier. Ieu ngandung harti yén bulk tina styling ngandung ka kelas dasar (misalna, .btn) bari variasi gaya dipasrahkeun ka kelas modifier (contona, .btn-danger). Kelas modifier ieu diwangun tina $theme-colorspeta pikeun nyaluyukeun jumlah sareng nami kelas modifier kami.

Di dieu aya dua conto kumaha urang loop leuwih $theme-colorspeta pikeun ngahasilkeun modifiers kana .alertjeung .list-groupkomponén.

// 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 ieu ogé henteu dugi ka peta warna. Anjeun oge bisa ngahasilkeun variasi responsif komponén Anjeun. Candak contona alignment responsif urang tina dropdowns dimana urang nyampur hiji @eachloop pikeun $grid-breakpointspeta Sass kalawan query média ngawengku.

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

Upami anjeun ngarobih $grid-breakpoints, parobihan anjeun bakal dilarapkeun ka sadaya puteran anu diulang dina peta éta.

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

Kanggo inpo nu leuwih lengkep sareng conto kumaha cara ngarobih peta sareng variabel Sass kami, mangga tingal bagian Sass tina dokuméntasi Grid .

Nyieun sorangan

Kami ajak anjeun ngadopsi pedoman ieu nalika ngawangun sareng Bootstrap pikeun nyiptakeun komponén anjeun nyalira. Kami parantos ngalegaan pendekatan ieu kana komponén khusus dina dokuméntasi sareng conto urang. Komponén sapertos callouts kami diwangun sapertos komponén anu disayogikeun ku kelas dasar sareng modifier.

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

Dina CSS anjeun, anjeun bakal gaduh hiji hal kawas di handap ieu dimana sabagéan ageung styling dipigawé via .callout. Lajeng, gaya unik antara unggal varian dikawasa ku kelas modifier.

// Base class
.callout {}

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

Pikeun callouts, éta styling unik ngan hiji border-left-color. Nalika anjeun ngagabungkeun kelas dasar sareng salah sahiji kelas modifier éta, anjeun nampi kulawarga komponén lengkep anjeun: