Iji LESS na Bootstrap

Hazie na ịgbatị Bootstrap na LESS , onye na-ebu ụzọ CSS, ka ị nweta uru nke mgbanwe, mixins, na ihe ndị ọzọ ejiri wuo Bootstrap's CSS.

Gịnị kpatara erughị ala?

A na-eme Bootstrap na LESS n'isi ya, asụsụ ụdịdị ike nke ezigbo enyi anyị, Alexis Sellier kere . Ọ na-eme mmepe CSS dabere na sistemu ngwa ngwa, dị mfe na ihe ọchị karịa.

Kedu ihe gụnyere?

Dị ka ndọtị nke CSS, obere na-agụnye mgbanwe, mixins maka reusable snippets nke koodu, arụmọrụ maka mfe mgbakọ na mwepụ, nesting, na ọbụna agba ọrụ.

Mụtakwuo

Gaa na webụsaịtị gọọmentị na http://lesscss.org/ ka ịmatakwu ihe.

Mgbanwe

Ijikwa agba na ụkpụrụ pikselụ na CSS nwere ike ịbụ ntakịrị ihe mgbu, na-ejupụtakarị na nnomi na mado. Ọ bụghị na obere n'agbanyeghị - kenye agba ma ọ bụ ụkpụrụ pikselụ dị ka mgbanwe wee gbanwee ha otu ugboro.

Ngwakọta

Nkwuwapụta oke-oke atọ ahụ ị ga-emerịrị na CSS? Ugbu a, ha na-agbada n'otu ahịrị site n'enyemaka nke mixins, snippets nke koodu ị nwere ike ijikwa ebe ọ bụla.

Ọrụ

Mee ka grid gị, na-edu, na nke ukwuu na-agbanwe agbanwe site na iji ọrụ na-eme mgbakọ na mwepụ na ofufe. Mụbaa, kewaa, gbakwunye, ma wepụ ụzọ gị gaa na ịdị ọcha CSS.

Ihe mkpuchi na njikọ

`@bodyBackground`	`@white`	Agba ndabere ibe
`@textColor`	`@grayDark`	Agba ederede ezighi ezi maka ahụ dum, isiokwu na ndị ọzọ
`@linkColor`	`#08c`	Agba ederede njikọ ezighi ezi
`@linkColorHover`	`darken(@linkColor, 15%)`	Agba mgbagharị ederede njikọ ezighi ezi

Sistemụ grid

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Ederede

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, Sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13px	Kwesịrị ịbụ pikselụ
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Kwesịrị ịbụ pikselụ
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tebụl

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

Agba isi awọ

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eeee
`@white`	#nff

Agba ụda olu

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

Ngwa

Bọtịnụ

`@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`

Ụdị

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

Depụta steeti na ọkwa

`@warningText`	# c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3 ruo 87
`@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`

Mbelata

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

Otu dike

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

Banyere mixins

Ngwakọta ndị bụ isi

Ngwakọta bụ isi bụ n'ezie gụnyere ma ọ bụ akụkụ maka snippet nke CSS. Edere ha dị ka klaasị CSS ma enwere ike ịkpọ ha ebe ọ bụla.

. mmewere {
  . mkpochapụ ();
}

Ngwakọta parametric

Ngwakọta parametric dị ka mixin bụ isi, mana ọ na-anabatakwa paramita (ya mere aha ahụ) yana ụkpụrụ ndabara nhọrọ.

. mmewere {
  . oke - radius ( 4px );
}

Dị mfe tinye nke gị

Ihe fọrọ nke nta ka ọ bụrụ mixins niile nke Bootstrap na-echekwa na mixins.less, ihe magburu onwe ya na-abaghị uru faịlụ na-enyere gị aka iji mixin na nke ọ bụla n'ime faịlụ . obere na ngwá ọrụ.

Yabụ, gaa n'ihu jiri ndị dị adị ma ọ bụ nweere onwe gị ịgbakwunye nke gị dịka ịchọrọ.

Ngwakọta gụnyere

Ngwa ọrụ

Ngwakọta	Oke	Ojiji
`.clearfix()`	onweghi	Tinye na nne na nna ọ bụla iji kpochapụ ihe na-ese n'elu
`.tab-focus()`	onweghi	Tinye ụdị nlebara anya Webkit yana ihe ndepụta Firefox gburugburu
`.center-block()`	onweghi	Nchekwa onwe nke ihe mgbochi-larịị n'iji`margin: auto`
`.ie7-inline-block()`	onweghi	Jiri na mgbakwunye na oge niile `display: inline-block`iji nweta nkwado IE7
`.size()`	`@height @width`	Tọọ ngwa ngwa na ịdị elu na obosara n'otu ahịrị
`.square()`	`@size`	Na-ewuli elu `.size()`ka ịtọ obosara na ịdị elu ka otu uru
`.opacity()`	`@opacity`	Tọọ, n'ọnụọgụ dum, pasent nke oghere (dịka, "50" ma ọ bụ "75")

Ụdị

Ngwakọta	Oke	Ojiji
`.placeholder()`	`@color: @placeholderText`	Tọọ `placeholder`ụcha ederede maka ntinye

Ederede

Ngwakọta	Oke	Ojiji
`#font > #family > .serif()`	onweghi	Mee mmewere jiri ndokọ mkpụrụedemede serif
`#font > #family > .sans-serif()`	onweghi	Mee mmewere jiri ndokọba mkpụrụedemede sans-serif
`#font > #family > .monospace()`	onweghi	Mepụta mmewere jiri nchịkọta mkpụrụedemede monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Hazie nha mkpụrụedemede, ịdị arọ na ụzọ n'ụzọ dị mfe
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Tọọ ezinụlọ font ka ọ bụrụ serif, ma jikwaa nha, ịdị arọ na ụzọ
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Tọọ ezinụlọ font na sans-serif, ma jikwaa nha, ịdị arọ na ụzọ
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Tọọ ezinụlọ font ka ọ bụrụ monospace, ma jikwaa nha, ịdị arọ na ụzọ

Sistemụ grid

Ngwakọta	Oke	Ojiji
`.container-fixed()`	onweghi	Mepụta akpa kwụ n'ahịrị maka ijide ọdịnaya gị
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Mepụta sistemu grid pixel (akpa, ahiri na kọlụm) nwere n kọlụm na x pikselụ obosara gutter
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Mepụta sistemu grid nke nwere n kọlụm yana x % obosara gọta
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Mepụta usoro grid pixel maka `input`ihe, na-aza ajụjụ maka padding na oke
`.makeColumn`	`@columns: 1, @offset: 0`	Tụgharịa nke ọ bụla ka ọ `div`bụrụ kọlụm grid na-enweghị `.span*`klaasị

Njirimara CSS3

Ngwakọta	Oke	Ojiji
`.border-radius()`	`@radius`	Gburugburu akụkụ nke mmewere. Nwere ike ịbụ otu uru ma ọ bụ ụkpụrụ anọ kewara oghere
`.box-shadow()`	`@shadow`	Tinye onyinyo dobe na mmewere
`.transition()`	`@transition`	Tinye mmetụta mgbanwe CSS3 (dịka ọmụmaatụ, `all .2s linear`)
`.rotate()`	`@degrees`	Tụgharịa ihe mmewere n degrees
`.scale()`	`@ratio`	Gbanwee mmewere ka n jiri nha mbụ ya
`.translate()`	`@x, @y`	Bugharịa otu mmewere na ụgbọ elu x na y
`.background-clip()`	`@clip`	Kpochapụ ihe ndabere nke mmewere (bara uru maka `border-radius`)
`.background-size()`	`@size`	Jikwaa nha onyonyo ndabere site na CSS3
`.box-sizing()`	`@boxmodel`	Gbanwee ụdị igbe maka mmewere (dịka, `border-box`maka obosara zuru oke `input`)
`.user-select()`	`@select`	Jikwaa nhọrọ ederede cursor na ibe
`.backface-visibility()`	`@visibility: visible`	Gbochie ịsagharị ọdịnaya mgbe ị na-eji mgbanwe CSS 3D
`.resizable()`	`@direction: both`	Mee ka ihe ọ bụla gbanwee n'aka nri na ala
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Mee ọdịnaya nke ihe ọ bụla jiri kọlụm CSS3
`.hyphens()`	`@mode: auto`	CSS3 hyphenation mgbe ịchọrọ ya (gụnyere `word-wrap: break-word`)

Ndabere na gradients

Ngwakọta	Oke	Ojiji
`#translucent > .background()`	`@color: @white, @alpha: 1`	Nye ihe mmewere ka ọ bụrụ ụcha ndabere translucent
`#translucent > .border()`	`@color: @white, @alpha: 1`	Nye ihe mmewere agba oke oke translucent
`#gradient > .vertical()`	`@startColor, @endColor`	Mepụta gradient ndabere kwụ ọtọ n'ofe ihe nchọgharị
`#gradient > .horizontal()`	`@startColor, @endColor`	Mepụta gradient n'okirikiri ihe nchọgharị gafere
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Mepụta gradient ndabere ntụzịaka ihe nchọgharị
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Mepụta ihe nchọgharị n'okirikiri agba atọ
`#gradient > .radial()`	`@innerColor, @outerColor`	Mepụta gradient ndabere radial cross-browser
`#gradient > .striped()`	`@color, @angle`	Mepụta gradient okirikiri nwere akara ihe nchọgharị obe
`#gradientBar()`	`@primaryColor, @secondaryColor`	Ejiri ya maka bọtịnụ iji kenye oke gradient na ntakịrị ọchịchịrị

Mara: Ọ bụrụ na ị na-enye GitHub arịrịọ ịdọrọ site na iji CSS gbanwetụrụ, ị ga-emerịrị usoro CSS ọ bụla.

Ngwa maka ịchịkọta

Ọnụ nwere makefile

Wụnye nchịkọta iwu LESS, JSHint, Recess, na ugify-js zuru ụwa ọnụ na npm site na iji iwu na-esonụ:

$ npm install -g obere ezumike jshint uglify-js

Ozugbo etinyere ya, gba ọsọ makesite na mgbọrọgwụ nke ndekọ ndekọ bootstrap gị ma edobela gị niile.

Na mgbakwunye, ọ bụrụ na etinyere onye nche , ị nwere ike ịgba ọsọ make watchka eweghachi bootstrap na-akpaghị aka oge ọ bụla ị dezie faịlụ na bootstrap lib (nke a anaghị achọ, naanị usoro dị mma).

Ahịrị iwu

Wụnye ngwa ahịrị ahịrị LESS site na Node wee mee iwu a:

$ lessc ./less/bootstrap.less > bootstrap.css

Jide n'aka na itinye --compressn'iwu ahụ ma ọ bụrụ na ị na-agbalị ichekwa ụfọdụ bytes!

Javascript

Budata Less.js kacha ọhụrụ wee tinye ụzọ ya (na Bootstrap) na faịlụ <head>.

<njikọ rel = "stylesheet/less" href = "/ụzọ/to/bootstrap.less" > <script src = "/ụzọ/to/less.js" ></script>

Iji chịkọta faịlụ ndị na-erughị obere, naanị chekwaa ha wee bugharịa ibe gị. Less.js na-achịkọta ha ma na-echekwa ha na nchekwa mpaghara.

Ngwa Mac na-akwadoghị

Ngwa Mac na-akwadoghị na- elele akwụkwọ ndekọ aha nke faịlụ ndị na-enweghị obere ma na-achịkọta koodu ahụ na faịlụ mpaghara mgbe nchekwa ọ bụla nke faịlụ na-enweghị .

Ọ bụrụ na-amasị gị, ị nwere ike ịgbanwe mmasị na ngwa ahụ maka iwetulata akpaaka yana akwụkwọ ndekọ aha faịlụ ekpokọtara na-ejedebe.

Ejiri obere obere wuo ya

Gịnị kpatara erughị ala?

Kedu ihe gụnyere?

Mụtakwuo

Mgbanwe

Ngwakọta

Ọrụ

Ngbanwe bootstrap Ngbanwe dị obere, ụkpụrụ ha na ntuziaka ojiji

Ihe mkpuchi na njikọ

Sistemụ grid

Ederede

Tebụl

Agba isi awọ

Agba ụda olu

Ngwa

Bọtịnụ

Ụdị

Depụta steeti na ọkwa

Navbar

Mbelata

Otu dike

Ngwakọta bootstrap

Banyere mixins

Ngwakọta ndị bụ isi

Ngwakọta parametric

Dị mfe tinye nke gị

Ngwakọta gụnyere

Ngwa ọrụ

Ụdị

Ederede

Sistemụ grid

Njirimara CSS3

Ndabere na gradients

Na-achịkọta Bootstrap na obere obere

Ngwa maka ịchịkọta

Ọnụ nwere makefile

Ahịrị iwu

Javascript

Ngwa Mac na-akwadoghị

Ngwa Mac ndị ọzọ

Crunch

CodeKit

Dị mfe