ప్రధాన కంటెంట్‌కు దాటవేయండి డాక్స్ నావిగేషన్‌కు దాటవేయండి
in English

భాగాలు

మేము మా దాదాపు అన్ని భాగాలను ప్రతిస్పందనాత్మకంగా మరియు బేస్ మరియు మాడిఫైయర్ క్లాస్‌లతో ఎలా మరియు ఎందుకు నిర్మించాలో తెలుసుకోండి.

బేస్ తరగతులు

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

ఇది సమాచార కాల్అవుట్. దీన్ని చర్యలో చూపడానికి ఉదాహరణ వచనం.
ఇది హెచ్చరిక కాల్అవుట్. దీన్ని చర్యలో చూపడానికి ఉదాహరణ వచనం.
ఇది ప్రమాదకరమైన కాల్అవుట్. దీన్ని చర్యలో చూపడానికి ఉదాహరణ వచనం.