Bootstrap hmanga LESS hman dan

Bootstrap-a CSS siamna atana hman tur variable, mixin leh a dangte hman tangkai theih nan LESS , CSS preprocessor hmangin Bootstrap chu customize leh extend rawh.

Engvangin nge LESS?

Bootstrap hi a bulpui berah LESS hmanga siam a ni a, kan thian tha tak, Alexis Sellier -a siam stylesheet language dynamic tak a ni. Systems-based CSS siam chu a rang zawk a, a awlsam zawk a, a nuam zawk bawk.

Eng nge a tel?

CSS extension angin LESS hian variable te, code snippet hman nawn theih tur mixins te, math awlsam tak tak te tan operation te, nesting te, leh color function thlengin a huam a ni.

Hriat belh rawh

Hrechiang duh tan official website http://lesscss.org/ ah hian lut la .

Variables te pawh a awm

CSS-a color leh pixel value enkawl hi a hrehawm deuh thei a, a tlangpuiin copy leh paste-a khat a ni. LESS hmangin ni lo mahse—color emaw pixel value emaw chu variable atan dah la, vawi khat thlak rawh.

Mixins te a awm

Chutiang border-radius declaration pathum chu regular ol' CSS-a i siam tur chu? Tunah chuan mixins hmangin line khatah an tla thla ta a, code snippets hmangin khawi hmunah pawh i hmang leh thei tawh ang.

Hnathawh dan tur

I grid, leading, leh super flexible zawka siam la, operations nen math on the fly ti la. CSS sanity-a i kalna tur kawng chu multiply, divide, add, leh subtract rawh.

Scaffolding leh link te pawh a awm bawk

`@bodyBackground`	`@white`	Page hnunglam rawng
`@textColor`	`@grayDark`	Body pum pui, heading leh thil dang tam tak tan text color default a ni
`@linkColor`	`#08c`	Link text rawng default a ni
`@linkColorHover`	`darken(@linkColor, 15%)`	Default link text hover rawng a ni

Grid system hmanga siam a ni

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

Typography hmanga ziah a ni

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif tih te hi a ni
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier thar", hmun khata awmna hmun
`@baseFontSize`	13px a ni	Pixel a ni tur a ni
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px a ni	Pixel a ni tur a ni
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Table te pawh a awm

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

Grayscale rawng hrang hrang

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

Accent rawng hrang hrang

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

Component hrang hrangte

Buttons te a awm

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

Form hrang hrang

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

Form state leh alerts te siam thin ang che

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

Navbar a ni

`@navbarHeight`	40px a ni
`@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`

Dropdown te pawh a awm

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

Hero unit a ni

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

Mixins chungchang

Mixins bulpui ber ber te

Basic mixin chu a bul berah chuan CSS snippet atan include emaw partial emaw a ni. CSS class ang maia ziah an ni a, khawi hmunah pawh koh theih an ni.

. element { a ni.
  . chiang zawka siam ();
} a ni.

Parametric mixin te pawh a awm bawk

Parametric mixin chu basic mixin ang chiah a ni a, mahse parameters (chuvangin a hming chu) optional default value hmangin a pawm bawk.

. element { a ni.
  . ramri - radius ( 4px ) a ni a;
} a ni.

Awlsam takin nangmah ngeiin add rawh

Bootstrap-a mixin zawng zawng deuhthaw hi mixins.less-ah dah vek a ni a, utility mak tak .less file a ni a, toolkit-a .less file awm zawng zawngah mixin hman theih a ni.

Chuvangin, kal zel la, a awm tawhte chu hmang la, a nih loh leh i mamawh ang zelin nangmah ngeiin i dah belh thei ang.

Mixins te pawh a tel

Utilities te pawh a awm

Mixin a ni	Parameters te a awm	Hman dan tur
`.clearfix()`	pakhatmah	A chhunga float awmte clear turin parent eng pawh ah dah rawh
`.tab-focus()`	pakhatmah	Webkit focus style leh Firefox outline round hmangin hmang rawh
`.center-block()`	pakhatmah	Auto center a block-level element hmangin`margin: auto`
`.ie7-inline-block()`	pakhatmah	`display: inline-block`IE7 support dawng tur chuan regular bakah hmang bawk ang che
`.size()`	`@height @width`	Line pakhatah a san zawng leh a zau zawng chu rang takin set rawh
`.square()`	`@size`	`.size()`A zau zawng leh a san zawng chu value inang anga set turin a builds on
`.opacity()`	`@opacity`	Set, number pum puia, opacity percentage (eg, "50" emaw "75")

Form hrang hrang

Mixin a ni	Parameters te a awm	Hman dan tur
`.placeholder()`	`@color: @placeholderText`	`placeholder`Input hrang hrang atan text color set rawh

Typography hmanga ziah a ni

Mixin a ni	Parameters te a awm	Hman dan tur
`#font > #family > .serif()`	pakhatmah	Element pakhat chu serif font stack hmangin siam rawh
`#font > #family > .sans-serif()`	pakhatmah	Element pakhat chu sans-serif font stack hmangin siam rawh
`#font > #family > .monospace()`	pakhatmah	Element pakhat chu monospace font stack hmangin siam rawh
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Font size, weight, leh leading awlsam takin set theih a ni
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Font chhungkua chu serif-ah set la, size, weight leh leading control rawh
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Font family chu sans-serif ah set la, size, weight leh leading te control rawh
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Font chhungkua chu monospace-ah set la, size, weight leh leading control rawh

Grid system hmanga siam a ni

Mixin a ni	Parameters te a awm	Hman dan tur
`.container-fixed()`	pakhatmah	I content dahna tur horizontal centered container siam rawh
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Pixel grid system (container, row, leh column) n column leh x pixel wide gutter nei siam rawh
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Column n leh x % wide gutter nei percent grid system siam rawh
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Element hrang hrangte tana pixel grid system siam la `input`, padding leh border te accounting siam rawh
`.makeColumn`	`@columns: 1, @offset: 0`	Class `div`awm lovin eng pawh chu grid column-ah chantir rawh`.span*`

CSS3 property te a awm

Mixin a ni	Parameters te a awm	Hman dan tur
`.border-radius()`	`@radius`	Element pakhat corner te chu round rawh. Value pakhat emaw, space-a inthen value pali emaw pawh a ni thei
`.box-shadow()`	`@shadow`	Element pakhatah drop shadow dah la
`.transition()`	`@transition`	CSS3 inthlak danglamna effect (eg, `all .2s linear`) te dah belh rawh.
`.rotate()`	`@degrees`	Element pakhat chu n degree -ah rotate rawh
`.scale()`	`@ratio`	Element pakhat chu a size hmasa ber n a let n -ah scale rawh
`.translate()`	`@x, @y`	x leh y plane-ah element pakhat chu sawn rawh
`.background-clip()`	`@clip`	Element pakhat background crop (a hmantlak `border-radius`) .
`.background-size()`	`@size`	CSS3 hmangin background image size control theih a ni
`.box-sizing()`	`@boxmodel`	Element pakhat atan box model thlak rawh (eg, `border-box`full-width atan `input`) .
`.user-select()`	`@select`	Page pakhata thuziak cursor thlan dan control rawh
`.backface-visibility()`	`@visibility: visible`	CSS 3D transforms hman hunah content flickering tih loh tur
`.resizable()`	`@direction: both`	Element eng pawh chu dinglam leh hnuai lamah resizable turin siam rawh
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Element eng pawha content chu CSS3 column hmang turin siam rawh
`.hyphens()`	`@mode: auto`	CSS3 hyphenation i duh hunah (includes `word-wrap: break-word`) .

Background leh gradient te pawh a awm

Mixin a ni	Parameters te a awm	Hman dan tur
`#translucent > .background()`	`@color: @white, @alpha: 1`	Element pakhat chu background color translucent pe rawh
`#translucent > .border()`	`@color: @white, @alpha: 1`	Element pakhat chu translucent border color pe rawh
`#gradient > .vertical()`	`@startColor, @endColor`	Cross-browser vertical background gradient siam rawh
`#gradient > .horizontal()`	`@startColor, @endColor`	Cross-browser ah hian horizontal background gradient siam rawh
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Cross-browser lam hawia background gradient siam rawh
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Cross-browser atanga rawng pathum awmna background gradient siam rawh
`#gradient > .radial()`	`@innerColor, @outerColor`	Cross-browser radial background gradient siam rawh
`#gradient > .striped()`	`@color, @angle`	Cross-browser striped background gradient siam rawh
`#gradientBar()`	`@primaryColor, @secondaryColor`	Gradient leh border dum deuh deuh assign nan button te tan hman thin a ni

Note: CSS siam danglam hmanga GitHub-a pull request i submit a nih chuan heng method zinga pakhat hmang hian CSS chu i recompile leh tur a ni.

Compiling na tur hmanrua te

Node ah chuan makefile a awm

A hnuaia command hi run la, LESS command line compiler, JSHint, Recess, leh uglify-js te chu npm hmangin global-in install rawh:

$ npm install -g tlem zawk jshint recess uglify-js

Install zawh chuan makei bootstrap directory root atang khan run mai la, i set vek tawh ang.

Tin, watchr install i neih make watchchuan bootstrap lib-a file i edit apiangin bootstrap automatic-a rebuilt tir turin i run thei bawk (hei hi a ngai lo, convenience method chauh a ni).

Command line a awm

Node hmangin LESS command line tool chu install la, a hnuaia command hi run rawh:

$ lessc ./less/bootstrap.less > bootstrap.css tih hi a awmzia a awm lo

--compressByte thenkhat save i tum a nih chuan chu command-ah chuan telh ngei ang che!

Javascript hmangin a ziak a ni

Less.js thar ber download la, a kalna tur kawng (leh Bootstrap) chu <head>.

| _ _ _ _ _ _ _ _ _ _ _ _

.less files te chu recompile tur chuan save la, i page chu reload mai rawh. Less.js hian a compile a, local storage ah a dah chhuak thin.

Mac app hi official lo tak a ni

Unofficial Mac app hian .less file directory a en a, .less file en tawh save apiangin local file-ah code chu a compile thin.

I duh chuan app chhunga preferences te chu automatic minifying atan i toggle thei a, compiled files te chu eng directory ah nge a tawp ang.

LESS hmanga sak a ni

Engvangin nge LESS?

Eng nge a tel?

Hriat belh rawh

Variables te pawh a awm

Mixins te a awm

Hnathawh dan tur

Bootstrap variables LESS variable te, an value te, leh hman dan tur kaihhruaina te

Scaffolding leh link te pawh a awm bawk

Grid system hmanga siam a ni

Typography hmanga ziah a ni

Table te pawh a awm

Grayscale rawng hrang hrang

Accent rawng hrang hrang

Component hrang hrangte

Buttons te a awm

Form hrang hrang

Form state leh alerts te siam thin ang che

Navbar a ni

Dropdown te pawh a awm

Hero unit a ni

Bootstrap hmangin mixins a awm bawk

Mixins chungchang

Mixins bulpui ber ber te

Parametric mixin te pawh a awm bawk

Awlsam takin nangmah ngeiin add rawh

Mixins te pawh a tel

Utilities te pawh a awm

Form hrang hrang

Typography hmanga ziah a ni

Grid system hmanga siam a ni

CSS3 property te a awm

Background leh gradient te pawh a awm

Bootstrap chu LESS hmanga compile a ni

Compiling na tur hmanrua te

Node ah chuan makefile a awm

Command line a awm

Javascript hmangin a ziak a ni

Mac app hi official lo tak a ni

Mac app tam zawk a awm bawk

Crunch a ni

CodeKit a ni

Simpless lo tak a ni