Neidio i'r prif gynnwys Neidio i lywio dogfennau

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.

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.

  1. I ddechrau, gwnewch yn siŵr eich bod wedi mewnforio ein swyddogaethau, newidynnau, cymysgeddau a chyfleustodau.
  2. Defnyddiwch ein map-merge-multiple()swyddogaeth i uno mapiau Sass lluosog yn gyflym gyda'i gilydd mewn map newydd.
  3. 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.