Defnyddio LLAI gyda Bootstrap

Addaswch ac estyn Bootstrap gyda LESS , rhagbrosesydd CSS, i fanteisio ar y newidynnau, cymysgeddau, a mwy a ddefnyddir i adeiladu CSS Bootstrap.

Pam LLAI?

Gwneir Bootstrap gyda LLAI yn ei graidd, iaith arddull ddeinamig a grëwyd gan ein ffrind da, Alexis Sellier . Mae'n gwneud datblygu CSS sy'n seiliedig ar systemau yn gyflymach, yn haws ac yn fwy o hwyl.

Beth sy'n cael ei gynnwys?

Fel estyniad o CSS, mae LLAI yn cynnwys newidynnau, cymysgeddau ar gyfer pytiau o god y gellir eu hailddefnyddio, gweithrediadau ar gyfer swyddogaethau mathemateg syml, nythu, a hyd yn oed lliw.

Dysgu mwy

Ewch i'r wefan swyddogol yn http://lesscss.org/ i ddysgu mwy.

Newidynnau

Gall rheoli lliwiau a gwerthoedd picsel yn CSS fod yn dipyn o boen, fel arfer yn llawn copi a gludo. Ond nid gyda LLAI - aseinio lliwiau neu werthoedd picsel fel newidynnau a'u newid unwaith.

cymysgeddau

Y tri datganiad radiws ffiniau hynny y mae angen i chi eu gwneud mewn CSS rheolaidd? Nawr maen nhw i lawr i un llinell gyda chymorth mixins, pytiau o god y gallwch eu hailddefnyddio yn unrhyw le.

Gweithrediadau

Gwnewch eich grid, yn arwain, ac yn fwy hyblyg iawn trwy wneud y mathemateg ar y hedfan gyda gweithrediadau. Lluosi, rhannu, ychwanegu a thynnu eich ffordd i bwyll CSS.

Sgaffaldiau a chysylltiadau....

`@bodyBackground`	`@white`	Lliw cefndir y dudalen
`@textColor`	`@grayDark`	Lliw testun diofyn ar gyfer y corff cyfan, penawdau, a mwy
`@linkColor`	`#08c`	Lliw testun cyswllt diofyn
`@linkColorHover`	`darken(@linkColor, 15%)`	Dolen ddiofyn lliw hofran testun

System grid

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2. 127659574%

Teipograffeg

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier Newydd", monospace
`@baseFontSize`	13px	Rhaid bod yn bicseli
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Rhaid bod yn bicseli
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Byrddau

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

Lliwiau graddlwyd

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

Lliwiau acen

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

Cydrannau

Botymau

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

Ffurflenni

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

Cyflyrau ffurflen a rhybuddion

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

Cwympiadau

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

Uned arwr

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

Am mixins

Cymysgedd sylfaenol

Mae mixin sylfaenol yn ei hanfod yn gynnwys neu'n rhannol ar gyfer pyt o CSS. Maent wedi'u hysgrifennu yn union fel dosbarth CSS a gellir eu galw yn unrhyw le.

. elfen {
  . clirfix ();
}

Cymysgeddau parametrig

Mae mixin parametrig yn union fel mixin sylfaenol, ond mae hefyd yn derbyn paramedrau (felly yr enw) gyda gwerthoedd rhagosodedig dewisol.

. elfen {
  . border - radiws ( 4px );
}

Ychwanegwch eich un chi yn hawdd

Mae bron pob un o gymysgeddau Bootstrap yn cael eu storio mewn mixins.less, ffeil ddefnyddioldeb wych .less sy'n eich galluogi i ddefnyddio mixin yn unrhyw un o'r ffeiliau .less yn y pecyn cymorth.

Felly, ewch ymlaen a defnyddiwch y rhai presennol neu mae croeso i chi ychwanegu eich rhai eich hun yn ôl yr angen.

Cymysgeddau wedi'u cynnwys

Cyfleustodau

Cymysgu	Paramedrau	Defnydd
`.clearfix()`	dim	Ychwanegu at unrhyw riant i glirio fflotiau oddi mewn
`.tab-focus()`	dim	Cymhwyswch arddull ffocws Webkit a rownd amlinelliad Firefox
`.center-block()`	dim	Canolbwyntio elfen lefel bloc yn awtomatig gan ddefnyddio`margin: auto`
`.ie7-inline-block()`	dim	Defnyddiwch yn ogystal â rheolaidd `display: inline-block`i gael cymorth IE7
`.size()`	`@height @width`	Gosodwch yr uchder a'r lled yn gyflym ar un llinell
`.square()`	`@size`	Yn adeiladu ymlaen `.size()`i osod y lled a'r uchder fel yr un gwerth
`.opacity()`	`@opacity`	Gosod, mewn rhifau cyfan, y ganran didreiddedd (ee, "50" neu "75")

Ffurflenni

Cymysgu	Paramedrau	Defnydd
`.placeholder()`	`@color: @placeholderText`	Gosodwch y `placeholder`lliw testun ar gyfer mewnbynnau

Teipograffeg

Cymysgu	Paramedrau	Defnydd
`#font > #family > .serif()`	dim	Gwneud elfen defnyddiwch stac ffontiau serif
`#font > #family > .sans-serif()`	dim	Defnyddiwch bentwr ffontiau sans-serif i wneud elfen
`#font > #family > .monospace()`	dim	Gwneud elfen defnyddiwch stac ffontiau monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Gosod maint ffont, pwysau ac arwain yn hawdd
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Gosod teulu ffont i serif, a rheoli maint, pwysau, ac arwain
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Gosod teulu ffont i sans-serif, a rheoli maint, pwysau, ac arwain
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Gosod teulu ffont i monospace, a rheoli maint, pwysau, ac yn arwain

System grid

Cymysgu	Paramedrau	Defnydd
`.container-fixed()`	dim	Creu cynhwysydd llorweddol wedi'i ganoli ar gyfer dal eich cynnwys
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Cynhyrchu system grid picsel (cynhwysydd, rhes, a cholofnau) gyda n colofn a gwter x picsel llydan
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Cynhyrchu system grid precent gydag n colofn a gwter x % o led
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Cynhyrchu'r system grid picsel ar gyfer `input`elfennau, gan gyfrif am padin a ffiniau
`.makeColumn`	`@columns: 1, @offset: 0`	Trowch unrhyw un `div`yn golofn grid heb y `.span*`dosbarthiadau

priodweddau CSS3

Cymysgu	Paramedrau	Defnydd
`.border-radius()`	`@radius`	Rownd corneli elfen. Gall fod yn werth sengl neu'n bedwar gwerth gofod wedi'u gwahanu
`.box-shadow()`	`@shadow`	Ychwanegu cysgod gollwng i elfen
`.transition()`	`@transition`	Ychwanegu effaith trawsnewid CSS3 (ee, `all .2s linear`)
`.rotate()`	`@degrees`	Cylchdroi elfen n graddau
`.scale()`	`@ratio`	Graddio elfen i n gwaith ei maint gwreiddiol
`.translate()`	`@x, @y`	Symudwch elfen ar y planau x ac y
`.background-clip()`	`@clip`	Tocio cefndir elfen (defnyddiol ar gyfer `border-radius`)
`.background-size()`	`@size`	Rheoli maint delweddau cefndir trwy CSS3
`.box-sizing()`	`@boxmodel`	Newidiwch y model blwch ar gyfer elfen (ee, `border-box`ar gyfer lled llawn `input`)
`.user-select()`	`@select`	Rheoli dewis testun cyrchwr ar dudalen
`.backface-visibility()`	`@visibility: visible`	Atal rhag fflachio cynnwys wrth ddefnyddio trawsnewidiadau CSS 3D
`.resizable()`	`@direction: both`	Gwnewch unrhyw elfen y gellir ei newid maint ar y dde a'r gwaelod
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Defnyddiwch golofnau CSS3 i gynnwys unrhyw elfen

Cefndiroedd a graddiannau

Cymysgu	Paramedrau	Defnydd
`#translucent > .background()`	`@color: @white, @alpha: 1`	Rhowch liw cefndir tryloyw i elfen
`#translucent > .border()`	`@color: @white, @alpha: 1`	Rhowch liw ymyl tryloyw i elfen
`#gradient > .vertical()`	`@startColor, @endColor`	Creu graddiant cefndir fertigol traws-borwr
`#gradient > .horizontal()`	`@startColor, @endColor`	Creu graddiant cefndir llorweddol traws-borwr
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Creu graddiant cefndir cyfeiriadol traws-borwr
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Creu graddiant cefndir tri lliw traws-borwr
`#gradient > .radial()`	`@innerColor, @outerColor`	Creu graddiant cefndir rheiddiol traws-borwr
`#gradient > .striped()`	`@color, @angle`	Creu graddiant cefndir streipiog traws-borwr
`#gradientBar()`	`@primaryColor, @secondaryColor`	Defnyddir ar gyfer botymau i aseinio graddiant a border ychydig yn dywyllach

Nodyn: Os ydych chi'n cyflwyno cais tynnu i GitHub gyda CSS wedi'i addasu, rhaid i chi ail-grynhoi'r CSS trwy unrhyw un o'r dulliau hyn.

Offer ar gyfer llunio

Nod gyda makefile

Gosodwch y casglwr llinell orchymyn LESS ac uglify-js yn fyd-eang gydag npm trwy redeg y gorchymyn canlynol:

$npm gosod -g llai uglify-js

Ar ôl ei osod, rhedwch makeo wraidd eich cyfeiriadur bootstrap ac rydych chi'n barod.

Yn ogystal, os ydych wedi gosod gwyliwr , efallai y byddwch yn rhedeg make watchi gael bootstrap wedi'i ailadeiladu'n awtomatig bob tro y byddwch yn golygu ffeil yn y lib bootstrap (nid oes angen hyn, dim ond dull cyfleustra).

Llinell orchymyn

Gosodwch yr offeryn llinell orchymyn LESS trwy Node a rhedeg y gorchymyn canlynol:

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

Gwnewch yn siŵr eich bod yn cynnwys --compressyn y gorchymyn hwnnw os ydych chi'n ceisio arbed rhai bytes!

Javascript

Lawrlwythwch y Less.js diweddaraf a chynnwys y llwybr ato (a Bootstrap) yn y ffeil <head>.

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

I ail-grynhoi'r ffeiliau .less, arbedwch nhw ac ail-lwythwch eich tudalen. Mae Less.js yn eu llunio ac yn eu storio mewn storfa leol.

Ap Mac answyddogol

Mae ap Mac answyddogol yn gwylio cyfeiriaduron o ffeiliau .less ac yn llunio'r cod i ffeiliau lleol ar ôl pob arbediad o ffeil .less a wylir.

Os dymunwch, gallwch newid dewisiadau yn yr ap ar gyfer miniogi awtomatig a pha gyfeiriadur y mae'r ffeiliau a luniwyd yn y pen draw ynddo.

Adeiladwyd gyda LLAI

Pam LLAI?

Beth sy'n cael ei gynnwys?

Dysgu mwy

Newidynnau

cymysgeddau

Gweithrediadau

Newidynnau Bootstrap LLAI o newidynnau, eu gwerthoedd, a chanllawiau defnydd

Sgaffaldiau a chysylltiadau....

System grid

Teipograffeg

Byrddau

Lliwiau graddlwyd

Lliwiau acen

Cydrannau

Botymau

Ffurflenni

Cyflyrau ffurflen a rhybuddion

Navbar

Cwympiadau

Uned arwr

Cymysgeddau Bootstrap

Am mixins

Cymysgedd sylfaenol

Cymysgeddau parametrig

Ychwanegwch eich un chi yn hawdd

Cymysgeddau wedi'u cynnwys

Cyfleustodau

Ffurflenni

Teipograffeg

System grid

priodweddau CSS3

Cefndiroedd a graddiannau

Llunio Bootstrap gyda LLAI

Offer ar gyfer llunio

Nod gyda makefile

Llinell orchymyn

Javascript

Ap Mac answyddogol

Mwy o apiau Mac

Gwasgfa

CodeKit

Syml