Компонентхо

Синфҳои асосӣ

Ҷузъҳои Bootstrap асосан бо номенклатураи тағирдиҳандаи базавӣ сохта шудаанд. Мо ҳарчи бештари хосиятҳои муштаракро дар як синфи асосӣ, ба мисли .btn, гурӯҳбандӣ мекунем ва сипас сабкҳои инфиродӣ барои ҳар як вариант ба синфҳои тағирдиҳанда, ба монанди .btn-primaryё , гурӯҳбандӣ мекунем .btn-success.

Барои сохтани синфҳои тағирдиҳандаи худ, мо @eachҳалқаҳои Sass-ро барои такрори харитаи Sass истифода мебарем. Ин махсусан барои тавлиди вариантҳои ҷузъ аз ҷониби мо $theme-colorsва эҷоди вариантҳои ҷавобгӯ барои ҳар як нуқтаи қатъшавӣ муфид аст. Вақте ки шумо ин харитаҳои Sass-ро танзим мекунед ва аз нав тартиб медиҳед, шумо ба таври худкор тағиротҳои шуморо дар ин ҳалқаҳо мебинед.

Харитаҳо ва ҳуҷҷатҳои Sass-и моро санҷед, то ки чӣ гуна ин ҳалқаҳоро танзим кунед ва равиши таҳриркунандаи Bootstrap-ро ба рамзи шахсии худ васеъ кунед.

Тағйирдиҳандаҳо

Бисёре аз ҷузъҳои Bootstrap бо равиши синфи тағирдиҳандаи базавӣ сохта шудаанд. Ин маънои онро дорад, ки қисми асосии ороиш ба синфи асосӣ дохил мешавад (масалан, .btn) дар ҳоле ки вариантҳои услуб бо синфҳои тағирдиҳанда маҳдуданд (масалан, .btn-danger). Ин синфҳои тағирдиҳанда аз $theme-colorsхарита сохта шудаанд, то шумора ва номи синфҳои тағирдиҳандаи моро танзим кунанд.

Инҳоянд ду мисоли он, ки чӣ тавр мо дар $theme-colorsхарита давр мезанем, то тағирдиҳандаҳоро ба ҷузъҳо .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);
}

Ҷавобгар

Ин ҳалқаҳои Sass бо харитаҳои рангӣ маҳдуд нестанд. Шумо инчунин метавонед вариантҳои вокуниши ҷузъҳои худро эҷод кунед. Масалан, ҳамоҳангсозии ҷавобгӯи афтандаҳои моро гиред, ки дар он мо @eachҳалқаро барои $grid-breakpointsхаритаи Sass бо дархости медиа омехта мекунем.

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

Агар шумо -и худро тағир диҳед $grid-breakpoints, тағиротҳои шумо ба ҳамаи ҳалқаҳое, ки дар болои он харита такрор мешаванд, татбиқ мешаванд.

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

Барои маълумоти бештар ва мисолҳо дар бораи чӣ гуна тағир додани харитаҳо ва тағирёбандаҳои Sass, лутфан ба бахши Sass-и ҳуҷҷатҳои Grid муроҷиат кунед.

Эҷоди худ

Мо шуморо ташвиқ мекунем, ки ин дастурҳоро ҳангоми сохтани Bootstrap барои сохтани ҷузъҳои шахсии худ қабул кунед. Мо ин равишро худамон ба ҷузъҳои фармоишӣ дар ҳуҷҷатҳо ва мисолҳои худ васеъ кардем. Компонентҳо ба монанди зангҳои мо мисли ҷузъҳои пешниҳодшудаи мо бо синфҳои асосӣ ва тағирдиҳанда сохта шудаанд.

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

Дар CSS-и худ, шумо чизе монанди зерин доред, ки қисми зиёди ороиш тавассути .callout. Сипас, услубҳои беназири байни ҳар як вариант тавассути синфи тағирдиҳанда идора карда мешаванд.

// Base class
.callout {}

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

Барои зангҳо, он ороиши беназир танҳо як border-left-color. Вақте ки шумо ин синфи асосиро бо яке аз он синфҳои тағирдиҳанда муттаҳид мекунед, шумо оилаи пурраи ҷузъи худро мегиред: