Abubuwan da aka gyara

Azuzuwan tushe

Abubuwan abubuwan Bootstrap an gina su ne tare da nomenclature mai gyara tushe. Muna ƙulla kaddarorin da aka raba da yawa gwargwadon yiwuwa zuwa ajin tushe, kamar .btn, sannan kuma mu haɗa nau'ikan nau'ikan nau'ikan kowane bambance-bambancen zuwa azuzuwan masu gyara, kamar .btn-primaryko .btn-success.

Don gina azuzuwan masu gyara mu, muna amfani da @eachmadaukai na Sass don maimaita taswirar Sass. Wannan yana da taimako musamman don samar da bambance-bambancen wani bangare ta hanyar mu $theme-colorsda ƙirƙirar bambance-bambancen amsa ga kowane wurin hutu. Yayin da kuke keɓance waɗannan taswirorin Sass kuma ku sake tarawa, zaku ga canje-canjen ku ta atomatik a cikin waɗannan madaukai.

Duba taswirorin mu na Sass da takaddun madaukai don yadda ake keɓance waɗannan madaukai da tsawaita tsarin gyaran tushe na Bootstrap zuwa lambar ku.

Masu gyarawa

Yawancin abubuwan haɗin Bootstrap an gina su tare da tsarin aji mai gyara tushe. Wannan yana nufin yawancin salon yana ƙunshe ne zuwa ajin tushe (misali, .btn) yayin da bambancin salo ke iyakance ga azuzuwan masu gyara (misali, .btn-danger). Waɗannan azuzuwan masu gyara an gina su daga $theme-colorstaswira don yin gyare-gyaren lamba da sunan azuzuwan mu gyara.

Anan akwai misalai guda biyu na yadda muke madauki kan $theme-colorstaswira don samar da masu gyara ga abubuwan .alertda .list-groupaka gyara.

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

Mai amsawa

Waɗannan madaukai na Sass ba su iyakance ga taswirar launi ba, ko dai. Hakanan zaka iya ƙirƙirar bambance-bambancen abubuwan da aka haɗa ku. Ɗauki misali daidaitawar mu na jerin abubuwan da aka zazzage inda muke haɗa @eachmadauki don $grid-breakpointstaswirar Sass tare da tambayar mediya ta haɗa da.

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

Idan kun canza naku $grid-breakpoints, canje-canjenku zai shafi duk madaukai da ke jujjuya taswirar.

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

Don ƙarin bayani da misalai kan yadda ake canza taswirar Sass da masu canji, da fatan za a koma sashin Sass na takaddun Grid .

Ƙirƙirar naku

Muna ƙarfafa ku kuyi amfani da waɗannan jagororin yayin ginawa tare da Bootstrap don ƙirƙirar abubuwan haɗin ku. Mun ƙaddamar da wannan hanyar da kanmu zuwa abubuwan da aka saba da su a cikin takaddunmu da misalai. Abubuwan da aka haɗa kamar kiran kiran mu an gina su kamar yadda aka samar mana da azuzuwan tushe da gyarawa.

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

A cikin CSS ɗin ku, kuna da wani abu kamar mai zuwa inda ake yin yawancin salo ta hanyar .callout. Sa'an nan, keɓaɓɓen salo tsakanin kowane bambance-bambancen ana sarrafa su ta hanyar ajin gyare-gyare.

// Base class
.callout {}

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

Ga masu kira, wannan salo na musamman shine kawai border-left-color. Lokacin da kuka haɗa wannan ajin tushe tare da ɗayan waɗannan azuzuwan masu gyara, kuna samun cikakken dangin ku: