Përdorimi i LESS me Bootstrap

Personalizojeni dhe zgjeroni Bootstrap me LESS , një paraprocesor CSS, për të përfituar nga variablat, miksat dhe më shumë që përdoren për të ndërtuar CSS-në e Bootstrap.

Pse PAK?

Bootstrap është bërë me LESS në thelbin e tij, një gjuhë dinamike e fletëve të stilit e krijuar nga miku ynë i mirë, Alexis Sellier . E bën zhvillimin e CSS të bazuar në sisteme më të shpejtë, më të lehtë dhe më argëtues.

Çfarë përfshihet?

Si një zgjerim i CSS, LESS përfshin variabla, miks për copa të kodit të ripërdorshme, operacione për matematikë të thjeshtë, fole, madje edhe funksione ngjyrash.

Mëso më shumë

Vizitoni faqen zyrtare në http://lesscss.org/ për të mësuar më shumë.

Variablat

Menaxhimi i ngjyrave dhe vlerave të pikselëve në CSS mund të jetë paksa i mundimshëm, zakonisht plot kopjim dhe ngjitje. Megjithatë, jo me LESS - caktoni ngjyrat ose vlerat e pikselit si variabla dhe ndryshoni ato një herë.

Përzierjet

Këto tre deklarata të rrezes kufitare që duhet të bëni në CSS të rregullt? Tani ato janë deri në një rresht me ndihmën e mikseve, copa kodi që mund t'i ripërdorni kudo.

Operacionet

Bëjeni rrjetin tuaj, drejtues dhe më super fleksibël duke bërë llogaritë në fluturim me operacionet. Shumëzoni, ndani, shtoni dhe zbrisni rrugën tuaj drejt mendjes CSS.

Skelat dhe lidhjet

`@bodyBackground`	`@white`	Ngjyra e sfondit të faqes
`@textColor`	`@grayDark`	Ngjyra e parazgjedhur e tekstit për të gjithë trupin, titujt dhe më shumë
`@linkColor`	`#08c`	Ngjyra e parazgjedhur e tekstit të lidhjes
`@linkColorHover`	`darken(@linkColor, 15%)`	Ngjyra e pezullimit të tekstit të parazgjedhur të lidhjes

Sistemi i rrjetit

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

Tipografia

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, "Courier New", monospace
`@baseFontSize`	13 px	Duhet të jetë piksel
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 px	Duhet të jetë piksel
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabelat

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

Ngjyra gri

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

Ngjyrat e theksit

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

Komponentët

Butonat

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

Format

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

Formoni gjendjet dhe alarmet

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

Navbar

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

Dropdowns

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

Njësia heroike

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

Rreth mikseve

Përzierjet bazë

Një mixin bazë është në thelb një përfshirje ose një pjesë e një fragmenti të CSS. Ato janë shkruar si një klasë CSS dhe mund të thirren kudo.

. elementi {
  . sqarim ();
}

Përzierjet parametrike

Një miks parametrik është njësoj si një miks bazë, por pranon gjithashtu parametra (prandaj emri) me vlera të paracaktuara opsionale.

. elementi {
  . kufiri - rrezja ( 4px );
}

Shtoni lehtësisht tuajën

Pothuajse të gjitha mixin-et e Bootstrap ruhen në mixins.less, një skedar i mrekullueshëm .less që ju mundëson të përdorni një mixin në cilindo nga skedarët .less në paketën e veglave.

Pra, vazhdoni dhe përdorni ato ekzistueset ose mos ngurroni të shtoni tuajat sipas nevojës.

Përzierje të përfshira

Shërbimet komunale

Përzierje	Parametrat	Përdorimi
`.clearfix()`	asnje	Shto te ndonjë prind për të pastruar notat brenda
`.tab-focus()`	asnje	Aplikoni stilin e fokusimit të Webkit dhe skicën e rrumbullakët të Firefox-it
`.center-block()`	asnje	Përqendroni automatikisht një element në nivel blloku duke përdorur`margin: auto`
`.ie7-inline-block()`	asnje	Përdorni përveç të rregulltit `display: inline-block`për të marrë mbështetje për IE7
`.size()`	`@height @width`	Vendosni shpejt lartësinë dhe gjerësinë në një rresht
`.square()`	`@size`	Ndërtohet për `.size()`të vendosur gjerësinë dhe lartësinë si të njëjtën vlerë
`.opacity()`	`@opacity`	Vendosni, në numra të plotë, përqindjen e tejdukshmërisë (p.sh., "50" ose "75")

Format

Përzierje	Parametrat	Përdorimi
`.placeholder()`	`@color: @placeholderText`	Vendosni `placeholder`ngjyrën e tekstit për hyrjet

Tipografia

Përzierje	Parametrat	Përdorimi
`#font > #family > .serif()`	asnje	Bëni një element të përdorë një grumbull fonti serif
`#font > #family > .sans-serif()`	asnje	Bëni një element të përdorë një grumbull fonti sans-serif
`#font > #family > .monospace()`	asnje	Bëni një element të përdorë një pirg fonti monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Vendosni lehtësisht madhësinë, peshën dhe drejtimin e shkronjave
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Cakto familjen e shkronjave në serif dhe kontrollo madhësinë, peshën dhe kryesimin
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Cakto familjen e shkronjave në sans-serif dhe kontrollo madhësinë, peshën dhe drejtimin
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Cakto familjen e shkronjave në monospace dhe kontrollo madhësinë, peshën dhe drejtimin

Sistemi i rrjetit

Përzierje	Parametrat	Përdorimi
`.container-fixed()`	asnje	Krijoni një enë me qendër horizontalisht për të mbajtur përmbajtjen tuaj
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Gjeneroni një sistem rrjeti pikselësh (kontejner, rresht dhe kolona) me n kolona dhe x ulluqe me piksel të gjerë
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Gjeneroni një sistem rrjeti përqindjeje me n kolona dhe x % ulluqe të gjerë
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Gjeneroni sistemin e rrjetit të pikselave për `input`elementët, duke llogaritur mbushjen dhe kufijtë
`.makeColumn`	`@columns: 1, @offset: 0`	Kthejeni ndonjë `div`në një kolonë rrjeti pa `.span*`klasa

Karakteristikat e CSS3

Përzierje	Parametrat	Përdorimi
`.border-radius()`	`@radius`	Rrumbullakosni qoshet e një elementi. Mund të jetë një vlerë e vetme ose katër vlera të ndara me hapësirë
`.box-shadow()`	`@shadow`	Shtoni një hije në një element
`.transition()`	`@transition`	Shto efektin e tranzicionit CSS3 (p.sh., `all .2s linear`)
`.rotate()`	`@degrees`	Rrotulloni një element n gradë
`.scale()`	`@ratio`	Shkallësoni një element në n herë sa madhësia e tij origjinale
`.translate()`	`@x, @y`	Lëvizni një element në planin x dhe y
`.background-clip()`	`@clip`	Pritini sfondin e një elementi (i dobishëm për `border-radius`)
`.background-size()`	`@size`	Kontrolloni madhësinë e imazheve të sfondit përmes CSS3
`.box-sizing()`	`@boxmodel`	Ndryshoni modelin e kutisë për një element (p.sh. `border-box`për një gjerësi të plotë `input`)
`.user-select()`	`@select`	Kontrolloni zgjedhjen e kursorit të tekstit në një faqe
`.backface-visibility()`	`@visibility: visible`	Parandaloni dridhjen e përmbajtjes kur përdorni transformimet CSS 3D
`.resizable()`	`@direction: both`	Bëni çdo element të ridimensionueshëm në të djathtë dhe në fund
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Bëni që përmbajtja e çdo elementi të përdorë kolonat CSS3
`.hyphens()`	`@mode: auto`	Viza CSS3 kur të dëshironi (përfshin `word-wrap: break-word`)

Sfondet dhe gradientët

Përzierje	Parametrat	Përdorimi
`#translucent > .background()`	`@color: @white, @alpha: 1`	Jepini një elementi një ngjyrë të tejdukshme sfondi
`#translucent > .border()`	`@color: @white, @alpha: 1`	Jepini një elementi një ngjyrë të tejdukshme të kufirit
`#gradient > .vertical()`	`@startColor, @endColor`	Krijoni një gradient të sfondit vertikal ndër-shfletues
`#gradient > .horizontal()`	`@startColor, @endColor`	Krijoni një gradient të sfondit horizontal ndër-shfletues
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Krijo një gradient të sfondit të drejtimit të tërthortë të shfletuesit
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Krijoni një gradient të sfondit me tre ngjyra të ndër-shfletuesit
`#gradient > .radial()`	`@innerColor, @outerColor`	Krijoni një gradient të sfondit radial ndër-shfletues
`#gradient > .striped()`	`@color, @angle`	Krijo një gradient të sfondit me vija ndër-shfletuesi
`#gradientBar()`	`@primaryColor, @secondaryColor`	Përdoret për butonat për të caktuar një kufi gradient dhe pak më të errët

Shënim: Nëse po paraqisni një kërkesë tërheqjeje në GitHub me CSS të modifikuar, duhet ta ripërpiloni CSS-në nëpërmjet cilësdo prej këtyre metodave.

Mjetet për përpilim

Nyja me makefil

Instaloni përpiluesin e linjës së komandës LESS, JSHint, Recess dhe uglify-js globalisht me npm duke ekzekutuar komandën e mëposhtme:

$ npm instalo -g më pak jshint recess uglify-js

Pasi të instalohet, thjesht drejtojeni makenga rrënja e direktorisë suaj të bootstrap dhe jeni gati.

Për më tepër, nëse keni të instaluar watchr , mund të kandidoni make watchqë bootstrap të rindërtohet automatikisht sa herë që redaktoni një skedar në bootstrap lib (kjo nuk kërkohet, thjesht një metodë e përshtatshme).

Linja e komandës

Instaloni mjetin e linjës së komandës LESS përmes Node dhe ekzekutoni komandën e mëposhtme:

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

Sigurohuni që të përfshini --compressnë atë komandë nëse po përpiqeni të ruani disa byte!

Javascript

Shkarkoni Less.js më të fundit dhe përfshini shtegun drejt tij (dhe Bootstrap) në <head>.

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

Për të rikompiluar skedarët .less, thjesht ruajini ato dhe ringarkoni faqen tuaj. Less.js i përpilon ato dhe i ruan në ruajtjen lokale.

Aplikacioni jozyrtar Mac

Aplikacioni jozyrtar Mac shikon drejtoritë e skedarëve .less dhe përpilon kodin në skedarët lokalë pas çdo ruajtjeje të një skedari .less të shikuar.

Nëse dëshironi, mund të ndryshoni preferencat në aplikacion për zvogëlimin automatik dhe në cilin drejtori përfundojnë skedarët e përpiluar.

E ndertuar me PAK

Pse PAK?

Çfarë përfshihet?

Mëso më shumë

Variablat

Përzierjet

Operacionet

Variablat Bootstrap Variablat LESS, vlerat e tyre dhe udhëzimet e përdorimit

Skelat dhe lidhjet

Sistemi i rrjetit

Tipografia

Tabelat

Ngjyra gri

Ngjyrat e theksit

Komponentët

Butonat

Format

Formoni gjendjet dhe alarmet

Navbar

Dropdowns

Njësia heroike

Përzierjet e bootstrap

Rreth mikseve

Përzierjet bazë

Përzierjet parametrike

Shtoni lehtësisht tuajën

Përzierje të përfshira

Shërbimet komunale

Format

Tipografia

Sistemi i rrjetit

Karakteristikat e CSS3

Sfondet dhe gradientët

Përpilimi i Bootstrap me LESS

Mjetet për përpilim

Nyja me makefil

Linja e komandës

Javascript

Aplikacioni jozyrtar Mac

Më shumë aplikacione Mac

Përtypje

CodeKit

E thjeshte