Co-phàirtean

Clasaichean bunaiteach

Tha co-phàirtean Bootstrap gu ìre mhòr air an togail le ainmean mion-atharrachaidh bunaiteach. Bidh sinn a’ cruinneachadh nas urrainn de thogalaichean co-roinnte ann an clas bunaiteach, leithid .btn, agus an uairsin a’ cuir còmhla stoidhlichean fa leth airson gach caochladair gu clasaichean mion-atharrachaidh, leithid .btn-primaryno .btn-success.

Gus na clasaichean mion-atharrachaidh againn a thogail, bidh sinn a’ cleachdadh @eachlùban Sass airson ath-aithris thairis air mapa Sass. Tha seo gu sònraichte cuideachail airson caochlaidhean de cho-phàirt a ghineadh leis an fhear againn $theme-colorsagus caochlaidhean freagairteach a chruthachadh airson gach briseadh. Mar a bhios tu a’ gnàthachadh nam mapaichean Sass sin agus ag ath-chruinneachadh, chì thu gu fèin-ghluasadach na h-atharrachaidhean agad air an nochdadh anns na lùban sin.

Thoir sùil air na mapaichean Sass agus na docaichean lùban againn airson mar as urrainn dhut na lùban sin a ghnàthachadh agus dòigh-obrach mion-atharrachaidh Bootstrap a leudachadh don chòd agad fhèin.

Mion-atharraichean

Tha mòran de cho-phàirtean Bootstrap air an togail le dòigh-obrach clas bun-atharrachaidh. Tha seo a’ ciallachadh gu bheil a’ mhòr-chuid den stoidhle air a chumail ann an clas bunaiteach (me, .btn) fhad ‘s a tha atharrachaidhean stoidhle air an cuingealachadh ri clasaichean mion-atharrachaidh (me, .btn-danger). Tha na clasaichean mion-atharrachaidh seo air an togail bhon $theme-colorsmhapa gus àireamh agus ainm nan clasaichean atharrachaidh againn a ghnàthachadh.

Seo dà eisimpleir air mar a bhios sinn a’ lùbadh thairis air a’ $theme-colorsmhapa gus mion-atharraichean a ghineadh air na co-phàirtean .alertagus na .list-grouppàirtean.

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

Freagarrach

Chan eil na lùban Sass seo cuingealaichte ri mapaichean dath, nas motha. Faodaidh tu cuideachd atharrachaidhean freagairteach de na co-phàirtean agad a ghineadh. Gabh mar eisimpleir ar co-thaobhadh freagairteach de na dropdowns far am bi sinn a’ measgachadh @eachlùb airson $grid-breakpointsmapa Sass le ceist mheadhanan a’ toirt a-steach.

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

Ma dh’ atharraicheas tu do $grid-breakpoints, bidh na h-atharrachaidhean agad a’ buntainn ris a h-uile lùb a bhios ag ath-aithris thairis air a’ mhapa sin.

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

Airson tuilleadh fiosrachaidh agus eisimpleirean air mar a dh’ atharraicheas tu ar mapaichean Sass agus caochladairean, thoir sùil air an roinn Sass de na sgrìobhainnean Clèithe .

A 'cruthachadh do chuid fhèin

Tha sinn gad bhrosnachadh gus gabhail ris an stiùireadh seo nuair a bhios tu a’ togail le Bootstrap gus na co-phàirtean agad fhèin a chruthachadh. Tha sinn air an dòigh-obrach seo a leudachadh sinn fhìn gu na pàirtean àbhaisteach anns na sgrìobhainnean agus na h-eisimpleirean againn. Tha co-phàirtean mar ar fiosan air an togail dìreach mar na pàirtean againn a tha air an solarachadh le clasaichean bunaiteach agus mion-atharrachaidh.

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

Anns an CSS agad, bhiodh rudeigin mar na leanas agad far a bheil a’ mhòr-chuid den stoidhle air a dhèanamh tro .callout. An uairsin, tha na stoidhlichean sònraichte eadar gach caochladair fo smachd clas mion-atharrachaidh.

// Base class
.callout {}

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

Airson na fiosan, chan eil anns an stoidhle shònraichte sin ach border-left-color. Nuair a chuireas tu an clas bunaiteach sin còmhla ri aon de na clasaichean atharrachaidh sin, gheibh thu an teaghlach iomlan agad: