ኣካላት

ዳርጋ ንኹሎም ኣካላትና ብኸመይን ስለምንታይን ብመልሲን ብመሰረታውን መቐየሪን ክፍልታት ከም እንሃንጾም ፍለጡ።

ኣብዚ ገጽ

መሰረታዊ ክፍልታት

ናይ ቡትስትራፕ ኣካላት ብዓቢኡ ብመሰረት-መቐየሪ ኣጸዋውዓ ዝተሃንጹ እዮም። ብዝተኻእለ መጠን ብዙሓት ዝተኻፈሉ ንብረታት ኣብ ሓደ መሰረታዊ ክፍሊ ንጥርንፎም፣ ከም .btn፣ ድሕሪኡ ንነፍሲ ወከፍ ፍልልይ ውልቃዊ ቅዲታት ኣብ መቐየሪ ክፍልታት ንጥርንፎም፣ ከም .btn-primaryወይ .btn-success።

ናይ መቐየሪ ክፍልታትና ንምህናጽ፡ ኣብ @eachልዕሊ ካርታ ሳስ ንምድጋም፡ ናይ ሳስ ሉፕስ ንጥቀም። እዚ ብፍላይ ብናትና ፍልልያት ናይ ሓደ ኣካል $theme-colorsንምፍጣርን ንነፍሲ ወከፍ ነጥቢ ምብታኽ ምላሽ ዝህቡ ፍልልያት ንምፍጣርን ሓጋዚ እዩ። ነዞም ናይ ሳስ ካርታታት ክትጥዕሞምን ዳግማይ ክትጥርንፎምን ከለኻ፡ ለውጥታትካ ብኣውቶማቲክ ኣብዞም ሉፕስ ክግለጹ ክትዕዘብ ኢኻ።

ነዞም ሉፕስ ብኸመይ ከም እትጥዕሞምን ናይ Bootstrap base-modifier ኣቀራርባ ናብ ናይ ገዛእ ርእስኻ ኮድ ከም እተስፍሖን ንምርኣይ ናይ Sass maps and loops docs ናትና ርአ ።

መቐየሪታት

ብዙሓት ናይ ቡትስትራፕ ኣካላት ብቤዝ-ሞዲፋየር ክላስ ኣቀራርባ ዝተሃንጹ እዮም። እዚ ማለት እቲ ዝዓበየ ክፋል ናይቲ ቅዲ ኣብ ሓደ መሰረታዊ ክፍሊ (ንኣብነት, .btn) ክሕዝ እንከሎ ቅዲ ፍልልያት ድማ ኣብ መቐየሪ ክፍልታት (ንኣብነት, ) ዝተሓጽረ እዩ .btn-danger። እዞም ናይ መቐየሪ ክፍልታት ካብ ካርታ ዝተሃንጹ ኮይኖም $theme-colorsቁጽርን ስምን ናይ መቐየሪ ክፍልታትና ምምዕርራይ ይገብሩ።

$theme-colorsኣብ ልዕሊ ካርታ ከመይ ጌርና .alertን and .list-groupcomponents መቐየሪታት ከም እንፈጥር ክልተ ኣብነታት ኣብዚ ኣለዉ ።

// 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ንሳስ ካርታ ምስ ሚድያ ሕቶ include ንሕውሶ።

// 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
);

ንተወሳኺ ሓበሬታን ኣብነታትን ብዛዕባ ከመይ ጌርና ናይ ሳስ ካርታታትናን ተለዋዋጢ ረቛሒታትናን ንቕይር፡ በጃኹም ኣብ ክፍሊ ሳስ ናይ ግሪድ ሰነድ ተወከሱ ።

ናይ ባዕልኻ ምፍጣር

ናይ ባዕልኹም ኣካላት ንምፍጣር ብቡትስትራፕ ክትሃንጹ ከለኹም ነዞም መምርሒታት ክትቅበሉ ንላቦ። ነዚ ኣገባብ ባዕልና ናብቶም ኣብ ሰነዳትናን ኣብነታትናን ዘለዉ ብሕታዊ ባእታታት ኣስፊሕናዮ ኣለና። ከም ጻውዒትና ዝኣመሰሉ ኣካላት ልክዕ ከምቲ ዝሃብናዮ ኣካላት ምስ መሰረታዊን መቐየሪን ክፍልታት ዝተሃንጹ እዮም።

እዚ ጻውዒት እዩ። ንdocsና ብባህጊ ኢና ሰሪሕናዮ ስለዚ ንዓኻትኩም እንህቦ መልእኽትታት ጐሊሑ ይረአ። ብመንገዲ መቐየሪ ክፍልታት ሰለስተ ፍልልያት ኣለዎ።

<div class="callout">...</div>

ኣብ CSS ናትካ፡ ከምዚ ዝስዕብ ዝኣመሰለ ነገር ምሃለወካ፡ ኣብኡ እቲ ዝበዝሕ ቅዲ ብመንገዲ .callout. ድሕሪኡ፡ ኣብ መንጎ ነፍሲ ወከፍ ፍልልይ ዝርከቡ ፍሉያት ቅዲታት ብመንገዲ መቐየሪ ክፍሊ ይቆጻጸሩ።

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

ንጻውዒታት፡ እቲ ፍሉይ ቅዲ border-left-color. ነቲ መሰረታዊ ክፍሊ ምስ ሓደ ካብቶም መቐየሪ ክፍልታት ከተዋሃህዶ ከለኻ፡ ምሉእ ስድራቤትካ ትረክብ፤

እዚ ናይ info callout እዩ። ብተግባር ንምርኣይ ኣብነት ጽሑፍ።

እዚ ናይ መጠንቀቕታ ጻውዒት እዩ። ብተግባር ንምርኣይ ኣብነት ጽሑፍ።

እዚ ናይ ሓደጋ ጻውዒት እዩ። ብተግባር ንምርኣይ ኣብነት ጽሑፍ።