Neidio i'r prif gynnwys Neidio i lywio dogfennau
in English

Cydrannau

Dysgwch sut a pham rydyn ni'n adeiladu bron pob un o'n cydrannau'n ymatebol a chyda dosbarthiadau sylfaen ac addaswyr.

Dosbarthiadau sylfaen

Mae cydrannau Bootstrap wedi'u hadeiladu'n bennaf gydag enw addasydd sylfaen. Rydyn ni'n grwpio cymaint o eiddo a rennir â phosib yn ddosbarth sylfaen, fel .btn, ac yna'n grwpio arddulliau unigol ar gyfer pob amrywiad yn ddosbarthiadau addasu, fel .btn-primaryneu .btn-success.

I adeiladu ein dosbarthiadau addasu, rydym yn defnyddio @eachdolenni Sass i ailadrodd dros fap Sass. Mae hyn yn arbennig o ddefnyddiol ar gyfer cynhyrchu amrywiadau o gydran gan ein $theme-colorsa chreu amrywiadau ymatebol ar gyfer pob torbwynt. Wrth i chi addasu'r mapiau Sass hyn ac ail-grynhoi, byddwch yn gweld eich newidiadau yn cael eu hadlewyrchu yn y dolenni hyn yn awtomatig.

Edrychwch ar ein mapiau Sass a'n dogfennau dolenni i weld sut i addasu'r dolenni hyn ac ymestyn dull addasydd sylfaenol Bootstrap i'ch cod eich hun.

Addaswyr

Mae llawer o gydrannau Bootstrap wedi'u hadeiladu gyda dull dosbarth addasydd sylfaen. Mae hyn yn golygu bod y rhan fwyaf o'r arddull wedi'i gynnwys mewn dosbarth sylfaen (ee, .btn) tra bod amrywiadau arddull wedi'u cyfyngu i ddosbarthiadau addaswyr (ee, .btn-danger). Mae'r dosbarthiadau addaswyr hyn yn cael eu hadeiladu o'r $theme-colorsmap i wneud addasu rhif ac enw ein dosbarthiadau addasu.

Dyma ddwy enghraifft o sut rydym yn dolennu dros y $theme-colorsmap i gynhyrchu addaswyr i'r cydrannau .alerta'r rhai..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);
}

Ymatebol

Nid yw'r dolenni Sass hyn yn gyfyngedig i fapiau lliw, chwaith. Gallwch hefyd gynhyrchu amrywiadau ymatebol o'ch cydrannau. Er enghraifft, cymerwch ein haliniad ymatebol o'r cwymplenni lle rydym yn cymysgu @eachdolen ar gyfer y $grid-breakpointsmap Sass gydag ymholiad cyfryngau yn cynnwys.

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

Pe baech yn addasu eich $grid-breakpoints, bydd eich newidiadau yn berthnasol i'r holl ddolenni sy'n ailadrodd dros y map hwnnw.

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

Am ragor o wybodaeth ac enghreifftiau ar sut i addasu ein mapiau SAss a'n newidynnau, cyfeiriwch at yr adran Sass yn y ddogfennaeth Grid .

Creu eich un chi

Rydym yn eich annog i fabwysiadu'r canllawiau hyn wrth adeiladu gyda Bootstrap i greu eich cydrannau eich hun. Rydym wedi ymestyn y dull hwn ein hunain i'r cydrannau arfer yn ein dogfennaeth ac enghreifftiau. Mae cydrannau fel ein galwadau allan yn cael eu hadeiladu yn union fel ein cydrannau a ddarperir gyda dosbarthiadau sylfaen ac addasu.

Mae hwn yn alwad allan. Fe wnaethon ni ei adeiladu'n arbennig ar gyfer ein dogfennau fel bod ein negeseuon i chi yn sefyll allan. Mae ganddo dri amrywiad trwy ddosbarthiadau addasu.
<div class="callout">...</div>

Yn eich CSS, byddai gennych rywbeth fel y canlynol lle mae'r rhan fwyaf o'r arddull yn cael ei wneud trwy .callout. Yna, rheolir yr arddulliau unigryw rhwng pob amrywiad trwy ddosbarth addasydd.

// Base class
.callout {}

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

Ar gyfer y galwadau allan, dim ond border-left-color. Pan fyddwch chi'n cyfuno'r dosbarth sylfaen hwnnw ag un o'r dosbarthiadau addasu hynny, byddwch chi'n cael eich teulu cydran cyflawn:

Galwad gwybodaeth yw hwn. Testun enghreifftiol i'w ddangos ar waith.
Mae hwn yn alwad rhybudd. Testun enghreifftiol i'w ddangos ar waith.
Mae hwn yn alwad perygl. Testun enghreifftiol i'w ddangos ar waith.