Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
in English

Amacandelo

Funda ukuba kutheni kwaye kutheni sakha phantse onke amacandelo ethu ngokuphendula kunye nesiseko kunye neeklasi zesilungisi.

Iiklasi ezisisiseko

Izinto zeBootstrap zakhiwe ubukhulu becala nge-base-modifier nomenclature. Sidibanisa iipropathi ezininzi ekwabelwana ngazo kudidi lwesiseko, njenge .btn, kwaye emva koko sidibanise izimbo zohlobo ngalunye ngokwahlukileyo kwiiklasi zesilungisi, njenge .btn-primaryokanye .btn-success.

Ukwakha iiklasi zethu zesilungisi, sisebenzisa iilophu ze-Sass @eachukuphindaphinda imephu ye-Sass. Oku kuluncedo kakhulu ekuveliseni ukwahluka kwecandelo ngokwethu $theme-colorskunye nokudala iiyantlukwano eziphendulayo kwindawo nganye yoqhawulo. Njengoko usenza ngokwezifiso ezi mephu ze-Sass kwaye uphinda uhlanganise, uya kubona ngokuzenzekelayo utshintsho lwakho lubonakaliswe kwezi lophu.

Jonga iimephu zethu ze-Sass kunye ne-loops amaxwebhu malunga nendlela yokwenza ezi lophu kunye nokwandisa indlela ye-Bootstrap yokuguqula isiseko kwikhowudi yakho.

Izilungisi

Uninzi lwamacandelo e-Bootstrap akhiwe ngendlela yeklasi ye-modifier. Oku kuthetha ukuba ubuninzi besimbo buqulethwe kudidi olusisiseko (umzekelo, .btn) ngelixa ulwahlulo lwesimbo luvalelwe kwiiklasi zesilungisi (umzekelo, .btn-danger). Ezi klasi zesilungisi zakhiwe $theme-colorskwimephu ukwenza inani kunye negama leeklasi zethu zesilungisi.

Nantsi imizekelo emibini yendlela esijika ngayo phezu kwemephu $theme-colorsukwenza izilungisi kwizixhobo ..alert.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);
}

Ukusabela

Ezi lophu zeSass aziphelelanga kwiimephu zemibala, nazo. Unokwenza kwakhona ulwahlulo oluphendulayo lwamacandelo akho. Thatha umzekelo ukulungelelaniswa kwethu okuphendulayo kokwehla apho sixuba i- @eachloop $grid-breakpointsyemephu ye-Sass kunye nombuzo weendaba ezibandakanya.

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

Ukuba ulungisa eyakho $grid-breakpoints, utshintsho lwakho luya kusebenza kuzo zonke iilophu eziphinda-phindayo phezu kwaloo mephu.

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

Ngolwazi oluthe vetshe kunye nemizekelo malunga nendlela yokutshintsha iimephu zethu ze-Sass kunye nezinto eziguquguqukayo, nceda ujonge icandelo le-Sass leGridi yamaxwebhu .

Ukwenza eyakho

Siyakukhuthaza ukuba wamkele ezi zikhokelo xa usakha ngeBootstrap ukwenza ezakho izinto. Siye sayandisa le ndlela ngokwethu kumacandelo esiko kumaxwebhu ethu kunye nemizekelo. Amacandelo afana nee-callouts zethu zakhiwe njengezixhobo zethu esizinikiweyo ezinesiseko kunye neeklasi zesilungisi.

Oku kukubiza. Siyenzele amaxwebhu ethu ukuze imiyalezo yethu kuwe igqame. Ineentlobo ezintathu ngeeklasi zesilungisi.
<div class="callout">...</div>

KwiCSS yakho, unokuba nento efana nale ilandelayo apho isambuku sesitayile senziwe nge .callout. Emva koko, izimbo ezikhethekileyo phakathi kweyantlukwano nganye ilawulwa ngodidi lwesilungisi.

// Base class
.callout {}

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

Kwi-callouts, eso sitayile esisodwa siyinto nje border-left-color. Xa udibanisa iklasi yesiseko kunye nenye yezo klasi zokuguqula, ufumana usapho lwakho olupheleleyo:

Olu luphawu lolwazi. Umzekelo wokubhaliweyo ukuwubonisa usebenza.
Esi sisilumkiso. Umzekelo wokubhaliweyo ukuwubonisa usebenza.
Oku kukubizela ingozi. Umzekelo wokubhaliweyo ukuwubonisa usebenza.