Main content ah kal rawh Docs navigation ah kal rawh
Check
in English

Component hrang hrangte

Kan component zawng zawng deuhthaw hi responsive taka leh base leh modifier class hmanga kan siam dan leh engvangin nge kan siam tih zir rawh.

Base class hrang hrang te

Bootstrap-a component hrang hrangte hi a tam zawk chu base-modifier nomenclature hmanga siam a ni. Shared property tam thei ang ber chu base class-ah kan group a, like .btn, chutah chuan variant tinte tana style hrang hrang chu modifier class-ah kan group a, like .btn-primaryor.btn-success

Kan modifier class siam tur chuan Sass’s @eachloops hmangin Sass map chungah iterate thin. Hei hi a bik takin kan component pakhat $theme-colorsvariant siam nan leh breakpoint tin atan responsive variant siam nan a tangkai hle. Heng Sass maps te hi i customize a, recompile i tih hian i inthlak danglamna te chu heng loop ah te hian a lang chhuak nghal vek ang.

Heng loop te hi customize dan tur leh Bootstrap-a base-modifier approach chu i code-a tihzauh dan tur chu kan Sass maps leh loops docs te hi en la .

Modifier te pawh a awm

Bootstrap-a component tam tak hi base-modifier class approach hmanga siam a ni. Hei hian a awmzia chu styling bulk chu base class (eg, .btn)-ah a awm a, style variation erawh chu modifier class (eg, .btn-danger)-ah a innghat thung tihna a ni. Heng modifier class te hi $theme-colorsmap atanga siam niin kan modifier class te number leh hming customizing siam a ni.

$theme-colorsHetah hian map kan loop over dan .alertleh .list-groupcomponents te modifier kan siam dan entirnan pahnih kan rawn tarlang 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);
}

Chhanna pe thei

Heng Sass loop te hi color maps chauh a ni lo, chutiang bawkin. I component hrang hrangte responsive variation i siam thei bawk. Entirnan Sass map @eachatana loop pakhat leh media query include kan mix na dropdowns te kan responsive alignment hi han la teh.$grid-breakpoints

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

I , i siam danglam a nih $grid-breakpointschuan, i tihdanglamte chu chu map chunga loop iterating zawng zawngah a hman vek ang.

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

Kan Sass map leh variable te siam danglam dan tur hriat belh leh entirnan Grid documentation a Sass section ah hian en la .

Mahni siam chhuah

Bootstrap hmanga i siam hunah heng kaihhruainate hi hmang la, mahni component siam turin kan fuih a che. Hetiang approach hi kan documentation leh entirnan custom components te pawh kan tizau tawh a ni. Kan callout ang chi component te hi kan component pek ang bawkin base leh modifier class te nen siam a ni.

Hei hi callout a ni. Kan docs atan custom kan siam a, chuvang chuan kan message te hi a langsar hle. Modifier class kaltlangin variant pathum a nei a.
<div class="callout">...</div>

I CSS ah chuan a hnuaia mi ang chi hi i nei ang a, chutah chuan styling tam zawk chu via .callout. Tichuan, variant tinte inkara style danglam bikte chu modifier class hmangin control a ni.

// Base class
.callout {}

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

Callouts tan chuan, chu styling danglam tak chu a border-left-color. Chu base class chu chutiang modifier class pakhat nen i combine chuan i component family kimchang chu i hmu ang:

Hei hi info callout a ni. Action-a entir turin text entir rawh.
Hei hi warning callout a ni. Action-a entir turin text entir rawh.
Hei hi hlauhawm callout a ni. Action-a entir turin text entir rawh.