ሕብሪ
ቡትስትራፕ ብሰፊሕ ሕብራዊ ስርዓት ዝድገፍ ኮይኑ ቅዲታትናን ኣካላትናን ቴማ ዝህብ እዩ። እዚ ድማ ንዝኾነ ፕሮጀክት ዝያዳ ኩለመዳያዊ ምምዕርራይን ምዝርጋሕን የኽእል።
ቴማ ሕብርታት
ንኡስ ስብስብ ናይ ኩሎም ሕብርታት ንጥቀም ንሕብሪ ስኬማት ንምፍጣር ዝነኣሰ ናይ ሕብሪ ፓለቲ ንፈጥር፣ ከምኡ ውን ከም Sass variables ከምኡ ውን Sass map ኣብ Bootstrap's scss/_variables.scss
file ይርከብ።
እዚ ኩሉ ሕብርታት ከም ካርታ ሳስ ይርከብ፣ $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
ነዞም ሕብርታት ብኸመይ ከም እንቕይሮም ን Sass maps and loops docs ናትና ርኣዩ ።
ኩሉ ሕብርታት
ኩሎም ሕብርታት ቡትስትራፕ ከም Sass variables ከምኡ ውን Sass map ኣብ scss/_variables.scss
ፋይል ይርከቡ። ንዓቐን ፋይላት ንኸይውስኽ፡ ንነፍሲ ወከፍ ካብዞም ተለዋዋጢ ረቛሒታት ናይ ጽሑፍ ወይ ድሕረ ባይታ ሕብሪ ክፍልታት ኣይንፈጥርን ኢና። ኣብ ክንድኡስ፡ ንሓደ ቴማ ፓለቲ ንኡስ ስብስብ ናይዞም ሕብርታት ንመርጽ ።
ሕብርታት ክትቅይር ከለኻ ንጽጽር ምትእስሳር ምክትታልካ ኣረጋግጽ። ከምቲ ኣብ ታሕቲ ንርእዮ ዘለና፡ ኣብ ነፍሲ ወከፍ ቀንዲ ሕብርታት ሰለስተ ንጽጽር ሬሽዮ ወሲኽና ኣለና-ሓደ ንናይ ሕጂ ሕብርታት ናይቲ ስዋች፡ ሓደ ኣንጻር ጻዕዳ፡ ሓደ ድማ ኣንጻር ጸሊም።
መተሓሳሰቢ ኣብ ሳስ
ሳስ ብፕሮግራም ተለዋዋጢ ረቛሒታት ከመንጩ ስለዘይክእል ንነፍሲ ወከፍ ቲንትን ጽላሎትን ብኢድና ተለዋዋጢ ባዕልና ፈጢርና። ናይ ማእከላይ ነጥቢ ዋጋ ንገልጽ (ንኣብነት, $blue-500
) ከምኡውን ብሕታዊ ናይ ሕብሪ ተግባራት ንጥቀም ንሕብርታትና ብመንገዲ ናይ Sass ሕብራዊ ተግባር ንሕብርታትና ንምቕባእ (ንምብራህ) ወይ ንጽልል (ንጸልሚ) mix()
።
ምጥቃም ምስን —እቲ ቀዳማይ ነቲ ዝተወሰነ ሕብሪ ምስ ጻዕዳ ወይ ጸሊም ክሕውሶ እንከሎ፡ እቲ ካልኣይ ድማ ናይ ነፍሲ ወከፍ ሕብሪ ቅልል ዝበለ ዋጋ ጥራይ እዩ ዘስተኻኽል mix()
። ውጽኢቱ ድማ ኣዝዩ ዝያዳ ምሉእ ስብስብ ሕብርታት እዩ፣ ከምቲ ኣብዚ CodePen demo ንርእዮ ዘለና ።lighten()
darken()
ናትናን tint-color()
ፋንክሽንን ጎኒ ጎኒ shade-color()
ተለዋዋጢና ይጥቀሙ ፣ እዚ ድማ ንነፍሲ ወከፍ እነፍርዮ ዝተሓዋወሰ ሕብሪ ደረጃ ዘለዎ ሚእታዊት ዋጋ ይገልጽ። ምሉእ ምንጪ ኮድ ንምርካብ ኣብ ፋይላትን ርአ ።mix()
$theme-color-interval
scss/_functions.scss
scss/_variables.scss
ሕብሪ ሳስ ካርታታት
ናይ Bootstrap ምንጪ Sass ፋይላት ሰለስተ ካርታታት ዘጠቓልሉ ኮይኖም ዝርዝር ሕብርታትን ሄክስ ክብርታቶምን ብቕልጡፍን ብቐሊሉን ክትጥምዝዝ ዝሕግዙኻ እዮም።
$colors
ንኹሎም ዝርከቡ መሰረታዊ (500
) ሕብርታትና ይዝርዝር$theme-colors
ንኹሎም ብትርጉም ዝተሰየሙ ሕብርታት ቴማ ይዝርዝር (ኣብ ታሕቲ ተገሊጹ ኣሎ)$grays
ንኹሉ ቀለምን ጽላሎትን ግራጭ ይዝርዝር
ኣብ ውሽጢ scss/_variables.scss
፡ ናይ Bootstrap ሕብራዊ ተለዋዋጢ ረቛሒታትን Sass mapን ክትረኽቡ ኢኹም። ኣብነት ናይ $colors
ሳስ ካርታ ኣብዚ ኣሎ፤
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
ኣብ ውሽጢ ካርታ ዝርከቡ ክብርታት ምውሳኽ፡ ምእላይ ወይ ምቕያር፡ ኣብ ብዙሓት ካልኦት ኣካላት ብኸመይ ከም ዝጥቀሙ ንምዕራፍ። እቲ ዘሕዝን ኣብዚ እዋን እዚ ኩሉ ኣካል ነዚ ካርታ ሳስ ዝጥቀመሉ ኣይኮነን። ኣብ መጻኢ ዝመጽእ ሓድሽ ሓበሬታ ነዚ ንምምሕያሽ ክጽዕር እዩ። ${color}
ክሳብ ሽዑ ነቶም ተለዋዋጢ ረቛሒታትን ነዚ ካርታ ሳስን ንምጥቃም ውጥን ግበር።
ኣብነት
ነዚኦም ኣብ ሳስካ ብኸመይ ክትጥቀመሎም ከም እትኽእል ኣብዚ ኣሎ፤
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
ናይ ሕብርን ድሕረ ባይታ ዩቲሊቲ ክፍልታት እውን ንናይ ሕብራዊ ክብርታት ንምቕማጥን ንምጥቃምን color
ይርከቡ background-color
።500
ዩቲሊቲታት ምፍራይ
ኣብ v5.1.0 ተወሰኸ
color
Bootstrap ንነፍሲ ወከፍ ሕብራዊ ተለዋዋጢ ዝኸውንን ዩቲሊቲታትን ኣየጠቓልልን background-color
እዩ፣ ግን ነዚኦም ባዕልኹም ብናትና ዩቲሊቲ ኤፒኣይን ኣብ v5.1.0 ዝተወሰኹ ዝተዘርግሑ Sass ካርታታትናን ከተፍርይዎም ትኽእሉ ኢኹም።
- ንምጅማር፡ ተግባራትና፡ ተለዋዋጢ ነገራትና፡ ሚክሲናትናን ዩቲሊቲታትናን ካብ ወጻኢ ከም ዘእተኻ ኣረጋግጽ።
map-merge-multiple()
ንብዙሓት ካርታታት ሳስ ብሓባር ኣብ ሓድሽ ካርታ ብቕልጡፍ ንምውህሃድ ፋንክሽንና ተጠቐም ።- ነዚ ሓድሽ ዝተዋሃሃደ ካርታ ብምውህሃድ ዝኾነ ዩቲሊቲ
{color}-{level}
ብስም ክፍሊ ንምዝርጋሕ።
.text-purple-500
እዞም ኣብ ላዕሊ ዝተጠቕሱ ስጉምትታት ተጠቒምካ ናይ ጽሑፍ ሕብሪ ዩቲሊቲታት (ንኣብነት፡ ) ዘመንጩ ኣብነት ኣብዚ ኣሎ ።
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
.text-{color}-{level}
እዚ ድማ ንነፍሲ ወከፍ ሕብርን ደረጃን ሓደስቲ ዩቲሊቲታት ከመንጩ እዩ። ንዝኾነ ካልእ ዩቲሊቲን ንብረትን እውን ከምኡ ክትገብር ትኽእል ኢኻ።