Бүрэлдэхүүн хэсгүүд

Суурь ангиуд

Bootstrap-ийн бүрэлдэхүүн хэсгүүд нь үндсэн өөрчлөлтийн нэр томъёогоор бүтээгдсэн байдаг. Бид аль болох олон хуваалцсан шинж чанаруудыг зэрэг үндсэн ангилалд бүлэглээд дараа нь хувилбар бүрийн хувийн хэв маягийг эсвэл .btnгэх мэт өөрчлөгч ангиудад бүлэглэнэ ..btn-primary.btn-success

Өөрчлөгч ангиудаа үүсгэхийн тулд бид Sass-ийн @eachгогцоог ашиглан Sass газрын зураг дээр давтдаг. Энэ нь ялангуяа манай бүрэлдэхүүн хэсгийн $theme-colorsхувилбаруудыг үүсгэх, таслах цэг бүрт хариу үйлдэл үзүүлэх хувилбаруудыг бий болгоход тустай. Та эдгээр Sass газрын зургийг өөрчилж, дахин эмхэтгэх үед эдгээр гогцоонд тусгагдсан өөрчлөлтүүдээ автоматаар харах болно.

Эдгээр гогцоонуудыг хэрхэн өөрчлөх, Bootstrap-ийн үндсэн хувиргагч хандлагыг өөрийн код руу хэрхэн өргөтгөх талаар манай Sass газрын зураг, гогцооны баримт бичгүүдийг шалгана уу .

Өөрчлөгч

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медиа асуулгатай хольж унадаг цэснүүдийн хариу тохируулгыг авч үзье.

// 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 газрын зураг болон хувьсагчдыг хэрхэн өөрчлөх тухай дэлгэрэнгүй мэдээлэл болон жишээнүүдийг Grid баримт бичгийн Sass хэсгээс үзнэ үү .

Өөрийгөө бүтээх

Bootstrap ашиглан өөрийн бүрэлдэхүүн хэсгүүдийг бүтээхдээ эдгээр удирдамжийг дагаж мөрдөхийг бид танд зөвлөж байна. Бид энэ хандлагыг өөрсдийн баримт бичиг болон жишээн дэх захиалгат бүрэлдэхүүн хэсгүүдэд өргөжүүлсэн. Бидний тайлбар зэрэг бүрэлдэхүүн хэсгүүд нь үндсэн болон хувиргагч анги бүхий бидний өгсөн бүрэлдэхүүн хэсгүүдийн нэгэн адил бүтээгдсэн.

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

Таны CSS-д та дараахтай төстэй зүйлтэй байх бөгөөд ихэнх загварчлалыг -р дамжуулан хийдэг .callout. Дараа нь хувилбар бүрийн хоорондох өвөрмөц хэв маягийг өөрчлөх ангиар удирддаг.

// Base class
.callout {}

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

Дуудлагын хувьд тэр өвөрмөц загвар нь ердөө л border-left-color. Та уг үндсэн ангийг тэдгээр өөрчилсөн ангиудын аль нэгтэй хослуулснаар та өөрийн бүрэн бүрэлдэхүүний гэр бүлийг авах болно: