Uża LESS ma Bootstrap

Ippersonalizza u estendi Bootstrap b'LESS , preproċessur CSS, biex tieħu vantaġġ mill-varjabbli, mixins, u aktar użati biex tibni CSS ta 'Bootstrap.

Għaliex INQAS?

Bootstrap huwa magħmul b'INQAS fil-qalba tiegħu, lingwa ta 'stylesheet dinamika maħluqa mill-ħabib tajjeb tagħna, Alexis Sellier . Jagħmel l-iżvilupp tas-CSS ibbażat fuq is-sistemi aktar mgħaġġel, eħfef u aktar divertenti.

X'inhu inkluż?

Bħala estensjoni ta 'CSS, LESS jinkludi varjabbli, mixins għal siltiet ta' kodiċi li jistgħu jerġgħu jintużaw, operazzjonijiet għal matematika sempliċi, nesting, u anke funzjonijiet tal-kulur.

Itagħllem iżjed

Żur il-websajt uffiċjali fuq http://lesscss.org/ biex titgħallem aktar.

Varjabbli

Il-ġestjoni tal-kuluri u l-valuri tal-pixel fis-CSS tista 'tkun daqsxejn ta' uġigħ, ġeneralment mimlija b'kopja u pejst. Mhux b'INQAS għalkemm—assenja kuluri jew valuri tal-pixel bħala varjabbli u ibdelhom darba.

Mixins

Dawk it-tliet dikjarazzjonijiet tar-raġġ tal-fruntiera li għandek bżonn tagħmel fis-CSS regolari? Issa qed jinżlu għal linja waħda bl-għajnuna ta 'mixins, siltiet ta' kodiċi li tista 'terġa' tuża kullimkien.

Operazzjonijiet

Agħmel il-grid tiegħek, it-tmexxija, u aktar super flessibbli billi tagħmel il-matematika fuq il-fly bl-operazzjonijiet. Immoltiplika, jaqsam, żid, u naqqas it-triq tiegħek lejn is-sanità CSS.

Armar u links

`@bodyBackground`	`@white`	Kulur fl-isfond tal-paġna
`@textColor`	`@grayDark`	Kulur tat-test default għall-ġisem kollu, l-intestaturi, u aktar
`@linkColor`	`#08c`	Kulur tat-test tal-link default
`@linkColorHover`	`darken(@linkColor, 15%)`	Kulur predefinit tat-test tal-link

Sistema tal-grilja

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

Tipografija

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, "Courier New", monospace
`@baseFontSize`	13px	Għandhom ikunu pixels
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Għandhom ikunu pixels
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabelli

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

Kuluri fuq skala griża

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#fff

Kuluri aċċent

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

Komponenti

Buttuni

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

Formoli

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

Formola stati u twissijiet

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

Dropdowns

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

Unità eroj

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

Dwar mixins

Mixins bażiċi

Mixin bażiku huwa essenzjalment include jew parzjali għal siltiet ta 'CSS. Jinkitbu bħal klassi CSS u jistgħu jissejħu kullimkien.

. element {
  . clearfix ();
}

Mixins parametriċi

Mixin parametriku huwa bħal mixin bażiku, iżda jaċċetta wkoll parametri (għalhekk l-isem) b'valuri default fakultattivi.

. element {
  . fruntiera - raġġ ( 4px );
}

Żid faċilment tiegħek

Kważi l-mixins kollha ta' Bootstrap huma maħżuna f'mixins.less, fajl .less ta' utilità mill-isbaħ li jippermettilek tuża mixin fi kwalunkwe fajl .less fl-għodda.

Allura, aqbad u uża dawk eżistenti jew tħossok liberu li żżid tiegħek kif għandek bżonn.

Mixins inklużi

Utilitajiet

Mixin	Parametri	Użu
`.clearfix()`	xejn	Żid ma 'kwalunkwe ġenitur biex tneħħi sufruni ġewwa
`.tab-focus()`	xejn	Applika l-istil tal-fokus tal-Webkit u l-kontorn tond ta' Firefox
`.center-block()`	xejn	Auto center element blokk-livell bl-użu`margin: auto`
`.ie7-inline-block()`	xejn	Uża minbarra regolari `display: inline-block`biex tikseb appoġġ IE7
`.size()`	`@height @width`	Issettja malajr l-għoli u l-wisa 'fuq linja waħda
`.square()`	`@size`	Tibni fuq `.size()`biex tissettja l-wisa 'u l-għoli bħala l-istess valur
`.opacity()`	`@opacity`	Issettja, f'numri sħaħ, il-perċentwal tal-opaċità (eż., "50" jew "75")

Formoli

Mixin	Parametri	Użu
`.placeholder()`	`@color: @placeholderText`	Issettja l- `placeholder`kulur tat-test għall-inputs

Tipografija

Mixin	Parametri	Użu
`#font > #family > .serif()`	xejn	Agħmel element juża munzell ta 'font serif
`#font > #family > .sans-serif()`	xejn	Agħmel element juża munzell ta 'font sans-serif
`#font > #family > .monospace()`	xejn	Agħmel element juża munzell ta 'font monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Issettja faċilment id-daqs tat-tipa, il-piż, u t-tmexxija
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Issettja l-familja tat-tipa għal serif, u tikkontrolla d-daqs, il-piż, u t-tmexxija
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Issettja l-familja tat-tipa għal sans-serif, u tikkontrolla d-daqs, il-piż u l-mexxejja
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Issettja l-familja tat-tipa għal monospace, u tikkontrolla d-daqs, il-piż u l-mexxejja

Sistema tal-grilja

Mixin	Parametri	Użu
`.container-fixed()`	xejn	Oħloq kontenitur iċċentrat orizzontalment biex iżżomm il-kontenut tiegħek
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Iġġenera sistema ta' grilja tal-pixels (kontenitur, ringiela u kolonni) b'kolonni n u kanal wiesa' x pixel
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Iġġenera sistema ta' grilja perċentwali b'n kolonni u x % kanal wiesa'
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Iġġenera s-sistema tal-grilja tal-pixels għall- `input`elementi, li tagħti kont tal-ikkuttunar u l-fruntieri
`.makeColumn`	`@columns: 1, @offset: 0`	Dawwar kwalunkwe `div`ġo kolonna tal-grilja mingħajr il- `.span*`klassijiet

Proprjetajiet CSS3

Mixin	Parametri	Użu
`.border-radius()`	`@radius`	Dawwar il-kantunieri ta 'element. Jista' jkun valur wieħed jew erba' valuri separati mill-ispazju
`.box-shadow()`	`@shadow`	Żid dell ma' element
`.transition()`	`@transition`	Żid effett ta' transizzjoni CSS3 (eż., `all .2s linear`)
`.rotate()`	`@degrees`	Dawwar element n gradi
`.scale()`	`@ratio`	Skala element għal n darbiet id-daqs oriġinali tiegħu
`.translate()`	`@x, @y`	Mexxi element fuq il-pjani x u y
`.background-clip()`	`@clip`	Aqsam l-isfond ta' element (utli għal `border-radius`)
`.background-size()`	`@size`	Ikkontrolla d-daqs tal-immaġini fl-isfond permezz ta 'CSS3
`.box-sizing()`	`@boxmodel`	Ibdel il-mudell tal-kaxxa għal element (eż, `border-box`għal wisa 'sħiħ `input`)
`.user-select()`	`@select`	Ikkontrolla l-għażla tal-cursor tat-test fuq paġna
`.backface-visibility()`	`@visibility: visible`	Evita t-teptip tal-kontenut meta tuża t-trasformazzjonijiet CSS 3D
`.resizable()`	`@direction: both`	Agħmel kwalunkwe element imqassam fuq il-lemin u l-qiegħ
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Agħmel il-kontenut ta 'kwalunkwe element juża kolonni CSS3
`.hyphens()`	`@mode: auto`	CSS3 hyphenation meta tridu (jinkludi `word-wrap: break-word`)

Sfondi u gradjenti

Mixin	Parametri	Użu
`#translucent > .background()`	`@color: @white, @alpha: 1`	Agħti element kulur fl-isfond trasluċidu
`#translucent > .border()`	`@color: @white, @alpha: 1`	Agħti element kulur tal-fruntiera trasluċidi
`#gradient > .vertical()`	`@startColor, @endColor`	Oħloq gradjent fl-isfond vertikali cross-browser
`#gradient > .horizontal()`	`@startColor, @endColor`	Oħloq gradjent ta' sfond orizzontali cross-browser
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Oħloq gradjent fl-isfond direzzjonali bejn il-browser
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Oħloq gradjent ta 'sfond bi tliet kuluri cross-browser
`#gradient > .radial()`	`@innerColor, @outerColor`	Oħloq gradjent ta 'sfond radjali cross-browser
`#gradient > .striped()`	`@color, @angle`	Oħloq gradjent ta 'sfond strixxat bejn il-browser
`#gradientBar()`	`@primaryColor, @secondaryColor`	Użat għal buttuni biex jassenjaw gradjent u fruntiera kemmxejn aktar skura

Nota: Jekk qed tissottometti talba ta' pull lil GitHub b'CSS modifikat, trid terġa ' tikkompila s-CSS permezz ta' kwalunkwe minn dawn il-metodi.

Għodda għall-kumpilazzjoni

Node ma makefile

Installa l-kompilatur tal-linja tal-kmand LESS, JSHint, Recess, u uglify-js globalment b'npm billi tħaddem il-kmand li ġej:

$ npm install -g inqas jshint recess uglify-js

Ladarba tkun installata għadek biss makemill-għerq tad-direttorju tal-bootstrap tiegħek u tkun lest.

Barra minn hekk, jekk għandek watchr installat, tista' taħdem make watchbiex il-bootstrap jinbena mill-ġdid awtomatikament kull darba li teditja fajl fil-bootstrap lib (dan mhux meħtieġ, metodu ta' konvenjenza biss).

Linja tal-kmand

Installa l-għodda tal-linja tal-kmand LESS permezz ta' Node u mexxi l-kmand li ġej:

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

Kun żgur li tinkludi --compressf'dak il-kmand jekk qed tipprova tiffranka xi bytes!

Javascript

Niżżel l-aħħar Less.js u inkludi t-triq għaliha (u Bootstrap) fil- <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

Biex tikkompila mill-ġdid il-fajls .less, issalvahom u erġa' tagħbija l-paġna tiegħek. Less.js jiġborhom u jaħżenhom f'ħażna lokali.

App mhux uffiċjali tal-Mac

L-app mhux uffiċjali tal-Mac tara direttorji ta' fajls .less u tiġbor il-kodiċi għal fajls lokali wara kull salvataġġ ta' fajl .less osservat.

Jekk tixtieq, tista' taqleb il-preferenzi fl-app għal minifikazzjoni awtomatika u f'liema direttorju jispiċċaw il-fajls ikkumpilati.

Mibnija b'INQAS

Għaliex INQAS?

X'inhu inkluż?

Itagħllem iżjed

Varjabbli

Mixins

Operazzjonijiet

Varjabbli Bootstrap Il-varjabbli LESS, il-valuri tagħhom, u l-linji gwida għall-użu

Armar u links

Sistema tal-grilja

Tipografija

Tabelli

Kuluri fuq skala griża

Kuluri aċċent

Komponenti

Buttuni

Formoli

Formola stati u twissijiet

Navbar

Dropdowns

Unità eroj

Mixins Bootstrap

Dwar mixins

Mixins bażiċi

Mixins parametriċi

Żid faċilment tiegħek

Mixins inklużi

Utilitajiet

Formoli

Tipografija

Sistema tal-grilja

Proprjetajiet CSS3

Sfondi u gradjenti

Il-kumpilazzjoni ta' Bootstrap b'INQAS

Għodda għall-kumpilazzjoni

Node ma makefile

Linja tal-kmand

Javascript

App mhux uffiċjali tal-Mac

Aktar Mac apps

Crunch

CodeKit

Sempliċi