Qaybaha

Fasalada salka

Qaybaha Bootstrap waxaa inta badan lagu dhisay magac-beddele-saldhig. Waxaanu u ururinay inta ugu badan ee hantida la wadaago ee suurtogalka ah waxaanu u qaybinnaa fasalka aasaasiga ah, sida .btn, ka dibna kooxaynta qaababka gaarka ah ee kala duwanaansho kasta waxaan u samaynaa fasalo wax ka beddelka ah, sida .btn-primaryama .btn-success.

Si aan u dhisno fasaladayada wax ka beddelka, waxaan isticmaalnaa @eachsiddooyinka Sass si aan u dulmarno khariidadda Sass. Tani waxay si gaar ah waxtar u leedahay soo saarista kala duwanaanshiyaha qayb inaga $theme-colorsiyo abuurista kala duwanaansho jawaab celin ah goob kasta oo jaban. Markaad habayso khariidadahan Sass oo aad dib u ururiso, waxaad si toos ah u arki doontaa isbeddeladaada oo ka muuqda wareegyadan.

Fiiri khariidadahayada Sass dokumentiyadayada sida loo habeeyo siddooyinkan oo loo kordhiyo habka wax ka beddelka Bootstrap ee koodkaaga.

Wax ka beddelayaasha

Qaybo badan oo ka mid ah Bootstrap ayaa lagu dhisay hab fasalka wax ka beddelka ah. Tani waxay ka dhigan tahay in inta badan habaynta ay ka kooban tahay fasalka aasaasiga ah (tusaale, .btn) halka kala duwanaanshaha qaabku uu ku kooban yahay fasallada wax ka beddelka (tusaale, .btn-danger). Fasaladan wax ka beddelka ah waxa laga dhisay $theme-colorskhariidada si ay u habeeyaan tirada iyo magaca fasallada wax ka beddelka.

Waa kuwan laba tusaale oo ku saabsan sida aan u dulmarno $theme-colorskhariidada si aan u soo saarno wax ka beddelka qaybaha .alertiyo .list-groupqaybaha.

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

Ka jawaaba

Siddooyinkan Sass kuma koobna khariidadaha midabka, sidoo kale. Waxa kale oo aad abuuri kartaa kala duwanaansho jawaab celin ah qaybahaaga. Qaado tusaale ahaan toosinta jawaab celintayada ee hoos u dhaca halkaas oo aan ku qasno @eachloop-ka $grid-breakpointskhariidadda Sass oo ay ku jirto weydiinta warbaahinta.

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

Haddii aad wax ka beddesho $grid-breakpoints, isbeddelladaadu waxay khuseeyaan dhammaan wareegyada ku celcelinaya khariidadaas.

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

Macluumaad dheeraad ah iyo tusaaleyaal ku saabsan sida loo beddelo khariidadaha Sass iyo doorsoomayaashayada, fadlan tixraac qaybta Sass ee dukumeentiga Grid .

Abuuritaanka adiga kuu gaar ah

Waxaan kugu dhiirigelinaynaa inaad qaadato tilmaamahan markaad ku dhisayso Bootstrap si aad u abuurto qaybahaaga. Habkan nafteena ayaanu ku kordhinay qaybaha gaarka ah ee dukumeentiyada iyo tusaalayaashayada. Qaybaha sida wicitaanadayada ayaa loo dhisay si la mid ah qaybaha aanu bixinay ee leh fasalada wax ka beddelka iyo saldhiga.

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

CSS kaaga, waxa aad ku yeelan lahayd wax la mid ah kuwan soo socda oo inta badan habaynta lagu sameeyo .callout. Ka dib, qaababka gaarka ah ee u dhexeeya kala duwanaansho kasta ayaa lagu xakameynayaa iyada oo loo marayo fasalka wax ka beddelka.

// Base class
.callout {}

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

Wicitaanada, qaabkaas gaarka ah waa kaliya a border-left-color. Marka aad ku darto fasalka saldhiga iyo mid ka mid ah fasalada wax ka beddelka, waxa aad helaysaa qoyskaaga oo dhamaystiran: