اجزا

اساسی ټولګی

د بوټسټریپ اجزا په پراخه کچه د بیس - ترمیم کونکي نومونې سره جوړ شوي. موږ د امکان تر حده ډیری شریک ملکیتونه په اساس طبقه کې ګروپ کوو، لکه .btn، او بیا د هر ډول لپاره انفرادي سټایلونه د بدلون کونکي ټولګیو کې، لکه .btn-primaryیا .btn-success.

زموږ د ترمیم کونکي ټولګیو جوړولو لپاره، موږ @eachد Sass نقشه تکرارولو لپاره د ساس لوپونه کاروو. دا په ځانګړي توګه زموږ لخوا د یوې برخې $theme-colorsډولونو رامینځته کولو او د هرې وقفې لپاره د ځواب ویونکي ډولونو رامینځته کولو لپاره ګټور دی. لکه څنګه چې تاسو دا ساس نقشې تنظیم کړئ او بیا یې تنظیم کړئ، تاسو به په اتوماتيک ډول خپل بدلونونه په دې لوپونو کې منعکس کړئ.

زموږ د 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 نقشې او تغیرات بدل کړئ، مهرباني وکړئ د ګریډ اسنادو ساس برخې ته مراجعه وکړئ .

خپل ځان جوړول

موږ تاسو هڅوو چې دا لارښوونې غوره کړئ کله چې د بوټسټریپ سره جوړ کړئ ترڅو خپل اجزا جوړ کړئ. موږ دا طریقه پخپله زموږ په اسنادو او مثالونو کې دودیز برخو ته پراخه کړې. اجزا لکه زموږ د کال آوټ په څیر جوړ شوي دي لکه زموږ چمتو شوي اجزا د بیس او ترمیم کونکي ټولګیو سره.

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

ستاسو په CSS کې، تاسو به د لاندې په څیر یو څه ولرئ چیرې چې د سټایل ډیری برخه د .callout. بیا، د هر ډول تر مینځ ځانګړي سټایلونه د ترمیم کونکي ټولګي له لارې کنټرول کیږي.

// Base class
.callout {}

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

د زنګ وهلو لپاره، دا ځانګړی سټایل یوازې یو دی border-left-color. کله چې تاسو دا بیس کلاس د دې ترمیم کونکي ټولګیو څخه یو سره یوځای کړئ ، تاسو خپل بشپړ اجزا کورنۍ ترلاسه کوئ: