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.

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.

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`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

Aonad gaisgeach

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

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 {
  . chrìoch - 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’ cleachdadh`margin: auto`
`.ie7-inline-block()`	gin	Cleachd a bharrachd air cunbhalach `display: inline-block`gus 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 `placeholder`dath 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 sa cheud le n colbhan agus x % gutter de leud
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Cruthaich an siostam clèithe piogsail airson `input`eileamaidean, a 'toirt cunntas air pleadhag agus crìochan
`.makeColumn`	`@columns: 1, @offset: 0`	Tionndaidh gin `div`gu 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-box`airson 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
`.hyphens()`	`@mode: auto`	tàthan CSS3 nuair a tha thu ga iarraidh (a’ toirt a-steach `word-wrap: break-word`)

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

Nota: Ma tha thu a’ cur a-steach iarrtas tarraing gu GitHub le CSS atharraichte, feumaidh tu an CSS ath-chruinneachadh tro gin de na dòighean sin.

Innealan airson cruinneachadh

Nod le makefile

Stàlaich an inneal-cruinneachaidh loidhne-àithne LESS, JSHint, Recess, agus uglify-js air feadh na cruinne le npm le bhith a’ ruith an àithne a leanas:

$ npm install -g nas lugha jshint fosadh uglify-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.

Air a thogail le LÌON

Carson nas lugha?

Dè tha air a ghabhail a-steach?

Ionnsaich barrachd

Caochlaidhean

Measgachadh

Obrachaidhean

Caochladairean Bootstrap LÌON caochladairean, na luachan aca, agus stiùireadh cleachdaidh

Sgafaill agus ceanglaichean

Siostam clèithe

Clò-sgrìobhaidh

Clàir

Dathan sgèile liath

Dathan accent

Co-phàirtean

Putanan

Foirmean

Foirm stàitean agus rabhaidhean

Navbar

Droch-dhìol

Aonad gaisgeach

Bootstrap a ' measgachadh

Mu dheidhinn measgachadh

Measgachadh bunaiteach

Measgachadh parametric

Cuir do chuid fhèin gu furasta

Measgachadh air a thoirt a-steach

Goireasan

Foirmean

Clò-sgrìobhaidh

Siostam clèithe

Feartan CSS3

Cùl-fhiosrachadh agus caisead

A 'cur ri chèile Bootstrap le LESS

Innealan airson cruinneachadh

Nod le makefile

Loidhne-àithne

Javascript

Aplacaid neo-oifigeil Mac

Barrachd aplacaidean Mac

Crùisg

CodeKit

Sìmplidh