Lilo KERE pẹlu Bootstrap
Ṣe akanṣe ati faagun Bootstrap pẹlu KERE , aṣaaju CSS kan, lati lo anfani awọn oniyipada, awọn apopọ, ati diẹ sii ti a lo lati kọ Bootstrap's CSS.
Ti a ṣe pẹlu KERE
Kini idi ti KERE?
Bootstrap ni a ṣe pẹlu KERE ni ipilẹ rẹ, ede aṣa aṣa ti o ni agbara ti a ṣẹda nipasẹ ọrẹ wa to dara, Alexis Sellier . O jẹ ki CSS ti o da lori awọn eto ṣiṣe ni iyara, rọrun, ati igbadun diẹ sii.
Kini o wa ninu?
Gẹgẹbi itẹsiwaju ti CSS, KERE pẹlu awọn oniyipada, awọn apopọ fun awọn snippets koodu atunlo, awọn iṣẹ ṣiṣe fun mathematiki rọrun, itẹ-ẹiyẹ, ati paapaa awọn iṣẹ awọ.
Awọn oniyipada
Ṣiṣakoso awọn awọ ati awọn iye piksẹli ni CSS le jẹ irora diẹ, nigbagbogbo ti o kun fun ẹda ati lẹẹmọ. Kii ṣe pẹlu KERE botilẹjẹpe—fi awọn awọ tabi awọn iye piksẹli ṣe bi awọn oniyipada ki o yi wọn pada lẹẹkan.
Mixins
Awọn ikede redio-ala-ala mẹta yẹn o nilo lati ṣe ni deede ol' CSS? Bayi wọn wa si laini kan pẹlu iranlọwọ ti awọn mixins, awọn snippets ti koodu o le tun lo nibikibi.
Awọn iṣẹ ṣiṣe
Ṣe akoj rẹ, aṣaaju, ati rọ diẹ sii nipa ṣiṣe iṣiro lori fo pẹlu awọn iṣẹ ṣiṣe. Ṣe isodipupo, pin, ṣafikun, ati yọkuro ọna rẹ si mimọ CSS.
Awọn oniyipada Bootstrap Awọn oniyipada KERE, awọn iye wọn, ati awọn itọnisọna lilo
Awọn ọna asopọ hyperlinks
@linkColor |
#08c | Awọ ọrọ ọna asopọ aiyipada | |
@linkColorHover |
darken(@linkColor, 15%) |
Aiyipada ọna asopọ ọrọ rababa awọ |
Eto akoj
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Iwe kikọ
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Greyscale awọn awọ
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eeee | |
@white |
#ffff |
Awọn awọ asẹnti
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Awọn eroja
Awọn bọtini
@primaryButtonBackground |
@linkColor |
Awọn fọọmu
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Fọọmu ipinle ati titaniji
@warningText |
# c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
# 468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap mixins
Nipa mixins
Ipilẹ mixins
Adapọ ipilẹ jẹ pataki pẹlu tabi apa kan fun snippet ti CSS. Wọn ti kọ gẹgẹ bi kilasi CSS ati pe a le pe wọn nibikibi.
- . eroja {
- . clearfix ();
- }
Parametric mixins
Adapọ parametric kan dabi mixin ipilẹ, ṣugbọn o tun gba awọn ayeraye (nitorinaa orukọ) pẹlu awọn iye aiyipada aṣayan.
- . eroja {
- . aala - rediosi ( 4px );
- }
Ni irọrun ṣafikun tirẹ
O fẹrẹ to gbogbo awọn apopọ Bootstrap ti wa ni ipamọ ni mixins.less, ohun elo .less faili iyanu ti o fun ọ laaye lati lo mixin ni eyikeyi awọn faili .less ninu ohun elo irinṣẹ.
Nitorinaa, lọ siwaju ki o lo awọn ti o wa tẹlẹ tabi lero ọfẹ lati ṣafikun tirẹ bi o ṣe nilo.
To wa mixins
Awọn ohun elo
| Mixin | Awọn paramita | Lilo |
|---|---|---|
.clearfix() |
ko si | Ṣafikun si eyikeyi obi lati ko awọn lilefo loju omi laarin |
.tab-focus() |
ko si | Waye ara idojukọ Webkit ati ilana ilana Firefox yika |
.center-block() |
ko si | Laifọwọyi aarin a Àkọsílẹ-ipele ano lilomargin: auto |
.ie7-inline-block() |
ko si | Lo ni afikun si deede display: inline-blocklati gba atilẹyin IE7 |
.size() |
@height: 5px, @width: 5px |
Ni kiakia ṣeto giga ati iwọn lori laini kan |
.square() |
@size: 5px |
Kọ lori .size()lati ṣeto iwọn ati giga bi iye kanna |
.opacity() |
@opacity: 100 |
Ṣeto, ni odidi awọn nọmba, ipin ogorun opacity (fun apẹẹrẹ, "50" tabi "75") |
Awọn fọọmu
| Mixin | Awọn paramita | Lilo |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Ṣeto placeholderawọ ọrọ fun awọn igbewọle |
Iwe kikọ
| Mixin | Awọn paramita | Lilo |
|---|---|---|
#font > #family > .serif() |
ko si | Ṣe ohun elo kan lo akopọ fonti serif kan |
#font > #family > .sans-serif() |
ko si | Ṣe ohun elo kan lo akopọ fonti sans-serif kan |
#font > #family > .monospace() |
ko si | Ṣe ohun elo kan lo akopọ fonti monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Ni irọrun ṣeto iwọn fonti, iwuwo, ati idari |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Ṣeto idile fonti si serif, ati iwọn iṣakoso, iwuwo, ati idari |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Ṣeto idile fonti si sans-serif, ati iwọn iṣakoso, iwuwo, ati idari |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Ṣeto idile fonti si monospace, ati iwọn iṣakoso, iwuwo, ati idari |
Eto akoj
| Mixin | Awọn paramita | Lilo |
|---|---|---|
.container-fixed() |
ko si | Ṣẹda eiyan ti aarin petele fun idaduro akoonu rẹ |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Ṣe ina eto akoj piksẹli kan (apoti, kana, ati awọn ọwọn) pẹlu awọn ọwọn n ati x pixel fife gotter |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Ṣe ina eto akoj precent pẹlu awọn ọwọn n ati x % fife gota |
CSS3-ini
| Mixin | Awọn paramita | Lilo |
|---|---|---|
.border-radius() |
@radius: 5px |
Yika awọn igun ti ohun ano. Le jẹ iye ẹyọkan tabi awọn iye iyasọtọ aaye mẹrin |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Fi ojiji ju silẹ si eroja kan |
.transition() |
@transition |
Ṣafikun ipa iyipada CSS3 (fun apẹẹrẹ, all .2s linear) |
.rotate() |
@degrees |
Yi ohun ano n iwọn |
.scale() |
@ratio |
Ṣe iwọn ano si n igba iwọn atilẹba rẹ |
.translate() |
@x: 0, @y: 0 |
Gbe ohun elo kan lori awọn ọkọ ofurufu x ati y |
.background-clip() |
@clip |
Gbin abẹlẹ ti nkan kan (wulo fun border-radius) |
.background-size() |
@size |
Ṣakoso iwọn awọn aworan abẹlẹ nipasẹ CSS3 |
.box-sizing() |
@boxmodel |
Yi awoṣe apoti pada fun eroja kan (fun apẹẹrẹ, border-boxfun iwọn ni kikun input) |
.user-select() |
@select |
Ṣakoso yiyan kọsọ ọrọ lori oju-iwe kan |
.resizable() |
@direction: both |
Ṣe eyikeyi ano resizable lori ọtun ati isalẹ |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Ṣe akoonu ti eyikeyi eroja lo awọn ọwọn CSS3 |
Backgrounds ati gradients
| Mixin | Awọn paramita | Lilo |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Fun ohun kan ni awọ abẹlẹ translucent |
#translucent > .border() |
@color: @white, @alpha: 1 |
Fun ohun ano kan translucent aala awọ |
#gradient > .vertical() |
@startColor, @endColor |
Ṣẹda agbekọja oniwakiri inaro isale isale |
#gradient > .horizontal() |
@startColor, @endColor |
Ṣẹda oniṣawakiri-agbelebu petele isale itesiwaju |
#gradient > .directional() |
@startColor, @endColor, @deg |
Ṣẹda itọsona aṣawakiri-agbelebu isale isale |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Ṣẹda oniṣawakiri-agbelebu kan gradient lẹhin awọ mẹta |
#gradient > .radial() |
@innerColor, @outerColor |
Ṣẹda oniṣawakiri-agbelebu radial isale gradient |
#gradient > .striped() |
@color, @angle |
Ṣẹda oniṣawakiri-agbelebu ṣiṣawari isale isale |
#gradientBar() |
@primaryColor, @secondaryColor |
Ti a lo fun awọn bọtini lati fi ipin gradient ati aala dudu diẹ sii |
Iṣakojọpọ Bootstrap pẹlu KERE
Awọn irinṣẹ fun akopọ
Node pẹlu makefile
Fi sori ẹrọ alakojọ laini aṣẹ LESS ati uglify-js agbaye pẹlu npm nipa ṣiṣe pipaṣẹ atẹle:
$ npm fi sori ẹrọ -g kere uglify-js
Ni kete ti fi sori ẹrọ kan ṣiṣẹ makelati gbongbo ti itọsọna bootstrap rẹ ati pe o ti ṣeto gbogbo rẹ.
Ni afikun, ti o ba ni oluṣọ ti fi sori ẹrọ, o le ṣiṣẹ make watchlati ni atunṣe bootstrap laifọwọyi ni gbogbo igba ti o ṣatunkọ faili kan ninu lib bootstrap (eyi ko nilo, ọna irọrun nikan).
Laini aṣẹ
Fi ọpa laini aṣẹ LESS sori ẹrọ nipasẹ Node ati ṣiṣe aṣẹ wọnyi:
$ lessc ./lib/bootstrap.less> bootstrap.css
Rii daju lati ṣafikun --compressninu aṣẹ yẹn ti o ba n gbiyanju lati fipamọ diẹ ninu awọn baiti!
Javascript
Ṣe igbasilẹ Less.js tuntun ati pẹlu ọna si (ati Bootstrap) ninu faili <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Lati tun ṣe akojọpọ awọn faili ti ko kere, kan fi wọn pamọ ki o tun gbee si oju-iwe rẹ. Less.js ṣe akopọ wọn ati tọju wọn ni ibi ipamọ agbegbe.
Laigba aṣẹ Mac app
Ohun elo Mac laigba aṣẹ n wo awọn ilana ti .less awọn faili ati ṣe akopọ koodu si awọn faili agbegbe lẹhin gbogbo fifipamọ faili .less ti wiwo.
Ti o ba fẹ, o le yi awọn ayanfẹ pada ninu ohun elo naa fun idinku aifọwọyi ati itọsọna wo ni awọn faili ti o ṣajọ pari ni.
Awọn ohun elo Mac diẹ sii
Crunch
Crunch jẹ olootu KEKERE ti o n wo nla ati akopọ ti a ṣe lori Adobe Air.
CodeKit
Ti a ṣẹda nipasẹ eniyan kanna bi ohun elo Mac laigba aṣẹ, CodeKit jẹ ohun elo Mac kan ti o ṣajọ KERE, SASS, Stylus, ati CoffeeScript.
Rọrun
Mac, Lainos, ati PC app fun fifa ati ju silẹ akopọ awọn faili KERE. Pẹlupẹlu, koodu orisun wa lori GitHub .