اجزاء

بنيادي ڪلاس

بوٽ اسٽريپ جا حصا وڏي تعداد ۾ بنيادي طور تي تبديل ڪندڙ نالي سان ٺهيل آهن. اسان جيترو ٿي سگهي گروپ ڪريون ٿا هڪ بيس ڪلاس ۾، جهڙوڪ .btn، ۽ پوءِ گروپ انفرادي اسلوب کي هر قسم لاءِ تبديل ڪندڙ طبقن ۾، جهڙوڪ .btn-primaryيا .btn-success.

اسان جي ترميم ڪندڙ طبقن کي تعمير ڪرڻ لاء، اسان ساس جي @eachلوپ کي استعمال ڪريون ٿا ساس نقشي تي ٻيهر ڪرڻ لاء. اهو خاص طور تي مددگار آهي اسان جي طرفان هڪ جزو جي مختلف $theme-colorsقسمن کي پيدا ڪرڻ ۽ هر بريڪ پوائنٽ لاءِ جوابي مختلف قسمون ٺاهڻ. جيئن توهان انهن ساس نقشن کي ترتيب ڏيو ۽ ٻيهر گڏ ڪريو، توهان خودڪار طريقي سان ڏسندا ته توهان جون تبديليون انهن لوپس ۾ ظاهر ٿينديون.

چيڪ ڪريو اسان جا Sass نقشا ۽ loops دستاويزن لاءِ ته انهن لوپس کي ڪيئن ڪسٽمائيز ڪجي ۽ 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);
}

جوابدار

اهي ساس لوپس رنگن جي نقشن تائين محدود نه آهن، يا ته. توهان پڻ ٺاهي سگهو ٿا توهان جي اجزاء جي جوابي تبديليون. مثال طور وٺو اسان جي جوابي ترتيب واري ڊراپ ڊائونز جي جتي اسان ميڊيا جي سوال سان ساس نقشي @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 نقشن ۽ متغيرن کي ڪيئن تبديل ڪرڻ بابت وڌيڪ معلومات ۽ مثالن لاءِ، مھرباني ڪري ڏسو گرڊ دستاويزن جي ساس سيڪشن .

پنهنجو پاڻ ٺاهڻ

اسان توهان کي حوصلا افزائي ڪريون ٿا ته اهي هدايتون اپنائڻ لاءِ جڏهن بوٽ اسٽريپ سان ٺاهيون ته توهان جا پنهنجا حصا ٺاهي. اسان هن طريقي کي وڌايو آهي پاڻ کي اسان جي دستاويزن ۽ مثالن ۾ ڪسٽم اجزاء تائين. اسان جي ڪال آئوٽ جھڙا جزا ٺاھيا ويا آھن جيئن اسان جي مهيا ڪيل اجزاء سان بنيادي ۽ تبديل ڪندڙ طبقن سان.

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

توهان جي سي ايس ايس ۾، توهان وٽ هيٺ ڏنل ڪجهه هوندو جتي اسٽائل جو وڏو حصو ذريعي ڪيو ويندو آهي .callout. ان کان پوء، هر قسم جي وچ ۾ منفرد انداز تبديل ڪندڙ طبقي ذريعي ڪنٽرول ڪيو ويندو آهي.

// Base class
.callout {}

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

ڪال آئوٽ لاءِ، اهو منفرد انداز صرف هڪ آهي border-left-color. جڏهن توهان انهي بنيادي ڪلاس کي انهن ترميمي طبقن مان هڪ سان گڏ ڪريو ٿا، توهان حاصل ڪريو پنهنجو مڪمل جزو خاندان: