አካላት

ሁሉንም ክፍሎቻችንን እንዴት እና ለምን እንደምንገነባ ምላሽ ሰጪ እና በመሠረት እና በመቀየሪያ ክፍሎች ይወቁ።

በዚህ ገጽ ላይ

የመሠረት ክፍሎች

የቡትስትራፕ ክፍሎች በአብዛኛው የተገነቡት ከመሠረት-ማስተካከያ ስያሜ ጋር ነው። በተቻለ መጠን ብዙ የተጋሩ ንብረቶችን ወደ መሰረታዊ ክፍል እንመድባቸዋለን፣ እንደ .btn, እና በመቀጠል ግለሰባዊ ቅጦች ለእያንዳንዱ ተለዋጭ ወደ መቀየሪያ ክፍሎች፣ እንደ .btn-primaryወይም .btn-success።

የመቀየሪያ ክፍሎቻችንን ለመገንባት፣ @eachበ Sass ካርታ ላይ ለመድገም የ Sass loops እንጠቀማለን። ይህ በተለይ በእኛ የአንድ አካል $theme-colorsልዩነቶችን ለመፍጠር እና ለእያንዳንዱ መግቻ ነጥብ ምላሽ ሰጪ ልዩነቶችን ለመፍጠር አጋዥ ነው። እነዚህን የሳስ ካርታዎች ሲያበጁ እና እንደገና ሲያጠናቅቁ፣ ለውጦችዎ በእነዚህ ዑደቶች ውስጥ ሲንፀባረቁ ያያሉ።

እነዚህን ቀለበቶች እንዴት ማበጀት እንደሚችሉ እና የBootstrapን ቤዝ-ማስተካከያ አቀራረብን ወደ እራስዎ ኮድ እንዴት እንደሚያራዝሙ የ 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);
}

ምላሽ ሰጪ

እነዚህ የ Sass loops በቀለም ካርታዎች ብቻ የተገደቡ አይደሉም። እንዲሁም የእርስዎን ክፍሎች ምላሽ ሰጪ ልዩነቶች ማመንጨት ይችላሉ። @eachየ $grid-breakpointsSass ካርታውን የሚዲያ መጠይቅን የምናጠቃልልበትን የተቆልቋዮችን ምላሽ ሰጪ አሰላለፍ እንደ ምሳሌ እንውሰድ ።

// 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 ክፍልን ይመልከቱ ።

የራስዎን መፍጠር

የእራስዎን ክፍሎች ለመፍጠር በ Bootstrap ሲገነቡ እነዚህን መመሪያዎች እንዲከተሉ እናበረታታዎታለን። ይህንን አካሄድ እራሳችንን በሰነዶቻችን እና በምሳሌዎቻችን ውስጥ ላሉ ብጁ አካላት አራዝመናል። እንደ የእኛ ጥሪዎች ያሉ አካላት ልክ እንደ ተሰጡን ክፍሎች ቤዝ እና መቀየሪያ ክፍሎች የተገነቡ ናቸው።

ይህ ጥሪ ነው። ለእርስዎ የምናስተላልፈው መልእክት ጎልቶ እንዲታይ ለማድረግ ለሰነዶቻችን ብጁ አድርገነዋል። በመቀየሪያ ክፍሎች ሶስት ተለዋጮች አሉት።

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

በእርስዎ CSS ውስጥ፣ አብዛኛው የቅጥ አሰራር የሚከናወነው በ .callout. ከዚያም በእያንዳንዱ ልዩነት መካከል ያሉት ልዩ ዘይቤዎች በመቀየሪያ ክፍል ቁጥጥር ይደረግባቸዋል።

// Base class
.callout {}

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

ለጥሪዎቹ፣ ያ ልዩ ዘይቤ ብቻ ነው border-left-color። ያንን የመሠረት ክፍል ከነዚያ የመቀየሪያ ክፍሎች ከአንዱ ጋር ሲያዋህዱ የተሟላ ቤተሰብዎን ያገኛሉ፡-

ይህ የመረጃ ጥሪ ነው። በተግባር ለማሳየት የምሳሌ ጽሑፍ።

ይህ የማስጠንቀቂያ ጥሪ ነው። በተግባር ለማሳየት የምሳሌ ጽሑፍ።

ይህ የአደጋ ጥሪ ነው። በተግባር ለማሳየት የምሳሌ ጽሑፍ።