CSS turanga

Ko nga huānga HTML taketake kua whakaahua me te whakarei ake me nga karaehe whanui.

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.

  1. <p class = "kuputuhi-mauī" > Kuputuhi tīaroaro mauī. </p>
  2. <p class = "text-center" > Tuhituhi tirohia ki waenganui . </p>
  3. <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.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
  2. <p class = "whakatupato-kuputuhi" > Etiam porta sem malesuada magna mollis euismod. </p>
  3. <p class = "kupu-kupu" > Donec ullamcorper nulla non metus auctor fringilla. </p>
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p>
  5. <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]
  1. <wāhitau>
  2. <strong> Twitter, Inc. </strong><br>
  3. 795 Folsom Ave, Suite 600 <br>
  4. San Francisco, CA 94107 <br>
  5. <abbr title = "Waea" > P: </abbr> (123) 456-7890
  6. </address>
  7.  
  8. <wāhitau>
  9. <strong> Ingoa Katoa </strong><br>
  10. <a href = "mailto:#" > [email protected] </a>
  11. </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.

  1. <blockquote>
  2. <p> Ko te tikanga o te noho tahi, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. </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 mahi puna ki <cite>.

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

He tangata rongonui i te Taitara Puna
  1. <blockquote>
  2. <p> Ko te tikanga o te noho tahi, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. <small> He tangata rongonui <cite title = "Source Title" > Source Title </cite></small>
  4. </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
  1. <blockquote class = "toia-matau" >
  2. ...
  3. </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
  1. <ul>
  2. <li> ... </li>
  3. </ul>

Kua whakahaua

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Tauoti molestie lorem me massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean noho amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2. <li> ... </li>
  3. </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
  1. <ul class = "kaore i te ahua" >
  2. <li> ... </li>
  3. </ul>

Raina

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

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "roto" >
  2. <li> ... </li>
  3. </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.
  1. <dl>
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. <dl class = "dl-whakapae" >
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. 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>
  1. <mua>
  2. <p>Tauira kupu ki konei...</p>
  3. </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
  1. <table class = "tepu" >
  2. </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
  1. <table class = "tepu ripanga-waapahia" >
  2. </table>

.table-bordered

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

# Ingoa Tuatahi Ingoa Whakamutunga Ingoa Kaiwhakamahi
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 ko Hakopa Toronton @ngako
3 Larry te Manu @twitter
  1. <table class = "taitapa ripanga" >
  2. </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
  1. <table class = "tepu-whakapapa" >
  2. </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
  1. <table class = "table table-condensed" >
  2. </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ū
  1. ...
  2. < tr class = "angitu" >
  3. <td> 1 < /td>
  4. <td>TB - Marama</ td >
  5. <td> 01 / 04 / 2012 < /td>
  6. <td>Kua whakaaetia</ td >
  7. </ tr >
  8. ...

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
  1. <tepu>
  2. <caption> ... </caption>
  3. <mahunga>
  4. <tr>
  5. <th> ... </th>
  6. <th> ... </th>
  7. </tr>
  8. </head>
  9. <te tinana>
  10. <tr>
  11. <td> ... </td>
  12. <td> ... </td>
  13. </tr>
  14. </tbody>
  15. </table>

Ngā kāhua taunoa

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

Poutohu He tauira kupu awhina taumata paraka i konei.
  1. <puka>
  2. <fieldset>
  3. <legend> Legend </legend>
  4. <label> Ingoa tapanga </label>
  5. < type input = "kuputuhi" placeholder = "Patoahia tetahi mea..." >
  6. <span class = "āwhina-paraka" > He tauira kuputuhi awhina taumata paraka i konei. </span>
  7. <label class = "pouakataki" >
  8. < type input = "pouakataki" > Tirohia ahau
  9. </label>
  10. <button type = "tuku" class = "btn" > Tuku </button>
  11. </fieldset>
  12. </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ō.

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

Puka Raina

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

  1. <form class = "form-inline" >
  2. < momo whakauru = "kuputuhi" class = "whakauru-iti" placeholder = "Imeera" >
  3. < momo whakauru = "kupuhipa" class = "whakauru-iti" placeholder = "Kupuhipa" >
  4. <label class = "pouakataki" >
  5. < type input = "pouakataki" > Kia mahara ki ahau
  6. </label>
  7. <button type = "tuku" class = "btn" > Waitohu </button>
  8. </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
  1. <form class = "form-horizontal" >
  2. <div class = "roopu-mana" >
  3. <label class = "control-label" for = "inputEmail" > Email </label>
  4. <div class = "mana" >
  5. <input type = "text" id = "inputEmail" placeholder = " Imera" >
  6. </div>
  7. </div>
  8. <div class = "roopu-mana" >
  9. <label class = "control-label" for = "inputPassword" > Kupuhipa </label>
  10. <div class = "mana" >
  11. < momo whakauru = "kupuhipa" id = "whakaurukupapa" placeholder = " Kupuhipa" >
  12. </div>
  13. </div>
  14. <div class = "roopu-mana" >
  15. <div class = "mana" >
  16. <label class = "pouakataki" >
  17. < type input = "pouakataki" > Kia mahara ki ahau
  18. </label>
  19. <button type = "tuku" class = "btn" > Waitohu </button>
  20. </div>
  21. </div>
  22. </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.

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

Textarea

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

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


  1. <label class = "pouakataki" >
  2. < momo whakauru = "pouakataki" uara = "" >
  3. Ko te whiringa tuatahi ko tenei me tera—me whakauru he aha i pai ai
  4. </label>
  5.  
  6. <label class = "reo irirangi" >
  7. < momo whakauru = "irirangi" ingoa = "optionsRadios" id = "optionsRadios1" uara = "kwhiringa1" kua takina >
  8. Ko te whiringa tuatahi ko tenei me tera—me whakauru he aha i pai ai
  9. </label>
  10. <label class = "reo irirangi" >
  11. < momo whakauru = "irirangi" ingoa = "optionsRadios" id = "optionsRadios2" uara = "option2" >
  12. Ko te waahanga tuarua he mea ke atu ka kowhiria ka whakakorehia te waahanga tuatahi
  13. </label>

Pouakataki Raina

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

  1. <label class = "pouakataki rōraina" >
  2. < momo whakauru = "pouakataki" id = "inlineCheckbox1" uara = "kōwhiringa1" > 1
  3. </label>
  4. <label class = "pouakataki rōraina" >
  5. < momo whakauru = "pouakataki" id = "inlineCheckbox2" uara = "kōwhiringa2" > 2
  6. </label>
  7. <label class = "pouakataki rōraina" >
  8. < momo whakauru = "pouakataki" id = "inlineCheckbox3" uara = "kōwhiringa3" > 3
  9. </label>

Ka kowhiri

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


  1. <tīpako>
  2. <option> 1 </option>
  3. <option> 2 </option>
  4. <option> 3 </option>
  5. <option> 4 </option>
  6. <option> 5 </option>
  7. </select>
  8.  
  9. <select multiple = "maha" >
  10. <option> 1 </option>
  11. <option> 2 </option>
  12. <option> 3 </option>
  13. <option> 4 </option>
  14. <option> 5 </option>
  15. </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.

@

.00
  1. <div class = "whakauru-whakamua" >
  2. <span class = "add-on" > @ </span>
  3. <input class = "span2" id = "prependedInput" type = "kuputuhi" placeholder = "Ingoa Kaiwhakamahi" >
  4. </div>
  5. <div class = "whakauru-āpiti" >
  6. <input class = "span2" id = "appendedInput " type = "kuputuhi" >
  7. <span class = "add-on" > .00 </span>
  8. </div>

Whakakotahitia

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

$ .00
  1. <div class = "whakauru-whakamuahia te whakauru-whakapiri" >
  2. <span class = "tāpiri-ake" > $ </span>
  3. <input class = "span2" id = "appendedPrependedInput " type = "kuputuhi" >
  4. <span class = "add-on" > .00 </span>
  5. </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.

  1. <div class = "whakauru-āpiti" >
  2. <input class = "span2" id = "appendedInputButton " type = "kuputuhi" >
  3. <button class = "btn" type = "button" > Haere! </pātene>
  4. </div>
  1. <div class = "whakauru-āpiti" >
  2. <input class = "span2" id = "appendedInputButtons " type = "kuputuhi" >
  3. <button class = "btn" type = "button" > Rapu </button>
  4. <button class = "btn" type = "button" > Kōwhiringa </button>
  5. </div>

Patene takaiho

  1. <div class = "whakauru-āpiti" >
  2. <input class = "span2" id = "appendedDropdownButton " type = "kuputuhi" >
  3. <div class = "btn-rōpū" >
  4. <button class = "btn takaiho-takahuri" data-toggle = "whakaheke" >
  5. Mahi
  6. <span class = "caret" ></span>
  7. </pātene>
  8. <ul class = "tahua-whakaheke" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "whakauru-whakamua" >
  2. <div class = "btn-rōpū" >
  3. <button class = "btn takaiho-takahuri" data-toggle = "whakaheke" >
  4. Mahi
  5. <span class = "caret" ></span>
  6. </pātene>
  7. <ul class = "tahua-whakaheke" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "prependedDropdownButton" type = "kuputuhi" >
  12. </div>
  1. <div class = "whakauru-whakamuahia te whakauru-whakapiri" >
  2. <div class = "btn-rōpū" >
  3. <button class = "btn takaiho-takahuri" data-toggle = "whakaheke" >
  4. Mahi
  5. <span class = "caret" ></span>
  6. </pātene>
  7. <ul class = "tahua-whakaheke" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "appendedPrependedDropdownButton " type = "kuputuhi" >
  12. <div class = "btn-rōpū" >
  13. <button class = "btn takaiho-takahuri" data-toggle = "whakaheke" >
  14. Mahi
  15. <span class = "caret" ></span>
  16. </pātene>
  17. <ul class = "tahua-whakaheke" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

Kua wehea nga roopu takaiho

  1. <puka>
  2. <div class = "whakauru-whakamua" >
  3. <div class = "btn-group" > ... </div>
  4. < momo whakauru = "kuputuhi" >
  5. </div>
  6. <div class = "whakauru-āpiti" >
  7. < momo whakauru = "kuputuhi" >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </form>

Puka rapu

  1. <form class = "puka-rapu" >
  2. <div class = "whakauru-āpiti" >
  3. < type input = "kuputuhi" class = "span2 rapu-uiui" >
  4. <button type = "tuku" class = "btn" > Rapu </button>
  5. </div>
  6. <div class = "whakauru-whakamua" >
  7. <button type = "tuku" class = "btn" > Rapu </button>
  8. < type input = "kuputuhi" class = "span2 rapu-uiui" >
  9. </div>
  10. </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.

  1. <input class = "taumata-paraka-whakauru" type = "kuputuhi" placeholder = ".taumata-poraka-whakauru" >

Te rahinga whanaunga

  1. <input class = "whakauru-mini" momo = "kuputuhi" placeholder = ".input-mini" >
  2. <input class = "whakauru-iti" momo = "kuputuhi" placeholder = ".whakauru-iti" >
  3. <input class = "whakauru-medium" type = "kuputuhi" placeholder = ".input-medium" >
  4. <input class = "whakauru-nui" momo = "kuputuhi" placeholder = ".whakauru-nui" >
  5. <input class = "input-xlarge" type = "kuputuhi" placeholder = ".input-xlarge" >
  6. <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.

  1. <input class = "span1" type = "kuputuhi" placeholder = ".span1" >
  2. <input class = "span2" type = "kuputuhi" placeholder = ".span2" >
  3. <input class = "span3" type = "kuputuhi" placeholder = ".span3" >
  4. <select class = "span1" >
  5. ...
  6. </select>
  7. <select class = "span2" >
  8. ...
  9. </select>
  10. <select class = "span3" >
  11. ...
  12. </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.

  1. <div class = "mana" >
  2. <input class = "span5" type = "kuputuhi" placeholder = ".span5" >
  3. </div>
  4. <div class = "whakahaere mana-rarangi" >
  5. <input class = "span4" type = "kuputuhi" placeholder = ".span4" >
  6. <input class = "span1" type = "kuputuhi" placeholder = ".span1" >
  7. </div>
  8. ...

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.

Ko etahi uara i konei
  1. <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.

  1. <div class = "ahua-mahi" >
  2. <button type = "tuku" class = "btn btn-primary" > Tiakina nga huringa </button>
  3. <button type = "button" class = "btn" > Whakakore </button>
  4. </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

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

Āwhina poraka

He poraka roa ake o te kupu awhina ka pakaru ki tetahi raina hou, ka toro atu pea ki tua atu i te rarangi kotahi.
  1. <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.

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

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

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

Kua raru pea tetahi mea
Tena whakatikahia te hapa
Ka tangohia te ingoa kaiwhakamahi
Whoohoo!
  1. <div class = "whakatupato whakahaere-rōpū" >
  2. <label class = "control-label" for = "inputWarning" > Whakauru me te whakatupato </label>
  3. <div class = "mana" >
  4. < momo whakauru = "kuputuhi" id = "Whakatupato whakauru" >
  5. <span class = "help-inline" > Kua he tetahi mea </span>
  6. </div>
  7. </div>
  8.  
  9. <div class = "hape mana-rōpū" >
  10. <label class = "control-label" for = "inputError" > Whakauru me te hapa </label>
  11. <div class = "mana" >
  12. < momo whakauru = "kuputuhi" id = "HapaTauru" >
  13. <span class = "help-inline" > Whakatikaina te hapa </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "whakaaro-rōpū korero" >
  18. <label class = "control-label" for = "inputInfo" > Whakauru me nga korero </label>
  19. <div class = "mana" >
  20. < momo whakauru = "kuputuhi" id = "InputInfo" >
  21. <span class = "help-inline" > Kua tangohia kē te Ingoa Kaiwhakamahi </span>
  22. </div>
  23. </div>
  24.  
  25. <div class = "angitu whakahaere-rōpū" >
  26. <label class = "control-label" for = "inputSuccess" > Whakauru me te angitu </label>
  27. <div class = "mana" >
  28. < momo whakauru = "kuputuhi" id = "whakauru" >
  29. <span class = "awhina-roto" > Woohoo! </span>
  30. </div>
  31. </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 whakamahi i enei ki nga waahanga <a>me <button>nga waahanga mo te whakaputa 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.

  1. <p>
  2. <button class = "btn btn-large btn-primary" type = "button" > Pātene nui </button>
  3. <button class = "btn btn-large" type = "button" > Pātene nui </button>
  4. </p>
  5. <p>
  6. <button class = "btn btn-primary" type = "button" > Pātene taunoa </button>
  7. <button class = "btn" type = "button" > Pātene Taunoa </button>
  8. </p>
  9. <p>
  10. <button class = "btn btn-small btn-primary" type = "pātene" > Pātene iti </button>
  11. <button class = "btn btn-small" type = "pātene" > Pātene iti </button>
  12. </p>
  13. <p>
  14. <button class = "btn btn-mini btn-primary" type = "pātene" > Pātene paku </button>
  15. <button class = "btn btn-mini" type = "pātene" > Pātene paku </button>
  16. </p>

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

  1. <button class = "btn btn-large btn-block btn-primary" type = "pātene" > Pātene taumata paraka </button>
  2. <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

  1. <a href = "#" class = "btn btn-nui btn-tuatahi kua monokia" > Hononga tuatahi </a>
  2. <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.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Pātene tuatahi </button>
  2. <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.

Hononga
  1. <a class = "btn" href = "" > Hononga </a>
  2. <button class = "btn" type = "tuku" > Button </button>
  3. <input class = "btn" type = "pātene" uara = "Whakauru" >
  4. <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.

140x140 140x140 140x140
  1. <img src = "..." class = "img-porotaka" >
  2. <img src = "..." class = "img-porowhita" >
  3. <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:

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

  1. <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
  1. <div class = "btn-toolbar" >
  2. <div class = "btn-rōpū" >
  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-right" ></i></a>
  6. <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>
  7. </div>
  8. </div>
Whakataka iho i roto i te roopu paatene
  1. <div class = "btn-rōpū" >
  2. <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Kaiwhakamahi </a>
  3. <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>
  4. <ul class = "tahua-whakaheke" >
  5. <li><a href = "#" ><i class = "icon-pencil" ></i> Whakatika </a></li>
  6. <li><a href = "#" ><i class = "icon-trash" ></i> Mukua </a></li>
  7. <li><a href = "#" ><i class = "icon-ban-circle" ></i> Aukati </a> </li>
  8. <li class = "kaiwehewehe" ></li>
  9. <li><a href = "#" ><i class = "i" ></i> Hanga kaiwhakahaere </a></li>
  10. </ul>
  11. </div>
Te rahi o te paatene
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-whetu" ></i> Whetu </a>
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-whetu" ></i> Whetu </a>
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-whetu" ></i> Whetu </a>

Whakaterenga

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

Puka mara

  1. <div class = "roopu-mana" >
  2. <label class = "control-label" for = "inputIcon" > Wāhitau īmēra </label>
  3. <div class = "mana" >
  4. <div class = "whakauru-whakamua" >
  5. <span class = "add-on" ><i class = "icon-envelope" ></i></span>
  6. <input class = "span2" id = "inputIcon" type = "kuputuhi" >
  7. </div>
  8. </div>
  9. </div>