Qaamolee

Kutaawwan bu’uuraa

Qaamonni Bootstrap baay'inaan maqaa bu'uuraa-fooyyessaatiin ijaaramaniiru. Amaloota qooddataman hamma danda'ametti gara gita bu'uuraatti garee goona, akka .btn, fi sana booda akkaataa dhuunfaa tokkoon tokkoo garaagarummaadhaaf gara gita fooyyessaatti, akka .btn-primaryykn .btn-success.

Gitoota fooyyessaa keenya ijaaruuf, @eachkaartaa Sass irratti irra deddeebi'uuf loopoota Sass fayyadamna. Kun keessumaa garaagarummaa qaama tokkoo keenyaan maddisiisuu $theme-colorsfi tokkoon tokkoo qabxii cabsuuf garaagarummaa deebii kennuu danda'u uumuuf gargaara. Yeroo kaartaa Sass kana dhuunfachiiftuu fi irra deebitee qindeessitu, jijjiiramoonni kee ofumaan loopoota kana keessatti calaqqisan ni argita.

Akkaataa loopoota kana dhuunfachiisuu fi mala Bootstrap's base-modifier gara koodii mataa keetii dheeressuuf kaartaa fi loopoota Sass keenya ilaali .

Fooyyessitoota

Qaamonni Bootstrap baay'een isaanii mala gita bu'uuraa-fooyyessaatiin ijaaramaniiru. Kana jechuun harki guddaan akkaataa gita bu'uuraatti qabama (fkn, .btn) yoo ta'u jijjiiramoonni akkaataa gita fooyyessaa (fkn, .btn-danger) irratti daangeffama. $theme-colorsGitoota fooyyessaa kun lakkoofsa fi maqaa gita fooyyessaa keenyaa dhuunfachuu gochuuf kaartaa irraa ijaaramaniiru .

$theme-colorsAkkaataa kaartaa irratti fooyyessitoota gara qaamolee .alertfi maddisiisuuf fakkeenyota lama kunooti ..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);
}

Deebii kan kennu

Looppiiwwan Sass kun kaartaa halluu qofaan hin daangeffaman, akkasumas. Akkasumas garaagarummaa deebii qaamolee keetii maddisiisuu dandeessa. Fakkeenyaaf qindaa'ina deebii keenyaa kan tarreewwan bakka nuti @eachloop tokko $grid-breakpointskaartaa Sass gaaffii miidiyaa dabalatee walitti maknu fudhadhu.

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

Yoo kee fooyyessuu qabda ta'e $grid-breakpoints, jijjiiramoonni kee loopoota kaartaa sana irratti irra deddeebi'an hunda irratti raawwatiinsa ni qabaata.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Odeeffannoo dabalataa fi fakkeenyota akkaataa kaartaa fi jijjiiramoota Sass keenya fooyyessuuf, maaloo kutaa Sass galmee Giriidi ilaali .

Kan ofii uumuu

Qaamolee mataa keessanii uumuuf yeroo Bootstrap waliin ijaartan qajeelfama kana akka fudhattan isin jajjabeessina. Mala kana ofii keenyaa gara qaamolee amala galmee fi fakkeenyota keenya keessatti bal'isneerra. Qaamonni akka waamicha keenyaa akkuma qaamolee keenya kennaman gita bu'uuraa fi fooyyessaa qaban ijaaramaniiru.

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

CSS kee keessatti, waan akka armaan gadii bakka harki guddaan akkaataa itti hojjetamu karaa .callout. Sana booda, akkaataan addaa tokkoon tokkoo garaagarummaa gidduu jiru karaa gita fooyyessaa to'atama.

// Base class
.callout {}

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

Waamichaaf, akkaataa addaa sun border-left-color. Yeroo gita bu'uuraa sana gita fooyyessaa sana keessaa tokko waliin walitti qabdu, maatii qaama kee guutuu argatta: