Komponentët

Klasat bazë

Komponentët e Bootstrap janë ndërtuar kryesisht me një nomenklaturë të modifikuesit bazë. Ne grupojmë sa më shumë veti të përbashkëta të jetë e mundur në një klasë bazë, si .btn, dhe më pas grupojmë stilet individuale për çdo variant në klasa modifikuese, si .btn-primaryose .btn-success.

Për të ndërtuar klasat tona të modifikuesve, ne përdorim unazat e Sass për @eachtë përsëritur mbi një hartë Sass. Kjo është veçanërisht e dobishme për gjenerimin e varianteve të një komponenti nga ana jonë $theme-colorsdhe krijimin e varianteve të përgjegjshme për çdo pikë ndërprerjeje. Ndërsa personalizoni këto harta Sass dhe ripërpiloni, do të shihni automatikisht ndryshimet tuaja të pasqyruara në këto sythe.

Shikoni hartat tona Sass dhe dokumentet e sytheve se si t'i personalizoni këto sythe dhe të zgjeroni qasjen e modifikuesit bazë të Bootstrap në kodin tuaj.

Modifikuesit

Shumë nga komponentët e Bootstrap janë ndërtuar me një qasje të klasës së modifikuesit bazë. Kjo do të thotë se pjesa më e madhe e stilimit përmbahet në një klasë bazë (p.sh., .btn) ndërsa variacionet e stilit kufizohen në klasa modifikuese (p.sh., .btn-danger). Këto klasa modifikuesi janë ndërtuar nga $theme-colorsharta për të bërë personalizimin e numrit dhe emrit të klasave tona të modifikuesve.

Këtu janë dy shembuj se si ne kalojmë në $theme-colorshartë për të gjeneruar modifikues të komponentëve .alertdhe ..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);
}

Të përgjegjshme

Këto sythe Sass nuk kufizohen as në hartat me ngjyra. Ju gjithashtu mund të gjeneroni variacione të përgjegjshme të komponentëve tuaj. Merrni për shembull shtrirjen tonë të përgjegjshme të listës rënëse ku ne përziejmë një @eachlak për $grid-breakpointshartën Sass me një kërkesë mediatike.

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

Nëse modifikoni $grid-breakpoints, ndryshimet tuaja do të zbatohen për të gjitha sythe që përsëriten mbi atë hartë.

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

Për më shumë informacion dhe shembuj se si të modifikojmë hartat dhe variablat tona Sass, ju lutemi referojuni seksionit Sass të dokumentacionit Grid .

Duke krijuar tuajën

Ne ju inkurajojmë që të miratoni këto udhëzime kur ndërtoni me Bootstrap për të krijuar komponentët tuaj. Ne e kemi zgjeruar vetë këtë qasje tek komponentët e personalizuar në dokumentacionin dhe shembujt tanë. Komponentët si thirrjet tona janë ndërtuar ashtu si komponentët tanë të ofruar me klasa bazë dhe modifikues.

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

Në CSS tuaj, do të kishit diçka si më poshtë ku pjesa më e madhe e stilimit bëhet përmes .callout. Më pas, stilet unike ndërmjet secilit variant kontrollohen nëpërmjet klasës së modifikuesit.

// Base class
.callout {}

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

Për thirrjet, ai stil unik është vetëm një border-left-color. Kur kombinoni atë klasë bazë me një nga ato klasa modifikuesish, ju merrni familjen tuaj të plotë të komponentëve: