Korištenje LESS s Bootstrapom

Prilagodite i proširite Bootstrap s LESS -om, CSS predprocesorom, kako biste iskoristili prednosti varijabli, mixina i još mnogo toga što se koristi za izradu Bootstrapovog CSS-a.

Zašto MANJE?

Bootstrap je izrađen s LESS-om u svojoj jezgri, dinamičnim stilskim jezikom koji je stvorio naš dobar prijatelj, Alexis Sellier . Čini razvijanje CSS-a temeljenog na sustavima bržim, lakšim i zabavnijim.

Što je uključeno?

Kao proširenje CSS-a, LESS uključuje varijable, mixins za ponovno upotrebljive isječke koda, operacije za jednostavnu matematiku, gniježđenje, pa čak i funkcije boja.

Saznajte više

Posjetite službenu web stranicu na http://lesscss.org/ kako biste saznali više.

Varijable

Upravljanje bojama i vrijednostima piksela u CSS-u može biti pomalo mučno, obično puno kopiranja i lijepljenja. Ali ne s MANJE — dodijelite boje ili vrijednosti piksela kao varijable i promijenite ih jednom.

Mixins

One tri deklaracije radijusa obruba koje trebate napraviti u običnom starom CSS-u? Sada su svedeni na jedan redak uz pomoć mixina, isječaka koda koje možete ponovno upotrijebiti bilo gdje.

Operacije

Učinite svoju mrežu, vodeći i još više super fleksibilnom radeći matematiku u hodu s operacijama. Množite, dijelite, zbrajajte i oduzimajte svoj put do razumnog CSS-a.

Skele i karike

`@bodyBackground`	`@white`	Boja pozadine stranice
`@textColor`	`@grayDark`	Zadana boja teksta za cijelo tijelo, naslove i ostalo
`@linkColor`	`#08c`	Zadana boja teksta veze
`@linkColorHover`	`darken(@linkColor, 15%)`	Zadana boja teksta veze

Mrežni sustav

`@gridColumns`	12
`@gridColumnWidth`	60 px
`@gridGutterWidth`	20 px
`@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	Moraju biti pikseli
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 px	Moraju biti pikseli
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Stolovi

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

Boje sivih tonova

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

Akcentne boje

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

Obrasci

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

Formirajte stanja i upozorenja

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

Navigacijska traka

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

padajuće liste

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

Jedinica heroja

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

O miksinima

Osnovni miksini

Osnovni mixin je u biti uključen ili djelomičan za isječak CSS-a. Napisane su kao CSS klasa i mogu se pozvati bilo gdje.

. element {
  . clearfix ();
}

Parametarski miksini

Parametarski mixin je kao i osnovni mixin, ali također prihvaća parametre (otuda i naziv) s neobaveznim zadanim vrijednostima.

. element {
  . granica - radijus ( 4px );
}

Jednostavno dodajte svoje

Gotovo svi Bootstrapovi mixini pohranjeni su u mixins.less, prekrasnoj uslužnoj .less datoteci koja vam omogućuje korištenje mixina u bilo kojoj od .less datoteka u kompletu alata.

Dakle, samo naprijed i koristite postojeće ili slobodno dodajte vlastite prema potrebi.

Uključeni miksini

Komunalije

Mixin	Parametri	Korištenje
`.clearfix()`	nikakav	Dodajte bilo kojem nadređenom elementu da biste izbrisali plutajuće elemente unutar njega
`.tab-focus()`	nikakav	Primijenite Webkit fokus stil i okrugli obris Firefoxa
`.center-block()`	nikakav	Automatsko centriranje elementa na razini bloka pomoću`margin: auto`
`.ie7-inline-block()`	nikakav	Upotrijebite uz redovnu `display: inline-block`da biste dobili podršku za IE7
`.size()`	`@height @width`	Brzo postavite visinu i širinu na jednom retku
`.square()`	`@size`	Nadovezuje se na `.size()`postavljanje širine i visine kao iste vrijednosti
`.opacity()`	`@opacity`	Postavite, u cijelim brojevima, postotak neprozirnosti (npr. "50" ili "75")

Obrasci

Mixin	Parametri	Korištenje
`.placeholder()`	`@color: @placeholderText`	Postavite `placeholder`boju teksta za unose

Tipografija

Mixin	Parametri	Korištenje
`#font > #family > .serif()`	nikakav	Učinite da element koristi niz serifnih fontova
`#font > #family > .sans-serif()`	nikakav	Učinite da element koristi snop fontova sans-serif
`#font > #family > .monospace()`	nikakav	Učinite da element koristi monospace font stog
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Jednostavno postavite veličinu fonta, težinu i početnu stranu
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Postavite obitelj fonta na serif i kontrolirajte veličinu, težinu i početnu stranu
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Postavite obitelj fonta na sans-serif i kontrolirajte veličinu, težinu i početnu stranu
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Postavite obitelj fonta na monospace i kontrolirajte veličinu, težinu i početnu stranu

Mrežni sustav

Mixin	Parametri	Korištenje
`.container-fixed()`	nikakav	Napravite horizontalno centrirani spremnik za držanje vašeg sadržaja
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Generirajte sustav pikselske mreže (spremnik, redak i stupci) s n stupaca i x piksela širokim olukom
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Generirajte sustav trenutne mreže s n stupaca i x % širokim međuprostorom
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Generirajte sustav pikselske mreže za `input`elemente, uzimajući u obzir ispunu i obrube
`.makeColumn`	`@columns: 1, @offset: 0`	Pretvorite bilo koji `div`u stupac mreže bez `.span*`klasa

CSS3 svojstva

Mixin	Parametri	Korištenje
`.border-radius()`	`@radius`	Zaokružite uglove elementa. Može biti jedna vrijednost ili četiri vrijednosti odvojene razmakom
`.box-shadow()`	`@shadow`	Dodajte sjenu elementu
`.transition()`	`@transition`	Dodaj CSS3 efekt prijelaza (npr., `all .2s linear`)
`.rotate()`	`@degrees`	Rotirajte element za n stupnjeva
`.scale()`	`@ratio`	Skalirajte element na n puta njegovu izvornu veličinu
`.translate()`	`@x, @y`	Pomaknite element u ravninama x i y
`.background-clip()`	`@clip`	Izrežite pozadinu elementa (korisno za `border-radius`)
`.background-size()`	`@size`	Kontrolirajte veličinu pozadinskih slika putem CSS3
`.box-sizing()`	`@boxmodel`	Promjena modela okvira za element (npr. `border-box`za punu širinu `input`)
`.user-select()`	`@select`	Kontrola odabira kursora teksta na stranici
`.backface-visibility()`	`@visibility: visible`	Spriječite treperenje sadržaja pri korištenju CSS 3D transformacija
`.resizable()`	`@direction: both`	Neka bilo koji element može mijenjati veličinu s desne i donje strane
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Neka sadržaj bilo kojeg elementa koristi CSS3 stupce

Pozadine i gradijenti

Mixin	Parametri	Korištenje
`#translucent > .background()`	`@color: @white, @alpha: 1`	Dajte elementu prozirnu boju pozadine
`#translucent > .border()`	`@color: @white, @alpha: 1`	Dajte elementu prozirnu boju obruba
`#gradient > .vertical()`	`@startColor, @endColor`	Stvorite vertikalni gradijent pozadine za više preglednika
`#gradient > .horizontal()`	`@startColor, @endColor`	Stvorite horizontalni pozadinski gradijent za više preglednika
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Stvorite usmjereni pozadinski gradijent za više preglednika
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Stvorite gradijent pozadine u tri boje za više preglednika
`#gradient > .radial()`	`@innerColor, @outerColor`	Stvorite radijalni pozadinski gradijent za više preglednika
`#gradient > .striped()`	`@color, @angle`	Stvorite prugasti pozadinski gradijent za više preglednika
`#gradientBar()`	`@primaryColor, @secondaryColor`	Koristi se za gumbe za dodjelu gradijenta i nešto tamnijeg obruba

Napomena: ako GitHubu šaljete zahtjev za povlačenje s izmijenjenim CSS-om, morate ponovno kompajlirati CSS bilo kojom od ovih metoda.

Alati za sastavljanje

Čvor s makefileom

Instalirajte LESS kompilator naredbenog retka i uglify-js globalno s npm-om pokretanjem sljedeće naredbe:

$ npm install -g less uglify-js

Jednom instaliran samo pokrenite makeiz korijena svog bootstrap direktorija i sve je spremno.

Osim toga, ako imate instaliran watchr , možete pokrenuti make watchda se bootstrap automatski ponovno izgradi svaki put kada uređujete datoteku u bootstrap lib (ovo nije potrebno, samo praktična metoda).

Naredbeni redak

Instalirajte LESS alat naredbenog retka putem Nodea i pokrenite sljedeću naredbu:

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

Obavezno uključite --compresstu naredbu ako pokušavate uštedjeti neke bajtove!

Javascript

Preuzmite najnoviji Less.js i uključite put do njega (i Bootstrapa) u <head>.

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

Za ponovno kompajliranje .less datoteka, samo ih spremite i ponovno učitajte svoju stranicu. Less.js ih kompajlira i pohranjuje u lokalnu pohranu.

Neslužbena Mac aplikacija

Neslužbena Mac aplikacija prati direktorije .less datoteka i kompajlira kod u lokalne datoteke nakon svakog spremanja promatrane .less datoteke.

Ako želite, možete promijeniti postavke u aplikaciji za automatsko smanjivanje i direktorij u kojem kompajlirane datoteke završavaju.

Izgrađeno s MANJE

Zašto MANJE?

Što je uključeno?

Saznajte više

Varijable

Mixins

Operacije

Bootstrap varijable LESS varijable, njihove vrijednosti i upute za korištenje

Skele i karike

Mrežni sustav

Tipografija

Stolovi

Boje sivih tonova

Akcentne boje

Komponente

Gumbi

Obrasci

Formirajte stanja i upozorenja

Navigacijska traka

padajuće liste

Jedinica heroja

Bootstrap mixins

O miksinima

Osnovni miksini

Parametarski miksini

Jednostavno dodajte svoje

Uključeni miksini

Komunalije

Obrasci

Tipografija

Mrežni sustav

CSS3 svojstva

Pozadine i gradijenti

Kompajliranje Bootstrapa s LESS

Alati za sastavljanje

Čvor s makefileom

Naredbeni redak

Javascript

Neslužbena Mac aplikacija

Više Mac aplikacija

Škripanje

CodeKit

Jednostavno