አካላት
ሁሉንም ክፍሎቻችንን እንዴት እና ለምን እንደምንገነባ ምላሽ ሰጪ እና በመሠረት እና በመቀየሪያ ክፍሎች ይወቁ።
የመሠረት ክፍሎች
የቡትስትራፕ ክፍሎች በአብዛኛው የተገነቡት ከመሠረት-ማስተካከያ ስያሜ ጋር ነው። በተቻለ መጠን ብዙ የተጋሩ ንብረቶችን ወደ መሰረታዊ ክፍል እንመድባቸዋለን፣ እንደ .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-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
);
የእኛን የ Sass ካርታዎች እና ተለዋዋጮች እንዴት ማሻሻል እንዳለብን ለበለጠ መረጃ እና ምሳሌዎች፣ እባክዎን የፍርግርግ ዶክመንቴሽን Sass ክፍልን ይመልከቱ ።
የራስዎን መፍጠር
የእራስዎን ክፍሎች ለመፍጠር በ Bootstrap ሲገነቡ እነዚህን መመሪያዎች እንዲከተሉ እናበረታታዎታለን። ይህንን አካሄድ እራሳችንን በሰነዶቻችን እና በምሳሌዎቻችን ውስጥ ላሉ ብጁ አካላት አራዝመናል። እንደ የእኛ ጥሪዎች ያሉ አካላት ልክ እንደ ተሰጡን ክፍሎች ቤዝ እና መቀየሪያ ክፍሎች የተገነቡ ናቸው።
<div class="callout">...</div>
በእርስዎ CSS ውስጥ፣ አብዛኛው የቅጥ አሰራር የሚከናወነው በ .callout
. ከዚያም በእያንዳንዱ ልዩነት መካከል ያሉት ልዩ ዘይቤዎች በመቀየሪያ ክፍል ቁጥጥር ይደረግባቸዋል።
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
ለጥሪዎቹ፣ ያ ልዩ ዘይቤ ብቻ ነው border-left-color
። ያንን የመሠረት ክፍል ከነዚያ የመቀየሪያ ክፍሎች ከአንዱ ጋር ሲያዋህዱ የተሟላ ቤተሰብዎን ያገኛሉ፡-