Komponentlar

Asosiy sinflar

Bootstrap komponentlari asosan asosiy modifikator nomenklaturasi bilan qurilgan. Biz imkon qadar ko'proq umumiy xususiyatlarni kabi asosiy sinfga to'playmiz .btnva keyin har bir variant uchun individual uslublarni .btn-primaryyoki kabi modifikator sinflariga guruhlaymiz .btn-success.

Modifikator sinflarimizni yaratish uchun biz @eachSass xaritasini takrorlash uchun Sass's looplaridan foydalanamiz. Bu, ayniqsa, bizning komponentimiz $theme-colorsvariantlarini yaratish va har bir to'xtash nuqtasi uchun javob beruvchi variantlarni yaratish uchun foydalidir. Ushbu Sass xaritalarini moslashtirganingiz va qayta kompilyatsiya qilganingizdan so'ng, avtomatik ravishda o'zgartirishlaringiz ushbu tsikllarda aks ettirilganini ko'rasiz.

Ushbu tsikllarni qanday sozlash va Bootstrap-ning asosiy modifikator yondashuvini o'z kodingizga kengaytirish uchun bizning Sass xaritalari va halqalari hujjatlarini ko'rib chiqing.

Modifikatorlar

Bootstrap-ning ko'pgina komponentlari asosiy modifikator sinfi yondashuvi bilan qurilgan. Bu shuni anglatadiki, uslubning asosiy qismi asosiy sinfga (masalan, .btn) kiritilgan, uslub o'zgarishlari esa modifikator sinflari bilan chegaralangan (masalan, .btn-danger). $theme-colorsUshbu modifikator sinflari bizning modifikator sinflarimiz soni va nomini sozlash uchun xaritadan qurilgan .

Mana va komponentlarga $theme-colorsmodifikatorlar yaratish uchun xaritani qanday aylantiramiz..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);
}

Javobgar

Ushbu Sass halqalari ham rangli xaritalar bilan cheklanmaydi. Siz komponentlaringizning sezgir o'zgarishlarini ham yaratishingiz mumkin. Misol uchun, biz Sass xaritasi uchun @eachtsiklni $grid-breakpointsmedia so'rovi bilan aralashtiradigan ochiladigan ro'yxatlarning sezgir tekislanishini olaylik.

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

Agar siz $grid-breakpointsni o'zgartirsangiz, o'zgartirishlaringiz ushbu xaritada takrorlanadigan barcha tsikllarga qo'llaniladi.

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

Sass xaritalarimiz va o'zgaruvchilarimizni qanday o'zgartirish haqida qo'shimcha ma'lumot va misollar uchun Grid hujjatlarining Sass bo'limiga qarang .

O'zingizni yaratish

O'z komponentlaringizni yaratish uchun Bootstrap bilan qurishda ushbu ko'rsatmalarga amal qilishingizni tavsiya qilamiz. Biz ushbu yondashuvni hujjatlarimiz va misollarimizdagi maxsus komponentlarga kengaytirdik. Bizning qo'ng'iroqlarimiz kabi komponentlar xuddi tayanch va modifikator sinflari bilan taqdim etilgan komponentlarimiz kabi qurilgan.

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

Sizning CSS-da siz quyidagi kabi narsaga ega bo'lasiz, bu erda uslubning asosiy qismi orqali amalga oshiriladi .callout. Keyin har bir variant orasidagi noyob uslublar modifikator sinfi orqali boshqariladi.

// Base class
.callout {}

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

Qo'ng'iroqlar uchun bu noyob uslub shunchaki border-left-color. Ushbu asosiy sinfni ushbu modifikator sinflaridan biri bilan birlashtirganingizda, siz to'liq komponentlar oilasiga ega bo'lasiz: