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.
LESS hmanga sak a ni
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.
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.
Bootstrap variables LESS variable te, an value te, leh hman dan tur kaihhruaina te
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 |
Hero unit a ni
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Bootstrap hmangin mixins a awm bawk
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 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 precent 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 |
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 |
Bootstrap chu LESS hmanga compile a ni
Compiling na tur hmanrua te
Node ah chuan makefile a awm
A hnuaia command hi run la, LESS command line compiler leh uglify-js globally npm hmangin install rawh:
$ npm install -g tlem zawk 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 .