Umi componente rehegua

Umi clase base rehegua

Umi componente Bootstrap rehegua tuicha oñemopuꞌa peteĩ nomenclatura base-modificador reheve. Ñambyaty heta propiedad oñembojaꞌovaꞌekue ikatuháicha peteĩ clase base-pe, haꞌeháicha .btn, ha upéi ñambyaty estilo peteĩteĩva peteĩteĩva variante-pe g̃uarã clase modificador-pe, haꞌeháicha .btn-primarytérã .btn-success.

Ñamopuꞌa hag̃ua ñande mboꞌepykuéra modificador rehegua, jaipuru Sass @eachvorekuéra jajapo jey hag̃ua peteĩ Sass mapa ári. Kóva oipytyvõ especialmente ojejapo hag̃ua umi variante peteĩ componente rehegua ñande rupive $theme-colorsha ojejapo hag̃ua umi variante ombohováiva peteĩteĩva punto de ruptura-pe g̃uarã. Emohenda jave ko’ã Sass mapa ha embojoaju jeývo, rehecháta ijeheguiete ne ñemoambue ojehechaukáva ko’ã vore’ípe.

Ehecháke ore Sass mapa ha bucle docs mba’éichapa ikatu emohenda ko’ã bucle ha embohape Bootstrap base-modifier enfoque nde código-pe.

Umi omoambuéva

Heta Bootstrap componente oñemopuꞌa peteĩ enfoque clase base-modificador reheve. Kóva heꞌise pe estilo tuichakue oguerekoha peteĩ clase base-pe (techapyrã, .btn) umi estilo ñemoambue katu oñemboty umi clase modificador-pe (techapyrã, .btn-danger). Ko’ã mbo’esyry modificador oñemopu’ã $theme-colorsmapa guive ojejapo hag̃ua personalización ñande clase modificador papapy ha réra.

Koꞌape oĩ mokõi techapyrã mbaꞌeichaitépa jajapo bucle $theme-colorsmapa ári jajapo hag̃ua modificador umi componente .alertha rehegua..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);
}

Ombohováiva

Ko’ã Sass bucle ndaha’éi oñembotýva umi mapa color-pe añónte, avei. Ikatu avei regenera umi variación ombohováiva ne componente-kuéra rehegua. Jaipyhy techapyrãramo ñande alineación ombohováiva umi desplegable ñambojeheꞌahápe peteĩ @eachbucle $grid-breakpointsSass mapa-pe g̃uarã peteĩ consulta medios rehegua ndive.

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

Emoambueva’erãramo nde $grid-breakpoints, ne ñemoambue ojeporúta opaite umi bucle ojeiteráva upe mapa ári.

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

Ojeikuaave hag̃ua ha techapyrã mbaꞌeichaitépa oñemoambuekuaa ñande Sass mapa ha mbaꞌekuaarã, ehecha Sass vore Grid kuatiañeꞌepyre .

Omoheñóivo nde mba’éva

Romokyre’ỹ eadopta hag̃ua ko’ã ñe’ẽmondo emopu’ãvo Bootstrap ndive emoheñói hag̃ua ne componentekuéra tee. Roñembohape ore voi ko enfoque umi componente personalizado ore kuatiañe’ẽ ha techapyrãme. Umi componente ñande ñehenóiicha oñemopu’ã ñande componente ome’ẽvaichaite umi clase base ha modificador reheve.

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

Nde CSS-pe, reguerekóta peteĩ mba’e ko’ãvaicha ojejapohápe pe estilo tuichavéva .callout. Upéi, umi estilo ijojahaꞌeỹva peteĩteĩva variante apytépe oñekontrola clase modificador rupive.

// Base class
.callout {}

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

Umi ñehenóipe ĝuarã, upe estilo ijojaha’ỹva ha’e peteĩ border-left-color. Embojoajúramo upe clase base peteĩva umi clase modificador ndive, rehupyty ne familia componente completa: