Bi Bootstrap re LESS bikar tînin

Bootstrap-ê bi LESS -ê, pêş-processorek CSS-ê, xweş bikin û dirêj bikin, da ku ji guhêrbar, mixîn û yên din ên ku ji bo avakirina CSS-ya Bootstrap têne bikar anîn sûd werbigirin.

Çima KÊM?

Bootstrap di bingehê xwe de bi LESS ve hatî çêkirin, zimanek şêwazek dînamîkî ku ji hêla hevalê me yê baş, Alexis Sellier ve hatî afirandin . Ew pêşveçûna pergalên-based CSS zûtir, hêsantir û bêtir kêfxweş dike.

Çi tê de heye?

Wekî dirêjkirina CSS-ê, LESS guhêrbar, mixînên ji bo perçeyên kodê yên ji nû ve bi kar anîn, operasyonên ji bo matematîkî yên hêsan, hêlîn, û hetta fonksiyonên rengîn vedihewîne.

Bêtir hîn bibin

Serdana malpera fermî ya http://lesscss.org/ bikin ku bêtir fêr bibin.

Variables

Birêvebirina reng û nirxên pixelê di CSS-ê de dibe ku piçek êş be, bi gelemperî tijî kopî û paste. Lêbelê ne bi KÊMÊ - rengan an nirxên pixelê wekî guhêrbar destnîşan bikin û wan carekê biguhezînin.

Mixins

Ew sê daxuyaniyên radyoya sînor ku hûn hewce ne ku di CSS-ya birêkûpêk de bikin? Naha ew bi arîkariya mixins, perçeyên kodê ku hûn dikarin li her deverê ji nû ve bikar bînin daketin yek rêzê.

Operasyonên

Bi kirina matematîkê bi operasyonan re tevna xwe, pêşeng û super maqûltir bikin. Riya xwe ya berbi aqilmendiya CSS-ê zêde bikin, dabeş bikin, lê zêde bikin û kêm bikin.

Skeffolding û girêdan

`@bodyBackground`	`@white`	Rengê paşxaneya rûpelê
`@textColor`	`@grayDark`	Rengê nivîsê ya xwerû ji bo tevahiya laş, sernav û hêj bêtir
`@linkColor`	`#08c`	Rengê nivîsa lînka xwerû
`@linkColorHover`	`darken(@linkColor, 15%)`	Rengê hêlînê nivîsa lînka xwerû

sîstema Grid

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

Tîpografi

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13px	Divê pixel be
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Divê pixel be
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tables

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

Rengên gewr

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

Rengên devkî

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

Components

Buttons

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

Dewlet û hişyariyan çêbikin

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

Dropdowns

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

Yekîneya Hero

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

Der barê mixins

Miksên bingehîn

Miksek bingehîn bi bingehîn ji bo perçeyek CSS-ê tevlêbûnek an parçeyek e. Ew mîna çînek CSS-ê têne nivîsandin û dikarin li her deverê bêne gazî kirin.

. element {
  . zelalfix ();
}

Mîksên Parametrîk

Mîksek parametrîkî mîna mîksînek bingehîn e, lê ew di heman demê de pîvanan (ji ber vê yekê nav) bi nirxên xwerû yên vebijarkî jî qebûl dike.

. element {
  . sînor - radius ( 4px );
}

Bi hêsanî ya xwe lê zêde bike

Hema hema hemî mîksên Bootstrap di mixins.less de têne hilanîn, pelek .less ya hêja ku dihêle hûn di pelên .kêm ên amûrê de mixin bikar bînin.

Ji ber vê yekê, pêşde biçin û yên heyî bikar bînin an jî xwe azad bikin ku hûn hewceyê xwe zêde bikin.

Miksên tê de hene

Utilities

Mixin	Parametreyên	Bikaranîna
`.clearfix()`	netû	Li her dêûbav zêde bikin da ku floatên di hundurê de paqij bikin
`.tab-focus()`	netû	Şêweya fokusê ya Webkit-ê û nexşeya Firefox-ê li dora xwe bicîh bînin
`.center-block()`	netû	Otomotîk hêmanek asta blokê bikar tîne navend`margin: auto`
`.ie7-inline-block()`	netû	Ji bilî birêkûpêk bikar bînin `display: inline-block`da ku piştgiriya IE7 bistînin
`.size()`	`@height @width`	Bi lez bilindahî û firehiyê li ser yek rêzê bicîh bikin
`.square()`	`@size`	Li ser `.size()`ava dike ku firehî û bilindahî wekî heman nirxê destnîşan bike
`.opacity()`	`@opacity`	Bi tevahî hejmaran, rêjeya nezelaliyê destnîşan bikin (mînak, "50" an "75")

Forms

Mixin	Parametreyên	Bikaranîna
`.placeholder()`	`@color: @placeholderText`	Ji bo `placeholder`têketinê rengê nivîsê saz bikin

Tîpografi

Mixin	Parametreyên	Bikaranîna
`#font > #family > .serif()`	netû	Hêmanek çêbikin stek tîpên serif bikar bînin
`#font > #family > .sans-serif()`	netû	Hêmanek çêbikin stek tîpên sans-serif bikar bînin
`#font > #family > .monospace()`	netû	Hêmanek çêbikin ku stûnek tîpên monospace bikar bîne
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Mezinahiya fontê, giranî û sereke bi hêsanî saz bikin
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Malbata tîpan li ser serif saz bikin, û mezinahî, giranî û sereke kontrol bikin
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Malbata tîpan li ser sans-serif bicîh bikin, û mezinahî, giranî û sereke kontrol bikin
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Malbata tîpan li monospace bicîh bikin, û mezinahî, giranî û pêşengiyê kontrol bikin

sîstema Grid

Mixin	Parametreyên	Bikaranîna
`.container-fixed()`	netû	Ji bo ku hûn naveroka xwe bigirin konteynirek navendek horizontî biafirînin
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Bi n stûnan û x pixel gemarê fireh pergalek tora pixel (konteyner, rêz û stûn) biafirînin.
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Pergalek torê ya ji sedî bi n stûnan û x % gûzê fireh biafirînin
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Pergala tora pixel ji bo `input`hêmanan, hesabkirina padding û sînoran biafirînin
`.makeColumn`	`@columns: 1, @offset: 0`	Her yekê bêyî dersan `div`veguherînin stûnek torê`.span*`

Taybetmendiyên CSS3

Mixin	Parametreyên	Bikaranîna
`.border-radius()`	`@radius`	Kuçên hêmanekê dor bikin. Dikare nirxek yek an çar nirxên cihê-veqetandî be
`.box-shadow()`	`@shadow`	Siya dilopekê li hêmanekê zêde bikin
`.transition()`	`@transition`	Bandora veguherîna CSS3 zêde bike (mînak, `all .2s linear`)
`.rotate()`	`@degrees`	Elementek n dereceyan bizivirîne
`.scale()`	`@ratio`	Pîvanek hêmanek bi n -ê mezinahiya wê ya orjînal bikin
`.translate()`	`@x, @y`	Li ser x û y-yê hêmanekê bigerînin
`.background-clip()`	`@clip`	Paşîna hêmanek bibire (bikêr e `border-radius`)
`.background-size()`	`@size`	Mezinahiya wêneyên paşîn bi CSS3 ve kontrol bikin
`.box-sizing()`	`@boxmodel`	Modela qutikê ji bo hêmanek biguhezîne (mînak, `border-box`ji bo firehiyek tevahî `input`)
`.user-select()`	`@select`	Hilbijartina cursorê ya nivîsê li ser rûpelê kontrol bikin
`.backface-visibility()`	`@visibility: visible`	Dema ku veguherînên CSS 3D bikar bînin pêşîlêgirtina naverokê bigirin
`.resizable()`	`@direction: both`	Li rast û binî her hêmanek ji nû ve mezinbûnê çêbikin
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Naveroka her hêmanek stûnên CSS3 bikar bînin
`.hyphens()`	`@mode: auto`	Dema ku hûn dixwazin xêzkirina CSS3 (di nav de `word-wrap: break-word`)

Paşnav û gradient

Mixin	Parametreyên	Bikaranîna
`#translucent > .background()`	`@color: @white, @alpha: 1`	Rengek paşnavê ya şefaf bide elementek
`#translucent > .border()`	`@color: @white, @alpha: 1`	Ji hêmanekê re rengê sînorê şefaf bidin
`#gradient > .vertical()`	`@startColor, @endColor`	Gerokek paşîn a vertîkal a cross-browser biafirînin
`#gradient > .horizontal()`	`@startColor, @endColor`	Gerokek paşîn a horizontî ya cross-browser biafirînin
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Gerokek paşîn a rênîşander a cross-browser biafirînin
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Gerokek paşîn a sê-rengî ya xaça gerokê biafirînin
`#gradient > .radial()`	`@innerColor, @outerColor`	Gerokek paşîn a radîkal a cross-browser biafirînin
`#gradient > .striped()`	`@color, @angle`	Gerokek paşîn a xaç-gerokê biafirînin
`#gradientBar()`	`@primaryColor, @secondaryColor`	Ji bo bişkokan tê bikar anîn da ku qonaxek hûrgelek û hinekî tarîtir destnîşan bike

Nîşe: Heke hûn bi CSS-ya guhertî daxwazek kişandinê ji GitHub re dişînin, divê hûn CSS-ê bi yek ji van rêbazan ji nû ve berhev bikin.

Amûrên berhevkirinê

Node bi makefile

Berhevkarê rêza fermanê LESS, JSHint, Recess, û uglify-js li seranserê cîhanê bi npm ve saz bikin û fermana jêrîn bicîh bikin:

$ npm saz bike -g kêmtir jshint recess uglify-js

Piştî ku hatî saz kirin tenê ji makekoka pelrêça bootstrap-a xwe bimeşîne û hûn hemî amade ne.

Wekî din, heke we watchr saz kiriye, dibe ku hûn make watchher carê ku hûn pelek di lib bootstrap-ê de biguherînin (ev ne hewce ye, tenê rêbazek hêsan e) bi rê ve bibin ku bootstrap bixweber ji nû ve were çêkirin.

Rêza fermanê

Amûra rêza fermanê LESS bi navgîniya Node saz bikin û emrê jêrîn bimeşînin:

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

--compressGer hûn hewl didin ku hin bytes hilînin, pê ewle bin ku hûn di wê fermanê de bicîh bikin!

Javascript

Less.js-a herî dawî dakêşin û rêça wê (û Bootstrap) di nav <head>.

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

Ji bo ku pelên .less ji nû ve berhev bikin, tenê wan hilînin û rûpela xwe ji nû ve bar bikin. Less.js wan berhev dike û di hilanîna herêmî de hilîne.

Serlêdana nefermî ya Mac

Serlêdana nefermî ya Mac- ê li pelrêçên pelên .kêm temaşe dike û piştî her tomarkirina pelek .kêm hatî temaşekirin kodê li pelên herêmî berhev dike.

Heke hûn bixwazin, hûn dikarin tercihên di sepanê de ji bo kêmkirina otomatîkî biguhezînin û pelên berhevkirî di kîjan pelrêça de diqedin.

Bi LESS ve hatî çêkirin

Çima KÊM?

Çi tê de heye?

Bêtir hîn bibin

Variables

Mixins

Operasyonên

Guherbarên Bootstrap guhêrbarên KÊM, nirxên wan, û rêwerzên bikaranînê

Skeffolding û girêdan

sîstema Grid

Tîpografi

Tables

Rengên gewr

Rengên devkî

Components

Buttons

Forms

Dewlet û hişyariyan çêbikin

Navbar

Dropdowns

Yekîneya Hero

Bootstrap mixins

Der barê mixins

Miksên bingehîn

Mîksên Parametrîk

Bi hêsanî ya xwe lê zêde bike

Miksên tê de hene

Utilities

Forms

Tîpografi

sîstema Grid

Taybetmendiyên CSS3

Paşnav û gradient

Berhevkirina Bootstrap bi LESS

Amûrên berhevkirinê

Node bi makefile

Rêza fermanê

Javascript

Serlêdana nefermî ya Mac

Zêdetir sepanên Mac

Crunch

CodeKit

Simpless