Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
in English

Komponente

Naučite kako i zašto gradimo gotovo sve naše komponente odgovorno i sa osnovnim i modifikatorskim klasama.

Osnovne klase

Bootstrap komponente su uglavnom izgrađene sa baznim modifikatorom nomenklature. Grupiramo što je moguće više zajedničkih svojstava u osnovnu klasu, poput .btn, a zatim grupiramo pojedinačne stilove za svaku varijantu u klase modifikatora, poput .btn-primaryili .btn-success.

Da bismo izgradili naše klase modifikatora, koristimo Sassove @eachpetlje za ponavljanje preko Sass mape. Ovo je posebno korisno za generiranje varijanti komponente od strane našeg $theme-colorsi kreiranje responzivnih varijanti za svaku tačku prekida. Dok prilagođavate ove Sass mape i ponovo kompajlirate, automatski ćete vidjeti svoje promjene koje se odražavaju u ovim petljama.

Pogledajte naše Sass mape i dokumente o petlji kako biste prilagodili ove petlje i proširili Bootstrapov pristup baznog modifikatora na svoj vlastiti kod.

Modifikatori

Mnoge Bootstrap komponente su izgrađene sa pristupom klase baznih modifikatora. To znači da je najveći dio stila sadržan u osnovnoj klasi (npr. .btn), dok su varijacije stila ograničene na klase modifikatora (npr. .btn-danger). Ove klase modifikatora su izgrađene iz $theme-colorsmape kako bi se prilagodili broj i naziv naših modifikatorskih klasa.

Evo dva primjera kako prelazimo preko $theme-colorskarte da bismo generirali modifikatore komponenti .alerti ..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);
}

Responsive

Ni ove Sass petlje nisu ograničene na mape boja. Također možete generirati prilagodljive varijacije vaših komponenti. Uzmimo za primjer naše responzivno poravnanje padajućih izbornika gdje miješamo @eachpetlju za $grid-breakpointsSass mapu s uključivanjem medijskog upita.

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

Ako izmijenite svoj $grid-breakpoints, vaše promjene će se primijeniti na sve petlje koje se ponavljaju preko te mape.

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

Za više informacija i primjera o tome kako modificirati naše Sass mape i varijable, pogledajte odjeljak Sass u Grid dokumentaciji .

Kreiranje vlastitog

Preporučujemo vam da usvojite ove smjernice kada gradite s Bootstrapom kako biste kreirali vlastite komponente. Mi smo sami proširili ovaj pristup na prilagođene komponente u našoj dokumentaciji i primjerima. Komponente kao što su naši oblačići su izgrađene baš kao i naše komponente sa osnovnim i modifikatorskim klasama.

Ovo je poziv. Napravili smo ga prilagođeno za naše dokumente tako da se naše poruke vama ističu. Ima tri varijante preko klasa modifikatora.
<div class="callout">...</div>

U vašem CSS-u, imali biste nešto poput sljedećeg gdje se najveći dio stila obavlja putem .callout. Zatim se jedinstveni stilovi između svake varijante kontroliraju putem klase modifikatora.

// Base class
.callout {}

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

Za oblačiće, taj jedinstveni stil je samo border-left-color. Kada kombinujete tu osnovnu klasu sa jednom od tih klasa modifikatora, dobijate kompletnu porodicu komponenti:

Ovo je informativni poziv. Primjer teksta koji ga prikazuje na djelu.
Ovo je poziv upozorenja. Primjer teksta koji ga prikazuje na djelu.
Ovo je poziv na opasnost. Primjer teksta koji ga prikazuje na djelu.