singa

kilasy fototra

Ny singa ao amin'ny Bootstrap dia natsangana miaraka amin'ny anaran'ny fanovana fototra. Manangona fananana zaraina betsaka araka izay azo atao izahay ao amin'ny kilasy fototra, toy ny .btn, ary avy eo dia manakambana ny fomba tsirairay ho an'ny variana tsirairay ho kilasy modifier, toy ny .btn-primaryna .btn-success.

Mba hananganana kilasy modifier, dia mampiasa ny @eachtadivavaran'i Sass izahay mba hamerenana ny sarintany Sass. Izany dia manampy indrindra amin'ny famoronana variana amin'ny singa iray amin'ny alàlan'ny anay $theme-colorsary mamorona variana mamaly ho an'ny teboka tsirairay. Rehefa manamboatra ireo sari-tany Sass ireo ianao ary manangona indray, dia ho hitanao fa hita taratra ao anatin'ireo tadivavarana ireo fiovanao.

Jereo ny sarintany Sass sy ny loops docs momba ny fomba fanamboarana ireo tadivavarana ireo sy ny fanitarana ny fomba fanovana fototra an'ny Bootstrap amin'ny kaody anao manokana.

Modifiers

Maro amin'ireo singa ao amin'ny Bootstrap no naorina miaraka amin'ny fomba fiasa fototra-modifier. Midika izany fa ny ankabeazan'ny fanaingoana dia voarakitra ao amin'ny kilasy fototra (oh, .btn) fa ny fiovaovan'ny fomba dia voafetra amin'ny kilasy modifier (oh, .btn-danger). Ireo kilasy modifier ireo dia natsangana avy amin'ny $theme-colorssari-tany mba hanamarihana ny isa sy ny anaran'ny kilasy modifier.

Ireto misy ohatra roa amin'ny fomba fametahana ny $theme-colorssarintany mba hamoronana mpanova ny .alertsy ny .list-groupsinga.

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

manaiky

Ireo tadivavarana Sass ireo dia tsy voafetra amin'ny sarintany miloko ihany koa. Azonao atao koa ny mamorona fiovaovana mamaly ny singanao. Raiso, ohatra, ny fampifanarahana amin'ny fandatsaham-bato izay mampifangaro ny @eachtadivavarana ho an'ny $grid-breakpointssarintany Sass miaraka amin'ny fangatahana media.

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

Raha ovainao ny $grid-breakpoints, dia mihatra amin'ny tadivavarana rehetra ny fanovana ataonao eo amin'io sari-tany io.

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

Raha mila fanazavana fanampiny sy ohatra momba ny fomba hanovana ny sari-tanin'i Sass sy ny fari-piadidianay dia jereo ny fizarana Sass amin'ny tahirin-kevitra Grid .

Mamorona ny anao manokana

Mamporisika anao izahay hanaraka ireo torolalana ireo rehefa manangana miaraka amin'ny Bootstrap mba hamoronana ny singanao manokana. Nanitatra ity fomba fiasa ity izahay amin'ny singa manokana ao amin'ny antontan-taratasy sy ohatra. Ny singa toy ny antsontsika dia natsangana tahaka ny singa nomenay misy kilasy fototra sy modifier.

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

Ao amin'ny CSS-nao dia manana zavatra toy izao manaraka izao ianao izay anaovana ny ankamaroan'ny styling amin'ny alàlan'ny .callout. Avy eo, ny fomba miavaka eo amin'ny variana tsirairay dia fehezin'ny kilasy modifier.

// Base class
.callout {}

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

Ho an'ny antso an-tariby, io styling tokana io dia border-left-color. Rehefa manambatra an'io kilasy fototra io amin'ny iray amin'ireo kilasy modifier ireo ianao dia mahazo ny fianakavianao singa feno: