घटक

बेस क्लासेस

बूटस्ट्रॅपचे घटक मुख्यत्वे बेस-मॉडिफायर नामांकनासह तयार केले जातात. आम्ही बेस क्लासमध्ये शक्य तितक्या शेअर केलेल्या गुणधर्मांचे गट करतो, जसे की .btn, आणि नंतर प्रत्येक प्रकारासाठी स्वतंत्र शैली मॉडिफायर वर्गांमध्ये गटबद्ध करतो, जसे .btn-primaryकिंवा .btn-success.

आमचे सुधारक वर्ग तयार करण्यासाठी, आम्ही @eachSass नकाशावर पुनरावृत्ती करण्यासाठी Sass च्या loops वापरतो. $theme-colorsआमच्याद्वारे घटकाचे रूपे निर्माण करण्यासाठी आणि प्रत्येक ब्रेकपॉइंटसाठी प्रतिसादात्मक प्रकार तयार करण्यासाठी हे विशेषतः उपयुक्त आहे . जसे तुम्ही हे Sass नकाशे सानुकूलित कराल आणि पुन्हा संकलित कराल, तुम्हाला तुमचे बदल या लूपमध्ये आपोआप दिसून येतील.

हे लूप कसे सानुकूलित करायचे आणि बूटस्ट्रॅपचा बेस-मॉडिफायर दृष्टिकोन तुमच्या स्वतःच्या कोडमध्ये कसा वाढवायचा यासाठी आमचे 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. जेव्हा तुम्ही त्या मॉडिफायर क्लाससह बेस क्लास एकत्र करता तेव्हा तुम्हाला तुमचे संपूर्ण घटक कुटुंब मिळते: