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 a ni class = "row" > tih 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

Site emaw page emaw eng pawh tan 940px zau, centered container layout bulpui ber.

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

Fluid awm dan tur

Fluid emaw liquid emaw page structure flexible tak, min- leh max-width nei leh veilam sidebar nei. Apps tan pawh 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 leh copy te a awm bawk

I webpage siam dan tur standard typographic hierarchy.

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...

Subheading te pawh <strong>leh tih hmangin i dah belh thei bawk<em>

Misc. elements te a ni

Emphasis, address, & abbreviation hmangin

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

Engtikah nge hman tur

Thumal emaw, thumal emaw leh a chhehvêl copy inkâra hmuh theiha thliar hran nân emphasis tag ( <strong>leh ) hman tûr a ni. Plain old attention atan leh slick attention leh title atan <em>hmang ang che .<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.

Address te pawh a awm

Element addresschu—i lo guess tawh!—address-te tan 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 tin hian style engmah hman loha nun tak takah chhiar a nih angin a thupui chu uluk taka structure turin addressline-break ( ) hmangin a tawp tur a ni.<br />

A tawi zawngin

Abbreviation leh acronym atan chuan abbrtag hmang la ( HTML5acronym -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> <cite>

I blockquotearound paragraphleh citetags te kha wrap ngei ang che. Source i cite dawnin citeelement hmang la. CSS hian hming pakhat chu em dash (—) hmangin a hmaah a rawn dah nghal ang.

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 hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a.

Dr. Julius Hibbert-a chuan a sawi a

Order loh chuan<ul>

• Jeremy Bixby chuan a ti a
• Robert Dezure chuan a sawi a
• Josh Washington chuan a sawi a
• Anton Capresi chuan a sawi a
• Ka Team Mates te
  • George Castanza chuan a sawi a
  • Jerry Seinfeld chuan a sawi a
  • Cosmo Kramer chuan a rawn ti a
  • Elaine Bennis chuan a sawi a
  • Newman a ni
• Johana Jakoba
• Paul Pierce chuan a ti a
• Kevin Garnett chuan a sawi a

Style nei lo a ni<ul.unstyled>

• Jeremy Bixby chuan a ti a
• Robert Dezure chuan a sawi a
• Josh Washington chuan a sawi a
• Anton Capresi chuan a sawi a
• Ka Team Mates te
  • George Castanza chuan a sawi a
  • Jerry Seinfeld chuan a sawi a
  • Cosmo Kramer chuan a rawn ti a
  • Elaine Bennis chuan a sawi a
  • Newman a ni
• Johana Jakoba
• Paul Pierce chuan a ti a
• Kevin Garnett chuan a sawi a

Order a ni<ol>

1. Jeremy Bixby chuan a ti a
2. Robert Dezure chuan a sawi a
3. Josh Washington chuan a sawi a
4. Anton Capresi chuan a sawi a
5. Ka Team Mates te
   1. George Castanza chuan a sawi a
   2. Jerry Seinfeld chuan a sawi a
   3. Cosmo Kramer chuan a rawn ti a
   4. Elaine Bennis chuan a sawi a
   5. Newman a ni
6. Johana Jakoba
7. Paul Pierce chuan a ti a
8. Kevin Garnett chuan a sawi a

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 theadte 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 tbodychuvangin i hierarchy chu tbody> tr> tda 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 class = "a tlangpui-table" > 
  ...
</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

<table class = "dawhkan pangngai zebra-striped" > 
...
</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 type = "text/javascript" src = "Js/jquery/jquery.tablesorter.min.js" ></script>  
<script chi hrang hrang = "text/javascript" > tih a ni 
  $ ( lehkha thawn ). inpeih tawh ( function () { . 
    $ ( "table#sortTableEntirna" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script> tih a ni
<table class = "dawhkan pangngai zebra-striped" > 
  ...
</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

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 blue .primaryclass a awm vek thung. Plus, mahni style rolling hi a awlsam peasy.

Entirna button te

Button styles hi engkim a apply theih a .btnni. aA tlangpuiin hengte hi , button, leh select inputelements 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 awm dan 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 awm dan 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>  
    <li><a href = "" > 2 </a></li> tih hi a ni 
    A rilru a buai em em a, a rilru a hah em em bawk a. 3 </a> < /li > 
    <li><a href = "" > 4 ​​</a></li> tih hi a ni 
    <li><a href = "" > 5 </a></li> tih hi a ni 
    <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

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

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.

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/less" type = "text/css" href = "a tlem/bootstrap.less" media = "a zawng zawng" />     
< script type = "text/javascript" src = "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  

.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.

Color hrang hrang 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
@baseline : 20px 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    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(a bul tanna rawng='%d', a tawp rawngr='%d', a tawpna rawng=1)" , @startColor , @tawp rawng // IE8+ a ni  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(a bul tanna rawng='%d', a tawp rawng='%d', a tawp rawng=1)" , @startColor , @tawp rawng )); // IE6 leh IE7 te a ni 
    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   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(a bul tanna rawng='%d', a tawp rawngr='%d', a tawp rawng=0)" , @startColor , @tawp rawng // IE8+ a ni  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(a bul tanna rawng='%d', tawp lam rawng='%d', tawp lam rawng=0)" , @a rawng intan , @tawp rawng )); // IE6 leh IE7 te a ni 
    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: 0.5, @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 ;   
 
// 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.  
  a lan dan : inline a awm ; 
  float : veilam ;
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutter zau zawng * ( @columnSpan - 1 ));         
  margin - veilam : @gridGutter zau zawng ; 
  &: hmasa ber - naupang { .
    margin- a veilam : 0 ; 
  } a ni.
} 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 )) ! pawimawh ;          
} a ni.