Ինչու՞ ՔԻՉ

Bootstrap-ը պատրաստված է LESS-ի հիմքում, դինամիկ ոճի լեզվով, որը ստեղծվել է մեր լավ ընկեր Ալեքսիս Սելլիերի կողմից : Այն դարձնում է համակարգերի վրա հիմնված CSS-ի մշակումն ավելի արագ, հեշտ և ավելի զվարճալի:

Ի՞նչ է ներառված:

Որպես CSS-ի ընդլայնում, LESS-ը ներառում է փոփոխականներ, միքսներ կոդի վերօգտագործելի հատվածների համար, գործողություններ պարզ մաթեմատիկայի, բնադրման և նույնիսկ գունային ֆունկցիաների համար:

Իմացեք ավելին

Այցելեք պաշտոնական կայքը՝ http://lesscss.org/ ՝ ավելին իմանալու համար:

Փոփոխականներ

CSS-ում գույների և պիքսելների արժեքների կառավարումը կարող է մի փոքր դժվար լինել, որը սովորաբար լի է պատճեններով և տեղադրմամբ: Սակայն ոչ LESS-ով, գույները կամ պիքսելային արժեքները նշանակեք որպես փոփոխականներ և փոխեք դրանք մեկ անգամ:

Միքսիններ

Այդ երեք սահմանային շառավղային հայտարարագրերը, որոնք դուք պետք է կատարեք սովորական CSS-ում: Այժմ դրանք իջել են մեկ տողի՝ միքսինների օգնությամբ, կոդի հատվածներ, որոնք կարող եք նորից օգտագործել ցանկացած վայրում:

Գործողություններ

Դարձրեք ձեր ցանցը, առաջատարը և ավելի գերճկուն՝ կատարելով մաթեմատիկական գործողությունները թռիչքի ժամանակ: Բազմապատկեք, բաժանեք, ավելացրեք և հանեք ձեր ճանապարհը դեպի CSS ողջախոհություն:

Փայտամածեր և հղումներ

@bodyBackground	@white	Էջի ֆոնի գույնը
@textColor	@grayDark	Տեքստի կանխադրված գույնը ամբողջ մարմնի, վերնագրերի և այլնի համար
@linkColor	#08c	Հղման տեքստի կանխադրված գույնը
@linkColorHover	darken(@linkColor, 15%)	Հղման տեքստի կանխադրված սավառնողի գույնը

Ցանցային համակարգ

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

Տպագրություն

@sansFontFamily	«Helvetica Neue», Helvetica, Arial, sans-serif
@serifFontFamily	Georgia, "Times New Roman", Times, serif
@monoFontFamily	Մենլո, Մոնակո, «Courier New», մոնոսփեյս
@baseFontSize	13px	Պետք է լինի պիքսել
@baseFontFamily	@sansFontFamily
@baseLineHeight	18px	Պետք է լինի պիքսել
@altFontFamily	@serifFontFamily
@headingsFontFamily	inherit
@headingsFontWeight	bold
@headingsColor	inherit

Սեղաններ

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

Մոխրագույն գույներ

@black	#000
@grayDarker	#222
@grayDark	#333
@gray	#555
@grayLight	#999
@grayLighter	#էէէ
@white	#ֆֆֆ

Շեշտադրման գույներ

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

Կոճակներ

@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

Ձևաթղթեր

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

Ձևավորել վիճակներ և ահազանգեր

@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

Բացվող պատուհաններ

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

Հերոսի միավոր

@heroUnitBackground	@grayLighter
@heroUnitHeadingColor	inherit
@heroUnitLeadColor	inhereit

Հիմնական խառնուրդներ

Հիմնական միքսինը, ըստ էության, ներառում է կամ մասնակի CSS-ի հատվածի համար: Դրանք գրված են ճիշտ այնպես, ինչպես CSS դասը և կարող են կանչվել ցանկացած վայրում:

. տարր {
  . հստակեցում ();
}

Պարամետրային խառնուրդներ

Պարամետրային միքսինը նման է հիմնական միքսինին, բայց այն նաև ընդունում է պարամետրեր (այստեղից՝ անվանումը) կամընտիր լռելյայն արժեքներով:

. տարր {
  . եզրագիծ - շառավիղ ( 4px );
}

Հեշտությամբ ավելացրեք ձեր սեփականը

Bootstrap-ի գրեթե բոլոր միքսները պահվում են mixins.less-ում, հիանալի օգտակար .less ֆայլ, որը հնարավորություն է տալիս օգտագործել mixin գործիքակազմի .less ֆայլերից որևէ մեկում:

Այսպիսով, առաջ գնացեք և օգտագործեք գոյություն ունեցողները կամ ազատ զգալ ավելացրեք ձերը, ինչպես ձեզ հարկավոր է:

Հանգույց՝ makefile-ով

Տեղադրեք LESS հրամանի տողի կոմպիլյատորը և uglify-js-ը գլոբալ npm-ով` գործարկելով հետևյալ հրամանը.

$ npm install -g պակաս uglify-js

Տեղադրվելուց հետո պարզապես գործարկեք makeձեր bootstrap գրացուցակի արմատից և ամեն ինչ պատրաստ է:

Բացի այդ, եթե դուք տեղադրել եք watchr , դուք կարող եք վազել make watch, որպեսզի bootstrap-ը ավտոմատ կերպով վերակառուցվի ամեն անգամ, երբ ֆայլը խմբագրում եք bootstrap lib-ում (սա պարտադիր չէ, պարզապես հարմար մեթոդ է):

Հրամանի տող

Տեղադրեք LESS հրամանի տող գործիքը Node-ի միջոցով և գործարկեք հետևյալ հրամանը.

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

Համոզվեք, որ ներառեք --compressայդ հրամանի մեջ, եթե փորձում եք պահպանել որոշ բայթեր:

Javascript

Ներբեռնեք վերջին Less.js-ը և ներառեք դրա ուղին (և Bootstrap-ը) ներդիրում <head>:

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

.less ֆայլերը վերակազմավորելու համար պարզապես պահեք դրանք և վերաբեռնեք ձեր էջը: Less.js-ը դրանք հավաքում և պահում է տեղական պահեստում:

Ոչ պաշտոնական Mac հավելված

Mac-ի ոչ պաշտոնական հավելվածը դիտում է .less ֆայլերի դիրեկտորիաներ և հավաքում կոդը տեղական ֆայլերում դիտված .less ֆայլի յուրաքանչյուր պահումից հետո:

Եթե ​​ցանկանում եք, կարող եք փոխարկել հավելվածի նախապատվությունները՝ ավտոմատ նվազագույնի հասցնելու համար, և թե որ գրացուցակում են հայտնվում կազմված ֆայլերը:

Ավելի շատ Mac հավելվածներ

Ճռճռոց

Crunch-ը հիանալի տեսք ունեցող LESS խմբագիր և կոմպիլյատոր է՝ կառուցված Adobe Air-ի վրա:

CodeKit

Ստեղծվել է նույն անձի կողմից, ինչ ոչ պաշտոնական Mac հավելվածը, CodeKit-ը Mac հավելված է, որը կազմում է LESS, SASS, Stylus և CoffeeScript:

Պարզ

Mac, Linux և PC հավելված՝ ՔԱՂԱՔ ֆայլեր քաշելու և թողնելու համար: Բացի այդ, աղբյուրի կոդը գտնվում է GitHub-ում :