Bootstrap a ni

Base CSS a ni

Fundamental HTML elements style leh tihchangtlun theih class hrang hrang hmanga tihchangtlun.

Lu a ti sang a! Heng docs te hi v2.3.2 tan a ni a, official takin a support tawh lo. Bootstrap version thar ber hi han en teh!

Typography hmanga ziah a ni

Thupui hrang hrangte

HTML heading zawng zawng, <h1>through <h6>a awm vek.

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

Taksa copy a ni

Bootstrap hian global default font-sizechu 14px a ni a, a line-heightof 20px a ni. Hei hi <body>paragraph leh paragraph zawng zawngah hman a ni. Chu bakah, <p>(paragraphs) te chuan an line-height chanve (default-in 10px) bottom margin an dawng bawk.

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.

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. 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. non metus auctor fringilla. 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 lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. non metus auctor fringilla.

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

<p> ... </p> tih a ni

Lead taksa copy a ni

Paragraph pakhat chu .lead.

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. Duis mollis, est non commodo luctus tih a ni a, a man pawh a tlawm hle.

<p class = "hruaitu" > ... </p> tih a ni

Less hmanga sak a ni

Typographic scale hi variable -a LESS variable pahnih atanga siam a ni.less : @baseFontSizeleh @baseLineHeight. A hmasa ber chu base font-size hman zawng zawng a ni a, a pahnihna chu base line-height a ni. Chu variable leh math awlsam tak tak thenkhat hmangin kan type zawng zawng leh a dangte margin, padding, leh line-height te kan siam thin. Customize la, Bootstrap pawh a adapt thei ang.

Ngai pawimawh

HTML-a default emphasis tags hmangin style lightweight tak tak hmangin hmang rawh.

<small>

Inline emaw, text block emaw de-emphasizing atan chuan tag te tak te hmang la.

He line of text hi fine print anga ngaih tur a ni.

<p> <small> He line of text hi fine print anga ngaih tur a ni. </small> </p> tih a ni

Tumruh

Font-weight rit zawka thuziak snippet pakhat ngaih pawimawh nan.

A hnuaia thuziak snippet hi bold text angin kan render ang .

<strong> chu bold text anga rendered a ni </strong>

Italics hmanga ziah a ni

Italic hmanga thuziak snippet pakhat ngaih pawimawh nan.

A hnuaia thuziak snippet hi italicized text anga render a ni .

<em> chu italic-a ziah angin a render a </em>

Lu a ti sang a!Zalen takin hmang la <b>, <i>HTML5 ah pawh hman theih a ni. <b>thumal emaw thumal emaw pawimawhna belhchhah lovin tarlanna tur a nih laiin <i>a tam zawk chu aw, technical terms, etc. atan a ni.

Alignment class hrang hrang te

Text alignment class nei component hrang hrangah awlsam takin text realign theih.

Left aligned thuziak a awm.

Center aligned thuziak.

Thuziak dinglam aligned a ni.

  1. <p class = "text-left" > Vei lam hawia thuziak. </p> tih a ni 
  2. <p class = "text-center" > A laiah a inmil tur thuziak. </p> tih a ni 
  3. <p class = "text-right" > Thuziak dinglam hawia dah. </p> tih a ni

Emphasis class neih thin a ni

Emphasis utility class tlemte hmangin colour hmangin awmzia sawi rawh.

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. tortor mauris nibh.

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

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. non metus auctor fringilla.

Aenean eu leo ​​quam a ni. 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, a rilru a buai em em bawk a, a rilru a hah em em bawk a.

  1. <p class = "muted" > 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. </p> tih a ni 
  2. <p class = "text-warning" > 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. </p> tih a ni 
  3. <p class = "text-error" > 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. </p> tih a ni 
  4. A rilru a buai em em a, a rilru a hah em em bawk a. Aenean eu leo ​​quam . A rilru a buai em em a, a rilru a hah em em bawk a. </p> tih a ni 
  5. <p class = "text-hlawhtlinna" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p> tih a ni

A tawi zawngin

<abbr>Hover-a expanded version lantir nan abbreviation leh acronym-te tana HTML’s element stylized implementation . Attribute nei abbreviation te titlehian light dotted bottom border leh hover-a help cursor an nei a, hover-ah context dang a pe bawk.

<abbr>

Abbreviation pakhat long hover-a expanded text atan chuan titleattribute kha dah tel bawk ang che.

Attribute tih thumal tawifelna chu attr tih a ni.

A rilru a buai em em a, a rilru a hah em em bawk a . <abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

.initialismFont-size tlem deuh deuh atan abbreviation- ah dah la .

HTML hi chhangphut sliced ​​hnua thil tha ber a ni.

<abbr title = "HyperText Markup Language" class = "a bul tanna" > HTML </abbr>

Address te pawh a awm

Pi leh pu hnai ber emaw hnathawhna taksa pum pui emaw biak theihna tur information present rawh.

<address>

Line zawng zawng chu <br>.

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

Hming kimchang
hmasa [email protected] 
  1. <address> tih a ni
  2.   <strong> Twitter , Inc. chuan a ti a
  3.   795 Folsom Ave, Suite 600 ah chuan a awm a
  4.   A rilru a buai em em a, a rilru a hah em em bawk a. 94107 <br>
  5.   A rilru a buai em em a, a rilru a hah em em bawk a. < /abbr> ( 123 ) 456-7890 
  6. </address> tih a ni
  7.  
  8. <address> tih a ni
  9.   <strong> Hming kimchang </strong><br>
  10.   <a href = "mailto:#" > hmasa ber.a hnuhnung [email protected] </a> 
  11. </address> tih a ni

Blockquote te pawh a awm

I document chhunga source dang atanga block block quoting atan.

Default ah chuan blockquote a awm

HTML<blockquote> eng pawh chu quote angin wrap vek ang che. Straight quote atan chuan a .<p>

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 chu a ante a ni.

  1. <blockquote tih hi a ni
  2.   <p> 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. Integer posuere chu a ante a ni. </p> tih a ni
  3. </blockquote> tih a ni

Blockquote tih theih a ni

Standard blockquote-a simple variation atan style leh content thlak danglam.

Source pakhat hming vuah

<small>Source hriat theihna tur tag dah belh rawh . Source work hming chu <cite>.

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 chu a ante a ni.

Source Title -a mi hmingthang tak 
  1. <blockquote tih hi a ni
  2.   <p> 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. Integer posuere chu a ante a ni. </p> tih a ni
  3.   <small> Mi hmingthang tak <cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote> tih a ni

Display hrang hrang a awm bawk

.pull-rightFloated, dinglam hawia blockquote atan hmang ang che .

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 chu a ante a ni.

Source Title -a mi hmingthang tak 
  1. <blockquote class = "chunglam hawia hruai" > 
  2.   ...
  3. </blockquote> tih a ni

List te a awm

Order loh chuan

Order-in chiang taka a pawimawh loh thil list .

  • 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 hi a chhuak thei lo
    • 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
  1. <ul> tih a ni
  2.   <li> ... </li> tih a ni
  3. </ul> tih a ni

Order a ni

Order -in chiang taka a pawimawhna thil list .

  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
  1. <ol> tih a ni
  2.   <li> ... </li> tih a ni
  3. </ol> tih a ni

Style nei lo a ni

list-styleList item-a default leh left padding awm chu paih chhuak rawh (immediate children chauh).

  • 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 hi a chhuak thei lo
    • 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
  1. <ul class = "style nei lo" > 
  2.   <li> ... </li> tih a ni
  3. </ul> tih a ni

Inline a ni

List item zawng zawng chu line khatah dah la, inline-blocklight padding thenkhat nen.

  • Lorem chu ipsum a ni
  • Phasellus iaculis tih a ni a
  • Nulla volutpat a ni
  1. <ul class = "inline" tih a ni > 
  2.   <li> ... </li> tih a ni
  3. </ul> tih a ni

Hrilhfiahna

Thumal list leh a kaihhnawih sawifiahna.

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. 
  1. <dl> tih a ni
  2.   <dt> ... </dt> tih a ni
  3.   <dd> ... </dd> tih a ni
  4. </dl> tih a ni

Horizontal hmanga sawifiahna

Term leh description te chu <dl>line up side-by-side-in siam rawh.

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.
Felis euismod semper chu a chhuak a
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. 
  1. <dl class = "dl-horizontal" > tih hi a awmzia a awm lo 
  2.   <dt> ... </dt> tih a ni
  3.   <dd> ... </dd> tih a ni
  4. </dl> tih a ni

Lu a ti sang a!Horizontal description lists hian term sei lutuk te chu left column fix a fit theih loh tur te chu a truncate ang text-overflow. Viewport tawi zawkah chuan default stacked layout ah an inthlak ang.

Code a ni

Inline a ni

Code inline snippet te chu <code>.

Entirnan, <section>inline angin wrapped tur a ni. 
  1. Entirnan , <code> & lt te ; section & gt ;</ code > chu inline angin wrap tur a ni .

Basic block a ni

<pre>Code line tam tak atan hmang ang che . Rendering dik tak neih theih nan code chhunga angle bracket awm zawng zawng chu escape ngei ngei tur a ni.

<p>Hetah hian thuziak entir rawh...</p>
  1. <pre> tih a ni
  2.   <p>Hetah hian thuziak entir rawh...</p>
  3. </pre> tih a ni

Lu a ti sang a!Tag chhungah code <pre>chu veilam hnaih thei ang berah dah ngei ang che; tab zawng zawng a render vek ang.

Class chu duhthusamin i dah thei .pre-scrollablea, chu chuan max-height 350px a set ang a, y-axis scrollbar a pe ang.

Table te pawh a awm

Default style hrang hrang a awm

Basic styling atan—light padding leh horizontal divider chauh—base class .tablechu eng <table>.

# a ni. Hming hmasa Hming hnuhnung User hming a ni
1. a ni Mark Otto chuan a ti a @mdo a ni
2. 2. Jakoba chu a ni Thornton-a chuan a ti a @thau
3. A ni Larry chuan a ti a chu Sava chu a ni @twitter ah a awm 
  1. <table class = "table" > tih hi a ni 
  2.   ...
  3. </table> tih a ni

Class thlan theih a ni

.tableBase class ah hian a hnuaia class awm zawng zawng hi add theih a ni.

.table-striped

<tbody>via :nth-childCSS selector chhunga table row eng pawhah zebra-striping a dah belh (IE7-8-ah a awm lo).

# a ni. Hming hmasa Hming hnuhnung User hming a ni
1. a ni Mark Otto chuan a ti a @mdo a ni
2. 2. Jakoba chu a ni Thornton-a chuan a ti a @thau
3. A ni Larry chuan a ti a chu Sava chu a ni @twitter ah a awm 
  1. <table class = "table table-a innghat" > 
  2.   ...
  3. </table> tih a ni

.table-bordered

Table-ah chuan border leh rounded corner te dah la.

# a ni. Hming hmasa Hming hnuhnung User hming a ni
1. a ni Mark Otto chuan a ti a @mdo a ni
Mark Otto chuan a ti a @getbootstrap ah hian a awm
2. 2. Jakoba chu a ni Thornton-a chuan a ti a @thau
3. A ni Larry chuan a ti a @twitter ah a awm 
  1. <table class = "table table-a awm" > 
  2.   ...
  3. </table> tih a ni

.table-hover

a chhunga table row hrang hrangah hover state enable rawh <tbody>.

# a ni. Hming hmasa Hming hnuhnung User hming a ni
1. a ni Mark Otto chuan a ti a @mdo a ni
2. 2. Jakoba chu a ni Thornton-a chuan a ti a @thau
3. A ni Larry chuan a ti a @twitter ah a awm 
  1. <table class = "table table-hover" > tih a ni 
  2.   ...
  3. </table> tih a ni

.table-condensed

Cell padding chu a chanvea then a, table te chu a compact zawkin a siam thin.

# a ni. Hming hmasa Hming hnuhnung User hming a ni
1. a ni Mark Otto chuan a ti a @mdo a ni
2. 2. Jakoba chu a ni Thornton-a chuan a ti a @thau
3. A ni Larry chuan a ti a @twitter ah a awm 
  1. <table class = "table table-a inzawm" > 
  2.   ...
  3. </table> tih a ni

Row class thlan theih a ni

Table row hrang hrang color turin contextual class hmang ang che.

Pawl Hrilhfiahna
.success Thiltih hlawhtling emaw, thil \ha emaw a nih thu a tarlang.
.error Thil hlauhawm tak emaw, thil tha lo awm thei emaw a nih thu a tarlang.
.warning Ngaihsak ngai thei vaukhânna a târ lang.
.info Default styles ai chuan a danglamna atan hman a ni.
# a ni. Thilsiam Pawisa lak a ni Nihna
1. a ni TB - Thla tin 01/04/2012 khan a lo thleng ta a ni Pawmpui
2. 2. TB - Thla tin 02/04/2012 khan a lo thleng a A hnawl ta
3. A ni TB - Thla tin 03/04/2012 khan a lo thleng a Hmabak
4. 4. TB - Thla tin 04/04/2012 khan a lo thleng ta a ni Confirm turin call in rawh 
  1. ...
  2.   < tr class = "hlawhtlinna" >
  3.     <td> 1 < /td> tih a ni
  4.     <td>TB - Thla tin</ td >
  5.     <td> 01 / 04 / 2012 khan a lo thleng ta a ni
  6.     <td>A pawm tawh</ td >
  7.   </ tr > tih a ni
  8. ...

Table markup a support bawk

Table HTML elements supported te leh an hman dan tur list.

Thlung Hrilhfiahna
<table> Tabular format-a data tarlanna tur wrapping element
<thead> Table header row ( <tr>) atanga table column label tur container element
<tbody> <tr>Table taksa chhunga table row ( ) awmte tan container element
<tr> Row khata lang table cell ( <td>or ) set pakhat tana container element<th>
<td> Table cell hmasa ber a ni
<th> Column (or row, scope leh placement a zirin) label siamna tur table cell bik
<caption> Table-a thil awmte sawifiahna emaw, a tawi zawngin emaw, a bik takin screen reader-te tan a tangkai hle 
  1. <table> tih a ni
  2.   <caption> ... </caption> tih hi a ni
  3.   <lupui> tih a ni
  4.     <tr> tih a ni
  5.       <th> ... </th> tih a ni
  6.       <th> ... </th> tih a ni
  7.     </tr> tih a ni
  8.   </thead> tih a ni
  9.   <tbody> tih a ni
  10.     <tr> tih a ni
  11.       <td> ... </td> tih a ni
  12.       <td> ... </td> tih a ni
  13.     </tr> tih a ni
  14.   </tbody> tih a ni
  15. </table> tih a ni

Form hrang hrang

Default style hrang hrang a awm

<form>Mimal form control-te chuan styling an dawng a, mahse markup-a tihdanglamna lian tham emaw, base class mamawhna engmah a awm lo . Form controls chungah stacked, left-aligned labels a awm thin.

Thawnthu Hetah hian block-level help text entir rawh. 
  1. <form> tih a ni
  2.   <fieldset> tih a ni
  3.     <legend> Thuziak </legend> tih a ni
  4.     <label> Label hming </label> tih a ni
  5.     <input type = "text" placeholder = "Thil pakhat ziak rawh..." >  
  6.     <span class = "help-block" > Hetah hian block-level help text entir rawh. </span> tih a ni 
  7.     <label class = "checkbox" > tih hi a ni 
  8.       <input type = "checkbox" > Min lo en ve teh 
  9.     </label> tih a ni
  10.     <button type = "submit" class = "btn" > A rawn thawn chhuak rawh </button>  
  11.   </fieldset> tih a ni
  12. </form> tih a ni

Layout duhthusam a awm bawk

Bootstrap nen hian common use case atan optional form layout pathum a awm bawk.

Search form a ni

Extra-rounded text input atan .form-searchform-ah leh a- .search-queryah te dah belh rawh .<input>

  1. <form class = "form-a zawn chhuah" > 
  2.   <input type = "text" class = "input-medium zawn-zawhna" >  
  3.   <button type = "submit" class = "btn" > zawng rawh </button>  
  4. </form> tih a ni

Inline-a siam a ni

.form-inlineLeft-aligned label leh inline-block control te tan chuan layout compact tak a awm theih nan add bawk ang che.

  1. <form class = "form-inline" > tih hi a ni 
  2.   <input type = "text" class = "input-te tak te" hmun dahna = "Email" >   
  3.   <input type = "password" class = "input-te tak te" hmunpui = "Password" >   
  4.   <label class = "checkbox" > tih hi a ni 
  5.     <input type = "checkbox" > Min hre reng ang che 
  6.   </label> tih a ni
  7.   < button type = "submit" class = "btn" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo  
  8. </form> tih a ni

Horizontal ang maia awm

Label te chu dinglam hawiin align la, veilamah float la, control te nen line khatah a lang ang. Default form atanga markup thlak tam ber a ngai:

  • .form-horizontalForm ah chuan add rawh
  • Label leh control te chu wrap in.control-group
  • .control-labelLabel ah chuan add rawh
  • .controlsAlignment dik tak neih theih nan a kaihhnawih control awm zawng zawng chu wrap rawh
  1. <form class = "a awm dan tur" > 
  2.   <div class = "thunun-tu pawl" > 
  3.     <label class = "control-label" for = "inputEmail" > Email </label> tih a ni  
  4.     <div class = "a thunun" > 
  5.       <input type = "text" id = "inputEmail" hmunpui = " Email" >   
  6.     </div> tih a ni
  7.   </div> tih a ni
  8.   <div class = "thunun-tu pawl" > 
  9.     <label class = "control-label" for = "inputPassword" > Thusawi </label> tih a ni  
  10.     <div class = "a thunun" > 
  11.       <input type = "password" id = "inputPassword" hmunpui = " Password" >   
  12.     </div> tih a ni
  13.   </div> tih a ni
  14.   <div class = "thunun-tu pawl" > 
  15.     <div class = "a thunun" > 
  16.       <label class = "checkbox" > tih hi a ni 
  17.         <input type = "checkbox" > Min hre reng ang che 
  18.       </label> tih a ni
  19.       < button type = "submit" class = "btn" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo  
  20.     </div> tih a ni
  21.   </div> tih a ni
  22. </form> tih a ni

Form control te pawh a thlawp

Entirna form layout-a support standard form control entirnan.

Input te pawh a awm

Form control tlanglawn ber, text hmanga input field. HTML5 chi hrang hrang: text, password, datetime, datetime-local, date, thla, hun, kar, number, email, url, search, tel, leh color te tan support a keng tel bawk.

typeEngtik lai pawhin a specified hman a ngai .

  1. <input type = "text" hmunpui = "Thuziak input" >

Textarea ah hian a awm

Form control a ni a, chu chuan text line tam tak a support thei. rowsA tul angin attribute thlak rawh .

  1. <textarea rows = "3" ></textarea> tih a ni

Checkbox leh radio te pawh a awm bawk

Checkbox hi list pakhata option pakhat emaw, a aia tam emaw thlan nan a ni a, radio erawh chu tam tak zinga option pakhat thlan nan a ni thung.

Default (stack tawh) a ni.


  1. <label class = "checkbox" > tih hi a ni 
  2.   <input chi = "checkbox" man = "" >  
  3.   Option pakhatna chu hei leh chu a ni—a ropui chhan pawh ziak tel ngei ang che
  4. </label> tih a ni
  5.  
  6. <label class = "radio" > tih hi a ni 
  7.   <input type = "radio" hming = "optionsRadios" id = "optionsRadios1" value = "option1" tih check a ni >     
  8.   Option pakhatna chu hei leh chu a ni—a ropui chhan pawh ziak tel ngei ang che
  9. </label> tih a ni
  10. <label class = "radio" > tih hi a ni 
  11.   <input type = "radio" hming = "optionsRadios" id = "optionsRadios2" value = "thil thlan2" >    
  12.   Option pahnihna hi thil dang a ni thei a, a thlan chuan option pakhat chu a deselect ang
  13. </label> tih a ni

Inline-a checkbox a awm bawk

Class chu checkbox emaw radio emaw series-ah dah la, .inlineline khata controls a lang ang.

  1. <label class = "inline ah hian checkbox a awm" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "thil thlan1" > 1. 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   
  3. </label> tih a ni
  4. <label class = "inline ah hian checkbox a awm" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "thil thlan2" > 2. 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   
  6. </label> tih a ni
  7. <label class = "inline ah hian checkbox a awm" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "thil thlan3" > 3. 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   
  9. </label> tih a ni

A thlang chhuak

Default option hmang la, a nih loh leh multiple="multiple"vawi khata option tam tak entir turin a tarlang bawk ang che.


  1. < thlang rawh>
  2.   <option> 1 </option> tih a ni
  3.   <option> 2 </option> tih a ni
  4.   <option> 3 </option> tih a ni
  5.   <option> 4 </option> tih a ni
  6.   <option> 5 </option> tih a ni
  7. </select> tih a ni
  8.  
  9. <a tam zawk thlang rawh = "multiple" > 
  10.   <option> 1 </option> tih a ni
  11.   <option> 2 </option> tih a ni
  12.   <option> 3 </option> tih a ni
  13.   <option> 4 </option> tih a ni
  14.   <option> 5 </option> tih a ni
  15. </select> tih a ni

Form control te pawh tihzauh a ni

Browser control awm tawhte chungah dah belhin Bootstrap hian form component tangkai dang a keng tel bawk.

Input prepend leh appended te pawh a awm bawk

Text-based input eng pawh hma emaw, a hnuah emaw text emaw button emaw dah belh rawh. selectHetah hian elements te hi an support lo tih hre reng ang che .

Default duhthlan tur a awm

Input pakhata text prepend emaw append emaw turin class pahnih zinga pakhat nen an .add-onleh an wrap ang che.input

@ a ni.

.00 a ni 
  1. <div class = "input-prepend" > tih hi a awmzia a awm lo 
  2.   <span class = "add-on" > @ </span> tih hi a ni 
  3.   <input class = "span2" id = "prependedInput" type = "text" hmun pawimawh = "Username" >    
  4. </div> tih a ni
  5. <div class = "input-append" > tih hi a ni 
  6.   <input class = "span2" id = "apendInput " type = "text" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo hle   
  7.   A rilru a buai em em a, a rilru a hah em em bawk a. .00 < / span > 
  8. </div> tih a ni

Combined a ni

.add-onInput pakhat prepend leh append turin class pahnih leh instance pahnih hmang rawh .

$ a ni .00 a ni 
  1. <div class = "input-prepend tur a ni" > 
  2.   <span class = "add-on" > $ </span> tih hi a ni 
  3.   <input class = "span2" id = "a dah luh " type = "text" >   
  4.   A rilru a buai em em a, a rilru a hah em em bawk a. .00 < / span > 
  5. </div> tih a ni

Text ai chuan button a awm

<span>A with text ai chuan .btninput pakhatah button (a nih loh leh pahnih) attach turin a hmang zawk ang che.

  1. <div class = "input-append" > tih hi a ni 
  2.   <input class = "span2" id = "InputButton dah belh " type = "text" >   
  3.   <button class = "btn" type = "button" > Kal rawh! </button> tih a ni  
  4. </div> tih a ni
  1. <div class = "input-append" > tih hi a ni 
  2.   <input class = "span2" id = "InputButtons appended" type = "text" > tih a ni   
  3.   <button class = "btn" type = "button" > zawng rawh </button>  
  4.   <button class = "btn" type = "button" > Thil thlan theih </button>  
  5. </div> tih a ni

Button a rawn tla thla thin

  1. <div class = "input-append" > tih hi a ni 
  2.   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. id = " appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-pang" > tih hi a ni 
  4.     <button class = "btn atanga chhuak" data-toggle = "a tlak thlak" >  
  5.       Thiltih
  6.       < span class = "caret" tih a ni a, a hlawhtlinna chu a hlawhtlinna a ni 
  7.     </button> tih a ni
  8.     <ul class = "a hnuaia mi ang hian" > 
  9.       ...
  10.     </ul> tih a ni
  11.   </div> tih a ni
  12. </div> tih a ni
  1. <div class = "input-prepend" > tih hi a awmzia a awm lo 
  2.   <div class = "btn-pang" > tih hi a ni 
  3.     <button class = "btn atanga chhuak" data-toggle = "a tlak thlak" >  
  4.       Thiltih
  5.       < span class = "caret" tih a ni a, a hlawhtlinna chu a hlawhtlinna a ni 
  6.     </button> tih a ni
  7.     <ul class = "a hnuaia mi ang hian" > 
  8.       ...
  9.     </ul> tih a ni
  10.   </div> tih a ni
  11.   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 . type = " text " >   
  12. </div> tih a ni
  1. <div class = "input-prepend tur a ni" > 
  2.   <div class = "btn-pang" > tih hi a ni 
  3.     <button class = "btn atanga chhuak" data-toggle = "a tlak thlak" >  
  4.       Thiltih
  5.       < span class = "caret" tih a ni a, a hlawhtlinna chu a hlawhtlinna a ni 
  6.     </button> tih a ni
  7.     <ul class = "a hnuaia mi ang hian" > 
  8.       ...
  9.     </ul> tih a ni
  10.   </div> tih a ni
  11.   <input class = "span2" id = "a tih tur awmte " type = "text" >   
  12.   <div class = "btn-pang" > tih hi a ni 
  13.     <button class = "btn atanga chhuak" data-toggle = "a tlak thlak" >  
  14.       Thiltih
  15.       < span class = "caret" tih a ni a, a hlawhtlinna chu a hlawhtlinna a ni 
  16.     </button> tih a ni
  17.     <ul class = "a hnuaia mi ang hian" > 
  18.       ...
  19.     </ul> tih a ni
  20.   </div> tih a ni
  21. </div> tih a ni

Segmented dropdown group hrang hrangah a awm

  1. <form> tih a ni
  2.   <div class = "input-prepend" > tih hi a awmzia a awm lo 
  3.     <div class = "btn-group" > ... </div> tih hi a ni 
  4.     <input chi hrang hrang = "text" > 
  5.   </div> tih a ni
  6.   <div class = "input-append" > tih hi a ni 
  7.     <input chi hrang hrang = "text" > 
  8.     <div class = "btn-group" > ... </div> tih hi a ni 
  9.   </div> tih a ni
  10. </form> tih a ni

Search form a ni

  1. <form class = "form-a zawn chhuah" > 
  2.   <div class = "input-append" > tih hi a ni 
  3.     <input type = "text" class = "span2 zawn-zawhna" >  
  4.     <button type = "submit" class = "btn" > zawng rawh </button>  
  5.   </div> tih a ni
  6.   <div class = "input-prepend" > tih hi a awmzia a awm lo 
  7.     <button type = "submit" class = "btn" > zawng rawh </button>  
  8.     <input type = "text" class = "span2 zawn-zawhna" >  
  9.   </div> tih a ni
  10. </form> tih a ni

Sizing control tur a ni

Relative sizing class hmangin .input-largei input te chu class hmangin grid column size te nen a inmil emaw ang emaw hmang la .span*.

Block level input te pawh a awm bawk

<input>Eng emaw <textarea>element emaw chu block level element ang maia awm tir rawh .

  1. <input class = "input-block-level" type = "text" hmunpui = " .input -block-level" >

Relative sizing a ni

  1. <input class = "input-mini" type = "text" awmna tur = " .input -mini" >   
  2. <input class = "input-te" type = "text" hmunpui = " .input -te" >   
  3. <input class = "input-medium" type = "thuziak" hmunpui = " .input -medium" >   
  4. <input class = "input-lian" type = "text" hmunpui = " .input -lian" >   
  5. <input class = "input-xlarge" type = "text" hmunpui = " .input -xlarge" >   
  6. <input class = "input-xxlarge" type = "text" hmunpui = " .input -xxlarge" >

Lu a ti sang a!Nakin lawka version hrang hrangah chuan kan button size nena inmil turin heng relative input class te hman dan hi kan thlak danglam dawn a ni. Entirnan, .input-largeinput pakhat padding leh font-size a ti sang ang.

Grid sizing a ni

Grid column size inang input te tan .span1to hmang ang che ..span12

  1. <input class = "span1" type = "text" awmna tur = " .span1 " >   
  2. <input class = "span2" type = "text" hmunpui = " .span2 " >   
  3. <input class = "span3" type = "text" hmunpui = " .span3 " >   
  4. < class thlang rawh = "span1" > 
  5.   ...
  6. </select> tih a ni
  7. < class thlang rawh = "span2" > 
  8.   ...
  9. </select> tih a ni
  10. < class thlang rawh = "span3" > 
  11.   ...
  12. </select> tih a ni

Line khata grid input tam tak awm tur chuan modifier class hmang la.controls-row , spacing dik tak neih theih nan . Input te chu white-space collapse turin a float a, margin dik tak a set a, float chu a clear bawk.

  1. <div class = "a thunun" > 
  2.   <input class = "span5" type = "text" awmna tur = " .span5 " >   
  3. </div> tih a ni
  4. <div class = "controls-row a thunun" > 
  5.   <input class = "span4" type = "text" awmna tur = " .span4 " >   
  6.   <input class = "span1" type = "text" awmna tur = " .span1 " >   
  7. </div> tih a ni
  8. ...

Input edit theih loh

Form markup tak tak hmang lovin edit theih loh form-ah data present rawh.

Ṭhenkhat chuan hetah hian an ngai pawimawh hle 
  1. <span class = "input-xlarge uneditable-input" > Hetah hian value thenkhat </span>

Form thiltih te

Form pakhat chu action group (button) hmangin titawp rawh. a chhunga dah a nih .form-actionschuan button te chu form controls te nen line up turin automatic in a indent ang.

  1. <div class = "thil tih dan tur" > 
  2.   <button type = "submit" class = "btn btn-primary" > Thil danglamte chu save rawh </button>  
  3.   <button type = " button" class = "btn" > A chhuah dawn chuan a chhuak leh ta a  
  4. </div> tih a ni

Ṭanpuina thuziak

Form controls chhehvela help text lo lang tur inline leh block level support.

Inline-a tanpuina

Inline-a tanpuina thuziak 
  1. <input type = "text" ><span class = "inline-a ṭanpuina" > Inline-a ṭanpuina thuziak </span>

Block puih theih a ni

Help text block sei zawk, line thara break leh line pakhat aia zau thei. 
  1. <input type = "text" ><span class = "help-block" > Help text block sei zawk, line thara break leh line pakhat aia zau thei. </span> tih a ni

Form control state te a awm

Form control leh label chungchanga feedback state bulpui neia hmangtute emaw tlawhtute hnenah feedback pe rawh.

Input focus a ni

outlineForm control thenkhata default styles te chu kan paih a, box-shadowa aiah a kan apply thin a :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Hei hi a focus a ni..." >

Input dik lo a awm

Style inputs hmangin default browser functionality hmangin :invalid. a , field chu optional a nih loh chuan attribute typechu add la, (a awm chuan) a .requiredpattern

Hei hi Internet Explorer 7-9 version-ah chuan CSS pseudo selector support a awm loh avangin a awm lo.

  1. <input class = "span3" type = "email" a ngai >

Input te chu tihtawp a ni

Input pakhatah attribute chu dah la, disableduser input loh nan leh look danglam deuh deuh trigger rawh.

  1. <input class = "input-xlarge" id = "Input tihtawp" type = "text" placeholder = "Hetah hian input tihtawp a ni..." tihtawp >

Validation tih a ni

Bootstrap ah hian error, warning, info, leh hlawhtlinna message te validation style a awm a. Hman tur chuan, a chhehvela class dik tak chu dah belh rawh .control-group.

Thil engemaw a kal sual a ni mai thei
Khawngaihin tihsual kha siam tha rawh
Username a la a ni
Woohoo! 
  1. <div class = "control-group hriattirna" > 
  2.   <label class = "control-label" for = "inputWarning" > Vaukhânna nen ziak lut rawh </label>  
  3.   <div class = "a thunun" > 
  4.     <input type = "text" id = "inputWarning" > tih hi a awmzia a awm lo  
  5.     <span class = "help-inline" > Thil engemaw a kal sual mai thei </span> 
  6.   </div> tih a ni
  7. </div> tih a ni
  8.  
  9. <div class = "control-group tihsual" > 
  10.   <label class = "control-label" for = "inputError" > Thil dik lo awmin input rawh </label>  
  11.   <div class = "a thunun" > 
  12.     <input chi hrang hrang = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Khawngaihin tihsual kha siam tha rawh </span> 
  14.   </div> tih a ni
  15. </div> tih a ni
  16.  
  17. <div class = "control-group chanchin" > 
  18.   <label class = "control-label" for = "inputInfo" > Info nen input rawh </label>  
  19.   <div class = "a thunun" > 
  20.     <input chi hrang hrang = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > User hming chu lak a ni tawh </span> 
  22.   </div> tih a ni
  23. </div> tih a ni
  24.  
  25. <div class = "control-group hlawhtlinna" > 
  26.   <label class = "control-label" for = "inputSuccess" > Hlawhtlinna nen input rawh </label>  
  27.   <div class = "a thunun" > 
  28.     <input type = "text" id = "input Hlawhtlinna" >  
  29.     <span class = "inline-a ṭanpuina" > Woohoo! </span> tih a ni 
  30.   </div> tih a ni
  31. </div> tih a ni

Buttons te a awm

Default button a awm bawk

Button styles hi .btnclass hman chuan eng thil pawhah hman theih a ni. <a>Mahse, a tlangpuiin hengte hi only leh <button>elements te hi rendering tha ber atan i hmang duh ang .

Kawrkilh class="" tih a ni. Hrilhfiahna
btn Standard gray button a awm a, gradient a awm bawk
btn btn-primary Extra visual weight a pe a, button set-ah primary action a hriat theih bawk
btn btn-info Default styles ai chuan a danglamna atan hman a ni
btn btn-success Thiltih hlawhtling emaw, thil \ha emaw a nih thu a tarlang
btn btn-warning He hmalaknaah hian fimkhur a ngai tih a tilang
btn btn-danger Thil hlauhawm tak emaw, thil tha lo awm thei emaw a nih thu a tarlang
btn btn-inverse Dark grey button thlak danglam la, semantic action emaw hmanna emaw nena inzawm lo
btn btn-link Button pakhat chu button awm dan vawng reng chungin link ang maia siamin deemphasize rawh

Cross browser nena inmil theih a ni

IE9 hian rounded corner-ah background gradient a crop lo a, chuvang chuan kan paih chhuak a ni. Related, IE9 hian disabled buttonelements te chu a jankify a, text gray ah a render a, text-shadow tenawm tak kan siam that theih loh.

Button lian leh te te

Button lian zawk emaw te zawk emaw i duh em? Add .btn-large, .btn-small, or .btn-minisize dang atan.

  1. <p> tih a ni
  2.   <button class = "btn btn- lian btn-primary" type = "button" > Button lian tak </button> tih a ni  
  3.   <button class = "btn btn-large" type = "button" > A lian ber </button> tih hi a ni  
  4. </p> tih a ni
  5. <p> tih a ni
  6.   <button class = "btn btn-primary" type = "button" > A hmasa ber atan chuan </button> tih a ni  
  7.   <button class = "btn" type = "button" > A hmasa ber atan chuan </button> tih a ni  
  8. </p> tih a ni
  9. <p> tih a ni
  10.   <button class = "btn btn-te btn-primary" type = "button" > 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  
  11.   <button class = "btn btn-small" type = "button" > 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  
  12. </p> tih a ni
  13. <p> tih a ni
  14.   <button class = "btn btn-mini btn-primary" type = "button" > 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  
  15.   <button class = "btn btn-mini" type = "button" > 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  
  16. </p> tih a ni

Block level button—nu leh pa pakhat zau zawng zawnga huam vek—chu , dah belhin siam .btn-blockrawh.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Block level button </button> tih hi a awmzia a awm lo  
  2. <button class = "btn btn-large btn-block" type = "button" > Block level button </button> tih hi a awmzia a awm lo

Disabled state a ni

Button te chu 50% fade lehin unclick theih loh angin siam rawh.

Anchor element a awm

.disabledClass chu <a>buttons ah dah la .

Primary link a ni Zawm 

  1. <a href = "#" class = "btn btn lian tak btn-primary tihtawp" > Primary link </a>  
  2. <a href = "#" class = "btn btn-large chu tihtawp a ni" > Link </a>

Lu a ti sang a!Hetah hian utility class atan kan hmang .disableda, common class nen a inang a .active, chuvangin prefix a ngai lo. Tin, he class hi aesthetic tan chauh a ni a; hetah hian link disable tur chuan custom JavaScript i hmang tur a ni.

Button element a awm

Buttons ah chuan disabledattribute chu add rawh .<button>

  1. <button type = "button" class = "btn btn-large btn-primary tihtawp" tihkhawtlai = "tihkhawtlai" > Primary button </button>   
  2. <button type = "button" class = "btn btn-large" tihkhawtlai a ni > Button </button >

Class pakhat, tag tam tak a awm

.btnClass chu <a>, <button>, emaw <input>element pakhatah hmang rawh .

Zawm 
  1. <a class = "btn" href = "" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo  
  2. < button class = "btn" type = "submit" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo  
  3. <input class = "btn" type = "button" value = "Input" > tih hi a awmzia a awm lo   
  4. <input class = "btn" type = "submit" value = "Thil rawn thawn" >

Thil tih dan tha ber angin, cross-browser rendering inmil theih nan i context atan element chu match tum ang che. , i neih chuan i button atan inputan hmang ang che.<input type="submit">

Hmanlai thil hlui te

<img>Eng project pawha awlsam taka image style turin element pakhatah class dah belh rawh .

140x140 a ni 140x140 a ni 140x140 a ni 
  1. <img src = "..." class = "img-a round" > tih a ni  
  2. <img src = "..." class = "img-circle" > tih hi a awmzia a awm lo  
  3. A rilru a hah lutuk chuan a rilru a buai em em a

Lu a ti sang a! .img-roundedleh .img-circleIE7-8 ah hian support an neih loh avangin an thawk lo border-radiusbawk.

Glyphicons hmanga icon siam a ni

Icon glyph te a awm bawk

Icon 140 sprite form-a siam, dark gray (default) leh white-a awm, Glyphicons -in a pe a ni.

  • icon-glass hmanga siam a ni
  • icon-music a ni
  • icon-a zawn chhuah a ni
  • icon-envelope hmanga siam a ni
  • icon-thinlung a ni
  • icon-star a ni
  • icon-star-a awm lo
  • icon-a hmangtu a ni
  • icon-film a ni
  • icon-th-a lian a ni
  • icon-th a ni
  • icon-th-list a ni
  • icon-ok a ni
  • icon-a tihbo theih a ni
  • icon-zoom-in a awm bawk
  • icon-zoom-a chhuah theih a ni
  • icon-off a ni
  • icon-signal a awm bawk
  • icon-cog a ni
  • icon-trash tih a ni
  • icon-home a ni
  • icon-file a ni
  • icon-hun a ni
  • icon-road a ni
  • icon-download-alt tih a ni
  • icon-download theih a ni
  • icon-upload a ni
  • icon-inbox a awm bawk
  • icon-play-circle hmanga khelh theih a ni
  • icon-a tih nawn leh theih a ni
  • icon-refresh a ni
  • icon-list-ah a awm a
  • icon-lock hmanga tih theih a ni
  • icon-flag hmanga siam a ni
  • icon-headphone te pawh a awm bawk
  • icon-volume-off a ni
  • icon-volume-a tihhniam theih a ni
  • icon-volume-up a ni
  • icon-qrcode hmanga ziah a ni
  • icon-barcode hmanga siam a ni
  • icon-tag hmanga ziah a ni
  • icon-tag te a awm bawk
  • icon-lehkhabu a ni
  • icon-bookmark hmanga ziah a ni
  • icon-a tihchhuah a ni
  • icon-camera hmanga siam a ni
  • icon-font hmanga ziah a ni
  • icon-bold a ni
  • icon-italic hmanga ziah a ni
  • icon-text-a san zawng
  • icon-text-a zau zawng a ni
  • icon-align-khawi lamah nge a awm
  • icon-align-a laiah a awm
  • icon-align-ding lam a ni
  • icon-align-a dik leh dik loh
  • icon-list-ah a awm
  • icon-indent-a awm a ni
  • icon-indent-a dinglam a ni
  • icon-facetime-video hmanga siam a ni
  • icon-thlalak a ni
  • icon-pencil hmanga ziah a ni
  • icon-map-a chhinchhiahna a ni
  • icon-a siamrem theih a ni
  • icon-tint a ni
  • icon-edit a ni
  • icon-share theih a ni
  • icon-check theih a ni
  • icon-a kal theih a ni
  • icon-step- hnunglam hawiin
  • icon-fast- hnunglam hawia awm
  • icon- hnunglam hawiin
  • icon-play a ni
  • icon-pause a ni
  • icon-stop a ni
  • icon-hmalam pan tur a ni
  • icon-fast-hmalam pan tur a ni
  • icon-step-hmalam pan tur a ni
  • icon-eject a ni
  • icon-chevron-a awm a ni
  • icon-chevron-a dinglam a ni
  • icon-plus-a chhinchhiahna
  • icon-minus-a chhinchhiahna
  • icon-remove-sign tih a ni
  • icon-ok-a chhinchhiahna
  • icon-zawhna- chhinchhiahna
  • icon-info-a chhinchhiahna a ni
  • icon-screenshot a ni
  • icon-remove-circle tih a ni
  • icon-ok-circle hmanga siam a ni
  • icon-ban-circle hmanga siam a ni
  • icon-arrow-a awm a ni
  • icon-arrow-a dinglamah a awm
  • icon-arrow-up a ni
  • icon-arrow-a hnuai lam a ni
  • icon-share-alt tih a ni
  • icon-resize-a khat a ni
  • icon-resize-te chu a ni
  • icon-plus a ni
  • icon-minus a ni
  • icon-asterisk tih a ni
  • icon-exclamation-a chhinchhiahna
  • icon-thilpek a ni
  • icon-leaf a ni
  • icon-fire a ni
  • icon-mit-a inhawng
  • icon-mit khar a ni
  • icon-vaukhânna- chhinchhiahna
  • icon-plane a ni
  • icon-calendar hmanga ziah a ni
  • icon-random a ni
  • icon-comment ah hian a awm
  • icon-magnet a ni
  • icon-chevron-up a ni
  • icon-chevron-a dah tur a ni
  • icon-retweet a ni
  • icon-shopping-cart hmanga lei theih a ni
  • icon-folder-a khar theih a ni
  • icon-folder-a hawn theih a ni
  • icon-resize-vertical tih a ni
  • icon-resize-horizontal tih a ni
  • icon-hdd a ni
  • icon-bullhorn tih a ni
  • icon-bell a ni
  • icon-certificate a awm bawk
  • icon-thumbs-up a ni
  • icon-thumbs-down a awm bawk
  • icon-kut-dinglam a ni
  • icon-kut-khawtlaiah a awm
  • icon-kut-a dah a ni
  • icon-kut-a hnuai lam
  • icon-circle-arrow-dinglam atanga thlir theih a ni
  • icon-circle-arrow-khawi lamah nge a awm
  • icon-circle-arrow-up hmanga siam a ni
  • icon-circle-arrow-a hnuai lam
  • icon-globe a ni
  • icon-wrench hmanga siam a ni
  • icon-hnathawh tur a awm
  • icon-filter hmanga siam a ni
  • icon-briefcase hmanga ziah a ni
  • icon-a awm vek a ni

Glyphicons tih hi a ni

Glyphicons Halflings hi a tlangpuiin a thlawna lei theih a ni lo a, mahse Bootstrap leh Glyphicons siamtute inkara inremna siamin hei hi developer i nih angin i tan man chawi lovin a awm thei ta a ni. Lawmthu sawina atan a hman theih hunah Glyphicons -a optional link back to dah tel turin kan ngen a che .

A hman dan tur

Icon zawng zawng hian <i>class danglam bik nei tag an mamawh a, prefix chu icon-. Hman tur chuan a hnuaia code hi khawi hmunah pawh dah la:

  1. <i class = "icon-a zawn" ></i> tih a ni

Inverted (white) icon tan pawh style hrang hrang a awm a, extra class pakhat nen ready-a siam a ni. He class hi nav leh dropdown link atan hover leh active states ah a bik takin kan enforce ang.

  1. <i class = "icon-a zawn chhuah icon-white" ></i>

Lu a ti sang a!Button emaw nav link emaw ang bawkin text string bulah i hman hunah, a <i>inkar a awm theih nan tag hnuaiah space dah ngei ngei tur a ni.

Icon entirnan

Button-ah te, toolbar atan button group-ah te, navigation-ah te, prepended form input-ah te hmang ang che.

Buttons te a awm

Button toolbar ah button group a awm a
  1. <div class = "btn-a hmanrua" > 
  2.   <div class = "btn-pang" > tih hi a ni 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-dinglam" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div> tih a ni
  8. </div> tih a ni
Button group pakhatah dropdown a awm
User a ni 
  1. <div class = "btn-pang" > tih hi a ni 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-a hmangtu icon-white" ></i> User </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "a hnuaia mi ang hian" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" </i> Edit rawh </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i > A chhuah dawn chuan a chhuak leh ta a  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Khap rawh </a></li>  
  8.     <li class = "insem darhtu" </li> tih a ni 
  9.     <li><a href = "#" ><i class = "i" </i> Admin siam rawh </a></li>  
  10.   </ul> tih a ni
  11. </div> tih a ni
Button lian leh te te
Arsi Arsi Arsi 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Arsi </a> a ni a, a chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo hle   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Arsi </a> a ni a, a chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo hle   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Arsi </a> tih a ni a, a chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo hle

Navigation tih a ni

  1. <ul class = "nav nav-list" > tih hi a awmzia a awm lo 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-in icon-white" </i> In leh lo </a></li>   
  3.   <li><a href = "#" ><i class = "icon-lehkhabu" </i> Library </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" </i> Hman dan tur </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo  
  6. </ul> tih a ni

Form field hrang hrang a awm

  1. <div class = "thunun-tu pawl" > 
  2.   <label class = " control-label" for = "inputIcon" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo hle  
  3.   <div class = "a thunun" > 
  4.     <div class = "input-prepend" > tih hi a awmzia a awm lo 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo hle   
  7.     </div> tih a ni
  8.   </div> tih a ni
  9. </div> tih a ni