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

LESS CSS a ni

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.

  1. . element { a ni.
  2. . chiang zawka siam ();
  3. } 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.

  1. . element { a ni.
  2. . ramri - radius ( 4px ) a ni a;
  3. } 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 hmanginmargin: auto
.ie7-inline-block() pakhatmah display: inline-blockIE7 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 placeholderInput 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 divawm 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-boxfull-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.

Mac app tam zawk a awm bawk

Crunch a ni

Crunch hi Adobe Air hmanga siam LESS editor leh compiler hmeltha tak a ni.

CodeKit a ni

Unofficial Mac app ang chiah hian a siam a, CodeKit hi Mac app a ni a, LESS, SASS, Stylus, leh CoffeeScript te a compile a ni.

Simpless lo tak a ni

Mac, Linux, leh PC app hmangin LESS files drag leh drop hmanga compiling theih a ni. Plus, source code chu GitHub ah a awm bawk .