in English

Lliw

Cefnogir Bootstrap gan system liw helaeth sy'n themâu ein harddulliau a'n cydrannau. Mae hyn yn galluogi addasu ac ymestyn mwy cynhwysfawr ar gyfer unrhyw brosiect.

Ar y dudalen hon

Lliwiau thema

Rydym yn defnyddio is-set o bob lliw i greu palet lliw llai ar gyfer cynhyrchu cynlluniau lliw, sydd hefyd ar gael fel newidynnau Sass a map Sass yn scss/_variables.scssffeil Bootstrap.

Cynradd

Uwchradd

Llwyddiant

Perygl

Rhybudd

Gwybodaeth

Ysgafn

Tywyll

Mae'r lliwiau hyn i gyd ar gael fel map Sass, $theme-colors.

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

Edrychwch ar ein mapiau Sass a docs dolenni i weld sut i addasu'r lliwiau hyn.

Pob lliw

Mae holl liwiau Bootstrap ar gael fel newidynnau Sass a map Sass mewn scss/_variables.scssffeil. Er mwyn osgoi maint ffeiliau cynyddol, nid ydym yn creu dosbarthiadau lliw testun neu gefndir ar gyfer pob un o'r newidynnau hyn. Yn lle hynny, rydyn ni'n dewis is-set o'r lliwiau hyn ar gyfer palet thema .

Gwnewch yn siŵr eich bod yn monitro cymarebau cyferbyniad wrth i chi addasu lliwiau. Fel y dangosir isod, rydym wedi ychwanegu tair cymarebau cyferbyniad i bob un o'r prif liwiau - un ar gyfer lliwiau cyfredol y swatch, un yn erbyn gwyn, ac un yn erbyn du.

$ glas#0d6efd

$ glas-100

$ glas-200

$ glas-300

$ glas-400

$ glas-500

$ glas-600

$ glas-700

$ glas-800

$ glas-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$porffor#6f42c1

$porffor-100

$porffor-200

$porffor-300

$porffor-400

$porffor-500

$porffor-600

$porffor-700

$porffor-800

$porffor-900

$ pinc#d63384

$pinc-100

$ pinc-200

$ pinc-300

$pinc-400

$ pinc-500

$pinc-600

$ pinc-700

$ pinc-800

$ pinc-900

$ coch#dc3545

$ coch-100

$ coch-200

$ coch-300

$ coch-400

$ coch-500

$ coch-600

$ coch-700

$ coch-800

$ coch-900

$oren#fd7e14

$oren-100

$oren-200

$oren-300

$oren-400

$oren-500

$oren-600

$oren-700

$oren-800

$oren-900

$ melyn#ffc107

$ melyn-100

$ melyn-200

$ melyn-300

$ melyn-400

$ melyn-500

$ melyn-600

$ melyn-700

$ melyn-800

$ melyn-900

$gwyrdd#198754

$ gwyrdd-100

$ gwyrdd-200

$ gwyrdd-300

$ gwyrdd-400

$ gwyrdd-500

$ gwyrdd-600

$ gwyrdd-700

$ gwyrdd-800

$ gwyrdd-900

$ corhwyaid#20c997

$ corhwyaid-100

$ corhwyaid-200

$ corhwyaid-300

$ corhwyaid-400

$ corhwyaid-500

$ corhwyaid-600

$ corhwyaid-700

$ corhwyaid-800

$ corhwyaid-900

$ cyan#0dcaf0

$ cyan-100

$ cyan-200

$ cyan-300

$ cyan-400

$ cyan-500

$ cyan-600

$ cyan-700

$ cyan-800

$ cyan-900

$llwyd-500#adb5bd

$llwyd-100

$llwyd-200

$llwyd-300

$llwyd-400

$llwyd-500

$llwyd-600

$llwyd-700

$llwyd-800

$llwyd-900

$ du#000

$ gwyn#ffff

Nodiadau ar Sass

Ni all Sass gynhyrchu newidynnau yn rhaglennol, felly fe wnaethon ni greu newidynnau â llaw ar gyfer pob arlliw a chysgod ein hunain. Rydym yn nodi'r gwerth pwynt canol (ee, $blue-500) ac yn defnyddio swyddogaethau lliw arferol i arlliwio (ysgafnhau) neu arlliwio (tywyllu) ein lliwiau trwy mix()swyddogaeth lliw Sass.

mix()Nid yw defnyddio yr un peth lighten()â darken()- mae'r cyntaf yn cyfuno'r lliw penodedig â gwyn neu ddu, tra bod yr olaf yn addasu gwerth ysgafnder pob lliw yn unig. Y canlyniad yw cyfres lawer mwy cyflawn o liwiau, fel y dangosir yn y demo CodePen hwn .

Mae ein swyddogaethau ni tint-color()a'n shade-color()swyddogaethau yn defnyddio mix()ochr yn ochr â'n $theme-color-intervalnewidyn, sy'n pennu gwerth canrannol grisiog ar gyfer pob lliw cymysg a gynhyrchwn. Gweler y scss/_functions.scssa scss/_variables.scssffeiliau ar gyfer y cod ffynhonnell llawn.

Mapiau lliw Sass

Mae ffeiliau ffynhonnell Bootstrap Sass yn cynnwys tri map i'ch helpu chi i ddolennu'n gyflym ac yn hawdd dros restr o liwiau a'u gwerthoedd hecs.

$colorsyn rhestru ein holl 500liwiau sylfaen ( ) sydd ar gael
$theme-colorsyn rhestru'r holl liwiau thema a enwir yn semantig (dangosir isod)
$graysyn rhestru'r holl arlliwiau ac arlliwiau o lwyd

O fewn scss/_variables.scss, fe welwch newidynnau lliw Bootstrap a map Sass. Dyma enghraifft o $colorsfap 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
);

Ychwanegu, dileu, neu addasu gwerthoedd o fewn y map i ddiweddaru sut maen nhw'n cael eu defnyddio mewn llawer o gydrannau eraill. Yn anffodus, ar hyn o bryd, nid yw pob cydran yn defnyddio'r map Sass hwn. Bydd diweddariadau yn y dyfodol yn ymdrechu i wella hyn. Tan hynny, cynlluniwch ddefnyddio'r ${color}newidynnau a'r map Sass hwn.

Enghraifft

Dyma sut y gallwch chi ddefnyddio'r rhain yn eich Sass:

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

Mae dosbarthiadau cyfleustodau lliw a chefndir hefyd ar gael ar gyfer gosod colora background-colordefnyddio'r 500gwerthoedd lliw.

Cynhyrchu cyfleustodau

Ychwanegwyd yn v5.1.0

Nid yw Bootstrap yn cynnwys cyfleustodau colorar background-colorgyfer pob newidyn lliw, ond gallwch chi gynhyrchu'r rhain eich hun gyda'n API cyfleustodau a'n mapiau Sass estynedig wedi'u hychwanegu yn v5.1.0.

I ddechrau, gwnewch yn siŵr eich bod wedi mewnforio ein swyddogaethau, newidynnau, cymysgeddau a chyfleustodau.
Defnyddiwch ein map-merge-multiple()swyddogaeth i uno mapiau Sass lluosog yn gyflym gyda'i gilydd mewn map newydd.
Cyfunwch y map cyfun newydd hwn i ymestyn unrhyw ddefnyddioldeb ag {color}-{level}enw dosbarth.

Dyma enghraifft sy'n cynhyrchu cyfleustodau lliw testun (ee, .text-purple-500) gan ddefnyddio'r camau uchod.

@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";

Bydd hyn yn cynhyrchu .text-{color}-{level}cyfleustodau newydd ar gyfer pob lliw a lefel. Gallwch chi wneud yr un peth ar gyfer unrhyw gyfleustodau ac eiddo arall hefyd.