ሕብሪ

ቡትስትራፕ ብሰፊሕ ሕብራዊ ስርዓት ዝድገፍ ኮይኑ ቅዲታትናን ኣካላትናን ቴማ ዝህብ እዩ። እዚ ድማ ንዝኾነ ፕሮጀክት ዝያዳ ኩለመዳያዊ ምምዕርራይን ምዝርጋሕን የኽእል።

ኣብዚ ገጽ

ቴማ ሕብርታት

ንኡስ ስብስብ ናይ ኩሎም ሕብርታት ንጥቀም ንሕብሪ ስኬማት ንምፍጣር ዝነኣሰ ናይ ሕብሪ ፓለቲ ንፈጥር፣ ከምኡ ውን ከም Sass variables ከምኡ ውን Sass map ኣብ Bootstrap's scss/_variables.scssfile ይርከብ።

ቀዳማይ

ካልኣይ ደረጃ

ዓወት

ሓደጋ

ምኸዳን

ሓበሬታ

ብርሃን

ፀልማት

እዚ ኩሉ ሕብርታት ከም ካርታ ሳስ ይርከብ፣ $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ፋይል ይርከቡ። ንዓቐን ፋይላት ንኸይውስኽ፡ ንነፍሲ ወከፍ ካብዞም ተለዋዋጢ ረቛሒታት ናይ ጽሑፍ ወይ ድሕረ ባይታ ሕብሪ ክፍልታት ኣይንፈጥርን ኢና። ኣብ ክንድኡስ፡ ንሓደ ቴማ ፓለቲ ንኡስ ስብስብ ናይዞም ሕብርታት ንመርጽ ።

ሕብርታት ክትቅይር ከለኻ ንጽጽር ምትእስሳር ምክትታልካ ኣረጋግጽ። ከምቲ ኣብ ታሕቲ ንርእዮ ዘለና፡ ኣብ ነፍሲ ወከፍ ቀንዲ ሕብርታት ሰለስተ ንጽጽር ሬሽዮ ወሲኽና ኣለና-ሓደ ንናይ ሕጂ ሕብርታት ናይቲ ስዋች፡ ሓደ ኣንጻር ጻዕዳ፡ ሓደ ድማ ኣንጻር ጸሊም።

$ሰማያዊ#0d6efd ዝብል ጽሑፍ ኣሎ።

$ሰማያዊ-100

$ሰማያዊ-200

$ሰማያዊ-300

$ሰማያዊ-400

$ሰማያዊ-500

$ሰማያዊ-600

$ሰማያዊ-700

$ሰማያዊ-800

$ሰማያዊ-900

$ኢንዲጎ#6610f2 ዝብል ጽሑፍ ኣሎ።

$ኢንዲጎ-100

$ኢንዲጎ-200

$ኢንዲጎ-300

$ኢንዲጎ-400

$ኢንዲጎ-500

$ኢንዲጎ-600

$ኢንዲጎ-700

$ኢንዲጎ-800

$ኢንዲጎ-900

$ሓምላይ#6f42c1 ዝብል ጽሑፍ ኣሎ።

$ሓምላይ-100

$ሓምላይ-200

$ሓምላይ-300

$ሓምላይ-400

$ሓምላይ-500

$ሓምላይ-600

$ሓምላይ-700

$ሓምላይ-800

$ሓምላይ-900

$ሮዛ#d63384 ዝብል ጽሑፍ ኣሎ።

$ሮዛ-100

$ሮዛ-200

$ሮዛ-300

$ሮዛ-400

$ሮዛ-500

$ሮዛ-600

$ሮዛ-700

$ሮዛ-800

$ሮዛ-900

$ቀይሕ#dc3545 ዝብል ጽሑፍ ኣሎ።

$ቀይሕ-100

$ቀይሕ-200

$ቀይሕ-300

$ቀይሕ-400

$ቀይሕ-500

$ቀይሕ-600

$ቀይሕ-700

$ቀይሕ-800

$ቀይሕ-900

$ኣራንሺ#fd7e14 ዝብል ጽሑፍ ኣሎ።

$ኣራንሺ-100

$ኣራንሺ-200

$ኣራንሺ-300

$ኣራንሺ-400

$ኣራንሺ-500 ይኸውን

$ኣራንሺ-600

$ኣራንሺ-700

$ኣራንሺ-800

$ኣራንሺ-900

$ብጫ#ffc107 ዝብል ጽሑፍ ኣሎ።

$ብጫ-100 ይኸውን

$ብጫ-200 ይኸውን

$ብጫ-300 ይኸውን

$ብጫ-400 ይኸውን

$ብጫ-500 ይኸውን

$ብጫ-600 ይኸውን

$ብጫ-700 ይኸውን

$ብጫ-800 ይኸውን

$ብጫ-900 ይኸውን

$ቀጠልያ#198754 ዝብል ጽሑፍ ኣሎ።

$ቀጠልያ-100

$ቀጠልያ-200

$ቀጠልያ-300

$ቀጠልያ-400

$ቀጠልያ-500

$ቀጠልያ-600

$ቀጠልያ-700

$ቀጠልያ-800

$ቀጠልያ-900

$ቴል ዝብል እዩ።#20ሐ997

$teal-100 ዝብል ምዃኑ ይፍለጥ

$teal-200 ዝብል ምዃኑ ይፍለጥ

$teal-300 ዝብል ምዃኑ ይፍለጥ

$teal-400 ዝብል ምዃኑ ይፍለጥ

$teal-500 ዝብል እዩ።

$teal-600 ዝብል ምዃኑ ይፍለጥ

$teal-700 ዝብል ምዃኑ ይፍለጥ

$teal-800 ዝብል ምዃኑ ይፍለጥ

$teal-900 ዝብል ምዃኑ ይፍለጥ

$ሳይን ዝብል እዩ።#0dcaf0 ዝብል ጽሑፍ ኣሎ።

$ሳይን-100 ይኸውን

$ሳይን-200 ይኸውን

$ሳይን-300 ይኸውን

$ሳይን-400 ይኸውን

$ሳይን-500 ይኸውን

$ሳይን-600 ይኸውን

$ሳይን-700 ይኸውን

$ሳይን-800 ይኸውን

$ሳይን-900 ይኸውን

$ግራጭ-500#ዓድብ5ብድ

$ግራጭ-100

$ግራጭ-200

$ግራጭ-300

$ግራጭ-400

$ግራጭ-500

$ግራጭ-600

$ግራጭ-700

$ግራጭ-800

$ግራጭ-900

$ጸሊም#000 ዝብል እዩ።

$ጻዕዳ#fff ዝብል ጽሑፍ ኣሎ።

መተሓሳሰቢ ኣብ ሳስ

ሳስ ብፕሮግራም ተለዋዋጢ ረቛሒታት ከመንጩ ስለዘይክእል ንነፍሲ ወከፍ ቲንትን ጽላሎትን ብኢድና ተለዋዋጢ ባዕልና ፈጢርና። ናይ ማእከላይ ነጥቢ ዋጋ ንገልጽ (ንኣብነት, $blue-500) ከምኡውን ብሕታዊ ናይ ሕብሪ ተግባራት ንጥቀም ንሕብርታትና ብመንገዲ ናይ Sass ሕብራዊ ተግባር ንሕብርታትና ንምቕባእ (ንምብራህ) ወይ ንጽልል (ንጸልሚ) mix()።

ምጥቃም ምስን —እቲ ቀዳማይ ነቲ ዝተወሰነ ሕብሪ ምስ ጻዕዳ ወይ ጸሊም ክሕውሶ እንከሎ፡ እቲ ካልኣይ ድማ ናይ ነፍሲ ወከፍ ሕብሪ ቅልል ዝበለ ዋጋ ጥራይ እዩ ዘስተኻኽል mix()። ውጽኢቱ ድማ ኣዝዩ ዝያዳ ምሉእ ስብስብ ሕብርታት እዩ፣ ከምቲ ኣብዚ CodePen demo ንርእዮ ዘለና ።lighten()darken()

ናትናን tint-color()ፋንክሽንን ጎኒ ጎኒ shade-color()ተለዋዋጢና ይጥቀሙ ፣ እዚ ድማ ንነፍሲ ወከፍ እነፍርዮ ዝተሓዋወሰ ሕብሪ ደረጃ ዘለዎ ሚእታዊት ዋጋ ይገልጽ። ምሉእ ምንጪ ኮድ ንምርካብ ኣብ ፋይላትን ርአ ።mix()$theme-color-intervalscss/_functions.scssscss/_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,
  "black":      $black,
  "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 ተወሰኸ

colorBootstrap ንነፍሲ ወከፍ ሕብራዊ ተለዋዋጢ ዝኸውንን ዩቲሊቲታትን ኣየጠቓልልን 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/maps";
@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}እዚ ድማ ንነፍሲ ወከፍ ሕብርን ደረጃን ሓደስቲ ዩቲሊቲታት ከመንጩ እዩ። ንዝኾነ ካልእ ዩቲሊቲን ንብረትን እውን ከምኡ ክትገብር ትኽእል ኢኻ።