زاپچاسلار

ئاساسى دەرسلەر

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

Responsive

بۇ Sass ھالقىلىرى رەڭ خەرىتىسى بىلەنلا چەكلەنمەيدۇ. زاپچاسلىرىڭىزنىڭ ئىنكاسچان ئۆزگىرىشىنى ھاسىل قىلالايسىز. @eachمەسىلەن ، $grid-breakpointsSass خەرىتىسىنىڭ بىر ھالقىسىنى مېدىيا سوئالى ئۆز ئىچىگە ئالغان تۆۋەنگە چۈشۈش نىسبىتىنى ئىنكاس قايتۇرۇشنى مىسالغا ئالايلى .

// 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. سىز بۇ ئاساسىي سىنىپنى ئاشۇ ئۆزگەرتكۈچ سىنىپىنىڭ بىرى بىلەن بىرلەشتۈرسىڭىز ، تولۇق زاپچاس ئائىلىڭىزگە ئېرىشىسىز: