A hman dan tur
He option hmang hian Bootstrap-a Less variables, mixins, leh CSS-a nesting te chu i browser-a javascript hmangin i hmang tangkai thei ang.
- <link rel = "stylesheet/tlem" href = "a tlem/bootstrap.less" media = "a zawng zawng" />
- <script src = "Js/less-1.1.3.min.js" ></script> a ni
.js solution chu i hre lo em ni? Less Mac app hmang la, i code i deploy hunah Node.js hmangin compile rawh.
Eng nge a tel
Bootstrap hnuaia Twitter Bootstrap-a thil awmte langsar zual thenkhat chu hetiang hi a ni. Bootstrap website emaw Github project page emaw ah kal la, download la, zir belh rawh.
Variables te pawh a awm
Less-a variable awmte hi i CSS headache free-a enkawl leh update-na atan a tha ber. Color value emaw, hman fo thin value emaw i thlak duh chuan hmun khatah update la, i set tawh ang.
- // Link te a awm
- @linkColor : #8b59c2 a ni a, a hlawhtling hle.
- @linkColorHover : thim ( @linkColor , 10 );
-
- // Grays a ni
- @black : #000 a ni a;
- @grayDark : a ti eng ( @black , 25 %);
- @gray : a ti eng ( @black , 50 %);
- @grayLight : a ti eng ( @black , 70 %);
- @grayLighter : a ti eng ( @black , 90 %);
- @white : #fff a ni a;
-
- // Accent rawng hrang hrang
- @blue : #08b5fb a ni a;
- @green : #46a546 a ni a;
- @red : #9d261d a ni a;
- @yellow : #ffc40d a ni a, a hlawhtling hle.
- @orange : #f89406 chu a rawn lang a;
- @pink : #c3325f a ni a;
- @a sen : #7a43b6;
-
- // A bul tanna grid
- @basefont : 13px a ni a;
- @baseline : 18px a ni a;
Comment a pe a
/* ... */
Less hian CSS-a syntax pangngai bakah commenting style dang a pe bawk .
- // Hei hi comment a ni
- /* Hei pawh hi comment a ni */
Mixins up a wazoo
Mixins hi a bul berah chuan CSS tan chuan includes emaw partials emaw a ni a, code block pakhat chu pakhatah a inzawm khawm thei a ni. Vendor prefixed property box-shadow
, cross-browser gradients, font stack, leh a dangte tan pawh an tha hle. A hnuaiah hian Bootstrap-a mixin awmte sample kan rawn tarlang e.
Font stack a awm bawk
- #font chu { a ni.
- . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font -a lian leh te : @size ;
- font - a rih zawng : @weight ;
- line- a san zawng : @lineHeight ;
- } a ni.
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - chhungkua : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font -a lian leh te : @size ;
- font - a rih zawng : @weight ;
- line- a san zawng : @lineHeight ;
- } a ni.
- ...
- } a ni.
Gradient te a awm
- #gradient { a ni.
- ...
- . vertical ( @startColor : #555, @tawp rawng: #333) { 1. A rilru a hah lutuk chuan a rilru a buai em em a.
- hnunglam - rawng : @endColor ;
- background - tih nawn leh : tih nawn leh - x ;
- background - image : - khtml - gradient ( linear , veilam chunglam , veilam hnuai lam , ( @startColor ) atanga ( @endColor ) thleng ); // Konqueror a ni
- a hnuai lam - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+ a ni
- a hnuai lam - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10 a ni
- background - image : - webkit - gradient ( linear , veilam chunglam , veilam hnuai lam , rawng - tawp ( 0 %, @startColor ), rawng - tawp ( 100 %, @endColor )); // Safari 4+, Chrome 2+ te a awm bawk
- a hnuai lam - thlalak : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+ te a awm bawk
- background - image : -o - linear - gradient ( @startColor , @endColor ) ; // Opera ah hian 11.10 a awm a
- a hnuai lam - image : linear - gradient ( @startColor , @endColor ); // A standard chu
- } a ni.
- ...
- } a ni.
Hnathawh dan tur
A hnuaia mi ang hian mixin flexible leh powerful tak tak siam turin math engemaw zat perform la.
- // Griditude a ni
- @gridColumns te chu : 16 ;
- @gridColumn zau zawng : 40px ;
- @gridGutter zau zawng : 20px ;
- @siteWidth : ( @gridColumns * @gridColumn zau zawng ) + ( @gridGutter zau zawng * ( @gridColumns - 1 ));
-
- // Column thenkhat siam rawh
- . columns ( @columnSpan : 1 ) { 1. A rilru a hah lutuk a, a rilru a buai em em a.
- width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutter zau zawng * ( @columnSpan - 1 ));
- } a ni.
Compiling tlem zawk
/lib/ a files te i modify zawh chuan .less
bootstrap-*.*.*.css leh bootstrap-*.*.*.min.css files te regenerate theih nan recompile i mamawh ang. GitHub ah pull request i submit dawn a nih chuan recompile reng tur a ni.
Compile dan tur
Tihdan |
Step hrang hrang |
Node ah chuan makefile a awm |
A hnuaia command hi run la, npm hmangin less command line compiler chu install rawh: $ npm install rawh lesc Install zawh chuan make i bootstrap directory root atang khan run mai la, i set vek tawh ang. Tin, watchr install i neih make watch chuan 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). |
Javascript hmangin a ziak a ni |
Less.js thar ber download la, a kalna tur kawng (leh Bootstrap) chu head . - <link rel = "stylesheet/less" href = "/kang/kalna/bootstrap.tlem lo" >
- <script src = "/path/a/less.js thleng" ></script> tih a ni
.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. |
Command line a awm |
Command line tool tlem zawk i install tawh chuan a hnuaia command hi run mai rawh: $ lessc ./lib/bootstrap.less > bootstrap.css tih hi a awmzia a awm lo --compress Byte thenkhat save i tum a nih chuan chu command-ah chuan telh ngei ang che! |
Mac app a tlem zawk |
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. |