Korištenje LESS sa Bootstrapom

Prilagodite i proširite Bootstrap sa LESS , CSS pretprocesorom, kako biste iskoristili prednosti varijabli, miksina i još mnogo toga što se koristi za izgradnju Bootstrap-ovog CSS-a.

Zašto MANJE?

Bootstrap je napravljen sa LESS-om u svojoj srži, dinamičkim stilskim jezikom koji je kreirao naš dobar prijatelj, Alexis Sellier . To čini razvoj sistemskog CSS-a bržim, lakšim i zabavnijim.

Šta je uključeno?

Kao proširenje CSS-a, LESS uključuje varijable, miksine za višekratnu upotrebu isječaka koda, operacije za jednostavnu matematiku, ugniježđenje, pa čak i funkcije boja.

Nauči više

Posjetite službenu web stranicu na http://lesscss.org/ da saznate više.

Varijable

Upravljanje bojama i vrijednostima piksela u CSS-u može biti malo muka, obično puno kopiranja i lijepljenja. Ali ne sa LESS – dodijelite boje ili vrijednosti piksela kao varijable i promijenite ih jednom.

Mixins

One tri deklaracije radijusa granice koje trebate napraviti u običnom starom CSS-u? Sada su svedeni na jedan red uz pomoć miksina, isječaka koda koje možete ponovo koristiti bilo gdje.

Operacije

Učinite svoju mrežu, vodeći i super fleksibilnijim tako što ćete raditi matematiku u hodu s operacijama. Množite, dijelite, sabirajte i oduzimajte svoj put do CSS razuma.

Skele i veze

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

Mrežni sistem

`@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	Mora biti piksela
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Mora biti piksela
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Stolovi

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

Boje u nijansama sive

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

Akcentne boje

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

Komponente

Dugmad

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

Forms

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

Stanja obrazaca i upozorenja

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

Padajući meni

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

Jedinica heroja

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

O miksinama

Basic mixins

Osnovni mixin je u suštini uključen ili parcijalni isječak CSS-a. Napisane su baš kao CSS klasa i mogu se pozvati bilo gdje.

. element {
  . clearfix ();
}

Parametric mixins

Parametarski miksin je kao osnovni miksin, ali takođe prihvata parametre (otuda i ime) sa opcionim podrazumevanim vrednostima.

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

Lako dodajte svoje

Skoro svi Bootstrap-ovi miksini su pohranjeni u mixins.less, divnom uslužnom .less fajlu koji vam omogućava da koristite mixin u bilo kojem od .less fajlova u kompletu alata.

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

Uključeni mixins

Komunalne usluge

Mixin	Parametri	Upotreba
`.clearfix()`	nijedan	Dodajte bilo kojem roditelju za brisanje plutajućih unutar
`.tab-focus()`	nijedan	Primijenite Webkit stil fokusa i zaokružite Firefox obris
`.center-block()`	nijedan	Automatsko centriranje elementa na nivou bloka pomoću`margin: auto`
`.ie7-inline-block()`	nijedan	Koristite pored redovnog `display: inline-block`da dobijete podršku za IE7
`.size()`	`@height @width`	Brzo postavite visinu i širinu na jednu liniju
`.square()`	`@size`	Nadovezuje se `.size()`na postavljanje širine i visine kao iste vrijednosti
`.opacity()`	`@opacity`	Postavite, cijelim brojevima, postotak neprozirnosti (npr. "50" ili "75")

Forms

Mixin	Parametri	Upotreba
`.placeholder()`	`@color: @placeholderText`	Postavite `placeholder`boju teksta za unos

Tipografija

Mixin	Parametri	Upotreba
`#font > #family > .serif()`	nijedan	Neka element koristi niz serifnih fontova
`#font > #family > .sans-serif()`	nijedan	Neka element koristi font bez serifa
`#font > #family > .monospace()`	nijedan	Neka element koristi monospace font
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Lako podesite veličinu fonta, težinu i vođstvo
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Postavite familiju fontova na serif i kontrolirajte veličinu, težinu i vođstvo
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Postavite familiju fontova na sans-serif i kontrolirajte veličinu, težinu i vođstvo
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Postavite familiju fontova na monospace i kontrolirajte veličinu, težinu i vođstvo

Mrežni sistem

Mixin	Parametri	Upotreba
`.container-fixed()`	nijedan	Napravite horizontalno centriran kontejner za držanje vašeg sadržaja
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Generirajte sistem piksela mreže (kontejner, red i kolone) s n kolona i x žlijeb širine piksela
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Generirajte sistem procenta mreže sa n kolona i x % širokim olukom
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Generirajte sistem piksela mreže za `input`elemente, uzimajući u obzir padding i granice
`.makeColumn`	`@columns: 1, @offset: 0`	Pretvorite bilo koji `div`u kolonu mreže bez `.span*`klasa

CSS3 svojstva

Mixin	Parametri	Upotreba
`.border-radius()`	`@radius`	Zaokružite uglove elementa. Može biti jedna vrijednost ili četiri vrijednosti razdvojene razmakom
`.box-shadow()`	`@shadow`	Dodajte sjenku elementu
`.transition()`	`@transition`	Dodajte CSS3 efekt tranzicije (npr. `all .2s linear`)
`.rotate()`	`@degrees`	Rotirajte element za n stepeni
`.scale()`	`@ratio`	Skalirajte element na n puta njegovu originalnu veličinu
`.translate()`	`@x, @y`	Pomjerite element na x i y ravnima
`.background-clip()`	`@clip`	Izrežite pozadinu elementa (korisno za `border-radius`)
`.background-size()`	`@size`	Kontrolirajte veličinu pozadinskih slika putem CSS3
`.box-sizing()`	`@boxmodel`	Promijenite model kutije za element (npr. `border-box`za punu širinu `input`)
`.user-select()`	`@select`	Kontrolirajte odabir teksta kursora na stranici
`.backface-visibility()`	`@visibility: visible`	Spriječite treperenje sadržaja kada koristite CSS 3D transformacije
`.resizable()`	`@direction: both`	Neka bilo koji element može promijeniti veličinu na desnoj i donjoj strani
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Neka sadržaj bilo kojeg elementa koristi CSS3 stupce
`.hyphens()`	`@mode: auto`	CSS3 hifenacija kada to želite (uključuje `word-wrap: break-word`)

Pozadine i gradijenti

Mixin	Parametri	Upotreba
`#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`	Napravite vertikalni gradijent pozadine za više pretraživača
`#gradient > .horizontal()`	`@startColor, @endColor`	Kreirajte horizontalni gradijent pozadine za više pretraživača
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Kreirajte pozadinski gradijent usmjerenog u više pretraživača
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Kreirajte pozadinski gradijent u tri boje za više pregledača
`#gradient > .radial()`	`@innerColor, @outerColor`	Kreirajte radijalni gradijent pozadine za više pretraživača
`#gradient > .striped()`	`@color, @angle`	Kreirajte prugasti gradijent pozadine za više pretraživača
`#gradientBar()`	`@primaryColor, @secondaryColor`	Used for buttons to assign a gradient and slightly darker border

Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.

Tools for compiling

Node with makefile

Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:

$ npm install -g less jshint recess uglify-js

Once installed just run make from the root of your bootstrap directory and you're all set.

Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

Command line

Instalirajte alat LESS komandne linije preko Node i pokrenite sljedeću naredbu:

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

Obavezno uključite --compresstu naredbu ako pokušavate sačuvati neke bajtove!

Javascript

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

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

Da ponovo kompajlirate .less fajlove, samo ih sačuvajte i ponovo učitajte svoju stranicu. Less.js ih kompajlira i pohranjuje u lokalnu pohranu.

Nezvanična Mac aplikacija

The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.

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

Izgrađen sa MANJE

Zašto MANJE?

Šta je uključeno?

Nauči više

Varijable

Mixins

Operacije

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

Skele i veze

Mrežni sistem

Tipografija

Stolovi

Boje u nijansama sive

Akcentne boje

Komponente

Dugmad

Forms

Stanja obrazaca i upozorenja

Navbar

Padajući meni

Jedinica heroja

Bootstrap mixins

O miksinama

Basic mixins

Parametric mixins

Lako dodajte svoje

Uključeni mixins

Komunalne usluge

Forms

Tipografija

Mrežni sistem

CSS3 svojstva

Pozadine i gradijenti

Compiling Bootstrap with LESS

Tools for compiling

Node with makefile

Command line

Javascript

Nezvanična Mac aplikacija

More Mac apps

Crunch

CodeKit

Simpless