باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

پێکهاتەکان

فێربە چۆن و بۆچی نزیکەی هەموو پێکهاتەکانمان بە شێوەیەکی وەڵامدەرەوە و بە پۆلەکانی بنەڕەتی و دەستکاریکەر دروست دەکەین.

پۆلە بنەڕەتییەکان

پێکهاتەکانی Bootstrap بە شێوەیەکی بەرچاو بە ناونانی بنەڕەتی-دەستکاریکەر دروستکراون. ئێمە زۆرترین تایبەتمەندی هاوبەش لە پۆلێکی بنەڕەتیدا .btnگرووپ دەکەین، وەک , و پاشان ستایلە تاکەکەسییەکان بۆ هەر جۆرێک لە پۆلەکانی دەستکاریکەر گرووپ دەکەین، وەک .btn-primaryیان .btn-success.

بۆ دروستکردنی پۆلەکانی دەستکاریکەرەکانمان، ئێمە @eachلوپەکانی Sass بەکاردەهێنین بۆ دووبارەکردنەوە لەسەر نەخشەی Sass. ئەمە بە تایبەتی یارمەتیدەرە بۆ دروستکردنی جۆرەکانی پێکهاتەیەک لەلایەن ئێمە $theme-colorsو دروستکردنی جۆرە وەڵامدەرەوەکان بۆ هەر خاڵێکی شکاندن. لەگەڵ خۆکارکردنی ئەم نەخشانەی ساس و دووبارە کۆمپایکردنەوە، بە شێوەیەکی ئۆتۆماتیکی گۆڕانکارییەکانت دەبینیت کە لەم لوپانەدا ڕەنگ دەدەنەوە.

سەیری نەخشە و دۆکیومێنتەکانی لوپەکانی Sass بکە بۆ چۆنیەتی خۆکارکردنی ئەم لوپانە و درێژکردنەوەی رێبازی دەستکاریکەری بنەڕەتی Bootstrap بۆ کۆدی خۆت.

دەستکاریکەرەکان

زۆرێک لە پێکهاتەکانی 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نەخشەی Sass تێکەڵ دەکەین لەگەڵ پرسیارێکی میدیایی لەخۆدەگرێت.

// 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
);

بۆ زانیاری زیاتر و نموونە لەسەر چۆنیەتی دەستکاریکردنی نەخشە و گۆڕاوەکانی ساسمان، تکایە سەردانی بەشی ساس بکە لە بەڵگەنامەکانی تۆڕ .

دروستکردنی خۆت

هانتان دەدەین لە کاتی دروستکردن بە Bootstrap ئەم ڕێنماییانە پەسەند بکەن بۆ دروستکردنی پێکهاتەکانی خۆت. ئێمە خۆمان ئەم ڕێبازەمان درێژکردۆتەوە بۆ پێکهاتە تایبەتمەندەکان لە بەڵگەنامە و نموونەکانماندا. پێکهاتەکانی وەک بانگەوازەکانمان هەروەک پێکهاتە دابینکراوەکانمان دروستکراون لەگەڵ پۆلەکانی بنەڕەتی و دەستکاریکەر.

ئەمە بانگەوازێکە. ئێمە بە خواستی خۆت بۆ دۆکیومێنتەکانمان دروستمان کردووە بۆ ئەوەی پەیامەکانمان بۆ ئێوە جیاواز بن. سێ جۆری هەیە لە ڕێگەی پۆلەکانی دەستکاریکەرەوە.
<div class="callout">...</div>

لە CSS ـەکەتدا، شتێکی وەک ئەمانەی خوارەوەت دەبێت کە بەشێکی زۆری ستایلکردنەکە لە ڕێگەی .callout. پاشان، ستایلە ناوازەکان لە نێوان هەر جۆرێک لە ڕێگەی پۆلی دەستکاریکەرەوە کۆنترۆڵ دەکرێن.

// Base class
.callout {}

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

بۆ بانگەوازەکان، ئەو ستایلە ناوازەیە تەنها border-left-color. کاتێک ئەو پۆلە بنەڕەتییە لەگەڵ یەکێک لەو پۆلە دەستکاریکەرانە تێکەڵ دەکەیت، خێزانی پێکهاتە تەواوەکانت بەدەست دەهێنیت:

ئەمە بانگەوازێکی زانیارییە. نموونەی دەق بۆ ئەوەی بە کردار پیشانی بدەیت.
ئەمە بانگەوازێکی ئاگادارکردنەوە یە. نموونەی دەق بۆ ئەوەی بە کردار پیشانی بدەیت.
ئەمە بانگەوازێکی مەترسییە. نموونەی دەق بۆ ئەوەی بە کردار پیشانی بدەیت.