Kushandisa LESS neBootstrap

Gadzirisa uye uwedzere Bootstrap neLESS , CSS preprocessor, kutora mukana wezvakasiyana, musanganiswa, uye zvimwe zvinoshandiswa kuvaka Bootstrap's CSS.

Sei ZVINODZIKA?

Bootstrap inogadzirwa neLESS pamusimboti wayo, mutauro wesheetti ine simba wakagadzirwa neshamwari yedu yakanaka, Alexis Sellier . Inoita kugadzira masisitimu-yakavakirwa CSS nekukurumidza, nyore, uye kunakidza.

Chii chinosanganisirwa?

Sewedzero yeCSS, LESS inosanganisira zvinoshanduka, musanganiswa wekudzoreredza snippets yekodhi, mashandiro emasvomhu akareruka, nesting, uye kunyange mavara mabasa.

Dzidza zvimwe

Shanyira webhusaiti yepamutemo pa http://lesscss.org/ kuti udzidze zvakawanda.

Variables

Kugadzirisa mavara uye pixel kukosha muCSS kunogona kurwadza zvishoma, kazhinji kuzere nekopi nekuisa. Kwete neLESS kunyangwe-pa mavara kana pixel kukosha sezvichinjika uye wozvishandura kamwe chete.

Mixins

Iwo matatu matatu emuganho-radius kuzivisa iwe yaunofanirwa kuita mune yenguva dzose ol 'CSS? Ikozvino vadzika kumutsara mumwe nerubatsiro rwemisanganiswa, snippets yekodhi iwe yaunogona kushandisazve chero kupi.

Operations

Gadzira gridhi yako, inotungamira, uye yakanyanya kuchinjika nekuita masvomhu panhunzi nemashandiro. Wanza, patsanura, wedzera, uye bvisa nzira yako kune CSS hutsanana.

Scaffolding uye links

`@bodyBackground`	`@white`	Peji yekumashure ruvara
`@textColor`	`@grayDark`	Default mavara mavara emuviri wese, misoro, nezvimwe
`@linkColor`	`#08c`	Default link mavara mavara
`@linkColorHover`	`darken(@linkColor, 15%)`	Default link mavara hover ruvara

Grid system

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

Typography

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

Matafura

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

Grayscale mavara

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

Accent mavara

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

Zvikamu

Mabhatani

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

Mafomu

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

Fomu nyika uye zviziviso

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

Hero chikwata

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

Pamusoro pemisanganiswa

Basic mixs

A basic mixin inonyanya kusanganisa kana chidimbu chechidimbu cheCSS. Izvo zvakanyorwa sekirasi yeCSS uye zvinogona kudanwa chero kupi.

. chinhu {
  . clearfix ();
}

Parametric musanganiswa

Iyo parametric musanganiswa yakangofanana neyekutanga musanganiswa, asi zvakare inogamuchira paramita (naizvozvo zita) ine sarudzo yekusarudzika tsika.

. chinhu {
  . muganhu - radius ( 4px );
}

Wedzera zvako zviri nyore

Zvinenge zvese zveBootstrap zvakasanganiswa zvakachengetwa mumixins.less, inoshamisa utility .less faira inoita kuti iwe ushandise mixin mune chero .less mafaira mutoolkit.

Saka, enda mberi uye shandisa zviripo kana kunzwa wakasununguka kuwedzera yako sezvaunoda.

Inosanganisirwa misanganiswa

Utilities

Mixin	Parameters	Usage
`.clearfix()`	hapana	Wedzera kune chero mubereki kubvisa zvinoyangarara mukati
`.tab-focus()`	hapana	Isa iyo Webkit yekutarisa maitiro uye yakatenderedza Firefox chinyorwa
`.center-block()`	hapana	Auto pakati pe block-level element uchishandisa`margin: auto`
`.ie7-inline-block()`	hapana	Shandisa kuwedzera kune yenguva dzose `display: inline-block`kuwana IE7 rutsigiro
`.size()`	`@height @width`	Kurumidza kuisa urefu uye hupamhi pamutsara mumwe
`.square()`	`@size`	Inovaka pamusoro `.size()`pekuisa hupamhi nehurefu sehukoshi hwakafanana
`.opacity()`	`@opacity`	Seta, muhuwandu hwakazara, iyo opacity percentage (semuenzaniso, "50" kana "75")

Mafomu

Mixin	Parameters	Usage
`.placeholder()`	`@color: @placeholderText`	Seta `placeholder`mavara emavara ekuisa

Typography

Mixin	Parameters	Usage
`#font > #family > .serif()`	hapana	Gadzira chinhu shandisa serif font stack
`#font > #family > .sans-serif()`	hapana	Gadzira chinhu shandisa sans-serif font stack
`#font > #family > .monospace()`	hapana	Ita chinhu shandisa monospace font stack
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Seta saizi yefonti zviri nyore, uremu, uye kutungamira
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Seta font mhuri kune serif, uye kudzora saizi, uremu, uye kutungamira
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Seta font mhuri kune sans-serif, uye kudzora saizi, uremu, uye kutungamira
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Seta font mhuri kune monospace, uye kudzora saizi, uremu, uye kutungamira

Grid system

Mixin	Parameters	Usage
`.container-fixed()`	hapana	Gadzira chigadziko chakachinjika chekubata zvirimo
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Gadzira pixel grid system (mudziyo, mutsara, uye makoramu) ine n column uye x pixel yakafara gutter.
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Gadzira yazvino grid system ine n column uye x % yakafara gutter
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Gadzira iyo pixel grid system `input`yezvinhu, accounting yepadding uye miganhu
`.makeColumn`	`@columns: 1, @offset: 0`	Shandura chero `div`kuita gidhi column pasina `.span*`makirasi

CSS3 zvivakwa

Mixin	Parameters	Usage
`.border-radius()`	`@radius`	Rongedza makona echinhu. Inogona kuva yakakosha kana mana nzvimbo-yakapatsanurwa kukosha
`.box-shadow()`	`@shadow`	Wedzera mumvuri wekudonha kune chimwe chinhu
`.transition()`	`@transition`	Wedzera CSS3 shanduko mhedzisiro (semuenzaniso, `all .2s linear`)
`.rotate()`	`@degrees`	Tenderedza chinhu n madhigirii
`.scale()`	`@ratio`	Cheresa chinhu kusvika n pekukura kwayo kwepakutanga
`.translate()`	`@x, @y`	Fambisa chinhu pane x uye y ndege
`.background-clip()`	`@clip`	Dhonza kumashure kwechinhu (chinobatsira `border-radius`)
`.background-size()`	`@size`	Dzora saizi yemifananidzo yekumashure kuburikidza neCSS3
`.box-sizing()`	`@boxmodel`	Shandura modhi yebhokisi rechinhu (semuenzaniso, `border-box`hupamhi hwakazara `input`)
`.user-select()`	`@select`	Dzora kusarudzwa kwemavara pane peji
`.backface-visibility()`	`@visibility: visible`	Dzivirira kupenya kwezvinhu kana uchishandisa CSS 3D inoshandura
`.resizable()`	`@direction: both`	Ita kuti chero chinhu chiwedzere kukura kurudyi nepasi
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Ita zviri mukati mechero chinhu shandisa CSS3 makoramu

Backgrounds uye gradients

Mixin	Parameters	Usage
`#translucent > .background()`	`@color: @white, @alpha: 1`	Ipa chinhu ruvara rwekumashure rwunopenya
`#translucent > .border()`	`@color: @white, @alpha: 1`	Ipa chinhu mupendero wakajeka
`#gradient > .vertical()`	`@startColor, @endColor`	Gadzira kuchinjika-browser yakatwasuka kumashure gradient
`#gradient > .horizontal()`	`@startColor, @endColor`	Gadzira muchinjika-browser yakatwasuka kumashure gradient
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Gadzira muchinjika-browser inotungamira kumashure gradient
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Gadzira muchinjika-browser matatu-mavara kumashure gradient
`#gradient > .radial()`	`@innerColor, @outerColor`	Gadzira muchinjika-browser radial kumashure gradient
`#gradient > .striped()`	`@color, @angle`	Gadzira muchinjika-browser mitsetse yekumashure gradient
`#gradientBar()`	`@primaryColor, @secondaryColor`	Inoshandiswa kumabhatani kugovera gradient uye muganhu wakasviba zvishoma

Ongorora: Kana iwe uri kuendesa chikumbiro chekudhonza kuGitHub ine yakagadziridzwa CSS, unofanirwa kudzorera iyo CSS kuburikidza neipi yeidzi nzira.

Zvishandiso zvekugadzira

Node ine makefile

Isa iyo LESS command line compiler uye ugify-js pasi rose ne npm nekumhanyisa unotevera kuraira:

$ npm install -g zvishoma ugify-js

Kana yangoiswa ingomhanya makekubva pamudzi webhootstrap dhairekitori uye mese magadzirira.

Pamusoro pezvo, kana iwe uine watchr yakaiswa, unogona kumhanya make watchkuti bootstrap ivakwe otomatiki pese paunogadzirisa faira mubootstrap lib (izvi hazvidiwe, ingori nyore nzira).

Command line

Isa iyo LESS yekuraira mutsara chishandiso kuburikidza neNode uye mhanyisa unotevera kuraira:

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

Iva nechokwadi chekuisa --compressmumurairo iwoyo kana uri kuedza kuchengetedza mamwe mabhaiti!

Javascript

Dhawunirodha yazvino Les.js uye sanganisira nzira yekuenda nayo (uye Bootstrap) mu <head>.

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

Kuti uunganidze zvakare mafaira .less, ingoachengeta uye worodha peji rako zvakare. Less.js inozviunganidza uye nekuzvichengeta munzvimbo yekuchengetedza.

Unofficial Mac app

Iyo isina pamutemo Mac app inoona madhairekitori e.less mafaira uye inounganidza kodhi kumafaira emunharaunda mushure mesevha yega yega yakatariswa .less faira.

Kana iwe uchida, iwe unogona kushandura zvaunofarira muapp kuti uite miniifying uye iyo dhairekitori iyo akaunganidzwa mafaera anoguma mukati.

Yakavakwa neLESS

Sei ZVINODZIKA?

Chii chinosanganisirwa?

Dzidza zvimwe

Variables

Mixins

Operations

Bootstrap inosiyanisa LESS machinjiro, maitiro avo, uye nhungamiro yekushandisa

Scaffolding uye links

Grid system

Typography

Matafura

Grayscale mavara

Accent mavara

Zvikamu

Mabhatani

Mafomu

Fomu nyika uye zviziviso

Navbar

Dropdowns

Hero chikwata

Bootstrap misanganiswa

Pamusoro pemisanganiswa

Basic mixs

Parametric musanganiswa

Wedzera zvako zviri nyore

Inosanganisirwa misanganiswa

Utilities

Mafomu

Typography

Grid system

CSS3 zvivakwa

Backgrounds uye gradients

Kunyora Bootstrap neLESS

Zvishandiso zvekugadzira

Node ine makefile

Command line

Javascript

Unofficial Mac app

More Mac apps

Crunch

CodeKit

Zviri nyore