Nga Upoko

Ko nga pane HTML katoa, <h1>puta noa <h6>kei te waatea.

h1. Pane 1

h2. Pane 2

h3. Pane 3

h4. Pane 4

h5. Pane 5

h6. Pane 6

Te kape tinana

Ko te taunoa o te ao katoa a Bootstrap font-sizehe 14px , me line-heightte 20px . Ka whakamahia tenei ki te <body>me nga kowae katoa. I tua atu, <p>(kowae) ka whiwhi i te tawhē raro o te haurua o te teitei o te raina (10px te taunoa).

Ko te ahua o te ahua o te ahua o te ahua o te whakapaipai. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida and eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Te kape tinana arahi

Whakanuia tetahi kowae ma te taapiri .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, he kore noa.

<p class = "arahi" > ... </p>

Hanga me te Iti

Ko te tauine patopato e ahu mai ana i nga taurangi iti e rua i roto i nga taurangi.less : @baseFontSizeme @baseLineHeight. Ko te tuatahi ko te rahi o te momotuhi i whakamahia puta noa, ko te tuarua ko te teitei o te raina turanga. Ka whakamahia e matou aua taurangi me etahi pangarau ngawari ki te hanga i nga tawhē, papa, me te teitei raina o o maatau momo katoa me etahi atu. Whakaritea, ka urutau a Bootstrap.

Whakanuia

Whakamahia nga tohu tohu taunoa a HTML me nga momo ngawari.

`<small>`

Mo te whakakore i te rarangi-roto, poraka ranei o te kuputuhi, whakamahia te tohu iti.

Ko te tikanga o tenei rarangi o te kuputuhi kia rite ki te tuhi pai.

<p> <small> Ko te tikanga o tenei rarangi o te kuputuhi kia rite ki te tuhi pai. </small> </p>

Maia

Mo te whakakoi i tetahi snippet o te kuputuhi me te taumaha momotuhi-taimaha.

Ko te mahanga kuputuhi e whai ake nei ka huri hei kuputuhi maia .

<strong> i tukuna hei kuputuhi maia </strong>

Titaha

Mo te whakanui i tetahi kohanga o te tuhinga me te titaha.

Ko te snippet o te kuputuhi e whai ake nei ka huri hei tuhinga whakatītaha .

<em> i tukuna hei kuputuhi whakatītaha </em>

Mahunga ake!Kia pai ki te whakamahi <b>me <i>te HTML5. <b>Ko te tikanga ki te whakanui i nga kupu, kinga kianga ranei me te kore e kawe i te hiranga atu i <i>te nuinga o te waa mo te reo, kupu hangarau, aha atu.

Nga karaehe whakatikatika

He ngawari ki te whakatika i nga tuhinga ki nga waahanga me nga karaehe whakatika kuputuhi.

Kuputuhi tiaaro maui.

Kuputuhi tirohia ki waenganui.

Kupu tiaro matau.

<p class = "kuputuhi-mauī" > Kuputuhi tīaroaro mauī. </p> 
<p class = "text-center" > Tuhituhi tirohia ki waenganui . </p> 
<p class = "kuputuhi-matau" > Kuputuhi tiaaro matau. </p>

Nga karaehe whakanui

Whakaatuhia te tikanga ma te tae me te iti o nga karaehe whaipainga.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "whakatupato-kuputuhi" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "kupu-kupu" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, he kore noa, he kore noa iho. </p>

Whakapoto

Whakamahinga whakaahua o te huānga HTML <abbr>mo nga whakapoto me nga acronyms hei whakaatu i te putanga whakawhanui ki te whakaparo. Ko nga whakapototanga whai titlehuanga he taitapa iraiti o raro me te pehu awhina ki te whakaparo, e whakarato ana i etahi atu horopaki mo te whakaparo.

`<abbr>`

Mo te kuputuhi whakaroahia mo te whakaparo roa o te whakapoto, whakauruhia te titlehuanga.

He whakapototanga o te kupu huanga ko attr .

<abbr title = "huanga" > attr </abbr>

`<abbr class="initialism">`

Tāpirihia .initialismki tētahi whakarāpopototanga mō te momotuhi iti ake.

Ko te HTML te mea pai mai i te taro tapatapahi.

<abbr title = "Reo Tohu Kuputuhi Kupuitua" class = "initialism" > HTML </abbr>

Wāhitau

Whakaatuhia nga korero whakapā mo te tipuna tata, mo te katoa o te mahi.

`<address>`

Tiakina te whakahōputu mā te whakamutu i ngā rārangi katoa ki te <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Ingoa Katoa
[email protected]

<wāhitau>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Waea" > P: </abbr> (123) 456-7890 
</address>
 
<wāhitau>
  <strong> Ingoa Katoa </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</address>

Poraka korero

Mo te whakahua i nga poraka ihirangi mai i tetahi atu puna i roto i to tuhinga.

Kīanga poraka taunoa

Takaia <blockquote>tetahi HTML hei korero. Mo nga korero tika ka tūtohu matou he <p>.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.

<blockquote>
  <p> Ko te tikanga o te noho tahi, consectetur adipiscing elit. Integer posuere erat a ante. </p>
</blockquote>

Kōwhiringa Poraka

Hurihia te ahua me te ihirangi mo nga rereketanga ngawari i runga i te panui poraka paerewa.

Te whakaingoa i tetahi puna

Tāpirihia <small>he tohu hei tautuhi i te puna. Takaia te ingoa o te puna mahi ki <cite>.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.
He tangata rongonui i te Taitara Puna

<blockquote>
  <p> Ko te tikanga o te noho tahi, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  <small> He tangata rongonui <cite title = "Source Title" > Source Title </cite></small> 
</blockquote>

Whakaaturanga rereke

Whakamahia .pull-rightmo te maanu, tiro-matau ki te kupu poraka.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.
He tangata rongonui i te Taitara Puna

<blockquote class = "toia-matau" > 
  ...
</blockquote>

Nga rarangi

Kore ota

He rarangi o nga mea kaore e tino whai tikanga te ota.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Tauoti molestie lorem me massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean noho amet erat nunc
Eget porttitor lorem

<ul>
  <li> ... </li>
</ul>

Kua whakahaua

He rarangi o nga mea e tino whai kiko ana te ota.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Tauoti molestie lorem me massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean noho amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

Kore-ahua

Tango i te taunoa list-styleme te papa maui i runga i nga mea rarangi (ma nga tamariki anake).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Tauoti molestie lorem me massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean noho amet erat nunc
Eget porttitor lorem

<ul class = "kaore i te ahua" > 
  <li> ... </li>
</ul>

Raina

Whakanohoia nga mea rarangi katoa ki runga i te raina kotahi inline-blockme etahi kapi marama.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "roto" > 
  <li> ... </li>
</ul>

Whakaahuatanga

He rarangi kupu me o raatau whakaahuatanga e pa ana.

Nga rarangi whakaahuatanga: Ko te rarangi whakaahuatanga he tino pai mo te tautuhi kupu.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida and eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Whakaahuatanga whakapae

Whakaritehia nga kupu me nga whakaahuatanga ki te <dl>rarangi taha-taha.

Nga rarangi whakaahuatanga: Ko te rarangi whakaahuatanga he tino pai mo te tautuhi kupu.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida and eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-whakapae" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Mahunga ake!Ka tapahia e nga rarangi whakaahuatanga whakapae nga kupu he roa rawa kia uru ki te whakatikanga pou maui text-overflow. I roto i nga tauranga whaiti, ka huri ki te tahora tapae taunoa.

Raina

Takaia nga mahanga rarangi-roto o te waehere ki te <code>.

Hei tauira, <section>me takai hei rarangi.

Hei tauira , <code> & lt ; wāhanga & gt ;</ code > me takai hei rārangi .

Poraka taketake

Whakamahia <pre>mo nga rarangi maha o te waehere. Me mawhiti i nga koki taiapa i roto i te waehere mo te whakaputa tika.

<p>Tauira kupu ki konei...</p>

<mua>
  <p>Tauira kupu ki konei...</p>
</pre>

Mahunga ake!Kia mahara ki te pupuri i te waehere i roto i <pre>nga tohu kia tata ki te taha maui ka taea; ka tukuna e ia nga ripa katoa.

Ka taea e koe te taapiri i te .pre-scrollablekaraehe ka whakatau i te teitei teitei o te 350px me te whakarato i te pae panuku tuaka-y.

Ngā kāhua taunoa

Mo te whakaahua taketake—te papaa marama me nga wehewehe whakapae anake—taapirihia te karaehe turanga .tableki tetahi <table>.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Ingoa Kaiwhakamahi
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry	te Manu	@twitter

<table class = "tepu" > 
  …
</table>

Nga karaehe whiriwhiri

Tāpirihia tetahi o nga akomanga e whai ake nei ki te .tableakomanga turanga.

`.table-striped`

Ka taapirihia te zebra-striping ki tetahi rarangi ripanga i roto i te <tbody>ma te :nth-childkaiwhiriwhiri CSS (kaore i te waatea i IE7-8).

#	Ingoa Tuatahi	Ingoa Whakamutunga	Ingoa Kaiwhakamahi
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry	te Manu	@twitter

<table class = "tepu ripanga-waapahia" > 
  …
</table>

`.table-bordered`

Tāpiri taitapa me nga kokonga porotaka ki te tepu.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Ingoa Kaiwhakamahi
1	Mark	Otto	@mdo
1	Mark	Otto	@getbootstrap
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

<table class = "taitapa ripanga" > 
  …
</table>

`.table-hover`

Whakahohea te ahua whakaparo i nga rarangi ripanga i roto i te <tbody>.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Ingoa Kaiwhakamahi
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

<table class = "tepu-whakapapa" > 
  …
</table>

`.table-condensed`

Ka whakatiki ake nga tepu ma te tapahi i nga papaa putau kia haurua.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Ingoa Kaiwhakamahi
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

<table class = "table table-condensed" > 
  …
</table>

Nga karaehe rarangi whiringa

Whakamahia nga karaehe horopaki ki te kara i nga rarangi ripanga.

Karaehe	Whakaahuatanga
`.success`	Ka tohu i te mahi angitu, pai ranei.
`.error`	Ka tohu i tetahi mahi kino, kino ranei.
`.warning`	Ka tohu i tetahi whakatupato me aro.
`.info`	Ka whakamahia hei rereke ki nga momo taunoa.

#	Hua	Utu i tangohia	Tūnga
1	TB - Marama	01/04/2012	Whakaaetia
2	TB - Marama	02/04/2012	Whakakore
3	TB - Marama	03/04/2012	Tarewa ana
4	TB - Marama	04/04/2012	Waea mai ki te whakaū

...
  < tr class = "angitu" >
    <td> 1 < /td>
    <td>TB - Marama</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Kua whakaaetia</ td >
  </ tr >
...

Tautohu ripanga tautoko

Rarangi o nga huānga HTML ripanga tautoko me pehea te whakamahi.

Tūtohu	Whakaahuatanga
`<table>`	Huānga takai hei whakaatu raraunga ki te whakatakotoranga ripanga
`<thead>`	Huānga ipu mō ngā haupae pane ripanga ( `<tr>`) hei tapanga i ngā tīwae ripanga
`<tbody>`	Huānga ipu mo nga rarangi ripanga ( `<tr>`) i te tinana o te ripanga
`<tr>`	Huānga ipu mo te huinga pūtau ripanga ( `<td>`ranei `<th>`) ka puta ki te rarangi kotahi
`<td>`	Pūtau ripanga taunoa
`<th>`	Pūtau ripanga motuhake mō ngā tapanga tīwae (raunga haupae rānei, i runga i te whānuitanga me te whakatakotoranga).
`<caption>`	Whakaahuatanga, whakarāpopototanga rānei o ngā mea kei roto i te ripanga, he tino whai hua mo te hunga panui mata

<tepu>
  <caption> ... </caption>
  <mahunga>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </head>
  <te tinana>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Ngā kāhua taunoa

Ko nga mana ahua takitahi ka whakawhiwhia ki te ahua, engari kaore he karaehe turanga e hiahiatia ana mo nga <form>huringa nui ranei o te tohu. Ka hua i roto i nga tapanga kua taapuhia, kua tiaaro-maui ki runga ake o nga mana puka.

<puka>
  <fieldset>
    <legend> Legend </legend>
    <label> Ingoa tapanga </label>
    < type input = "kuputuhi" placeholder = "Patoahia tetahi mea..." >  
    <span class = "āwhina-paraka" > He tauira kuputuhi awhina taumata paraka i konei. </span> 
    <label class = "pouakataki" > 
      < type input = "pouakataki" > Tirohia ahau 
    </label>
    <button type = "tuku" class = "btn" > Tuku </button>  
  </fieldset>
</form>

Nga whakatakotoranga whiriwhiri

Kei a Bootstrap nga whakatakotoranga ahua e toru mo nga keehi whakamahi noa.

Puka rapu

Tāpirihia .form-searchki te puka me .search-queryte <input>mo te tāuru kupu porotaka anō.

<form class = "puka-rapu" > 
  <input type = "kuputuhi" class = "whakauru-waenga rapu-uiui" >  
  <button type = "tuku" class = "btn" > Rapu </button>  
</form>

Puka Raina

Taapirihia .form-inlinemo nga tapanga taha maui me nga mana paraka-roto mo te tahora kiato.

<form class = "form-inline" > 
  < momo whakauru = "kuputuhi" class = "whakauru-iti" placeholder = "Imeera" >   
  < momo whakauru = "kupuhipa" class = "whakauru-iti" placeholder = "Kupuhipa" >   
  <label class = "pouakataki" > 
    < type input = "pouakataki" > Kia mahara ki ahau 
  </label>
  <button type = "tuku" class = "btn" > Waitohu </button>  
</form>

Puka whakapae

Tiaro matau nga tapanga ka rewa ki te taha maui kia puta ki runga i te raina rite ki nga mana whakahaere. Me nui nga huringa tohu mai i te puka taunoa:

Tāpirihia .form-horizontalki te puka
Takaia nga tapanga me nga mana whakahaere.control-group
Tāpirihia .control-labelki te tapanga
Tākaihia ngā mana e pā ana ki .controlste tīaroaro tika

<form class = "form-horizontal" > 
  <div class = "roopu-mana" > 
    <label class = "control-label" for = "inputEmail" > Email </label>  
    <div class = "mana" > 
      <input type = "text" id = "inputEmail" placeholder = " Imera" >   
    </div>
  </div>
  <div class = "roopu-mana" > 
    <label class = "control-label" for = "inputPassword" > Kupuhipa </label>  
    <div class = "mana" > 
      < momo whakauru = "kupuhipa" id = "whakaurukupapa" placeholder = " Kupuhipa" >   
    </div>
  </div>
  <div class = "roopu-mana" > 
    <div class = "mana" > 
      <label class = "pouakataki" > 
        < type input = "pouakataki" > Kia mahara ki ahau 
      </label>
      <button type = "tuku" class = "btn" > Waitohu </button>  
    </div>
  </div>
</form>

Mana puka tautoko

He tauira o nga mana puka paerewa e tautokohia ana i roto i te tauira tahora puka.

Nga whakaurunga

Ko te nuinga o te whakahaere puka, nga mara whakauru-a-tuhi. Kei roto ko te tautoko mo nga momo HTML5 katoa: te kuputuhi, te kupuhipa, te ra, te wa-a-rohe, te ra, te marama, te wa, te wiki, te nama, te imeera, te url, te rapu, te waea, me te tae.

Me whakamahi i tetahi tohu typei nga wa katoa.

< type input = "kuputuhi" placeholder = "Tauru Kuputuhi" >

Textarea

Mana puka e tautoko ana i nga rarangi kuputuhi maha. Hurihia rowste huanga ina tika.

<textarea rows = " 3" ></textarea>

Pouakataki me nga reo irirangi

Ko nga pouakataki mo te kowhiri i tetahi, maha ranei nga whiringa i roto i te rarangi ko nga reo irirangi hei kowhiri i tetahi waahanga mai i te maha.

Taunoa (tāpae)

<label class = "pouakataki" > 
  < momo whakauru = "pouakataki" uara = "" >  
  Ko te whiringa tuatahi ko tenei me tera—me whakauru he aha i pai ai
</label>
 
<label class = "reo irirangi" > 
  < momo whakauru = "irirangi" ingoa = "optionsRadios" id = "optionsRadios1" uara = "kwhiringa1" kua takina >     
  Ko te whiringa tuatahi ko tenei me tera—me whakauru he aha i pai ai
</label>
<label class = "reo irirangi" > 
  < momo whakauru = "irirangi" ingoa = "optionsRadios" id = "optionsRadios2" uara = "option2" >    
  Ko te waahanga tuarua he mea ke atu ka kowhiria ka whakakorehia te waahanga tuatahi
</label>

Pouakataki Raina

Tāpirihia te .inlinekaraehe ki te raupapa pouakataki, reo irirangi ranei mo nga mana ka puta ki te raina kotahi.

<label class = "pouakataki rōraina" > 
  < momo whakauru = "pouakataki" id = "inlineCheckbox1" uara = "kōwhiringa1" > 1   
</label>
<label class = "pouakataki rōraina" > 
  < momo whakauru = "pouakataki" id = "inlineCheckbox2" uara = "kōwhiringa2" > 2   
</label>
<label class = "pouakataki rōraina" > 
  < momo whakauru = "pouakataki" id = "inlineCheckbox3" uara = "kōwhiringa3" > 3   
</label>

Ka whiriwhiri

Whakamahia te kōwhiringa taunoa, whakapūtāhia rānei multiple="multiple"hei whakaatu i ngā kōwhiringa maha i te wā kotahi.

<tīpako>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<select multiple = "maha" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

Te whakawhānui i nga mana puka

Ko te taapiri i runga ake i nga mana tirotiro o mua, kei a Bootstrap etahi atu waahanga ahua whai hua.

Ko nga whakauru kua tohua me te taapiri

Tāpirihia he kupu, he patene ranei i mua, i muri ranei i tetahi whakaurunga-a-tuhi. Kia mahara kaore selectnga huānga e tautokohia i konei.

Kōwhiringa taunoa

Takaia te .add-ona me te inputki tetahi o nga akomanga e rua hei taapiri, hei taapiri kupu ranei ki tetahi whakauru.

<div class = "whakauru-whakamua" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "kuputuhi" placeholder = "Ingoa Kaiwhakamahi" >    
</div>
<div class = "whakauru-āpiti" > 
  <input class = "span2" id = "appendedInput " type = "kuputuhi" >   
  <span class = "add-on" > .00 </span> 
</div>

Whakakotahitia

Whakamahia nga karaehe e rua me nga tauira e rua .add-onki te whakarite me te taapiri i tetahi whakauru.

<div class = "whakauru-whakamuahia te whakauru-whakapiri" > 
  <span class = "tāpiri-ake" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "kuputuhi" >   
  <span class = "add-on" > .00 </span> 
</div>

Patene hei utu mo te kuputuhi

Engari he <span>kupu me te kupu, whakamahia te .btna hei taapiri i tetahi paatene (e rua ranei) ki tetahi whakauru.

<div class = "whakauru-āpiti" > 
  <input class = "span2" id = "appendedInputButton " type = "kuputuhi" >   
  <button class = "btn" type = "button" > Haere! </pātene>  
</div>

<div class = "whakauru-āpiti" > 
  <input class = "span2" id = "appendedInputButtons " type = "kuputuhi" >   
  <button class = "btn" type = "button" > Rapu </button>  
  <button class = "btn" type = "button" > Kōwhiringa </button>  
</div>

Patene takaiho

<div class = "whakauru-āpiti" > 
  <input class = "span2" id = "appendedDropdownButton " type = "kuputuhi" >   
  <div class = "btn-rōpū" > 
    <button class = "btn takaiho-takahuri" data-toggle = "whakaheke" >  
      Mahi
      <span class = "caret" ></span> 
    </pātene>
    <ul class = "tahua-whakaheke" > 
      ...
    </ul>
  </div>
</div>

<div class = "whakauru-whakamua" > 
  <div class = "btn-rōpū" > 
    <button class = "btn takaiho-takahuri" data-toggle = "whakaheke" >  
      Mahi
      <span class = "caret" ></span> 
    </pātene>
    <ul class = "tahua-whakaheke" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "kuputuhi" >   
</div>

<div class = "whakauru-whakamuahia te whakauru-whakapiri" > 
  <div class = "btn-rōpū" > 
    <button class = "btn takaiho-takahuri" data-toggle = "whakaheke" >  
      Mahi
      <span class = "caret" ></span> 
    </pātene>
    <ul class = "tahua-whakaheke" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "kuputuhi" >   
  <div class = "btn-rōpū" > 
    <button class = "btn takaiho-takahuri" data-toggle = "whakaheke" >  
      Mahi
      <span class = "caret" ></span> 
    </pātene>
    <ul class = "tahua-whakaheke" > 
      ...
    </ul>
  </div>
</div>

Kua wehea nga roopu takaiho

<puka>
  <div class = "whakauru-whakamua" > 
    <div class = "btn-group" > ... </div> 
    < momo whakauru = "kuputuhi" > 
  </div>
  <div class = "whakauru-āpiti" > 
    < momo whakauru = "kuputuhi" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Puka rapu

<form class = "puka-rapu" > 
  <div class = "whakauru-āpiti" > 
    < type input = "kuputuhi" class = "span2 rapu-uiui" >  
    <button type = "tuku" class = "btn" > Rapu </button>  
  </div>
  <div class = "whakauru-whakamua" > 
    <button type = "tuku" class = "btn" > Rapu </button>  
    < type input = "kuputuhi" class = "span2 rapu-uiui" >  
  </div>
</form>

Whakahaere rahinga

Whakamahia nga karaehe rahinga rite .input-largeki te whakarite ranei i o whakaurunga ki nga rahi o nga pou matiti ma te whakamahi i .span*nga karaehe.

Paraka taumata whakaurunga

Hangaia tetahi huānga <input>ranei <textarea>kia rite ki te huānga taumata paraka.

<te akomanga whakauru = "taumata-paraka-whakauru" type = "kuputuhi" placeholder = ".taumata-poraka-whakauru" >

Te rahinga whanaunga

<input class = "whakauru-mini" momo = "kuputuhi" placeholder = ".input-mini" >   
<input class = "whakauru-iti" momo = "kuputuhi" placeholder = ".whakauru-iti" >   
<input class = "whakauru-medium" type = "kuputuhi" placeholder = ".input-medium" >   
<input class = "whakauru-nui" momo = "kuputuhi" placeholder = ".whakauru-nui" >   
<input class = "input-xlarge" type = "kuputuhi" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "kuputuhi" placeholder = ".input-xxlarge" >

Mahunga ake!I nga putanga kei te heke mai, ka whakarereketia e matou te whakamahinga o enei karaehe whakaurunga whanaunga kia rite ki o matou rahi paatene. Hei tauira, .input-largeka whakanuia te papa me te rahi momotuhi o te whakauru.

Te rahi o te matiti

Whakamahia .span1mo .span12nga whakaurunga e rite ana ki nga rahi o nga pou matiti.

<input class = "span1" type = "kuputuhi" placeholder = ".span1" >   
<input class = "span2" type = "kuputuhi" placeholder = ".span2" >   
<input class = "span3" type = "kuputuhi" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

Mo nga whakaurunga matiti maha mo ia raina, whakamahia te .controls-rowakomanga whakarereke mo te mokowā tika . Ka rewa i nga whakaurunga ki te tiango mokowā-ma, ka tautuhi i nga tawhē tika, ka whakawātea i te mānu.

<div class = "mana" > 
  <input class = "span5" type = "kuputuhi" placeholder = ".span5" >   
</div>
<div class = "whakahaere mana-rarangi" > 
  <input class = "span4" type = "kuputuhi" placeholder = ".span4" >   
  <input class = "span1" type = "kuputuhi" placeholder = ".span1" >   
</div>
...

Nga whakaurunga kore e taea te whakarereke

Whakaatuhia nga raraunga ki te ahua kaore e taea te whakarereke me te kore e whakamahi i te tohu tohu.

<span class = "input-xlarge uneditable-input" > Ko etahi uara i konei </span>

Puka mahi

Whakamutua he puka me te roopu mahi (patene). Ina whakanohoia ki roto i te .form-actions, ka nuku aunoa nga patene ki te hono ki nga mana puka.

<div class = "ahua-mahi" > 
  <button type = "tuku" class = "btn btn-primary" > Tiakina nga huringa </button>  
  <button type = "button" class = "btn" > Whakakore </button>  
</div>

Kupu awhina

Tautoko taumata rōraina me te paraka mo te kuputuhi awhina ka puta huri noa i nga mana puka.

Āwhina rōraina

<input type = "text" ><span class = "help-inline" > Kuputuhi āwhina rōraina </span>

Āwhina poraka

<input type = "text" ><span class = "help-block" > He paraka roa ake o te kupu awhina ka pakaru ki tetahi raina hou ka toro atu pea ki tua atu i te rarangi kotahi. </span>

Puka mana whakahaere

Homai he urupare ki nga kaiwhakamahi, manuhiri ranei me nga korero urupare taketake mo nga mana puka me nga tapanga.

Arotahi whakauru

Ka tangohia e matou nga ahua taunoa outlinei runga i etahi mana ahua ka hoatu he box-shadowhei whakakapi mo :focus.

<input class = "input-xlarge" id = "focusedInput" type = "kuputuhi" uara = "Kei te arotahi tenei..." >

Ko nga whakaurunga muhu

Ko nga momo whakaurunga ma te mahi tirotiro taunoa me te :invalid. Tauwhāitihia he type, tāpirihia te requiredhuanga ki te kore te āpure e kōwhiri, ā (mehemea e hāngai ana) whakapūtā he pattern.

Kaore tenei i te watea ki nga momo putanga o Internet Explorer 7-9 na te kore tautoko mo nga kaikowhiri pseudo CSS.

<input class = "span3" type = "īmera" e hiahiatia ana >

Ko nga whakaurunga kua monokia

Tāpirihia te disabledhuanga ki runga i te whakaurunga hei aukati i te whakaurunga a te kaiwhakamahi me te whakaoho i te ahua rereke.

<input class = "input-xlarge" id = "disabledInput" type = "kuputuhi" placeholder = "Kua monoa te whakauru ki konei..." kua monokia >

Ko nga korero whakamana

Kei roto i te Bootstrap nga momo whakamana mo nga hapa, whakatupato, korero, me nga karere angitu. Hei whakamahi, tāpirihia te karaehe e tika ana ki te taiao .control-group.

<div class = "whakatupato whakahaere-rōpū" > 
  <label class = "control-label" for = "inputWarning" > Whakauru me te whakatupato </label>  
  <div class = "mana" > 
    < momo whakauru = "kuputuhi" id = "Whakatupato whakauru" >  
    <span class = "help-inline" > Kua he tetahi mea </span> 
  </div>
</div>
 
<div class = "hape mana-rōpū" > 
  <label class = "control-label" for = "inputError" > Whakauru me te hapa </label>  
  <div class = "mana" > 
    < momo whakauru = "kuputuhi" id = "HapaTauru" >  
    <span class = "help-inline" > Tena whakatikahia te hapa </span> 
  </div>
</div>
 
<div class = "whakaaro-rōpū korero" > 
  <label class = "control-label" for = "inputInfo" > Whakauru me nga korero </label>  
  <div class = "mana" > 
    < momo whakauru = "kuputuhi" id = "InputInfo" >  
    <span class = "help-inline" > Kua tangohia kē te Ingoa Kaiwhakamahi </span> 
  </div>
</div>
 
<div class = "angitu whakahaere-rōpū" > 
  <label class = "control-label" for = "inputSuccess" > Whakauru me te angitu </label>  
  <div class = "mana" > 
    < momo whakauru = "kuputuhi" id = "whakauru" >  
    <span class = "awhina-roto" > Woohoo! </span> 
  </div>
</div>

Pātene taunoa

Ka taea te whakamahi i nga momo paatene ki nga mea katoa me te .btnkaraehe i tono. Heoi, ko te tikanga ka hiahia koe ki te tono i enei ki nga waahanga anake <a>me <button>nga waahanga mo te ahua pai.

Pātene	akomanga=""	Whakaahuatanga
	`btn`	Pātene hina Paerewa me te rōnaki
	`btn btn-primary`	Ka whakarato i te taumaha ataata taapiri me te tautuhi i te mahi tuatahi i roto i te huinga paatene
	`btn btn-info`	Ka whakamahia hei rereke ki nga momo taunoa
	`btn btn-success`	Ka tohu i te mahi angitu, pai ranei
	`btn btn-warning`	E tohu ana me tupato tenei mahi
	`btn btn-danger`	Ka tohu i tetahi mahi kino, kino ranei
	`btn btn-inverse`	He patene hina pouri, kaore i herea ki tetahi hohenga kupu, whakamahi ranei
	`btn btn-link`	Whakakorehia te patene ma te hanga kia rite ki te hono me te pupuri i te whanonga paatene

Hototahi pūtirotiro whakawhiti

Karekau a IE9 e tapahi i nga rōnaki papamuri ki nga kokonga porotaka, no reira ka tangohia e matou. E pa ana, ka whakakorehia e IE9 nga buttonhuānga hauā, ka whakahinahia te kuputuhi me te atarangi-tuhinga kino e kore e taea e tatou te whakatika.

Te rahi o te paatene

Kei te pirangi koe ki nga paatene nui, iti ake ranei? Tāpirihia .btn-large, .btn-small, .btn-minimo etahi atu rahinga ranei.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Pātene nui </button>  
  <button class = "btn btn-large" type = "button" > Pātene nui </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Pātene taunoa </button>  
  <button class = "btn" type = "button" > Pātene Taunoa </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "pātene" > Pātene iti </button>  
  <button class = "btn btn-small" type = "pātene" > Pātene iti </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "pātene" > Pātene paku </button>  
  <button class = "btn btn-mini" type = "pātene" > Pātene paku </button>  
</p>

Waihangahia nga patene taumata paraka—ko era e whanui ana i te whanui o te matua—ma te taapiri .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "pātene" > Pātene taumata paraka </button>  
<button class = "btn btn-large btn-block" type = "pātene" > Pātene taumata poraka </button>

Te ahua haua

Hangaia nga paatene kia kore e taea te panui ma te memeha ki muri 50%.

Huānga punga

Tāpirihia te .disabledakomanga ki ngā <a>pātene.

Hononga tuatahi Hononga

<a href = "#" class = "btn btn-nui btn-tuatahi kua monokia" > Hononga tuatahi </a>  
<a href = "#" class = "btn btn-nui kua haua" > Hononga </a>

Mahunga ake!Ka whakamahia e matou .disabledhei karaehe whaipainga i konei, he rite ki te .activekaraehe noa, no reira karekau he prefix e hiahiatia ana. Ano hoki, ko tenei karaehe mo te ahua rerehua anake; me whakamahi koe i te JavaScript ritenga hei whakakore i nga hononga i konei.

Huānga Pātene

Tāpirihia te disabledhuanga ki ngā <button>pātene.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Pātene tuatahi </button>   
<button type = "button" class = "btn btn-nui" kua monokia > Patene </button>

Kotahi te karaehe, maha nga tohu

Whakamahia te .btnakomanga ki runga i te <a>, <button>, <input>huānga ranei.

<a class = "btn" href = "" > Hononga </a>  
<button class = "btn" type = "tuku" > Button </button>  
<input class = "btn" type = "pātene" uara = "Whakauru" >   
<input class = "btn" type = "tuku" uara = "Tukuna" >

Hei mahi pai rawa atu, ngana ki te whakaorite i te huānga mo to horopaki hei whakarite kia taurite te whakaputanga whakawhiti tirotiro. Mena kei a koe he input, whakamahia he <input type="submit">mo to paatene.

Taapirihia nga karaehe ki tetahi <img>huānga kia ngawari te hanga whakaahua ki tetahi kaupapa.

<img src = "..." class = "img-porotaka" >  
<img src = "..." class = "img-porowhita" >  
<img src = "..." class = "img-polaroid" >

Mahunga ake! .img-roundeda .img-circlekaua e mahi i roto i te IE7-8 na te kore border-radiustautoko.

Nga tohu tohu

140 nga tohu i roto i te ahua sprite, e waatea ana i te hina pouri (taunoa) me te ma, na Glyphicons i homai .

karaehe tohu
tohu-waiata
rapu-tohu
kōpaki-tohu
icon-ngakau
whetu-tohu
icon-whetu-kore
icon-kaiwhakamahi
kiriata-tohu
icon-th-nui
icon-th
icon-th-rarangi
icon-ok
icon-tango
tohu-topa-mai
tohu-topa-waho
tohu-atu
tohu-tohu
icon-cog
icon-parapara
icon-whare
icon-kōnae
wa-tohu
tohu-ara
icon-download-alt
ata-tikiake
icon-tukuake
pouaka-roto
icon-play-circle
tohu-tukurua
tohu-whakahou
icon-rarangi-alt
tohu-raka
haki-tohu
tohu-orooro
icon-rōrahi-atu
icon-rōrahi-iho
icon-rōrahi-ake
tohu-qrcode
tohu-paepae
tohu-tohu
tohu-tohu
pukapuka-tohu
tohu-tohu
icon-print
icon-kamera
tohu-momotuhi
tohu-maia
tohu-tītaha
icon-kuputuhi-teitei
ata-kupu-whanui
icon-align-mauī
icon-align-center
icon-align-right
icon-align-justify
tohu-rarangi
icon-nuku-maui
icon-indent-matau
icon-facetime-ataata
tohu-pikitia
tohu-pene
tohu-mapi-tohu
tohu-whakarite
tohu-tae
ata-whakatika
icon-share
tohu-taki
nekehanga-tohu
icon-step-backward
icon-tere-whakamuri
tohu-whakamuri
whakaari-tohu
ata-tatari
icon-mutu
tohu-whakamua
icon-tere-whakamua
icon-taahiraa-mua
icon-putanga
icon-chevron-maui
icon-chevron-matau
tohu-tohu-tohu
tohu-iti-tohu
tohu-tango-tohu
tohu-ok-tohu
tohu-patai-tohu
tohu-tohu-tohu
ata-whakaahua
icon-tango-porohita
icon-ok-porohita
porowhita-aukati
icon-pere-maui
icon-pere-matau
tohu-pere-ake
icon-pere-iho
icon-share-alt
icon-whakahou-ki tonu
icon-whakahou-iti
icon-plus
tohu-iti
tohu-tohu
tohu-tohu-tohu
tohu-koha
rau-ira
tohu-ahi
icon-kanohi-tuwhera
icon-kanohi-kati
tohu-whakatupato-tohu
waka rererangi
maramataka-tohu
tohu-tupurangi
tohu-korero
tohu-aukume
icon-chevron-up
icon-chevron-down
icon-retweet
icon-hoko-kaata
icon-kōpaki-kati
icon-kōpaki-tuwhera
tohu-whakanui-poutū
tohu-huri-whakapae
icon-hdd
icon-bullhorn
pere icon
tohu-tohu
tohu-koromatua-ake
icon-koromatua-iho
tohu-ringa-matau
icon-ringa-maui
tohu-ringa-ake
icon-ringa-iho
icon-porowhita-pere-matau
icon-porowhita-pere-maui
tohu-porowhita-pere-ake
icon-porowhita-pere-iho
ata-ao
tohu-wrench
tohu-mahi
tohu-tātari
tohu-pakipaki
ata-matanui

Tohunga Glyphicons

Ko nga Glyphicons Halflings te tikanga kaore i te waatea mo te kore utu, engari na te whakaritenga i waenga i a Bootstrap me nga Kaihanga Glyphicons i taea ai tenei mo te kore utu ki a koe hei kaiwhakawhanake. Hei mihi ki a koe, ka tono matou kia whakauruhia he hononga taapiri ki nga Glyphicons i nga wa katoa e mahi ana.

Me pehea te whakamahi

Ko nga tohu katoa me <i>tohu he karaehe ahurei, kua tohua ki mua icon-. Hei whakamahi, tuhia te waehere e whai ake nei mo nga waahi katoa:

<i class = "icon-search" ></i>

He ahua ano kei te waatea mo nga tohu hurihuri (ma), kua rite me te akomanga taapiri. Ka whakakahahia tenei karaehe ki runga i nga ahuatanga hover me te hohe mo nga hononga nav me nga hononga takaiho.

<i class = "icon-search icon-white" ></i>

Mahunga ake!Ina whakamahi i te taha o nga aho o te kuputuhi, penei i nga paatene, i nga hononga nav, me waiho he mokowhiti i muri i te <i>tohu mo te mokowhiti tika.

Nga tauira tohu

Whakamahia i roto i nga patene, i nga roopu patene mo te paeutauta, te whakaterenga, te whakaurunga puka kua tohua.

Patene

Rōpū pātene i roto i te paeutauta pātene

<div class = "btn-toolbar" > 
  <div class = "btn-rōpū" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Whakataka iho i roto i te roopu paatene

Kaiwhakamahi

<div class = "btn-rōpū" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Kaiwhakamahi </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "tahua-whakaheke" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Whakatika </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Mukua </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Aukati </a> </li>  
    <li class = "kaiwehewehe" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Hanga kaiwhakahaere </a></li>  
  </ul>
</div>

Te rahi o te paatene

Whetu Whetu Whetu

<a class = "btn btn-large" href = "#" ><i class = "icon-whetu" ></i> Whetu </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-whetu" ></i> Whetu </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-whetu" ></i> Whetu </a>

Whakaterenga

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Kāinga </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Whare Pukapuka </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Nga tono </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
</ul>

Puka mara

<div class = "roopu-mana" > 
  <label class = "control-label" for = "inputIcon" > Wāhitau īmēra </label>  
  <div class = "mana" > 
    <div class = "whakauru-whakamua" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "kuputuhi" >   
    </div>
  </div>
</div>

Kuputuhi

Nga Upoko

h1. Pane 1

h2. Pane 2

h3. Pane 3

h4. Pane 4

h5. Pane 5

h6. Pane 6

Te kape tinana

Te kape tinana arahi

Hanga me te Iti

Whakanuia

<small>

Maia

Titaha

Nga karaehe whakatikatika

Nga karaehe whakanui

Whakapoto

<abbr>

<abbr class="initialism">

Wāhitau

<address>

Poraka korero

Kīanga poraka taunoa

Kōwhiringa Poraka

Te whakaingoa i tetahi puna

Whakaaturanga rereke

Nga rarangi

Kore ota

Kua whakahaua

Kore-ahua

Raina

Whakaahuatanga

Whakaahuatanga whakapae

Waehere

Raina

Poraka taketake

Ripanga

Ngā kāhua taunoa

Nga karaehe whiriwhiri

.table-striped

.table-bordered

.table-hover

.table-condensed

Nga karaehe rarangi whiringa

Tautohu ripanga tautoko

Puka

Ngā kāhua taunoa

Nga whakatakotoranga whiriwhiri

Puka rapu

Puka Raina

Puka whakapae

Mana puka tautoko

Nga whakaurunga

Textarea

Pouakataki me nga reo irirangi

Taunoa (tāpae)

Pouakataki Raina

Ka whiriwhiri

Te whakawhānui i nga mana puka

Ko nga whakauru kua tohua me te taapiri

Kōwhiringa taunoa

Whakakotahitia

Patene hei utu mo te kuputuhi

Patene takaiho

Kua wehea nga roopu takaiho

Puka rapu

Whakahaere rahinga

Paraka taumata whakaurunga

Te rahinga whanaunga

Te rahi o te matiti

Nga whakaurunga kore e taea te whakarereke

Puka mahi

Kupu awhina

Āwhina rōraina

Āwhina poraka

Puka mana whakahaere

Arotahi whakauru

Ko nga whakaurunga muhu

Ko nga whakaurunga kua monokia

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`