Ba composants

Ba kelasi ya base

Ba composants ya Bootstrap etongami mingi na nomenclature ya base-modifier. Tosangisi ba propriétés ebele ya kokabola na kelasi ya base, lokola .btn, mpe na sima tosangisi ba styles moko moko mpo na variante moko na moko na ba classes ya modificateur, lokola .btn-primaryto .btn-success.

Pona kotonga ba classes na biso ya modificateur, tosalelaka ba @eachboucles ya Sass pona ko iterer likolo ya carte ya Sass. Yango ezali surtout utile pona ko générer ba variantes ya composante moko par notre $theme-colorspe ko créer ba variantes responsives pona point de rupture moko na moko. Lokola ozali ko personnaliser ba cartes oyo ya Sass mpe ko recompiler, okomona automatiquement ba changements na yo ezo refleter na ba boucles oyo.

Tala ba cartes na biso ya Sass na ba docs ya ba boucles pona ndenge ya ko personnaliser ba boucles oyo pe ko extend approche ya base-modifier ya Bootstrap na code na yo moko.

Ba modificateurs

Mingi ya ba composants ya Bootstrap etongami na approche ya classe base-modifier. Yango elingi koloba ete eteni monene ya lolenge ya kosala ezali na kelasi ya moboko (ndakisa, .btn) nzokande mbongwana ya lolenge ekangami na kelasi ya mobongisi (ndakisa, .btn-danger). Ba classes oyo ya modificateur etongami à partir ya $theme-colorscarte pona kosala personnalisation ya nombre na kombo ya ba classes na biso ya modificateur.

Tala bandakisa mibale ya ndenge tozali kosala boucle likolo ya $theme-colorscarte mpo na kobimisa ba modificateurs na ba composants .alertmpe ..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);
}

Koyanola

Ba boucles oyo ya Sass ekangami kaka na ba cartes ya couleur te, pe. Okoki mpe kobimisa ba variations responsives ya ba composants na yo. Bozua par exemple alignment na biso ya réponse ya ba dropdowns esika to mélanger @eachboucle moko pona $grid-breakpointscarte Sass na requête ya media inclure.

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

Soki osengeli kobongisa $grid-breakpoints, mbongwana na yo ekosalema na ba boucles nyonso oyo ezali kozongela likoló ya karte yango.

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

Mpo na koyeba makambo mingi mpe bandakisa ya ndenge ya kobongisa ba cartes mpe ba variables na biso ya Sass, tala eteni ya Sass ya mikanda ya Grid .

Kosala oyo ya yo moko

Tozali kolendisa yo ozwa malako oyo ntango ozali kotonga na Bootstrap mpo na kosala ba composants na yo moko. Topanzani biso moko ndenge oyo na ba composants personnalisés na mikanda mpe bandakisa na biso. Ba composants lokola ba callouts na biso etongami kaka lokola ba composants na biso oyo topesi na ba classes ya base na modificateur.

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

Na CSS na yo, olingaki kozala na eloko lokola oyo elandi esika eteni monene ya styling esalemaka na nzela ya .callout. Na sima, ba styles unique entre chaque variante ezali contrôlé via classe modificateur.

// Base class
.callout {}

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

Mpo na ba callouts, styling wana oyo ekokani na mosusu te ezali kaka border-left-color. Tango osangisi classe wana ya base na moko ya ba classes wana ya modificateur, ozui famille na yo ya composant complet: