Componentes nisqakuna

Clases de base

Bootstrap kaqpa componentesnin hatun ruwasqa huk base-modificador nomenclatura kaqwan. Askha rakisqa propiedades nisqakunata huk base clase nisqaman huñuyku, imayna .btn, chaymanta sapa variantepaq sapan estilokunata tikraq clasekunaman huñuyku, imayna .btn-primaryutaq .btn-success.

Tikraq claseykuta ruwanapaq, Sass kaqpa @eachllimp'inkunata llamk'achiyku huk Sass mapa kaqpi iterate ruwanapaq. Kayqa aswanta yanapakun huk componentemanta $theme-colorsvariantes ruwanapaq ñuqaykuwan chaymanta sapa ruphaypaq kutichiq variantes ruwanapaq. Imaynatachus kay Sass mapakuna ruwanki chaymanta wakmanta huñunki, kikillanmanta rikunki tikrayniyki kay llimp'ikunapi rikuchisqa.

Rikuy Sass mapakunayku chaymanta llimp'ikuna qillqayku imayna kay llimp'ikuna ruwanapaq chaymanta Bootstrap base-modificador ruwayta kikin codigoykiman mast'ariy.

Modificadores nisqakuna

Bootstrap kaqpa achka componentenkuna huk base-modifier clase ruwaywan ruwasqa kanku. Kayqa niyta munan, aswan hatun estilo huk base clase kaqpi hap'isqa kachkan (kayhina, .btn) estilo variaciones kaqtaq huk clasekuna modificador kaqpi (kayhina, .btn-danger). Kay tikraq clasekuna $theme-colorsmapamanta ruwasqa kanku ruwanapaq sapanchasqa yupayta chaymanta sutita tikraq claseykumanta.

Kaypi iskay rikch'anakuna imayna mapa patapi llimp'iyku chaymanta chaymanta componentes $theme-colorskaqman tikraqkunata paqarichinaykupaq ..alert.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);
}

Kutichiq

Kay Sass llimp'ikuna mana llimp'i mapakunallapichu, nitaq. Chantapas componentesniykimanta kutichiq variaciones ruwayta atikunki. Ejemplopaq hapiy kutichiq alineacionniykumanta urayk'aqkunamanta maypi huk @eachllañuta $grid-breakpointsSass mapapaq huk medio tapuywan chaqruyku incluyendo.

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

Sichus qampaq llamk'achinki $grid-breakpoints, tikrayniyki llapa llimp'ikuna chay mapa hawapi kuti kutipi ruwakunqa.

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

Aswan willakuypaq chaymanta ejemplokuna imayna Sass mapayku chaymanta tikraqniyku tikranapaq, ama hina kaspa qhaway Sass t'aqapi Grid qillqapi .

Kikinpa kamay

Kallpanchayku kay kamachiykunata hap'inaykipaq Bootstrap kaqwan ruwachkaspa kikiyki componentekuna ruwanaykipaq. Kay ruwayta ñuqayku kikiyku mast'arirqayku sapanchasqa componentekunaman qillqaykupi chaymanta ejemplokunaykupi. Componentes ñuqayku waqyasqayku hina ruwasqa kanku imaynachus ñuqayku qusqa componentekuna base kaqwan chaymanta modificador clasekunawan.

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

CSS kaqniykipi, kayhina imapas kanman maypichus aswan hatun estilo ruwasqa via .callout. Chaymanta, sapa variantepura sapalla estilokuna kamachisqa kanku kay modificador clase kaqnintakama.

// Base class
.callout {}

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

Llamadakunapaq, chay sapalla estiloqa huk border-left-color. Chay sapsi claseta huknin chay tikraq clasekunawan tinkinki, hunt'asqa componente aylluykita tarinki: