Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
Check
in English

Likaroloana

Ithute hore na ke hobane'ng ha re haha ​​​​lisebelisoa tsohle tsa rona ka tsela e lumellanang le mekhoa ea motheo le ea ho fetola.

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.

Ena ke pitso. Re e entse tloaelo bakeng sa litokomane tsa rona hore melaetsa ea rona ho uena e hlahelle. E na le mefuta e meraro ka litlelase 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:

Ena ke leseli la litaba. Mohlala oa mongolo ho o bontša ka liketso.
Ena ke tlhokomeliso. Mohlala oa mongolo ho o bontša ka liketso.
Ena ke lets'oao la kotsi. Mohlala oa mongolo ho o bontša ka liketso.