Quick-start entirnan te

Template rang tak tak i mamawh em? Heng entîrna bulpui kan dah khawmte hi han en teh:

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" > tih hi a ni 
    ...
  </div> tih a ni
  <div class = "span10" > tih hi a ni 
    ...
  </div> tih a ni
</div> tih a ni

Nesting column hrang hrang te

.rowColumn awm tawh chhungah a siam a ngai a nih chuan i content chu nest rawh .

Nested column te entir nan

<div class = "row" > tih hi a ni 
  <div class = "span12" > tih hi a ni 
    Level 1 a awm a
    <div class = "row" > tih hi a ni 
      <div class = "span6" > tih hi a ni 
        Level 2 a ni
      </div> tih a ni
      <div class = "span6" > tih hi a ni 
        Level 2 a ni
      </div> tih a ni
    </div> tih a ni
  </div> tih a ni
</div> tih a ni

Nangmah ngeiin grid chu roll rawh

Bootstrap chhungah hian default 940px grid system siam dan tur variable tlemte a awm a. Customization tlem tal hmangin column lian leh te, an gutter te, leh an awmna container te chu i siam danglam thei a ni.

Grid chhungah chuan

Tunah hian grid system siam danglam tur variable mamawh te chu preboot.less.

Tunah chuan customize tur a ni

Grid siam danglam tih awmzia chu @grid-*variable pathum thlak danglam leh Less files te recompiling tihna a ni.

Bootstrap hi grid system, column 24 thlenga hman theihna tur equipped a ni a; the default is just 16. Hetah hian i grid variable te chu 24-column grid-a customized a nih dan tur chu a awm ang.

@gridColumns : 24 a awm a;       
@gridColumn zau zawng : 20px ;   
@gridGutter zau zawng : 20px ;   

Vawikhat recompiled a nih chuan i set tawh ang!

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 hman theih dan tur entirnan pahnih chu hetiang hi a ni:

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

<blockquote> tih a ni
  <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 erat chu a hmaa venenatis a ni. </p> tih a ni
  <tlem> Dr. Julius Hibbert </small> tih a ni
</blockquote> tih a ni

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.

Code a ni

<code> <pre>

Tag awlsam pahnih hmangin i code chu style takin pimp rawh. Javascript hmanga awesomeness tam zawk neih duh chuan Google-a code prettify library kha drop in la, i set tawh ang.

Code present a ni

Code, blocks of or just snippets inline, tag dik takah wrapping mai maiin style nen a lantir theih. Line tam tak huam chhunga code block te tan chuan <pre>element hmang ang che. Inline code atan chuan <code>element hmang la.

<div> tih a ni
  <h1>A thupui</h1> tih a ni
  <p>Hetah hian thil engemaw...</p>
</div> tih a ni

<div> <h1> Heading </h1> <p> Hetah hian thil engemaw... </p> </div>
  
  

Inline label te a awm bawk

<span class="label">

I body text-a thumal eng pawh ngaihven emaw, flag emaw rawh.

Eng thil pawh label rawh

Ever needed pakhat chu chutiang fancy New! emaw Code ziah hunah flag pawimawh tak tak ? Awle, tunah chuan i nei tawh a ni. Default-a dah tel chu hetiang hi a ni:

Media grid a ni

HTML footprint hniam leh style tlem zawk nei page-ah thumbnail lian leh te hrang hrang entir rawh.

Entirna thumbnail te

Thumbnail in the .media-gridhi eng size pawh a ni thei a, mahse built-in Bootstrap grid system-a direct-a map a nih chuan a thawk tha ber. Image width 90, 210, leh 330 te chu padding pixel tlemte nen an inzawm khawm a, , , leh column size te chu a inang vek .span2a .span4ni .span6.

Hrawl

Hmanrua

Te

Coding an ni

Media grids hi hman a awlsam a, markup lamah chuan a awlsam deuh. An dimension hi a lem dah telte size atanga chhut chauh a ni.

<ul class = "media-grid" > tih hi a ni 
  <li> tih a ni
    <a href = "#" > tih hi a ni 
      <img class = "thumbnail" src = "A hmunhma leh a hmunhma te" alt = "" >   
    </a> tih a ni
  </li> tih a ni
  <li> tih a ni
    <a href = "#" > tih hi a ni 
      <img class = "thumbnail" src = "A hmunhma leh a hmunhma te" alt = "" >   
    </a> tih a ni
  </li> tih a ni
</ul> tih a ni

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.

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

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.

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

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.

Form field lian leh te te

I markup-ah class tlemte chauh dahin form input, select, emaw width eng pawh customize rawh.textarea

v1.3.0 atang khan form element hrang hrang tan grid-based sizing class te kan dah belh tawh a. Khawngaihin heng te hi .mini, .small, etc class awm tawhte chungah hmang rawh.

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.

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) kha en la, engtin nge a tih tih i hmu ang. Dropdowns litags hian .activetuna page thlan mek tarlanna a support bawk.

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
• Dropdown a ni
  • Secondary link a ni
  • Hetah hian thil dang a awm
  • Link dang a awm bawk

< 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

Chhangphut chi hrang hrang

Breadcrumb navigation hi app emaw site chhunga an awmna hmun tarlanna atan hman a ni a, mahse primary navigation atan erawh hman a ni lo.

• In

• In lam / .
• A laiah phek

• In lam / .
• A laiah phek / .
• A dang pakhat chu

• In lam / .
• A laiah phek / .
• Mi dang pakhat / .
• Hetah hian i awm a ni

<ul class = "chhangphut" > 
  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. <li><a href = "#" > Home </a> <span class = "divider" > / </span></li>   
  A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a. <li><a href = "#" > Middle page </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > A dang pakhat </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Hetah hian i awm </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

.alert-message

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

Javascript chu la rawh »

Entirna code

<div class = "alert-thuchah hriattirna" > 
  <a class = "khar" href = "#" > × </a> tih a ni  
  <p><strong> Guacamole thianghlim tak! </strong> Best check yo self, i hmel a tha lutuk lo. </p> tih a ni
</div> tih a ni

Message te chu block rawh

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

Javascript chu la rawh »

Entirna code

<div class = "alert-thuchah block-thuchah hriattirna" > 
  <a class = "khar" href = "#" > × </a> tih a ni  
  <p><strong> Guacamole thianghlim tak! Hei hi vaukhânna a ni! </strong> Best check yo self, i hmel a tha lutuk lo. Nulla vitae elit libero tih hi a ni a, a man pawh a tlawm hle. 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. vel scelerisque nisl consectetur et. </p> tih a ni
  <div class = "alert-a thiltih" > 
    <a class = "btn small" href = "#" > Hetiang thil hi ti rawh </a> <a class = "btn small" href = "#" > A nih loh leh hetiang hian ti rawh </a>     
  </div> tih a ni
</div> tih a ni

Modal te pawh a awm

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

Javascript chu la rawh »

Hmanraw hman dan tur

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

Javascript chu la rawh »

Popovers te an ni

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

Javascript chu la rawh »

A bul tanna tur

Bootstrap library nena javascript inzawmkhawm hi a super easy hle. A hnuaiah hian a bulpui ber berte kan thlir a, i tan tirh theih nan plugin mak tak tak kan pe che a ni!

Javascript docs en rawh »

Eng nge a tel

Bootstrap-a primary component thenkhat chu jQuery leh Ender nena thawk thei custom plugin thar hmangin nunna pe rawh. I hmasawnna mamawh bikte nena inmil turin tihzauh leh siam danglam turin kan fuih a che.

Javascript hi a tul em?

Ni lo! Bootstrap hi a hmasa ber leh pawimawh ber chu CSS library ni tura duan a ni. He javascript hian styles awmte chungah basic interactive layer a pe a.

Mahse, javascript mamawhtute tan chuan a chunga plugins te hi Bootstrap leh javascript inzawmkhawm dan hriatthiamna tur leh basic functionality atana option awlsam leh rit lo tak pek nghal turin kan rawn pe a ni.

Hriat belh duh leh live demo thenkhat en duh tan kan plugin documentation page hi en la .