Abubuwan da aka gyara
Koyi yadda da dalilin da ya sa muke gina kusan dukkanin abubuwan haɗin gwiwarmu cikin amsawa tare da azuzuwan tushe da gyarawa.
Azuzuwan tushe
Abubuwan abubuwan Bootstrap an gina su ne tare da nomenclature mai gyara tushe. Muna ƙulla kaddarorin da aka raba da yawa gwargwadon yiwuwa zuwa ajin tushe, kamar .btn
, sannan kuma mu haɗa nau'ikan nau'ikan nau'ikan kowane bambance-bambancen zuwa azuzuwan masu gyara, kamar .btn-primary
ko .btn-success
.
Don gina azuzuwan masu gyara mu, muna amfani da @each
madaukai na Sass don maimaita taswirar Sass. Wannan yana da taimako musamman don samar da bambance-bambancen wani bangare ta hanyar mu $theme-colors
da ƙirƙirar bambance-bambancen amsa ga kowane wurin hutu. Yayin da kuke keɓance waɗannan taswirorin Sass kuma ku sake tarawa, zaku ga canje-canjen ku ta atomatik a cikin waɗannan madaukai.
Duba taswirorin mu na Sass da takaddun madaukai don yadda ake keɓance waɗannan madaukai da tsawaita tsarin gyaran tushe na Bootstrap zuwa lambar ku.
Masu gyarawa
Yawancin abubuwan haɗin Bootstrap an gina su tare da tsarin aji mai gyara tushe. Wannan yana nufin yawancin salon yana ƙunshe ne zuwa ajin tushe (misali, .btn
) yayin da bambancin salo ke iyakance ga azuzuwan masu gyara (misali, .btn-danger
). Waɗannan azuzuwan masu gyara an gina su daga $theme-colors
taswira don yin gyare-gyaren lamba da sunan azuzuwan mu gyara.
Anan akwai misalai guda biyu na yadda muke madauki kan $theme-colors
taswira don samar da masu gyara ga abubuwan .alert
da .list-group
aka gyara.
// 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);
}
Mai amsawa
Waɗannan madaukai na Sass ba su iyakance ga taswirar launi ba, ko dai. Hakanan zaka iya ƙirƙirar bambance-bambancen abubuwan da aka haɗa ku. Ɗauki misali daidaitawar mu na jerin abubuwan da aka zazzage inda muke haɗa @each
madauki don $grid-breakpoints
taswirar Sass tare da tambayar mediya ta haɗa da.
// 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;
}
}
}
}
Idan kun canza naku $grid-breakpoints
, canje-canjenku zai shafi duk madaukai da ke jujjuya taswirar.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Don ƙarin bayani da misalai kan yadda ake canza taswirar Sass da masu canji, da fatan za a koma sashin Sass na takaddun Grid .
Ƙirƙirar naku
Muna ƙarfafa ku kuyi amfani da waɗannan jagororin yayin ginawa tare da Bootstrap don ƙirƙirar abubuwan haɗin ku. Mun ƙaddamar da wannan hanyar da kanmu zuwa abubuwan da aka saba da su a cikin takaddunmu da misalai. Abubuwan da aka haɗa kamar kiran kiran mu an gina su kamar yadda aka samar mana da azuzuwan tushe da gyarawa.
<div class="callout">...</div>
A cikin CSS ɗin ku, kuna da wani abu kamar mai zuwa inda ake yin yawancin salo ta hanyar .callout
. Sa'an nan, keɓaɓɓen salo tsakanin kowane bambance-bambancen ana sarrafa su ta hanyar ajin gyare-gyare.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Ga masu kira, wannan salo na musamman shine kawai border-left-color
. Lokacin da kuka haɗa wannan ajin tushe tare da ɗayan waɗannan azuzuwan masu gyara, kuna samun cikakken dangin ku: