Biçe ser naveroka sereke Biçe navîgasyon belgeyan
Check
in English

Components

Fêr bibin ka çawa û çima em hema hema hemî pêkhateyên xwe bi bersiv û bi çînên bingehîn û guhêrbar ava dikin.

Li ser vê rûpelê

Dersên bingehîn

Parçeyên Bootstrap bi piranî bi navgînek bingehîn-guhêrbar têne çêkirin. Em bi qasî ku pêkan taybetmendiyên hevpar di çînek bingehîn de kom dikin, mîna .btn, û dûv re şêwazên kesane yên ji bo her variantekê di çînên guhêrbar kom dikin, mîna .btn-primaryan .btn-success.

Ji bo avakirina çînên xweyên guhêrbar, em lûpên Sass bikar tînin @eachku li ser nexşeyek Sass dubare bikin. Ev bi taybetî ji bo afirandina guhertoyên pêkhateyek ji hêla me ve $theme-colorsû afirandina guhertoyên bersivdar ji bo her xala veqetandinê arîkar e. Gava ku hûn van nexşeyên Sass-ê xweş bikin û ji nû ve berhev bikin, hûn ê bixweber guheztinên xwe yên ku di van lûkan de têne xuyang kirin bibînin.

Nexşeyên Sass û belgeyên meyên lûfên me binihêrin ka meriv çawa van lûleyan xweş bike û nêzîkatiya bingehîn-guhêrbar a Bootstrap li koda xwe dirêj bike.

Modifiers

Gelek hêmanên Bootstrap bi nêzîkatiyek çîna bingehîn-guhêrbar têne çêkirin. Ev tê vê wateyê ku piraniya şêwazê di çînek bingehîn de ye (mînak, .btn) dema ku guhertoyên şêwazê bi çînên guhêrbar (mînak, .btn-danger) ve têne sînordar kirin. Van çînên guhêrbar ji $theme-colorsnexşeyê têne çêkirin da ku hejmar û navê çînên me yên guhêrbar xweş bikin.

Li vir du mînak hene ku em çawa li ser $theme-colorsnexşeyê digerînin da ku guhezkerên pêkhateyan .alertû .list-grouppêkhateyan biafirînin.

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

Pêrakirin

Van lûfên Sass bi nexşeyên rengîn re jî sînorkirî ne. Her weha hûn dikarin guhertoyên bersivdar ên pêkhateyên xwe biafirînin. Mînakî lihevhatina meya bersivdar a dakêşanan bigire ku em @eachji bo $grid-breakpointsnexşeya Sass dorpêkek bi pirsek medyayê re tê de tevlihev dikin.

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

Ger hûn $grid-breakpointsguhertoya xwe biguherînin, dê guheztinên we li hemî lûpên ku li ser wê nexşeyê dubare dibin bicîh bibin.

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

Ji bo bêtir agahdarî û nimûneyên li ser ka meriv çawa nexşe û guhêrbarên me yên Sass biguhezîne, ji kerema xwe serî li beşa Sass ya belgeya Grid bidin .

Afirandina xwe

Em ji we re teşwîq dikin ku hûn van rêwerzan gava ku bi Bootstrap-ê re çêdikin da ku pêkhateyên xwe biafirînin qebûl bikin. Me di belgekirin û mînakên xwe de ev nêzîkatî bi hêmanên xwerû re dirêj kiriye. Hêmanên mîna bangên me mîna pêkhateyên me yên peydakirî bi çînên bingehîn û guhêrbar têne çêkirin.

Ev bangek e. Me ew ji bo belgeyên xwe xwerû çêkir da ku peyamên me ji we re diyar bibin. Ew sê guhertoyên bi dersên guhêrbar ve hene.
<div class="callout">...</div>

Di CSS-ya xwe de, hûn ê tiştek mîna ya jêrîn hebe ku piraniya şêwazê bi riya .callout. Dûv re, şêwazên bêhempa yên di navbera her guhertoyê de bi pola guhêrbar ve têne kontrol kirin.

// Base class
.callout {}

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

Ji bo bangan, ew şêwaza bêhempa tenê yek e border-left-color. Gava ku hûn wê çîna bingehîn bi yek ji wan çînên guhêrbar re bikin yek, hûn malbata pêkhateya xweya bêkêmasî digirin:

Ev bangek agahdariyê ye. Nimûneya nivîsê ku wê di çalakiyê de nîşan bide.
Ev hişyariyek hişyar e. Nimûneya nivîsê ku wê di çalakiyê de nîşan bide.
Ev bangek xeternak e. Nimûneya nivîsê ku wê di çalakiyê de nîşan bide.