अवयवहरू

आधारभूत कक्षाहरू

बुटस्ट्र्यापका कम्पोनेन्टहरू ठूलो मात्रामा आधार-परिमार्जक नामकरणसँग बनाइएका छन्। हामी सकेसम्म धेरै साझा गुणहरूलाई आधार वर्गमा समूहबद्ध गर्छौं, जस्तै .btn, र त्यसपछि प्रत्येक संस्करणका लागि व्यक्तिगत शैलीहरूलाई परिमार्जक वर्गहरूमा समूहबद्ध गर्छौं, जस्तै .btn-primaryवा .btn-success।

हाम्रो परिमार्जक वर्गहरू निर्माण गर्न, हामी @eachसास नक्सामा पुनरावृत्ति गर्न सासको लूपहरू प्रयोग गर्छौं। यो हाम्रो द्वारा कम्पोनेन्टको भेरियन्टहरू उत्पन्न गर्न $theme-colorsर प्रत्येक ब्रेकपोइन्टको लागि उत्तरदायी भेरियन्टहरू सिर्जना गर्नको लागि विशेष गरी उपयोगी छ। तपाईंले यी सास नक्साहरू अनुकूलित गर्दा र पुन: कम्पाइल गर्दा, तपाईंले यी लूपहरूमा आफ्ना परिवर्तनहरू स्वतः देख्नुहुनेछ।

यी लूपहरूलाई कसरी अनुकूलन गर्ने र बुटस्ट्र्यापको आधार परिमार्जन गर्ने दृष्टिकोणलाई आफ्नै कोडमा विस्तार गर्ने बारे हाम्रो Sass नक्सा र लुप्स कागजातहरू हेर्नुहोस्।

परिमार्जकहरू

बुटस्ट्र्यापका धेरै कम्पोनेन्टहरू आधार-परिमार्जक वर्ग दृष्टिकोणको साथ बनाइएका छन्। यसको मतलब स्टाइलको ठूलो हिस्सा आधार वर्ग (जस्तै, .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);
}

उत्तरदायी

यी सास लूपहरू रङ नक्सामा मात्र सीमित छैनन्। तपाइँ तपाइँको कम्पोनेन्ट को उत्तरदायी भिन्नताहरु पनि उत्पन्न गर्न सक्नुहुन्छ। उदाहरणका लागि ड्रपडाउनहरूको हाम्रो उत्तरदायी पङ्क्तिबद्धता लिनुहोस् जहाँ हामीले मिडिया क्वेरी समावेश @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 नक्सा र चरहरू कसरी परिमार्जन गर्ने भन्ने बारे थप जानकारी र उदाहरणहरूको लागि, कृपया ग्रिड कागजातको Sass सेक्सनलाई सन्दर्भ गर्नुहोस् ।

आफ्नै सिर्जना गर्दै

बुटस्ट्र्यापको साथ निर्माण गर्दा तपाईंको आफ्नै कम्पोनेन्टहरू सिर्जना गर्न हामी तपाईंलाई यी दिशानिर्देशहरू अपनाउन प्रोत्साहन दिन्छौं। हामीले यस दृष्टिकोणलाई हाम्रो कागजात र उदाहरणहरूमा अनुकूलन कम्पोनेन्टहरूमा विस्तार गरेका छौं। हाम्रा कलआउटहरू जस्ता कम्पोनेन्टहरू आधार र परिमार्जनक वर्गहरू भएका हाम्रा उपलब्ध गराइएका कम्पोनेन्टहरू जस्तै बनाइएका छन्।

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

तपाइँको CSS मा, तपाइँसँग निम्न जस्तै केहि हुनेछ जहाँ स्टाइल को थोक मार्फत गरिन्छ .callout। त्यसपछि, प्रत्येक संस्करण बीचको अद्वितीय शैलीहरू परिमार्जक वर्ग मार्फत नियन्त्रण गरिन्छ।

// Base class
.callout {}

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

कलआउटहरूको लागि, त्यो अनौठो स्टाइल केवल एक हो border-left-color। जब तपाइँ त्यो आधार वर्गलाई ती परिमार्जनक वर्गहरू मध्ये एकसँग जोड्नुहुन्छ, तपाइँ तपाइँको पूर्ण घटक परिवार प्राप्त गर्नुहुन्छ: