Components

Basis classes

Partes Bootstrap valde constructae sunt cum nomenclatura basi determinatio. Coemus tot proprietates communes quam maxime in genus basin, sicut .btn, ac deinde singula genera globorum pro singulis generibus variantibus in modificatis, sicut .btn-primaryvel .btn-success.

Ad classes nostras determinatas aedificandas, @eachloramenta Sass ad iterandum per mappam Sass utimur. Hoc maxime utile est ad variantes compositionis generandas a nostris $theme-colorset variantibus responsivas pro unoquoque frangendo creando. Cum has mappas Sass domiciliis et componas, statim videbis tuas mutationes in his ansulis reflexas.

Perscriptio nostra Sass mappas et loramenta soUicitudo quomodo haec ansas customize et accessum turpium Bootstrap extendat ad proprium codicem.

Modifiers

Multae compositiones Bootstrap constructae sunt cum accessu classium basi determinatio. Hoc significat molem styli turpi classi (exempli gratia .btn) contineri, dum variationes stili ad modificationes classes concluduntur (exempli gratia .btn-danger). Hae classes determinativae e $theme-colorstabula aedificatae sunt ut numerus et nomen consuetudinum nostrarum determinativarum faceret.

Hic duo exempla sunt quomodo tabulam $theme-colorsperstringimus ad adiectiua generanda ad res .alertet .list-groupcomponendas.

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

Responsivum

Hae loramenta Sass non limitantur ad mappam colorandam. Generare etiam potes variationes responsivas partium tuarum. Exempli gratia nostra responsionis noctis stillicidiis miscemus @eachansam pro $grid-breakpointstabula Sass cum interrogatione media includunt.

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

Si tuam mutares $grid-breakpoints, mutationes tuae ad omnes ansas iterantes in tabula ista applicabunt.

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

Pro pluribus informationibus et exemplis in quomodo nostris maps Sass et variabiles modificare, placere ad sectionem in Grid documentorum Sass referre .

Creando tua

Hortamur vos ut haec normas adhibeatis cum Bootstrap aedificando ut partes vestras creetis. Ad consue- tium documentorum et exemplorum nosmet ipsos accessimus. Components sicut callouts nostri constructi sunt sicut nostra composita cum basi et modificatis generibus provisum.

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

In CSS tuo, aliquid simile habere velis, ubi mole dicendi via fiat .callout. Deinde styli singulares inter singulas variantes per modum determinativum regitur.

// Base class
.callout {}

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

Pro callouts, quod unicum est elocutionis solum est border-left-color. Cum basim illam classem cum una earum determinativarum classium coniungis, integram componentium familiam accipis: