Vaega

Vasega faavae

O vaega a Bootstrap e tele lava ina fausia i se fa'aigoa fa'avae-fa'aliliu. Matou te fa'avasegaina le tele o meatotino fefa'asoaa'i pe a mafai i totonu o se vasega fa'avae, pei o .btn, ona fa'avasega lea o sitaili ta'ito'atasi mo suiga ta'itasi i vasega fa'aopoopo, pei .btn-primarypo'o .btn-success.

Ina ia fausia a matou vasega fa'aleleia, matou te fa'aogaina @eachfa'amaufa'ailoga a Sass e fa'asino i luga o se fa'afanua Sass. E aoga tele lenei mea mo le fa'atupuina o fesuiaiga o se vaega e ala ia tatou $theme-colorsma le faia o suiga tali mo vaega ta'itasi. A'o e fa'avasegaina fa'afanua Sass ma toe tu'ufa'atasia, e otometi lava ona e va'ai i au suiga o lo'o atagia mai i nei fa'agasolo.

Siaki a matou fa'afanua Sass ma fa'amaufa'ailoga docs mo le fa'avasegaina o nei matasele ma fa'alautele le fa'aogaina o le fa'avae-modifier a Bootstrap i lau lava code.

Suiga

O le tele o vaega a Bootstrap e fausia i se faiga fa'avae-modifier vasega. O lona uiga o le tele o le sitaili o lo'o i totonu o se vasega fa'avae (fa'ata'ita'iga, .btn) a'o fesuiaiga o sitaili e fa'atapula'a i vasega fa'aliliu (fa'ata'ita'iga, .btn-danger). O nei vasega suiga e fausia mai le $theme-colorsfaafanua e fai ai le fa'avasegaina o le numera ma le igoa oa tatou vasega fa'aliliu.

O faʻataʻitaʻiga nei e lua o le auala tatou te faʻaogaina i luga o le $theme-colorsfaʻafanua e faʻaleleia ai suiga i le .alertma .list-groupvaega.

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

Talia

O nei fa'ailoga Sass e le gata i fa'afanua lanu, pe. E mafai fo'i ona e fa'atupuina suiga tali o au vaega. Fai se fa'ata'ita'iga o la matou fa'aogaina o le pa'u i lalo lea matou te fa'afefiloi ai se @eachmatasele mo le $grid-breakpointsfa'afanua Sass ma se fa'asalalauga e aofia ai.

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

Afai e te suia lau $grid-breakpoints, o au suiga o le a faʻaoga i matasele uma o loʻo faʻasolosolo i luga o lena faafanua.

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

Mo nisi faʻamatalaga ma faʻataʻitaʻiga i le auala e sui ai a matou faʻafanua Sass ma fesuiaiga, faʻamolemole vaʻai i le vaega Sass o le Grid pepa .

Fausia o oe lava

Matou te fa'amalosia oe e fa'aaoga nei ta'iala pe a fau ma Bootstrap e fai ai au lava vaega. Ua matou fa'alauteleina lenei faiga i matou lava i vaega fa'ale-aganu'u i a matou fa'amaumauga ma fa'ata'ita'iga. O vaega e pei o a tatou valaau e fausia e pei lava o a tatou vaega tu'uina atu ma vasega fa'avae ma fa'avasega.

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

I lau CSS, e iai sau mea e pei o le mea o loʻo mulimuli mai e fai ai le tele o le sitaili e ala i le .callout. Ona, o sitaili tulaga ese i le va o fesuiaiga taitasi e pulea e ala i le vasega modifier.

// Base class
.callout {}

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

Mo fa'ailoga, o lena sitaili tulaga ese ua na'o se border-left-color. A e tuʻufaʻatasia lena vasega faʻavae ma se tasi o na vasega faʻaleleia, e te maua lou aiga atoa: