Dikarolo

Diklase tša motheo

Dikarolo tša Bootstrap di agilwe kudu ka maina a motheo-mofetoši. Re hlopha dithoto tše ntši tše di abelanwago ka mo go kgonegago ka sehlopha sa motheo, go swana le .btn, gomme ka morago re hlopha mekgwa ya motho ka o tee ka o tee ya mohuta wo mongwe le wo mongwe ka dihlopha tša sefetoši, go swana le .btn-primarygoba .btn-success.

Go aga diklase tša rena tša sefetoši, re šomiša @eachdiloupu tša Sass go ipoeletša godimo ga mmapa wa Sass. Se se thuša kudu bakeng sa go tšweletša diphetogo tša karolo ka rena $theme-colorsle go hlola diphetogo tše di arabelago bakeng sa ntlha e nngwe le e nngwe ya go kgaotša. Ge o dutše o tlwaetša dimmapa tše tša Sass le go kgoboketša gape, o tla bona ka go iketla diphetogo tša gago di bonagala ka gare ga diloupu tše.

Hlahloba dimmapa tša rena tša Sass le ditokomane tša diloupu bakeng sa kamoo o ka tlwaetšago diloupu tše le go katološa mokgwa wa go fetoša motheo wa Bootstrap go khoutu ya gago.

Diphetogo

Bontši bja dikarolo tša Bootstrap di agilwe ka mokgwa wa sehlopha sa motheo-mofetoši. Se se ra gore bontši bja setaele bo na le sehlopha sa motheo (mohlala, .btn) mola diphetogo tša setaele di lekanyeditšwe go dihlopha tša sefetoši (mohlala, .btn-danger). Diklase tše tša sefetoši di agilwe go tšwa $theme-colorsmmapeng go dira go tlwaetša palo le leina la dihlopha tša rena tša sefetoši.

Mehlala ye mebedi ya ka moo re loop godimo ga $theme-colorsmmapa go tšweletša diphetoši go dikarolo tša .alertle ke .list-grouptše.

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

Go arabela

Diloupu tše tša Sass ga di lekanyetšwe go dimmapa tša mebala, le tšona. O ka tšweletša gape le diphetogo tše di arabelago tša dikarolo tša gago. Tšea mohlala go logaganya ga rena ga go arabela ga dilo tša go theoga moo re hlakanyago @eachseloupu sa $grid-breakpointsmmapa wa Sass ka potšišo ya boraditaba e akaretša.

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

Ge e ba o swanetše go fetoša ya gago $grid-breakpoints, diphetogo tša gago di tla šoma go diloupu ka moka tšeo di ipoeletšago godimo ga mmapa woo.

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

Bakeng sa tshedimošo ye ntši le mehlala ya ka moo o ka fetošago mebapa ya rena ya Sass le diphetogo, hle lebelela karolo ya Sass ya ditokomane tša Gridi .

Go hlama ya gago

Re go hlohleletša go amogela ditlhahlo tše ge o aga ka Bootstrap go hlama dikarolo tša gago. Re katološitše mokgwa wo ka borena go dikarolo tša tlwaelo ka ditokomaneng tša rena le mehlaleng. Dikarolo tša go swana le di-callout tša rena di agilwe go swana le dikarolo tša rena tše di filwego ka dihlopha tša motheo le tša sefetoši.

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

Ka go CSS ya gago, o be o tla ba le selo se sengwe sa go swana le se se latelago moo bontši bja setaele bo dirwago ka .callout. Ka morago ga moo, mekgwa ye e kgethegilego magareng ga mohuta wo mongwe le wo mongwe e laolwa ka sehlopha sa sefetoši.

// Base class
.callout {}

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

Bakeng sa di- callout, setaele seo sa moswana-noši e fo ba border-left-color. Ge o kopanya sehlopha seo sa motheo le e nngwe ya diklase tšeo tša sefetoši, o hwetša lapa la gago la dikarolo tše di feletšego: