Hmanlai hun zirna

Twitter hmasa lamah khan engineer-te chuan an hriat chian tawh library zawng zawng deuhthaw chu front-end mamawh phuhruk nan an hmang thin. Bootstrap hi Twitter-a Hackweek hmasa ber neih chhunga harsatna awmte chhanna atan a intan a, hmasawnna pawh a chak nghal vat a ni.

Twitter-a engineer tam takte puihna leh feedback hmangin Bootstrap hi nasa takin a lo thang chho a, basic style chauh ni lovin, front-end design pattern mawi leh nghet zawk a huam a ni.

dev.twitter.com ah chhiar belh rawh ›

Browser hmanga support theih a ni

Bootstrap hi tunlai browser lian ber ber Chrome, Safari, Internet Explorer, leh Firefox-ah te test leh support a ni.

• Safari thar ber a ni
• Google Chrome thar ber a ni
• Firefox hmangin 4+ a awm
• Internet Explorer ah hian 7+ a awm
• Opera 11 a ni

Eng nge a tel

Bootstrap hi compiled CSS, uncompiled, leh entirnan template te nen a rawn thleng kim vek a ni.

• Original .less file zawng zawng
• CSS chu a pum puia compile leh minified a ni
• Styleguide documentation kimchang tak a awm bawk
• Entirna page template (a dang pawh a lo thleng thuai dawn)

Grid hmasa ber a ni

Bootstrap-a tel anga default grid system pek chu 940px wide 16-column grid a ni. 960 grid system lar tak flavor a ni a, mahse veilam leh dinglam lamah margin/padding additional a awm lo.

Entirnan grid markup tih hi a ni

Heta kan hmuh ang hian, "column" pahnih hmangin basic layout siam theih a ni a, chu chuan kan grid system-a kan tarlan foundational column 16 zinga engemaw zat a huam vek a ni. A hnuaia entirnan te hi a danglamna tam zawk en rawh.

<div class = "row" > tih hi a ni 
  <div class = "span6 columns" > tih a ni 
    ...
  </div> tih a ni
  <div class = "span10 column" > tih a ni 
    ...
  </div> tih a ni
</div> tih a ni

Layout tihfel a ni

Default leh simple 940px-wide, centered layout chu website emaw page emaw pakhat chauh pek chhuah tan chauh a <div.container>ni .

<taksa> tih a ni
  <div class = "container" > tih hi a ni 
    ...
  </div> tih a ni
</body> tih a ni

Fluid awm dan tur

A danglamna, flexible fluid page structure min- leh max-width leh veilam sidebar nei. Apps leh docs atan a tha hle.

<taksa> tih a ni
  <div class = "container-a tui" > tih a ni 
    <div class = "a sir lehlamah" > 
      ...
    </div> tih a ni
    <div class = "thu awm" > tih a ni 
      ...
    </div> tih a ni
  </div> tih a ni
</body> tih a ni

Headings & copy te pawh a awm bawk

I webpage siam dan tur standard typographic hierarchy.

Typographic grid pumpui hi kan preboot.less file-a Less variable pahnih: @basefontleh @baseline. A hmasa ber chu base font-size hman vek a ni a, a pahnihna chu base line-height a ni.

Chu variable te, leh math thenkhat te chu kan type zawng zawng leh a dangte margin, paddings, leh line-heights te siam nan kan hmang thin.

h1. Thupui 1-na a ni

h2. Thupui 2-na

h3. Thupui 3-na

h4. Thupui 4-na a ni

h5. Thupui 5-na a ni

h6. Thupui 6-na a ni

Entirna paragraph

A rilru a buai em em a, a rilru a hah em em bawk a. Nullam quis risus eget urna mollis ornare vel eu leo. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies lirthei ut id elit.

Entirna heading Sub-heading a nei...

Misc. elements te a ni

Emphasis, address, & abbreviation hmangin

<strong> <em> <address> <abbr>

Engtikah nge hman tur

Thumal emaw, thumal emaw pakhat chu a chhehvêl copy nêna khaikhin chuan a pawimawh zâwk emaw, a pawimawh zâwk emaw tih lan nân emphasis tag ( <strong>leh ) hman tûr a ni. Pawimawhna atan leh stress<em> ngaih pawimawh nan hmang rawh .<strong><em>

Paragraph pakhata ngaih pawimawh a ni

A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a. Maecenas faucibus mollis interdum. Nulla vitae elit libero tih hi a ni a, a man pawh a tlawm hle.

Note:<b> HTML5-a hman leh tag te hi a la pawi a <i>, bold leh italic style a ngai lo (semantic element tam zawk awm mahse hmang la). <b>thumal emaw thumal emaw pawimawhna belhchhah lovin tarlanna tur a ni a, chutih laiin <i>a tam zawk chu aw, technical term, etc. atan a ni.

Address te pawh a awm

Element <address>hi a pi leh pu hnai ber, a nih loh leh hnathawhna taksa pum pui contact information atan hman a ni. A lan dan chu hetiang hi a ni:

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. 94107 P : (123)
456-7890

Note: An line tinte <address>chu line-break ( <br />) hmanga tawp tur a ni a, a nih loh leh block-level tag (eg, <p>)-a wrapped tur a ni a, chu chuan content chu a structure dik thei ang.

A tawi zawngin

Abbreviation leh acronym atan chuan <abbr>tag hmang la ( HTML5<acronym> -ah chuan hman loh a ni ). Tag chhungah shorthand form dah la, hming kimchang atan title set rawh.

Blockquote te pawh a awm

<blockquote> <p> <small>

Engtin nge kan quote ang

Blockquote dah tel tur chuan wrap <blockquote>around <p>leh <small>tags. Element hmangin <small>i source cite la, a —hmain em dash i hmu ang.

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat chu a hmaa venenatis a ni.

Dr. Julius Hibbert-a chuan a sawi a

Order loh chuan<ul>

• Lorem ipsum dolor thu amet
• A rilru a buai em em a, a rilru a hah em em bawk a
• Integer molestie lorem chu massa ah a awm a
• Facilisis ah hian a awm a
• Nulla volutpat a ni a, a hlimthla a ni
  • Phasellus iaculis chu a lo chhuak a
  • Purus sodales chu a hring chhuak thin
  • A rilru a buai em em a, a rilru a hah em em bawk a
  • A rilru a buai em em a, a rilru a hah em em bawk a. Ac tristique libero volutpat at
• A rilru a buai em em a, a rilru a hah em em bawk a. Faucibus porta lacus fringilla vel
• Aenean thu amet erat nunc
• Eget porttitor lorem a ni

Style nei lo a ni<ul.unstyled>

• Lorem ipsum dolor thu amet
• A rilru a buai em em a, a rilru a hah em em bawk a
• Integer molestie lorem chu massa ah a awm a
• Facilisis ah hian a awm a
• Nulla volutpat a ni a, a hlimthla a ni
  • Phasellus iaculis chu a lo chhuak a
  • Purus sodales chu a hring chhuak thin
  • A rilru a buai em em a, a rilru a hah em em bawk a
  • A rilru a buai em em a, a rilru a hah em em bawk a. Ac tristique libero volutpat at
• A rilru a buai em em a, a rilru a hah em em bawk a. Faucibus porta lacus fringilla vel
• Aenean thu amet erat nunc
• Eget porttitor lorem a ni

Order a ni<ol>

1. Lorem ipsum dolor thu amet
2. A rilru a buai em em a, a rilru a hah em em bawk a
3. Integer molestie lorem chu massa ah a awm a
4. Facilisis ah hian a awm a
5. Nulla volutpat a ni a, a hlimthla a ni
6. A rilru a buai em em a, a rilru a hah em em bawk a. Faucibus porta lacus fringilla vel
7. Aenean thu amet erat nunc
8. Eget porttitor lorem a ni

Hrilhfiahnadl

Thuziak list te a awm

Description list hi terms sawifiahna atan a tha ber.

Euismod tih a ni

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a.

Donec id elit non mi porta gravida chu eget metus ah a awm a.

Malesuada chu a ni

A rilru a buai em em a, a rilru a hah em em bawk a. Etiam porta sem malesuada magna mollis euismod.

Table sak dan tur

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Table te hi a ropui hle—thil tam tak atan. Mahse, table ropui tak takte chu a tangkai, scalable, leh chhiar theih (code level-ah) an nih theih nan markup hmangaihna tlem an mamawh a ni. Hetah hian tanpui theih tur tips tlemte kan rawn tarlang e.

I column header <thead>te chu hierarchy <thead>> <tr>> a nih theih nan wrap fo ang che <th>.

Column header ang bawkin i table body content zawng zawng chu a wrapped vek tur a ni a <tbody>chuvangin i hierarchy chu <tbody>> <tr>> <td>a ni.

Entirnan: Table style hrang hrangte

Table zawng zawng chu chhiar awlsam leh structure vawng reng turin border pawimawh tak takte chauh hmangin automatic-in style a ni ang. Extra class emaw attribute emaw add a ngai lo.

# a ni.	Hming hmasa	Hming hnuhnung	Tawng
1. a ni	Engemawzat	Pakhat	Sap
2. 2.	Joe a ni	Sixpack a ni	Sap
3. A ni	Stu	Dent a ni	Code a ni

<table> tih a ni
  ...
</table> tih a ni

Entirnan: Zebra-striped tih ang chi

Zebra-striping dahin i table-te chu tlem tal fancy la— .zebra-stripedclass chu belh mai rawh.

# a ni.	Hming hmasa	Hming hnuhnung	Tawng
1. a ni	Engemawzat	Pakhat	Sap
2. 2.	Joe a ni	Sixpack a ni	Sap
3. A ni	Stu	Dent a ni	Code a ni

Note: Zebra-striping hi progressive enhancement a ni a, IE8 leh a hnuaia browser hlui zawk tan chuan a awm lo.

<table class = "zebra-a chhuak" > 
...
</table> tih a ni

Entirnan: Zebra-striped w/ TableSorter.js hmanga siam a ni

Entirna hmasa kha han la ila, jQuery leh Tablesorter plugin hmangin sorting functionality kan pe a, kan table te hman tangkai dan kan ti tha zawk a ni. Column eng header pawh click la, sort thlak rawh.

# a ni.	Hming hmasa	Hming hnuhnung	Tawng
1. a ni	I	Pakhat	Sap
2. 2.	Joe a ni	Sixpack a ni	Sap
3. A ni	Stu	Dent a ni	Code a ni

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> a ni 
<script > tih hi a ni 
  $ ( hnathawh () { . 
    $ ( "table#sortTableEntirna" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script> tih a ni
<table class = "zebra-a chhuak" > 
  ...
</table> tih a ni

Default style hrang hrang a awm

Form zawng zawng hi chhiar awlsam leh scalable taka present turin default style pek vek a ni. Text input, select list, textarea, radio button leh checkbox, leh button te tan style a awm a.

Entirna form legend

X-Input lian tak a ni

Thlang

1. a ni 2. 2. 3. A ni 4. 4. 5. 5.

Thlang

1. a ni 2. 2. 3. A ni 4. 4. 5. 5.

Input tihdanglam theih loh

Ṭhenkhat Value Hetah hian

Input tihkhawtlai a ni

X-Input lian tak a ni

Ṭanpuina thuziak snippet te tak te

Entirna form legend

Thuziak hmasa ber

@ a ni.

Prepended Checkbox a awm tawh

Checkbox a rawn dah tel bawk

File Input a ni

Entirna form legend

Option hrang hrang list

• Option pakhatna chu hei leh chu a ni—a ropui chhan pawh ziak tel ngei ang che
• Option pahnihna pawh check theih a ni a, form result-ah telh theih a ni bawk
• Option pathumna chu—a ni, i lo guess tawh—chu pawh check theih a ni a, form result-ah pawh telh theih a ni bawk
• Option palina hi disable a nih avangin check theih a ni lo.

Note: Labels hian click area lian zawk leh form hman theih zawk atan option zawng zawng a hual vel vek a ni.

Date Range a ni

ah Hun zawng zawng hi Pacific Standard Time (GMT -08:00) anga tarlan a ni.

Textarea ah hian a awm

A tul chuan a chunga field sawifiahna tur help text block rawh.

Option hrang hrang list

• Option pakhatna chu hei leh chu a ni—a ropui chhan pawh ziak tel ngei ang che
• Option pahnihna pawh check theih a ni a, form result-ah telh theih a ni bawk

Thil danglamte chu Save rawh  Titawp

Form hrang hrang stack a awm

I form HTML ah khan add la .form-stacked, an field chungah label i nei ang a, an veilamah ni lovin. Hei hian i form te a tawi emaw, form rit zawk tan input column pahnih i neih chuan a thawk tha hle.

Entirna form legend

X-Input lian tak a ni

Thlang

1. a ni 2. 2. 3. A ni 4. 4. 5. 5.

Entirna form legend

X-Input lian tak a ni

Ṭanpuina thuziak snippet te tak te

Option hrang hrang list

• Option pakhatna chu hei leh chu a ni—a ropui chhan pawh ziak tel ngei ang che
• Option pahnihna pawh check theih a ni a, form result-ah telh theih a ni bawk

Note: Labels hian click area lian zawk leh form hman theih zawk atan option zawng zawng a hual vel vek a ni.

Thil danglamte chu Save rawh  Titawp

Buttons te a awm

Convention angin button hi action atan hman a ni a, link erawh object atan hman a ni thung. Entirnan, "Download" tih hi button a ni thei a, "recent activity" pawh hi link a ni thei bawk.

Button zawng zawng hi light gray style a default vek a, mahse color style hrang hrang atan functional class engemaw zat hman theih a ni. Heng class-ah hian blue .primaryclass, light-blue .infoclass, green .successclass leh red .dangerclass te an tel a ni. Plus, mahni style rolling hi a awlsam peasy.

Entirna button te

Button styles hi engkim a apply theih a .btnni. <a>A tlangpuiin hengte hi , <button>, leh select <input>elements chauh ah i apply duh ang . A lan dan chu hetiang hi a ni:

Size hrang hrang thlak danglam theih a ni

Button lian zawk emaw te zawk emaw i duh em? Have at it!

Disabled state a ni

Button active lo emaw, chhan dang emaw avanga app-in a tihtawp loh emaw tan chuan disabled state hmang la. Chu chu .disabledlink atan leh elements :disabledatan a ni.<button>

Link te pawh a awm

Buttons te a awm

Eng nge a nih

Kan topbar hi fixed bar a ni a, chutah chuan website logo emaw hming emaw, primary navigation leh search form te dah a ni.

A duh angin a siam thei bawk

A chhunga element zawng zawng, leh topbar pumpui pawh, optional a ni. Logo/hming, nav, search, leh secondary nav—a nih loh leh chutiang thil inzawmkhawm eng pawh dah tel i thlang thei bawk.

Dropdown te pawh a tel

Main navigation-ah hian i nav-a dropdown dah theihna tur kan dah tel bawk. A chunga secondary nav (right aligned) hi en la, engtin nge a tih tih i hmu ang.

Tab leh pills te a awm bawk

Secondary navigation awlsam tak siam la, a <ul>. Class dik tak dah belhin tab emaw pill emaw inthlak danglam rawh.

Kan account settings page ang chi content sub-section hrang hrang tan a tha hle a, like content page inkara toggling na tur user timelines te tan pawh a tha hle. Tabbed emaw pill style emaw pawhin a awm thei.

• In
• Ruangam
• Thuchah te
• Settings a awm bawk
• Inbepawp

< ul class = "tabs" te hi a ni 
  <li class = "active" ><a href = "#" > In leh lo </a></li>  
  <li><a href = "#" > A rilru a buai em em a, a rilru a hah em em bawk a 
  <li><a href = "#" > Thuchah </a></li> 
  <li><a href = "#" > Thil awmdan tur </a></li> 
  <li><a href = "#" > Hriat tur </a></li> 
</ul> tih a ni

• In
• Ruangam
• Thuchah te
• Settings a awm bawk
• Inbepawp

<ul class = "pills" > tih hi a ni 
  <li class = "active" ><a href = "#" > In leh lo </a></li>  
  <li><a href = "#" > A rilru a buai em em a, a rilru a hah em em bawk a 
  <li><a href = "#" > Thuchah </a></li> 
  <li><a href = "#" > Thil awmdan tur </a></li> 
  <li><a href = "#" > Hriat tur </a></li> 
</ul> tih a ni

Pagination tih a ni

Ultra simplistic leh minimally styled pagination chu Rdio atanga inspired a ni. Block lian tak hi miss harsa tak a ni a, awlsam taka scalable a ni a, click area lian tak tak a pe bawk.

<div class = "pagination" > tih hi a ni 
  <ul> tih a ni
    <li class = "a hmaa tihtawp tawh" ><a href = "#" > ← A hmaa </a></li>  
    A rilru a buai em em a, a rilru a hah em em bawk a. <li class = "active" ><a href = "#" > 1 </a></li>  
    A rilru a buai em em a, a rilru a hah em em bawk a. 2 </a> < /li > 
    A rilru a buai em em a, a rilru a hah em em bawk a. 3 </a> < /li > 
    A rilru a buai em em a, a rilru a hah em em bawk a. 4 </a> < /li > 
    A rilru a buai em em a, a rilru a hah em em bawk a. 5 </a> < /li > 
    <li class = "a dawt leh tur" ><a href = "#" > A dawt leh tur → </a></li> tih a ni  
  </ul> tih a ni
</div> tih a ni

Alerts bulpui ber berte

div.alert-message

Thiltih hlawhchhamna, hlawhchhamna awm thei, emaw hlawhtlinna emaw tarlanna tur line khata thuchah. A bik takin form atan a tangkai hle.

Message te chu block rawh

div.alert-message.block-message

Message tlem sawifiah ngai te tan chuan paragraph style alerts kan nei a. Hengte hi error message thui zawk bubbling up nan te, user pakhat chu pending action chungchanga vaukhânna atan te, a nih loh leh page-a ngaih pawimawh zawk nan information present mai mai atan te a tha ber.

Modal te pawh a awm

Modals—dialog emaw lightbox emaw—hi background context vawn reng a pawimawhna dinhmunah contextual action atan a tha hle.

Hmanrua Tips

Twipsies hi user buai tak tanpui nan leh kawng dik kawhhmuh nan super useful tak a ni.

Popovers te an ni

Popovers hmangin page pakhatah layout tichhe lovin subtextual information pe rawh.

Bootstrap hi Preboot , open-source pack of mixins leh variables hmanga siam a ni a , Less , CSS preprocessor hmanga web development rang zawk leh awlsam zawka hman theih tura hman tur a ni.

Bootstrap-a Preboot kan hman dan leh i project lo awm turah Less run i thlan chuan engtin nge i hman theih ang tih hi han en teh.

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 CSS tan chuan a bul berah 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.
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - chhungkua : "Georgia" , Times New Roman , Hun , sans - serif ;     
    font -a lian leh te : @size ; 
    font - a rih zawng : @weight ; 
    line- a san zawng : @lineHeight ; 
  } a ni.
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - chhungkua : "Monaco" , Courier Thar , hmun khata awmna ;   
    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.
  . horizontal ( @a tanna rawng : #555, @tawp rawng: #333) { . 
    hnunglam - rawng : @endColor ; 
    background - tih nawn leh : tih nawn leh - x ;
    background - image : - khtml - gradient ( linear , veilam chunglam , dinglam chunglam , ( @startColor ) atanga ( @endColor ) thleng ); // Konqueror a ni   
    background - image : -moz - linear - gradient ( khawi lamah nge , @startColor , @endColor ) ; // FF 3.6+ a ni    
    background - image : -ms - linear - gradient ( khawi lamah nge , @startColor , @endColor ) ; // IE10 a ni    
    background - image : - webkit - gradient ( linear , veilam chunglam , dinglam chunglam , rawng - tawp ( 0 %, @startColor ), rawng - tawp ( 100 %, @endColor )); // Safari 4+, Chrome 2+ te a awm bawk    
    background - image : -webkit - linear - gradient ( khawi lamah nge , @startColor , @endColor ) ; // Safari 5.1+, Chrome 10+ te a awm bawk    
    background - image : -o - linear - gradient ( khawi lamah nge , @startColor , @endColor ) ; // Opera ah hian 11.10 a awm a    
    background - image : linear - gradient ( khawi lamah nge , @startColor , @endColor ); // Le standard a ni   
  } 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.
  . directional ( @a bul tanna rawng : #555, @tawp rawng: #333, @deg: 45deg) { 
    ...
  } a ni.
  . vertical - pathum - rawng ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo hle. 
    ...
  } a ni.
} a ni.

Hnathawh dan leh grid system te

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 ));                 
 
// Grid System hmanga siam a ni
. container { 1000 a ni.
  a zau zawng : @siteWidth ; 
  margin : 0 a ni a ;  
  . chiang zawka siam ();
} a ni.
. 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.
. offset ( @columnOffset : 1 ) { 1. A rilru a hah lutuk chuan a rilru a buai em em a.  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
} a ni.