Օգտագործելով LESS-ը Bootstrap-ով

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

Ինչու՞ ՔԻՉ

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`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

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

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

Միքսների մասին

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

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

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

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

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

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

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

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

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

Ներառված խառնուրդներ

Կոմունալ ծառայություններ

Միքսին	Պարամետրեր	Օգտագործումը
`.clearfix()`	ոչ ոք	Ավելացրե՛ք ցանկացած ծնողի մեջ՝ լողացողները մաքրելու համար
`.tab-focus()`	ոչ ոք	Կիրառեք Webkit կենտրոնացման ոճը և կլորացրեք Firefox-ի ուրվագիծը
`.center-block()`	ոչ ոք	Ավտոմատ կենտրոնացրեք բլոկի մակարդակի տարրը՝ օգտագործելով`margin: auto`
`.ie7-inline-block()`	ոչ ոք	Օգտագործեք սովորականից բացի՝ `display: inline-block`IE7 աջակցություն ստանալու համար
`.size()`	`@height @width`	Արագորեն սահմանեք բարձրությունը և լայնությունը մեկ տողի վրա
`.square()`	`@size`	Կառուցվում է `.size()`լայնությունը և բարձրությունը որպես նույն արժեք սահմանելու համար
`.opacity()`	`@opacity`	Ամբողջ թվերով սահմանեք անթափանցիկության տոկոսը (օրինակ՝ «50» կամ «75»)

Ձևաթղթեր

Միքսին	Պարամետրեր	Օգտագործումը
`.placeholder()`	`@color: @placeholderText`	Սահմանեք `placeholder`տեքստի գույնը մուտքագրման համար

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

Միքսին	Պարամետրեր	Օգտագործումը
`#font > #family > .serif()`	ոչ ոք	Կատարեք տարր՝ օգտագործելով սերիֆ տառատեսակների կույտ
`#font > #family > .sans-serif()`	ոչ ոք	Կատարեք տարր՝ օգտագործելով sans-serif տառատեսակի կույտ
`#font > #family > .monospace()`	ոչ ոք	Դարձրեք տարրը օգտագործել monospace տառատեսակների կույտ
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Հեշտությամբ սահմանեք տառատեսակի չափը, քաշը և առաջատարը
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Սահմանեք տառատեսակների ընտանիքը սերիֆի վրա և վերահսկեք չափը, քաշը և առաջատարը
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Սահմանեք տառատեսակների ընտանիքը sans-serif և վերահսկեք չափը, քաշը և առաջատարը
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Սահմանեք տառատեսակների ընտանիքը մոնոսփեյսի վրա և վերահսկեք չափը, քաշը և առաջատարը

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

Միքսին	Պարամետրեր	Օգտագործումը
`.container-fixed()`	ոչ ոք	Ստեղծեք հորիզոնական կենտրոնացված կոնտեյներ՝ ձեր բովանդակությունը պահելու համար
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Ստեղծեք պիքսելային ցանցային համակարգ (կոնտեյներ, տող և սյունակ) n սյունակով և x պիքսել լայն հեղեղով
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Ստեղծեք տոկոսային ցանցային համակարգ n սյունակով և x % լայնությամբ ջրհորով
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Ստեղծեք պիքսելային ցանցային համակարգը `input`տարրերի համար, հաշվառելով լիցքավորումը և եզրագծերը
`.makeColumn`	`@columns: 1, @offset: 0`	Ցանկացածը վերածեք `div`ցանցի սյունակի՝ առանց `.span*`դասերի

CSS3 հատկություններ

Միքսին	Պարամետրեր	Օգտագործումը
`.border-radius()`	`@radius`	Կլորացրեք տարրի անկյունները: Կարող է լինել մեկ արժեք կամ չորս տարածքով առանձնացված արժեքներ
`.box-shadow()`	`@shadow`	Տարրին ավելացրեք ստվեր
`.transition()`	`@transition`	Ավելացնել CSS3 անցումային էֆեկտ (օրինակ՝ `all .2s linear`)
`.rotate()`	`@degrees`	Պտտեցնել տարրը n աստիճանով
`.scale()`	`@ratio`	Տարրը n- ապատկեք իր սկզբնական չափից
`.translate()`	`@x, @y`	Տարրը տեղափոխիր x և y հարթություններում
`.background-clip()`	`@clip`	Կտրել տարրի ֆոնը (օգտակար է `border-radius`)
`.background-size()`	`@size`	Վերահսկեք ֆոնային պատկերների չափը CSS3-ի միջոցով
`.box-sizing()`	`@boxmodel`	Փոխեք տուփի մոդելը տարրի համար (օրինակ՝ `border-box`ամբողջ լայնության համար `input`)
`.user-select()`	`@select`	Վերահսկել կուրսորով տեքստի ընտրությունը էջի վրա
`.backface-visibility()`	`@visibility: visible`	Կանխել բովանդակության թարթումը CSS 3D փոխակերպումներ օգտագործելիս
`.resizable()`	`@direction: both`	Դարձրեք չափափոխվող ցանկացած տարր աջ և ներքևում
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Ստիպեք ցանկացած տարրի բովանդակությունը օգտագործել CSS3 սյունակներ
`.hyphens()`	`@mode: auto`	CSS3 գծագիր, երբ ցանկանում եք (ներառում է `word-wrap: break-word`)

Նախապատմություններ և գրադիենտներ

Միքսին	Պարամետրեր	Օգտագործումը
`#translucent > .background()`	`@color: @white, @alpha: 1`	Տարրին տվեք կիսաթափանցիկ ֆոնի գույն
`#translucent > .border()`	`@color: @white, @alpha: 1`	Տարրին տվեք եզրագծի կիսաթափանցիկ գույն
`#gradient > .vertical()`	`@startColor, @endColor`	Ստեղծեք խաչաձև զննարկիչի ուղղահայաց ֆոնային գրադիենտ
`#gradient > .horizontal()`	`@startColor, @endColor`	Ստեղծեք խաչաձև զննարկիչի հորիզոնական ֆոնային գրադիենտ
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Ստեղծեք բրաուզերի ուղղորդված ֆոնային գրադիենտ
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Ստեղծեք բրաուզերի եռագույն ֆոնային գրադիենտ
`#gradient > .radial()`	`@innerColor, @outerColor`	Ստեղծեք բրաուզերի ճառագայթային ֆոնային գրադիենտ
`#gradient > .striped()`	`@color, @angle`	Ստեղծեք բրաուզերի գծավոր ֆոնային գրադիենտ
`#gradientBar()`	`@primaryColor, @secondaryColor`	Օգտագործվում է կոճակների համար՝ գրադիենտ և մի փոքր ավելի մուգ եզրագիծ նշանակելու համար

Նշում ․ _ _

Կազմելու գործիքներ

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

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

$ npm install -g պակաս jshint ընդմիջում 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 ֆայլի յուրաքանչյուր պահումից հետո:

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

Կառուցվել է LESS-ով

Ինչու՞ ՔԻՉ

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

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

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

Միքսիններ

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

Bootstrap փոփոխականներ LESS փոփոխականները, դրանց արժեքները և օգտագործման ուղեցույցները

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

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

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

Սեղաններ

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

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

Բաղադրիչներ

Կոճակներ

Ձևաթղթեր

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

Navbar

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

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

Bootstrap միքսներ

Միքսների մասին

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

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

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

Ներառված խառնուրդներ

Կոմունալ ծառայություններ

Ձևաթղթեր

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

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

CSS3 հատկություններ

Նախապատմություններ և գրադիենտներ

Bootstrap-ի կազմում LESS-ով

Կազմելու գործիքներ

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

Հրամանի տող

Javascript

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

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

Ճռճռոց

CodeKit

Պարզ