A 'cleachdadh LESS le Bootstrap
Gnàthaich agus leudaich Bootstrap le LESS , preprocessor CSS, gus brath a ghabhail air na caochladairean, measgachadh agus barrachd a thathas a’ cleachdadh gus CSS Bootstrap a thogail.
Air a thogail le LÌON
Carson nas lugha?
Tha Bootstrap air a dhèanamh le LESS aig a chridhe, cànan duilleag stoidhle fiùghantach a chruthaich ar deagh charaid, Alexis Sellier . Bidh e a’ dèanamh leasachadh CSS stèidhichte air siostaman nas luaithe, nas fhasa agus nas spòrsail.
Dè tha air a ghabhail a-steach?
Mar leudachadh air CSS, tha LESS a’ toirt a-steach caochladairean, measgachadh airson criomagan còd ath-chleachdadh, gnìomhachd airson gnìomhan matamataigs sìmplidh, neadachadh, agus eadhon dath.
Ionnsaich barrachd
Tadhail air an làrach-lìn oifigeil aig http://lesscss.org/ gus tuilleadh ionnsachadh.
Caochlaidhean
Faodaidh riaghladh dathan agus luachan piogsail ann an CSS a bhith na phian, mar as trice làn leth-bhreac agus pasgain. Chan ann le LESS ge-tà - sònraich dathan no luachan piogsail mar chaochladairean agus atharraich iad aon uair.
Measgachadh
Na trì dearbhaidhean radius crìche sin a dh’ fheumas tu a dhèanamh ann an CSS cunbhalach? A-nis tha iad sìos gu aon loidhne le cuideachadh bho mixins, criomagan de chòd as urrainn dhut ath-chleachdadh an àite sam bith.
Obrachaidhean
Dèan do ghriod, a 'stiùireadh, agus nas sùbailte le bhith a' dèanamh matamataigs air an itealan le gnìomhachd. Iomadaich, roinneadh, cuir ris agus thoir air falbh do shlighe gu slàinteachas CSS.
Caochladairean Bootstrap LÌON caochladairean, na luachan aca, agus stiùireadh cleachdaidh
Sgafaill agus ceanglaichean
@bodyBackground |
@white |
Dath cùl na duilleige | |
@textColor |
@grayDark |
Dath teacsa bunaiteach airson a’ bhodhaig gu lèir, cinn, agus barrachd | |
@linkColor |
#08c |
Dath teacsa ceangail bunaiteach | |
@linkColorHover |
darken(@linkColor, 15%) |
Dath hover teacsa ceangail bunaiteach |
Siostam clèithe
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574 % |
Clò-sgrìobhaidh
@sansFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monaco, "Courier New", monospace | |
@baseFontSize |
13px | Feumaidh piogsail a bhith ann |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px | Feumaidh piogsail a bhith ann |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
Clàir
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
Dathan sgèile liath
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eeee | |
@white |
#fff |
Dathan accent
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Co-phàirtean
Putanan
@btnBackground |
@white |
|
@btnBackgroundHighlight |
darken(@white, 10%) |
|
@btnBorder |
darken(@white, 20%) |
|
@btnPrimaryBackground |
@linkColor |
|
@btnPrimaryBackgroundHighlight |
spin(@btnPrimaryBackground, 15%) |
|
@btnInfoBackground |
#5bc0de |
|
@btnInfoBackgroundHighlight |
#2f96b4 |
|
@btnSuccessBackground |
#62c462 |
|
@btnSuccessBackgroundHighlight |
51a351 |
|
@btnWarningBackground |
lighten(@orange, 15%) |
|
@btnWarningBackgroundHighlight |
@orange |
|
@btnDangerBackground |
#ee5f5b |
|
@btnDangerBackgroundHighlight |
#bd362f |
|
@btnInverseBackground |
@gray |
|
@btnInverseBackgroundHighlight |
@grayDarker |
Foirmean
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
Foirm stàitean agus rabhaidhean
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2ded | |
@successText |
#468847 | |
@successBackground |
#df0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
|
@navbarLinkColorActive |
@navbarLinkColorHover |
|
@navbarLinkBackgroundHover |
transparent |
|
@navbarLinkBackgroundActive |
@navbarBackground |
|
@navbarSearchBackground |
lighten(@navbarBackground, 25%) |
|
@navbarSearchBackgroundFocus |
@white |
|
@navbarSearchBorder |
darken(@navbarSearchBackground, 30%) |
|
@navbarSearchPlaceholderColor |
#ccc |
|
@navbarBrandColor |
@navbarLinkColor |
Droch-dhìol
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
Aonad gaisgeach
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Bootstrap a ' measgachadh
Mu dheidhinn measgachadh
Measgachadh bunaiteach
Tha measgachadh bunaiteach gu bunaiteach mar phàirt no pàirt airson criomag de CSS. Tha iad sgrìobhte dìreach mar chlas CSS agus faodar an gairm an àite sam bith.
- . eileamaid {
- . soilleir ();
- }
Measgachadh parametric
Tha measgachadh parametric dìreach mar mheasgachadh bunaiteach, ach tha e cuideachd a’ gabhail ri paramadairean (mar sin an t-ainm) le luachan bunaiteach roghainneil.
- . eileamaid {
- . crìochan - radius ( 4px );
- }
Cuir do chuid fhèin gu furasta
Tha cha mhòr a h-uile gin de mheasgachadh Bootstrap air a stòradh ann am mixins.less, goireas mìorbhaileach .less faidhle a leigeas leat mixin a chleachdadh ann an gin de na faidhlichean .less san inneal.
Mar sin, rachaibh air adhart agus cleachd an fheadhainn a th’ ann no faodaidh tu do chuid fhèin a chuir ris mar a dh ’fheumas tu.
Measgachadh air a thoirt a-steach
Goireasan
| Measgachadh | Paramadairean | Cleachdadh |
|---|---|---|
.clearfix() |
gin | Cuir ri pàrant sam bith gus flotaichean a ghlanadh a-staigh |
.tab-focus() |
gin | Cuir an stoidhle fòcas Webkit an sàs agus geàrr-chunntas timcheall Firefox |
.center-block() |
gin | Ionad gu fèin-ghluasadach eileamaid ìre bloc a’ cleachdadhmargin: auto |
.ie7-inline-block() |
gin | Cleachd a bharrachd air cunbhalach display: inline-blockgus taic IE7 fhaighinn |
.size() |
@height @width |
Suidhich gu sgiobalta an àirde agus an leud air aon loidhne |
.square() |
@size |
Togail air adhart .size()gus an leud agus an àirde a shuidheachadh leis an aon luach |
.opacity() |
@opacity |
Suidhich, ann an àireamhan slàn, an ceudad neo-sheasmhachd (me, "50" no "75") |
Foirmean
| Measgachadh | Paramadairean | Cleachdadh |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Suidhich placeholderdath an teacsa airson cuir a-steach |
Clò-sgrìobhaidh
| Measgachadh | Paramadairean | Cleachdadh |
|---|---|---|
#font > #family > .serif() |
gin | Dèan eileamaid a’ cleachdadh stac cruth-clò serif |
#font > #family > .sans-serif() |
gin | Dèan eileamaid a’ cleachdadh cruach cruth-clò sans-serif |
#font > #family > .monospace() |
gin | Dèan eileamaid a’ cleachdadh cruach cruth-clò monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Suidhich gu furasta meud cruth-clò, cuideam, agus stiùir |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Suidhich teaghlach cruth-clò gu serif, agus smachd a chumail air meud, cuideam agus stiùireadh |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Suidhich teaghlach cruth-clò gu sans-serif, agus smachd a chumail air meud, cuideam agus stiùireadh |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Suidhich teaghlach cruth-clò gu monospace, agus smachd a chumail air meud, cuideam agus stiùireadh |
Siostam clèithe
| Measgachadh | Paramadairean | Cleachdadh |
|---|---|---|
.container-fixed() |
gin | Cruthaich soitheach le meadhan còmhnard airson do shusbaint a chumail |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Cruthaich siostam clèithe piogsail (soitheach, sreath, agus colbhan) le n colbhan agus x gutter farsaing piogsail |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Cruthaich siostam clèithe precent le n colbhan agus x % gutter de leud |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Cruthaich an siostam clèithe piogsail airson inputeileamaidean, a 'toirt cunntas air pleadhag agus crìochan |
.makeColumn |
@columns: 1, @offset: 0 |
Tionndaidh gin divgu colbh clèithe às aonais na .span*clasaichean |
Feartan CSS3
| Measgachadh | Paramadairean | Cleachdadh |
|---|---|---|
.border-radius() |
@radius |
Timcheall air oiseanan eileamaid. Faodaidh e a bhith na aon luach no ceithir luachan eadar-dhealaichte |
.box-shadow() |
@shadow |
Cuir sgàile tuiteam ri eileamaid |
.transition() |
@transition |
Cuir ris buaidh gluasaid CSS3 (me, all .2s linear) |
.rotate() |
@degrees |
Rothaich eileamaid n ceuman |
.scale() |
@ratio |
Sgèile eileamaid gu n uair a mheud tùsail |
.translate() |
@x, @y |
Gluais eileamaid air na plèanaichean x agus y |
.background-clip() |
@clip |
Bàrr cùl-raon eileamaid (feumail airson border-radius) |
.background-size() |
@size |
Smachd air meud ìomhaighean cùil tro CSS3 |
.box-sizing() |
@boxmodel |
Atharraich am modail bogsa airson eileamaid (me, border-boxairson làn-leud input) |
.user-select() |
@select |
Smachd cùrsair taghadh teacsa air duilleag |
.backface-visibility() |
@visibility: visible |
Cuir casg air priobadh susbaint nuair a bhios tu a’ cleachdadh cruth-atharrachadh CSS 3D |
.resizable() |
@direction: both |
Dèan eileamaid sam bith ath-mheudachadh air an làimh dheis agus gu h-ìosal |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
Dèan susbaint eileamaid sam bith a’ cleachdadh colbhan CSS3 |
Cùl-fhiosrachadh agus caisead
| Measgachadh | Paramadairean | Cleachdadh |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Thoir dath cùl-raoin thar-shoilleir dha eileamaid |
#translucent > .border() |
@color: @white, @alpha: 1 |
Thoir dath crìche thar-shoilleir dha eileamaid |
#gradient > .vertical() |
@startColor, @endColor |
Cruthaich caisead cùl-raon dìreach tar-bhrobhsair |
#gradient > .horizontal() |
@startColor, @endColor |
Cruthaich caisead cùl-raoin còmhnard thar-bhrabhsair |
#gradient > .directional() |
@startColor, @endColor, @deg |
Cruthaich caisead cùl-raon stiùiridh thar-bhrabhsair |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Cruthaich caisead cùl-raon trì-dath thar-bhrabhsair |
#gradient > .radial() |
@innerColor, @outerColor |
Cruthaich caisead cùl-raon radial tar-bhrabhsair |
#gradient > .striped() |
@color, @angle |
Cruthaich caisead cùl-raon stiallach thar-bhrabhsair |
#gradientBar() |
@primaryColor, @secondaryColor |
Air a chleachdadh airson putanan gus caisead agus crìoch beagan nas dorcha a shònrachadh |
A 'cur ri chèile Bootstrap le LESS
Innealan airson cruinneachadh
Nod le makefile
Stàlaich an inneal-cruinneachaidh loidhne-àithne LESS agus uglify-js air feadh na cruinne le npm le bhith a’ ruith an àithne a leanas:
$npm install -g nas lugha uglifify-js
Nuair a bhios tu air a chuir a-steach dìreach ruith makebho fhreumh an eòlaire bootstrap agad agus tha thu uile deiseil.
A bharrachd air an sin, ma tha neach- faire agad air a chuir a-steach, faodaidh tu ruith make watchgus am bi bootstrap air ath-thogail gu fèin-ghluasadach a h-uile uair a dheasaicheas tu faidhle anns an lib bootstrap (chan eil seo riatanach, dìreach dòigh goireasachd).
Loidhne-àithne
Stàlaich an inneal loidhne-àithne LESS tro Node agus ruith an àithne a leanas:
$ lessc ./less/bootstrap.less > bootstrap.css
Dèan cinnteach gun cuir thu a-steach --compresssan àithne sin ma tha thu a’ feuchainn ri beagan bytes a shàbhaladh!
Javascript
Luchdaich sìos na Less.js as ùire agus cuir a-steach an t-slighe thuige (agus Bootstrap) anns an fhaidhle <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Gus na faidhlichean .less ath-chruinneachadh, dìreach sàbhail iad agus ath-luchdaich do dhuilleag. Bidh Less.js gan cur ri chèile agus gan stòradh ann an stòradh ionadail.
Aplacaid neo-oifigeil Mac
Bidh an app Mac neo-oifigeil a ’ coimhead clàran de fhaidhlichean .less agus a’ cur ri chèile a’ chòd gu faidhlichean ionadail às deidh gach sàbhaladh de fhaidhle .less faire.
Ma thogras tu, is urrainn dhut roghainnean a thogail san app airson mion-sgrùdadh fèin-ghluasadach agus dè an eòlaire anns a bheil na faidhlichean cruinnichte a’ tighinn gu crìch.
Barrachd aplacaidean Mac
Crùisg
Tha Crunch na dheagh neach-deasachaidh agus neach-cruinneachaidh LESS air a thogail air Adobe Air.
CodeKit
Air a chruthachadh leis an aon ghille ris an app Mac neo-oifigeil, is e app Mac a th’ ann an CodeKit a bhios a ’cur ri chèile LESS, SASS, Stylus, agus CoffeeScript.
Sìmplidh
Aplacaid Mac, Linux, agus PC airson slaodadh is leigeil às de fhaidhlichean LESS. A bharrachd air an sin, tha an còd stòr air GitHub .