Likaroloana

Lihlopha tsa motheo

Likarolo tsa Bootstrap li hahiloe haholo ka "base-modifier nomenclature". Re arola thepa e ngata e arolelanoang ka hohle kamoo ho ka khonehang ka sehlopha sa motheo, joalo ka .btn, ebe re hlophisa mefuta e fapaneng bakeng sa mofuta o mong le o mong ka lihlopha tsa ho fetola, joalo .btn-primaryka kapa .btn-success.

Ho aha litlelase tsa rona tsa litokiso, re sebelisa @eachloops ea Sass ho pheta 'mapa oa Sass. Sena se thusa haholo bakeng sa ho hlahisa mefuta e fapaneng ea karolo ka rona $theme-colorsle ho theha mefuta e arabelang bakeng sa ntlha ka 'ngoe. Ha u ntse u etsa limmapa tsena tsa Sass, 'me u li etsa hape, u tla bona liphetoho tsa hau li hlaha ho loops tsena.

Sheba limmapa tsa rona tsa Sass le li-loops docs mabapi le mokhoa oa ho etsa loops tsena le ho holisa mokhoa oa Bootstrap oa ho fetola motheo ho khoutu ea hau.

Liphetoho

Likarolo tse ngata tsa Bootstrap li hahiloe ka mokhoa oa sehlopha sa base-modifier. Sena se bolela hore boholo ba setaele bo fumaneha ho sehlopha sa batho ba bang (mohlala, .btn) athe mefuta e fapaneng ea setaele e fella feela ka lihlopha tsa ho fetola (mohlala, .btn-danger). Lihlopha tsena tsa ho fetola li hahiloe ho tloha ' $theme-colorsmapeng ho etsa hore palo le mabitso a lihlopha tsa rona li behoe.

Mehlala e 'meli ke ena ea hore na re tsamaea joang $theme-colors'mapeng ho hlahisa li-modifiers .alertle .list-grouplikarolo.

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

Ea arabelang

Loops tsena tsa Sass ha li felle feela ho limmapa tsa mebala, hape. U ka boela ua hlahisa mefuta e fapaneng e arabelang ea likarolo tsa hau. Ka mohlala, nka karabelo ea rona ea li-dropdown moo re kopanyang @eachloop bakeng sa $grid-breakpoints'mapa oa Sass le potso ea media e kenyelletsang.

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

Ha o ka fetola $grid-breakpoints, liphetoho tsa hau li tla sebetsa ho loops e ntseng e tsoela pele 'mapeng oo.

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

Bakeng sa lintlha tse ling le mehlala ea ho fetola 'mapa le mefuta e fapaneng ea Sass, ka kopo sheba karolo ea Sass ea litokomane tsa Grid .

Ho iketsetsa ea hau

Re u khothaletsa ho sebelisa litataiso tsena ha u haha ​​​​ka Bootstrap ho iketsetsa likarolo tsa hau. Re ekelitse mokhoa ona ka borona ho likarolo tsa tloaelo litokomaneng tsa rona le mehlala. Likarolo tse kang li-callouts tsa rona li hahiloe joalo ka likarolo tsa rona tse fanoeng tse nang le litlelase tsa motheo le tsa modifier.

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

Ho CSS ea hau, u tla ba le ntho e kang e latelang moo boholo ba setaele se etsoang ka .callout. Joale, mefuta e ikhethang lipakeng tsa mofuta o mong le o mong e laoloa ka sehlopha sa modifier.

// Base class
.callout {}

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

Bakeng sa li-callouts, setaele seo se ikhethang ke border-left-color. Ha o kopanya sehlopha sa motheo le e 'ngoe ea litlelase tseo tsa ho fetola, o fumana lelapa la hau le felletseng: