پێکهاتەکان
فێربە چۆن و بۆچی نزیکەی هەموو پێکهاتەکانمان بە شێوەیەکی وەڵامدەرەوە و بە پۆلەکانی بنەڕەتی و دەستکاریکەر دروست دەکەین.
پۆلە بنەڕەتییەکان
پێکهاتەکانی 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
. کاتێک ئەو پۆلە بنەڕەتییە لەگەڵ یەکێک لەو پۆلە دەستکاریکەرانە تێکەڵ دەکەیت، خێزانی پێکهاتە تەواوەکانت بەدەست دەهێنیت: