Osagaiak

Oinarrizko klaseak

Bootstrap-en osagaiak, neurri handi batean, oinarri-aldatzaileen nomenklatura batekin eraikitzen dira. Ahalik eta propietate partekatu gehien oinarrizko klase batean taldekatzen ditugu, adibidez .btn, eta, ondoren, aldaera bakoitzaren estilo indibidualak modifikatzaile klaseetan multzokatzen ditugu, bezalako .btn-primaryedo .btn-success.

Gure modifikatzaile-klaseak eraikitzeko, Sass-en @eachbegiztak erabiltzen ditugu Sass mapa batean errepikatzeko. Hau bereziki lagungarria da gure osagai baten aldaerak $theme-colorssortzeko eta eten puntu bakoitzerako aldaera sentikorrak sortzeko. Sass mapa hauek pertsonalizatzen eta birkonpilatzen dituzun heinean, automatikoki ikusiko dituzu zure aldaketak begizta hauetan islatuta.

Begiratu gure Sass mapak eta begiztak dokumentuak begizta hauek pertsonalizatzeko eta Bootstrap-en oinarri-aldagailuaren ikuspegia zure kodera nola zabaldu.

Aldatzaileak

Bootstrap-en osagai asko oinarri-aldatzaile klaseen ikuspegi batekin eraiki dira. Horrek esan nahi du estiloaren zatirik handiena oinarrizko klase batean dagoela (adibidez, .btn) eta estilo-aldakuntzak modifikatzaile-klaseetara mugatzen direla (adibidez, .btn-danger). Mugatzaile-klase hauek $theme-colorsmapatik eraikitzen dira gure modifikatzaile-klaseen zenbakia eta izena pertsonalizatzeko.

Hona hemen bi adibide maparen gainean nola errepasatzen dugun eta osagaien $theme-colorsaldatzaileak sortzeko ..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);
}

Erantzunkorra

Sass begizta hauek ez dira kolore-mapetara mugatzen, gainera. Zure osagaien aldaera sentikorrak ere sor ditzakezu. Hartu adibidez gure goitibekien lerrokatze erantzunkorra, non Sass maparako @eachbegizta bat nahasten dugun $grid-breakpointsmultimedia-kontsulta batekin.

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

Zure . aldatzen baduzu $grid-breakpoints, zure aldaketak mapa horretan errepikatzen diren begizta guztiei aplikatuko zaizkie.

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

Gure Sass mapak eta aldagaiak aldatzeari buruzko informazio eta adibide gehiago lortzeko, begiratu Sass atala Grid dokumentazioaren .

Zurea sortzea

Bootstrap-ekin eraikitzean jarraibide hauek hartzera animatzen zaituztegu zure osagaiak sortzeko. Ikuspegi hau gure dokumentazio eta adibideetako osagai pertsonalizatuetara hedatu dugu. Gure deiak bezalako osagaiak eskaintzen ditugun osagaiak bezala eraikitzen dira oinarrizko eta modifikatzaile klaseekin.

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

Zure CSS-n, estiloaren zatirik handiena .callout. Ondoren, aldaera bakoitzaren arteko estilo bereziak modifikatzaile klasearen bidez kontrolatzen dira.

// Base class
.callout {}

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

Deialdietarako, estilo berezi hori bat besterik ez da border-left-color. Oinarrizko klase hori aldatzaile klase horietako batekin konbinatzen duzunean, zure osagai-familia osoa lortzen duzu: