భాగాలు

బేస్ తరగతులు

బూట్‌స్ట్రాప్ యొక్క భాగాలు ఎక్కువగా బేస్-మాడిఫైయర్ నామకరణంతో నిర్మించబడ్డాయి. మేము వీలైనన్ని ఎక్కువ షేర్ చేసిన ప్రాపర్టీలను బేస్ క్లాస్‌గా .btnగ్రూప్ చేస్తాము.btn-primary.btn-success

మా మాడిఫైయర్ క్లాస్‌లను రూపొందించడానికి, మేము @eachSass మ్యాప్‌పై మళ్లించడానికి Sass యొక్క లూప్‌లను ఉపయోగిస్తాము. $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. మీరు ఆ మాడిఫైయర్ క్లాస్‌లలో ఒకదానితో ఆ బేస్ క్లాస్‌ని మిళితం చేసినప్పుడు, మీరు మీ పూర్తి కాంపోనెంట్ ఫ్యామిలీని పొందుతారు: