Uporaba LESS z Bootstrapom

Prilagodite in razširite Bootstrap z LESS , predprocesorjem CSS, da izkoristite spremenljivke, mixine in drugo, ki se uporablja za izdelavo Bootstrapovega CSS.

Zakaj MANJ?

Bootstrap je narejen z LESS v svojem jedru, dinamičnim jezikom slogov, ki ga je ustvaril naš dober prijatelj Alexis Sellier . Omogoča hitrejši, lažji in zabavnejši razvoj sistemskega CSS.

Kaj je vključeno?

Kot razširitev CSS-ja LESS vključuje spremenljivke, mešanice za večkratno uporabne delčke kode, operacije za preprosto matematiko, gnezdenje in celo barvne funkcije.

Nauči se več

Za več informacij obiščite uradno spletno stran http://lesscss.org/ .

Spremenljivke

Upravljanje barv in vrednosti slikovnih pik v CSS je lahko nekoliko mučno, običajno polno kopiranja in lepljenja. Vendar ne z LESS – dodelite barve ali vrednosti slikovnih pik kot spremenljivke in jih enkrat spremenite.

Mixins

Tiste tri deklaracije polmera obrobe, ki jih morate narediti v običajnem starem CSS? Zdaj so omejeni na eno vrstico s pomočjo mixinov, odrezkov kode, ki jih lahko znova uporabite kjer koli.

Operacije

Naredite svojo mrežo, vodilo in bolj prilagodljivo tako, da sproti računate z operacijami. Množite, delite, seštevajte in odštevajte svojo pot do razumnosti CSS.

Odri in povezave

`@bodyBackground`	`@white`	Barva ozadja strani
`@textColor`	`@grayDark`	Privzeta barva besedila za celotno telo, naslove in drugo
`@linkColor`	`#08c`	Privzeta barva besedila povezave
`@linkColorHover`	`darken(@linkColor, 15%)`	Privzeta barva besedila povezave

Mrežni sistem

`@gridColumns`	12
`@gridColumnWidth`	60 slikovnih pik
`@gridGutterWidth`	20 slikovnih pik
`@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	Morajo biti slikovne pike
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 slikovnih pik	Morajo biti slikovne pike
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Mize

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

Sivine barve

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

Poudarjene barve

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

Komponente

Gumbi

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

Obrazci

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

Oblikujte stanja in opozorila

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

Navbar

`@navbarHeight`	40 slikovnih pik
`@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`

Spustni meniji

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

Herojska enota

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

O miksinih

Osnovni miksini

Osnovni mixin je v bistvu vključitev ali del za delček CSS. Napisani so tako kot razred CSS in jih je mogoče poklicati kjer koli.

. element {
  . clearfix ();
}

Parametrične mešanice

Parametrični mixin je tako kot osnovni mixin, vendar sprejema tudi parametre (od tod tudi ime) z neobveznimi privzetimi vrednostmi.

. element {
  . obroba - polmer ( 4px );
}

Preprosto dodajte svoje

Skoraj vsi Bootstrapovi miksini so shranjeni v mixins.less, čudoviti uporabniški datoteki .less, ki vam omogoča uporabo miksinov v kateri koli od datotek .less v kompletu orodij.

Torej, nadaljujte in uporabite obstoječe ali pa po potrebi dodajte svoje.

Vključeni miksini

Pripomočki

Mixin	Parametri	Uporaba
`.clearfix()`	nič	Dodajte kateremu koli nadrejenemu elementu, da počistite lebdeče znotraj
`.tab-focus()`	nič	Uporabite slog fokusa Webkit in zaokrožite oris Firefoxa
`.center-block()`	nič	Samodejno centriranje elementa na ravni bloka z uporabo`margin: auto`
`.ie7-inline-block()`	nič	Uporabite poleg običajnega `display: inline-block`, da dobite podporo za IE7
`.size()`	`@height @width`	Hitro nastavite višino in širino v eni vrstici
`.square()`	`@size`	Nadgrajuje `.size()`za nastavitev širine in višine kot enake vrednosti
`.opacity()`	`@opacity`	V celih številih nastavite odstotek motnosti (npr. "50" ali "75")

Obrazci

Mixin	Parametri	Uporaba
`.placeholder()`	`@color: @placeholderText`	Nastavite `placeholder`barvo besedila za vnose

Tipografija

Mixin	Parametri	Uporaba
`#font > #family > .serif()`	nič	Naj element uporablja sklad serifnih pisav
`#font > #family > .sans-serif()`	nič	Naj element uporablja sklad pisav sans-serif
`#font > #family > .monospace()`	nič	Naj element uporablja sklad pisav z enoprostornim prostorom
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Preprosto nastavite velikost pisave, težo in vodilo
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Nastavite družino pisav na serif in nadzirajte velikost, težo in vodilo
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Nastavite družino pisav na sans-serif in nadzirajte velikost, težo in vodilo
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Nastavite družino pisav na monospace in nadzirajte velikost, težo in vodilo

Mrežni sistem

Mixin	Parametri	Uporaba
`.container-fixed()`	nič	Ustvarite vodoravno centrirano posodo za shranjevanje vaše vsebine
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Ustvarite sistem mreže slikovnih pik (vsebnik, vrstica in stolpci) z n stolpci in x slikovnih pik širokim žlebom
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Ustvarite precentni mrežni sistem z n stolpci in x % širokim žlebom
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Ustvarite sistem mreže slikovnih pik za `input`elemente, pri čemer upoštevajte oblazinjenje in obrobe
`.makeColumn`	`@columns: 1, @offset: 0`	Poljubno `div`spremenite v stolpec mreže brez `.span*`razredov

lastnosti CSS3

Mixin	Parametri	Uporaba
`.border-radius()`	`@radius`	Zaokrožite vogale elementa. Lahko je ena vrednost ali štiri vrednosti, ločene s presledki
`.box-shadow()`	`@shadow`	Dodajte senco elementu
`.transition()`	`@transition`	Dodajte učinek prehoda CSS3 (npr. `all .2s linear`)
`.rotate()`	`@degrees`	Zavrtite element za n stopinj
`.scale()`	`@ratio`	Povečaj element na n -kratno prvotno velikost
`.translate()`	`@x, @y`	Premaknite element na ravnini x in y
`.background-clip()`	`@clip`	Obrežite ozadje elementa (uporabno za `border-radius`)
`.background-size()`	`@size`	Nadzorujte velikost slik ozadja prek CSS3
`.box-sizing()`	`@boxmodel`	Spremenite model polja za element (npr. `border-box`za polno širino `input`)
`.user-select()`	`@select`	Nadzor izbire besedila s kazalcem na strani
`.backface-visibility()`	`@visibility: visible`	Preprečite utripanje vsebine pri uporabi 3D transformacij CSS
`.resizable()`	`@direction: both`	Poljubnemu elementu spremenite velikost na desni in spodnji strani
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Naj vsebina katerega koli elementa uporablja stolpce CSS3

Ozadja in prelivi

Mixin	Parametri	Uporaba
`#translucent > .background()`	`@color: @white, @alpha: 1`	Elementu dajte prosojno barvo ozadja
`#translucent > .border()`	`@color: @white, @alpha: 1`	Elementu dajte prosojno barvo obrobe
`#gradient > .vertical()`	`@startColor, @endColor`	Ustvarite navpični preliv ozadja med brskalniki
`#gradient > .horizontal()`	`@startColor, @endColor`	Ustvarite vodoravni preliv ozadja med brskalniki
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Ustvarite usmerjeni preliv ozadja med brskalniki
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Ustvarite tribarvni preliv ozadja med brskalniki
`#gradient > .radial()`	`@innerColor, @outerColor`	Ustvarite radialni preliv ozadja med brskalniki
`#gradient > .striped()`	`@color, @angle`	Ustvarite preliv črtastega ozadja med brskalniki
`#gradientBar()`	`@primaryColor, @secondaryColor`	Uporablja se za gumbe za dodelitev preliva in nekoliko temnejše obrobe

Opomba: Če pošiljate zahtevo za vlečenje GitHubu s spremenjenim CSS, morate znova prevesti CSS s katero koli od teh metod.

Orodja za prevajanje

Vozlišče z makefile

Namestite prevajalnik ukazne vrstice LESS in uglify-js globalno z npm tako, da zaženete naslednji ukaz:

$ npm install -g less uglify-js

Po namestitvi samo zaženite makeiz korena svojega zagonskega imenika in vse je pripravljeno.

Poleg tega, če imate nameščen watchr , lahko zaženete make watch, da se bootstrap samodejno znova zgradi vsakič, ko uredite datoteko v bootstrap lib (to ni obvezno, le priročna metoda).

Ukazna vrstica

Namestite orodje ukazne vrstice LESS prek Node in zaženite naslednji ukaz:

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

Ne pozabite vključiti --compressv ta ukaz, če poskušate shraniti nekaj bajtov!

Javascript

Prenesite najnovejši Less.js in vključite pot do njega (in Bootstrap) v <head>.

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

Če želite znova prevesti datoteke .less, jih preprosto shranite in znova naložite stran. Less.js jih prevede in shrani v lokalno shrambo.

Neuradna aplikacija za Mac

Neuradna aplikacija za Mac spremlja imenike datotek .less in prevaja kodo v lokalne datoteke po vsakem shranjevanju opazovane datoteke .less.

If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

Zgrajeno z MANJ

Zakaj MANJ?

Kaj je vključeno?

Nauči se več

Spremenljivke

Mixins

Operacije

Bootstrap spremenljivke Spremenljivke LESS, njihove vrednosti in smernice za uporabo

Odri in povezave

Mrežni sistem

Tipografija

Mize

Sivine barve

Poudarjene barve

Komponente

Gumbi

Obrazci

Oblikujte stanja in opozorila

Navbar

Spustni meniji

Herojska enota

Bootstrap mešanice

O miksinih

Osnovni miksini

Parametrične mešanice

Preprosto dodajte svoje

Vključeni miksini

Pripomočki

Obrazci

Tipografija

Mrežni sistem

lastnosti CSS3

Ozadja in prelivi

Prevajanje Bootstrapa z LESS

Orodja za prevajanje

Vozlišče z makefile

Ukazna vrstica

Javascript

Neuradna aplikacija za Mac

More Mac apps

Crunch

CodeKit

Simpless