Ibara

Bootstrap ishyigikiwe na sisitemu yagutse yamabara insanganyamatsiko yacu nibigize. Ibi bifasha kurushaho kwihindura no kwagura umushinga uwo ariwo wose.

Kuriyi page

Amabara yibanze

Dukoresha igice cyamabara yose kugirango dukore ibara rito palette yo kubyara amabara, nayo iraboneka nka Sass variable hamwe nikarita ya Sass muri scss/_variables.scssdosiye ya Bootstrap.

Ibanze

Secondary

Intsinzi

Akaga

Iburira

Amakuru

Umucyo

Umwijima

Aya mabara yose arahari nkikarita ya Sass , $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Reba ikarita yacu ya Sass na loop loop kugirango uhindure aya mabara.

Amabara yose

Amabara yose ya Bootstrap arahari nkibihinduka bya Sass n'ikarita ya Sass muri scss/_variables.scssdosiye. Kugirango twirinde ubunini bwa dosiye, ntabwo dushiraho inyandiko cyangwa ibara ryamabara yibyiciro kuri buri gihinduka. Ahubwo, duhitamo igice cyamabara kumutwe palette .

Witondere gukurikirana ibipimo bitandukanye nkuko uhindura amabara. Nkuko bigaragara hano hepfo, twongeyeho ibipimo bitatu bitandukanye kuri buri bara ryingenzi - rimwe kumabara ya swatch y'ubu, imwe irwanya umweru, indi irwanya umukara.

$ ubururu# 0d6efd

$ ubururu-100

$ ubururu-200

$ ubururu-300

$ ubururu-400

$ ubururu-500

$ ubururu-600

$ ubururu-700

$ ubururu-800

$ ubururu-900

$ indigo# 6610f2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$ indigo-500

$ indigo-600

$ indigo-700

$ indigo-800

$ indigo-900

$ ibara ry'umuyugubwe# 6f42c1

$ ibara ry'umuyugubwe-100

$ ibara ry'umuyugubwe-200

$ ibara ry'umuyugubwe-300

$ ibara ry'umuyugubwe-400

$ ibara ry'umuyugubwe-500

$ ibara ry'umuyugubwe-600

$ ibara ry'umuyugubwe-700

$ ibara ry'umuyugubwe-800

$ ibara ry'umuyugubwe-900

$ pink# d63384

$ pink-100

$ pink-200

$ pink-300

$ pink-400

$ pink-500

$ pink-600

$ pink-700

$ pink-800

$ pink-900

$ umutuku# dc3545

$ umutuku-100

$ umutuku-200

$ umutuku-300

$ umutuku-400

$ umutuku-500

$ umutuku-600

$ umutuku-700

$ umutuku-800

$ umutuku-900

$ orange# fd7e14

$ orange-100

$ orange-200

$ orange-300

$ orange-400

$ orange-500

$ orange-600

$ orange-700

$ orange-800

$ orange-900

$ umuhondo# ffc107

$ umuhondo-100

$ umuhondo-200

$ umuhondo-300

$ umuhondo-400

$ umuhondo-500

$ umuhondo-600

$ umuhondo-700

$ umuhondo-800

$ umuhondo-900

$ icyatsi# 198754

$ icyatsi-100

$ icyatsi-200

$ icyatsi-300

$ icyatsi-400

$ icyatsi-500

$ icyatsi-600

$ icyatsi-700

$ icyatsi-800

$ icyatsi-900

$ icyayi# 20c997

$ icyayi-100

$ icyayi-200

$ icyayi-300

$ icyayi-400

$ icyayi-500

$ icyayi-600

$ icyayi-700

$ icyayi-800

$ icyayi-900

$ cyan# 0dcaf0

$ cyan-100

$ cyan-200

$ cyan-300

$ cyan-400

$ cyan-500

$ cyan-600

$ cyan-700

$ cyan-800

$ cyan-900

$ gray-500# adb5bd

$ gray-100

$ gray-200

$ gray-300

$ gray-400

$ gray-500

$ gray-600

$ gray-700

$ gray-800

$ gray-900

$ umukara# 000

$ cyera#fff

Inyandiko kuri Sass

Sass ntishobora gukora programme itanga impinduka, kubwibyo twashizeho intoki zahinduye buri tint kandi igicucu ubwacu. Turerekana agaciro ko hagati (urugero, $blue-500) kandi dukoresha ibikorwa byamabara yihariye kugirango dusige (koroshya) cyangwa igicucu (umwijima) amabara yacu dukoresheje mix()imikorere yamabara ya Sass.

Gukoresha mix()ntabwo bisa na lighten()na darken()-ibyambere bivanga ibara ryerekanwe numweru cyangwa umukara, mugihe ibyanyuma bihindura gusa urumuri agaciro ka buri bara. Igisubizo ni suite yuzuye y'amabara, nkuko bigaragara muri iyi CodePen demo .

Imikorere yacu tint-color()nibikorwa shade-color()dukoresha mix()kuruhande $theme-color-intervalrwibihinduka, byerekana intambwe yijanisha ryagaciro kuri buri bara rivanze dukora. Reba scss/_functions.scssna scss/_variables.scssdosiye kumasoko yuzuye kode.

Ikarita ya Sass

Inkomoko ya Bootstrap Sass dosiye zirimo amakarita atatu yo kugufasha byihuse kandi byoroshye kurutonde rwamabara nagaciro kayo.

$colorsurutonde rwibintu byose biboneka ( 500) amabara
$theme-colorsurutonde rwibisobanuro byose byitwa insanganyamatsiko y'amabara (yerekanwe hepfo)
$graysurutonde rw'ibara ryose n'ibicucu by'imvi

Imbere scss/_variables.scss, uzasangamo ibara rya Bootstrap hamwe namakarita ya Sass. Dore urugero $colorsrw'ikarita ya Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Ongeraho, ukureho, cyangwa uhindure indangagaciro mukarita kugirango uvugurure uko zikoreshwa mubindi bice byinshi. Kubwamahirwe muriki gihe, ntabwo buri kintu cyose gikoresha ikarita ya Sass. Ibihe bizaza bizaharanira kunoza ibi. Kugeza icyo gihe, teganya gukoresha ${color}impinduka n'iyi karita ya Sass.

Urugero

Dore uko ushobora gukoresha ibi muri Sass yawe:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Ibara ninyuma yibikorwa byingirakamaro nabyo birahari mugushiraho no gukoresha ibara ryagaciro.colorbackground-color500

Kubyara ibikorwa byingirakamaro

Wongeyeho muri v5.1.0

Bootstrap ntabwo ikubiyemo colornibikorwa byingirakamaro background-colorkuri buri bara rihinduka, ariko urashobora kubyara ubwawe hamwe na API yacu yingirakamaro hamwe namakarita yacu yagutse ya Sass yongeyeho muri v5.1.0.

Gutangira, menya neza ko winjije ibikorwa byacu, impinduka, ivanga, hamwe nibikorwa byingirakamaro.
Koresha map-merge-multiple()imikorere yacu kugirango uhuze byihuse amakarita menshi ya Sass hamwe mukarita nshya.
Huza iyi karita nshya ihuriweho kugirango yongere ibikorwa byose hamwe {color}-{level}nizina ryurwego.

Dore urugero rutanga inyandiko yibara ryingirakamaro (urugero, .text-purple-500) ukoresheje intambwe zavuzwe haruguru.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Ibi bizabyara .text-{color}-{level}ibikorwa bishya kuri buri bara nurwego. Urashobora gukora kimwe kubindi bikoresho byingirakamaro hamwe numutungo kimwe.