Passà à u cuntenutu principale Salta à a navigazione di documenti
Check
in English

Cumpunenti

Amparate cumu è perchè custruemu quasi tutti i nostri cumpunenti in modu responsive è cù classi di basa è modificatori.

Classi basi

I cumpunenti di Bootstrap sò largamente custruiti cù una nomenclatura di modificatore di basa. Raggruppemu quant'è più pruprietà cumunu pussibule in una classa di basa, cum'è .btn, è poi raggruppemu stili individuali per ogni variante in classi modificatori, cum'è .btn-primaryo .btn-success.

Per custruisce e nostre classi di modificatori, usemu i @eachloops di Sass per iterà nantu à una mappa Sass. Questu hè particularmente utile per generà varianti di un cumpunente da u nostru $theme-colorsè per creà varianti responsive per ogni breakpoint. Cumu persunalizà queste carte Sass è ricumpilate, vi vede automaticamente i vostri cambiamenti riflessi in questi loops.

Scuprite e nostre carte Sass è documenti di loops per cumu persunalizà questi loops è estende l'approcciu di modificatore di basa di Bootstrap à u vostru propiu codice.

Modificatori

Parechji di i cumpunenti di Bootstrap sò custruiti cù un approcciu di classi di basa di modificatori. Questu significa chì a maiò parte di u stilu hè cuntenutu à una classa di basa (per esempiu, .btn) mentre chì e variazioni di stile sò limitate à e classi di modificatori (per esempiu, .btn-danger). Queste classi modificatori sò custruiti da a $theme-colorsmappa per fà persunalizà u numeru è u nome di e nostre classi modificatori.

Eccu dui esempii di cumu circhemu nantu à a $theme-colorsmappa per generà modificatori à .alerte .list-groupcumpunenti.

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

Risposta

Questi loops Sass ùn sò micca limitati à e carte di culore. Pudete ancu generà variazioni responsive di i vostri cumpunenti. Pigliate per esempiu u nostru allinamentu responsive di i dropdowns induve mischjemu un @eachciclu per a $grid-breakpointsmappa Sass cù una 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;
      }
    }
  }
}

Se mudificà u vostru $grid-breakpoints, i vostri cambiamenti s'applicanu à tutti i loops chì iteranu nantu à quella mappa.

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

Per più infurmazione è esempii nantu à cumu mudificà e nostre carte è variabili Sass, fate riferimentu à a sezione Sass di a documentazione di Grid .

Crea u vostru propiu

Vi ricumandemu à aduttà queste linee guida quandu custruite cù Bootstrap per creà i vostri propri cumpunenti. Avemu allargatu stu approcciu noi stessi à i cumpunenti persunalizati in a nostra documentazione è esempi. Cumpunenti cum'è i nostri callouts sò custruiti cum'è i nostri cumpunenti furniti cù classi di basa è modificatori.

Questu hè un callout. L'avemu custruitu persunalizata per i nostri documenti in modu chì i nostri messagi per voi si distinguenu. Hà trè varianti via classi modificatori.
<div class="callout">...</div>

In u vostru CSS, avaristi qualcosa cum'è u seguitu induve a maiò parte di u stilu hè fattu via .callout. Allora, i stili unichi trà ogni variante hè cuntrullatu da a classa di modificatore.

// Base class
.callout {}

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

Per i callouts, quellu stile unicu hè solu un border-left-color. Quandu combina quella classe di basa cù una di queste classi di modificatori, uttene a vostra famiglia di cumpunenti cumpleta:

Questu hè un callout d'infurmazione. Testu d'esempiu per vede in azzione.
Questu hè un avvisu di avvisu. Testu d'esempiu per vede in azzione.
Questu hè un callout periculu. Testu d'esempiu per vede in azzione.