Tauira

Ka taea te takahuri, te tahua horopaki hei whakaatu i nga rarangi hononga. I mahi tauwhitiwhiti me te mono JavaScript takaiho .

<ul class = "tahua-whakaheke" role = "tahua" aria-labelledby = "Tahuanga takaiho" >   
  <li> <a tabindex = "-1" href = "#" > Mahi </a> </li>  
  <li> <a tabindex = "-1" href = "#" > He mahi ano </a></li>  
  <li> <a tabindex = "-1" href = "#" > He mea ano kei konei </a></li>  
  <li class = "kaiwehewehe" ></li> 
  <li> <a tabindex = "-1" href = "#" > Hononga wehea </a> </li>  
</ul>

Tohutohu

Ma te titiro ki te tahua takaiho, koinei te HTML e hiahiatia ana. Me takai e koe te keu o te takaiho me te tahua takaiho ki roto .dropdown, tetahi atu huānga ranei e whakaatu ana position: relative;. Na ka hanga noa i te tahua.

<div class = "whakaheke" > 
  <!-- Hononga, patene ranei hei takahuri takaiho -->
  <ul class = "tahua-whakaheke" role = "tahua" aria-labelledby = "dTapanga" >   
    <li> <a tabindex = "-1" href = "#" > Mahi </a> </li>  
    <li> <a tabindex = "-1" href = "#" > He mahi ano </a></li>  
    <li> <a tabindex = "-1" href = "#" > He mea ano kei konei </a></li>  
    <li class = "kaiwehewehe" ></li> 
    <li> <a tabindex = "-1" href = "#" > Hononga wehea </a> </li>  
  </ul>
</div>

Kōwhiringa

Tiarohia nga tahua ki te taha matau me te taapiri me etahi atu taumata whakaheke.

Te whakahāngai i ngā tahua

Tāpirihia .pull-rightki te .dropdown-menutaha matau tiaarohia te tahua takaiho.

<ul class = "tahua-whakaheke kumea-matau" role = "tahua" aria-labelledby = "dTapanga" >   
  ...
</ul>

Nga whiringa tahua kua monoa

Tāpirihia .disabledki te <li>i roto i te takaiho ki te mono i te hono.

<ul class = "tahua-whakaheke" role = "tahua" aria-labelledby = "Tahuanga takaiho" >   
  <li> <a tabindex = "-1" href = "#" > Hononga auau </a> </li>  
  <li class = "disabled" > <a tabindex = "-1" href = "#" > Hononga mono </a> </li>   
  <li> <a tabindex = "-1" href = "#" > He hononga ano </a></li>  
</ul>

Nga tahua iti kei runga i nga takaiho

Tāpirihia he taumata taapiri o nga tahua takaiho, ka puta i runga i te whakaparo penei i era o OS X, me etahi taapiri tohu ngawari. Taapirihia .dropdown-submenuki tetahi lii roto i te tahua takaiho o naianei mo te whakaahua aunoa.

<ul class = "tahua-whakaheke" role = "tahua" aria-labelledby = "dTapanga" >   
  ...
  <li class = "takaiho-tahuaroto" > 
    <a tabindex = "-1" href = "#" > Ētahi atu kōwhiringa </a>  
    <ul class = "tahua-whakaheke" > 
      ...
    </ul>
  </li>
</ul>

Tauira

E rua nga whiringa taketake, me etahi atu rereke rereke e rua.

Rōpū patene kotahi

Takaia he raupapa patene ki .btnroto .btn-group.

<div class = "btn-rōpū" > 
  <button class = "btn" > Mauī </button> 
  <button class = "btn" > Waenga </button> 
  <button class = "btn" > Matau </button> 
</div>

Rōpū patene maha

Whakakotahihia nga huinga o <div class="btn-group">ki te a <div class="btn-toolbar">mo nga waahanga uaua ake.

<div class = "btn-toolbar" > 
  <div class = "btn-rōpū" > 
    ...
  </div>
</div>

Rōpū pātene poutū

Whakaatuhia he huinga o nga paatene kia noho poutū, kaua e whakapae.

<div class = "btn-rōpū btn-rōpū-poutū" > 
  ...
</div>

Pouakataki me nga rongo irirangi

Ka taea hoki e nga roopu patene te mahi hei reo irirangi, kotahi noa te paatene e hohe ana, he pouakataki ranei, kei reira te maha o nga paatene e kaha ana. Tirohia nga tuhinga JavaScript mo tera.

Whakataka i roto i nga roopu paatene

Mahunga ake!Me takai takitahi nga patene me nga takaiho ki roto i a raatau ake .btn-groupi roto i te a .btn-toolbarmo te whakaputa tika.

Tirohanga me nga tauira

Whakamahia tetahi paatene hei whakaoho i te tahua takaiho ma te whakanoho ki roto i te .btn-groupme te whakarato i te tohu tohu tahua tika.

<div class = "btn-rōpū" > 
  <a class = "btn takaiho-takahuri" data-toggle = "whakaheke" href = "#" >   
    Mahi
    <span class = "caret" ></span> 
  </a>
  <ul class = "tahua-whakaheke" > 
    <!-- nga hononga tahua takaiho -->
  </ul>
</div>

Ka mahi me nga rahi paatene katoa

Ka mahi nga takaiho paatene ahakoa te rahi: .btn-large, .btn-small, , ranei .btn-mini.

Me JavaScript

Ko nga takahanga patene e hiahia ana kia mahi te mono takaiho Bootstrap .

I etahi wa—penei i te pūkoro—ka toro atu nga tahua takaiho ki waho o te tauranga tirohanga. Me whakatau e koe te tirohanga a-ringa, me te JavaScript ritenga ranei.

Wehehia nga paatene takaiho

Ko te hanga i runga i nga momo roopu roopu me te tohu tohu, ka ngawari te hanga i te paatene wehe. Ko nga paatene ritua he mahinga paerewa kei te taha maui me te takahuri takahuri kei te taha matau me nga hononga horopaki.

<div class = "btn-rōpū" > 
  <button class = "btn" > Mahi </button> 
  <button class = "btn takaiho-takahuri" data-toggle = "whakaheke" >  
    <span class = "caret" ></span> 
  </pātene>
  <ul class = "tahua-whakaheke" > 
    <!-- nga hononga tahua takaiho -->
  </ul>
</div>

Rahi

Whakamahia nga karaehe paatene taapiri .btn-mini, .btn-small, .btn-largemo te rahi ranei.

<div class = "btn-rōpū" > 
  <button class = "btn btn-mini" > Mahi </button> 
  <button class = "btn btn-mini takahuri-takahuri" data-toggle = "whakaheke" >  
    <span class = "caret" ></span> 
  </pātene>
  <ul class = "tahua-whakaheke" > 
    <!-- nga hononga tahua takaiho -->
  </ul>
</div>

Nga tahua whakaheke

Ka taea hoki te takahuri i nga tahua takaiho mai i raro ki runga ma te taapiri i tetahi akomanga ki te matua tonu o .dropdown-menu. Ka huri i te ahunga o te ka huri ano i .carette tahua kia neke mai i raro ki runga, kaua ki runga ki raro.

<div class = "btn-group dropup" > 
  <button class = "btn" > Whakataka </button> 
  <button class = "btn takaiho-takahuri" data-toggle = "whakaheke" >  
    <span class = "caret" ></span> 
  </pātene>
  <ul class = "tahua-whakaheke" > 
    <!-- nga hononga tahua takaiho -->
  </ul>
</div>

Nga taunoa mama He rite te tohu, rereke nga karaehe

Ko nga waahanga nav katoa kei konei—ripa, pire, me nga raarangi— he rite te tohu turanga me nga momo ahua puta noa i te .navakomanga.

Ripa taketake

Whakaritehia nga <ul>hononga me te taapiri .nav-tabs:

<ul class = "nav nav-ripa" > 
  <li class = "kaha" > 
    <a href = "#" > Kāinga </a> 
  </li>
  <li><a href = "#" > ... </a> </li> 
  <li><a href = "#" > ... </a> </li> 
</ul>

Nga pire taketake

Tangohia taua HTML ano, engari whakamahia .nav-pills:

<ul class = "nav nav-pills" > 
  <li class = "kaha" > 
    <a href = "#" > Kāinga </a> 
  </li>
  <li><a href = "#" > ... </a> </li> 
  <li><a href = "#" > ... </a> </li> 
</ul>

Te ahua haua

Mo tetahi waahanga nav (ripa, pire, rarangi ranei), taapirihia .disabledmo nga hononga hina me te kore he paanga whakaparo . Ka taea tonu te paato i nga hononga, engari mena ka tangohia e koe te hrefhuanga. Hei tauira, ka taea e koe te whakamahi JavaScript ritenga hei aukati i aua pao.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Home </a> </li>  
  ...
</ul>

Tirohanga wae

Hei whakahāngai i nga hononga nav, whakamahia nga akomanga whaipainga .pull-leftranei . .pull-rightKa taapirihia e nga karaehe e rua he maanu CSS ki te ahunga kua tohua.

Ka taea te tāpae

I te mea ko nga ripa me nga pire he whakapae ma te taunoa, taapirihia he karaehe tuarua, .nav-stacked, kia puta ake ai te tapae poutū.

Ripa tāpae

<ul class = "nav nav-ripa nav-tapae" > 
  ...
</ul>

Pire tāpae

<ul class = "nav nav-pills nav-tapae" > 
  ...
</ul>

Whakataka

Taapirihia nga tahua takaiho me te HTML iti me te mono JavaScript takaiho .

Ripa whai takaiho

<ul class = "nav nav-ripa" > 
  <li class = "whakaheke" > 
    <a class = "takahuri-takahuri" 
       data-toggle = "whakaheke"
       href = "#" >
        Whakataka iho
        <b class = "caret" ></b> 
      </a>
    <ul class = "tahua-whakaheke" > 
      <!-- hononga -->
    </ul>
  </li>
</ul>

Nga pire me nga takaiho

<ul class = "nav nav-pills" > 
  <li class = "whakaheke" > 
    <a class = "takahuri-takahuri" 
       data-toggle = "whakaheke"
       href = "#" >
        Whakataka iho
        <b class = "caret" ></b> 
      </a>
    <ul class = "tahua-whakaheke" > 
      <!-- hononga -->
    </ul>
  </li>
</ul>

Nga raarangi whakatere

He huarahi ngawari me te ngawari ki te hanga i nga roopu o nga hononga nav me nga pane whiriwhiri. He pai ake te whakamahi ki nga paetaha penei i te Finder i OS X.

He tauira nav list

Tangohia he rarangi o nga hononga me te taapiri class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Rārangi pane </li> 
  <li class = "active" ><a href = "#" > Home </a> </li>  
  <li><a href = "#" > Whare Pukapuka </a> </li> 
  ...
</ul>

TuhipokaMo te kohanga i roto i te rarangi nav, whakauruhia class="nav nav-list"ki runga i tetahi kohanga <ul>.

Nga wehewehe whakapae

Tāpirihia he kaiwehewehe whakapae mā te hanga i tētahi tūemi rārangi putu me te akomanga .divider, penei:

<ul class = "nav nav-list" > 
  ...
  <li class = "kaiwehewehe" ></li> 
  ...
</ul>

Nav ripa

Whakaorangia o ripa me te mono ngawari ki te takahuri i waenga i nga ihirangi ma nga ripa. Ka whakauru a Bootstrap i nga ripa ripa ki nga momo e wha: runga (taunoa), matau, raro, maui.

Tauira ripanga

Hei hanga ripanga ripa, hangahia he .tab-paneID ahurei mo ia ripa ka takai ki roto .tab-content.

<div class = "tabbable" > <!-- Me tika mo nga ripa maui/matau -->  
  <ul class = "nav nav-ripa" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "ripa" > Wāhanga 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "ripa" > Wāhanga 2 </a></li>  
  </ul>
  <div class = "ripa-ihirangi" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Kei te Wāhanga 1 ahau. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Kia ora, kei te Wāhanga 2 ahau. </p>
    </div>
  </div>
</div>

Muhani i roto i nga ripa

Kia memeha haere nga ripa, taapiri atu .fadeki ia .tab-pane.

Me te mono jQuery

Ko nga ripa ripanga katoa e whakakahangia ana e to maatau mono jQuery mama. Pānuitia atu mo te pehea e ora ai nga ripa ripa i runga i te wharangi tuhinga JavaScript .

Tabbable i tetahi huarahi

Ripa kei raro

Hurihia te raupapa o te HTML me te taapiri i tetahi karaehe hei whakatakoto ripa ki raro.

<div class = "ripa ripa-i raro" > 
  <div class = "ripa-ihirangi" > 
    ...
  </div>
  <ul class = "nav nav-ripa" > 
    ...
  </ul>
</div>

Ripa kei te taha maui

Hurihia te akomanga ki te whakatakoto ripa ki te taha maui.

<div class = "ripa ripa-maui" > 
  <ul class = "nav nav-ripa" > 
    ...
  </ul>
  <div class = "ripa-ihirangi" > 
    ...
  </div>
</div>

Ripa kei te taha matau

Hurihia te akomanga ki te whakatakoto ripa ki te taha matau.

<div class = "ripa ripa-matau" > 
  <ul class = "nav nav-ripa" > 
    ...
  </ul>
  <div class = "ripa-ihirangi" > 
    ...
  </div>
</div>

Paetukutuku taketake

Hei timata, he pateko nga paewhakatere (kaore i mau ki runga) me te tautoko mo te ingoa kaupapa me te whakatere taketake. Whakanohoia tetahi ki hea i roto i te .container, e whakatakoto ana i te whanui o to pae me to ihirangi.

<div class = "navbar" > 
  <div class = "navbar-roto" > 
    <a class = "brand" href = "#" > Taitara </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Home </a> </li>  
      <li><a href = "#" > Hononga </a> </li> 
      <li><a href = "#" > Hononga </a> </li> 
    </ul>
  </div>
</div>

Nga waahanga Navbar

Waitohu

Ko te hono ngawari hei whakaatu i to waitohu, ingoa kaupapa ranei me tohu tohu punga anake.

<a class = "brand" href = "#" > Ingoa kaupapa </a>  

Nav hononga

He ngawari noa te taapiri i nga taonga Nav ma nga rarangi kore raupapa.

<ul class = "nav" > 
  <li class = "kaha" > 
    <a href = "#" > Kāinga </a> 
  </li>
  <li><a href = "#" > Hononga </a> </li> 
  <li><a href = "#" > Hononga </a> </li> 
</ul>

Ka taea e koe te taapiri i nga kaiwehewehe ki o hononga nav me tetahi mea rarangi kore me tetahi akomanga ngawari. Me taapiri noa tenei ki waenga i nga hononga:

<ul class = "nav" > 
  ...
  <li class = "whakawehe-poutū" ></li> 
  ...
</ul>

Puka

Kia tika te whakaahua me te tuu i tetahi puka ki roto i te pae whakaterenga, taapirihia nga karaehe e tika ana ka whakaatuhia i raro nei. Mo te puka taunoa, whakaurua .navbar-formme te mea .pull-leftranei, .pull-rightki te whakahāngai tika ranei.

<form class = "navbar-form pull-maui" > 
  < momo whakauru = "kuputuhi" class = "span2" >  
  <button type = "tuku" class = "btn" > Tuku </button>  
</form>

Puka rapu

Mo te puka rapu kua whakaritea ake, taapirihia .navbar-searchki te formme .search-queryte whakauru mo nga momo momo motuhake i te pae whakatere.

<form class = "navbar-rapu kumea-maui" > 
  < type input = "kuputuhi" class = "rapu-uiui" placeholder = "Rapu" >   
</form>

Tirohanga wae

Tiarohia nga hononga nav, puka rapu, tuhinga ranei, whakamahia nga .pull-leftakomanga .pull-rightwhaipainga. Ka taapirihia e nga karaehe e rua he maanu CSS ki te ahunga kua tohua.

Te whakamahi takaiho

Tāpirihia nga takaiho me nga whakaheke ki te nav me etahi tohu tohu me te mono JavaScript takaiho .

<ul class = "nav" > 
  <li class = "whakaheke" > 
    <a href = "#" class = "whakataka-takahuri" data-toggle = "whakaheke" >   
      Pūkete
      <b class = "caret" ></b> 
    </a>
    <ul class = "tahua-whakaheke" > 
      ...
    </ul>
  </li>
</ul>

Tirohia te tuhinga takaiho JavaScript mo etahi atu tohu me nga korero mo te waea whakaheke.

Kuputuhi

Takaia nga aho o te kuputuhi ki tetahi huānga me te .navbar-text, i te nuinga o te waa ki te <p>tohu mo te arataki tika me te tae.

Ko nga rereketanga whakaatu

Whakatikahia te pae whakatere ki runga, ki raro ranei o te tauranga tirohanga me tetahi atu karaehe kei te taha o waho rawa, .navbar.

Ka mau ki runga

Tāpirihia .navbar-fixed-topme te mahara ki te kaute mo te waahi huna i raro iho ma te taapiri i te 40px iti rawa paddingki te <body>. Kia mahara ki te taapiri i muri i te Bootstrap CSS matua me mua i te CSS whakautu.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Ka mau ki raro

Tāpiri .navbar-fixed-bottomkē.

<div class = "navbar navbar-fixed-raro" > 
  ...
</div>

Paetukutuku runga pateko

Waihangatia he paewhakatua whanui-katoa ka panuku atu me te wharangi ma te taapiri .navbar-static-top. Kaore i rite ki te .navbar-fixed-topkaraehe, kaore koe e hiahia ki te whakarereke i tetahi papa i runga i te body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

pae whakaterenga urupare

Hei whakatinana i te pae whakaterenga e tiango ana, takai i to ihirangi pae whakatere ki roto i te div kei roto, .nav-collapse.collapse, me te taapiri i te paatene takahuri pae whakatere, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-roto" > 
    <div class = "putea" > 
 
      <!-- Ka whakamahia te .btn-navbar hei takahuri mo nga ihirangi pae whakatere tiango -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Me waiho te waitohu ki waho ki te hiahia koe kia whakaatuhia -->
      <a class = "brand" href = "#" > Ingoa kaupapa </a>  
 
      <!-- Ko nga mea katoa e hiahia ana koe kia huna ki te 940px iti iho ranei, tuu ki roto -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Rerekētanga kōaro

Whakarerekēhia te ahua o te pae whakatere ma te taapiri .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Tauira

He tauira kotahi e whakaatuhia ana tera pea ka whakaatuhia puta noa i nga wharangi maha.

<ul class = "te taro" > 
  <li><a href = "#" > Kāinga </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Whare Pukapuka </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Raraunga </li> 
</ul>

whakarangirangi paerewa

Te whakarangirangi ngawari na Rdio, he pai mo nga tono me nga hua rapu. Ko te poraka nui he uaua ki te ngaro, he ngawari te tauine, me te whakarato i nga waahi paato nui.

<div class = "whakawhārangi" > 
  <ul>
    <li><a href = "#" > Tuhinga o mua </a> </li> 
    <li><a href = "#" > 1 </a> </li> 
    <li><a href = "#" > 2 </a> </li> 
    <li><a href = "#" > 3 </a> </li> 
    <li><a href = "#" > 4 ​​</a> </li> 
    <li><a href = "#" > 5 </a> </li> 
    <li><a href = "#" > Panuku </a> </li> 
  </ul>
</div>

Kōwhiringa

Ko nga ahuatanga haua me te hohe

He mea whakarite nga hononga mo nga ahuatanga rereke. Whakamahia .disabledmo nga hononga kaore e taea te panui me .activete tohu i te wharangi o naianei.

<div class = "whakawhārangi" > 
  <ul>
    <li class = "whakakore" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a> </li>  
    ...
  </ul>
</div>

Ka taea e koe te huri i nga punga hohe, haua ranei mo nga waahi ki te tango i nga mahi paato i te wa e mau tonu ana nga momo ahua.

<div class = "whakawhārangi" > 
  <ul>
    <li class = "whakakore" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Rahi

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

<div class = "pagination pagination-nui" > 
  <ul>
    ...
  </ul>
</div>
<div class = "whakawhārangi" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-iti" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Tirohanga

Tāpirihia tetahi o nga karaehe e rua hei whakarereke i te tirohanga o nga hononga whakarangirangi: .pagination-centeredme .pagination-right.

<div class = "whakakauwhau wharangi-pokapū" > 
  ...
</div>

<div class = "pagination pagination-matau" > 
  ...
</div>

Pager

Nga hononga tere o mua me muri mo nga whakatinanatanga whakarangirangi ngawari me te tohu marama me nga momo. He pai mo nga waahi ngawari penei i nga rangitaki me nga maheni.

Tauira taunoa

Ma te taunoa, ka pokapu hono te pager.

<ul class = "pager" > 
  <li><a href = "#" > Tuhinga o mua </a> </li> 
  <li><a href = "#" > Panuku </a> </li> 
</ul>

Hononga hono

Ka taea e koe te whakarite i ia hononga ki nga taha:

<ul class = "pager" > 
  <li class = "mua" > 
    <a href = "#" > ← Tawhito </a> 
  </li>
  <li class = "muri" > 
    <a href = "#" > Hou → </a> 
  </li>
</ul>

Ko te ahua monokia

Ka whakamahia ano hoki e nga hononga pager te .disabledkaraehe whaipainga whanui mai i te wharangi.

<ul class = "pager" > 
  <li class = "kua haua o mua" > 
    <a href = "#" > ← Tawhito </a> 
  </li>
  ...
</ul>

Tapanga

Tohu

He ngawari te tiango

Mo te whakatinanatanga ngawari, ka tiango noa nga tapanga me nga tohu (ma te :emptykaiwhiriwhiri a CSS) karekau he ihirangi kei roto.

Waehe toa

He waahanga ngawari, ngawari hei whakaatu i nga ihirangi matua ki to pae. He pai te mahi i runga i nga waahi hokohoko me nga waahi-taimaha.

<div class = "waewae-toa" > 
  <h1> Pane </h1>
  <p> Tohutohu </p>
  <p>
    <a class = "btn btn-tuatahi btn-nui" > 
      Ako atu
    </a>
  </p>
</div>

Pane wharangi

He anga ngawari mo te h1mokowhiti tika me te wehewehe i nga waahanga o te ihirangi ki te wharangi. Ka taea te whakamahi i h1te taunoa small, te huānga me te nuinga atu o nga waahanga (me etahi atu momo).

<div class = "page-header" > 
  <h1> Tauira pane page <small> Kupuroto mo te pane </small></h1>
</div>

Karakōnui taunoa

Ma te taunoa, ka hangaia nga karakōnui a Bootstrap hei whakaatu i nga whakaahua hono me te tohu tohu iti.

Tino whakarite

Ma te iti o te tohu tohu, ka taea te taapiri i nga momo ihirangi HTML penei i nga pane, nga kowae, nga paatene ranei ki nga karakōnui.

He aha te whakamahi karakōnui

He pai nga karakōnui (i mua .media-gridtae noa ki te v1.4) mo nga raarangi whakaahua, ataata ranei, hua rapu whakaahua, hua hokohoko, putea, me te maha atu. He hononga, he ihirangi pateko ranei.

He tohu ngawari, ngawari

He ngawari te tohu karakōnui—a ulme te maha o linga huānga ko nga mea katoa e hiahiatia ana. He tino ngawari hoki, ka taea e koe nga momo ihirangi me te tohu tohu iti ake hei takai i o ihirangi.

Ka whakamahi i nga rahi o nga pou tukutuku

Ka mutu, ka whakamahi te wahanga karakōnui i ngā karaehe pūnaha mātiti o nāianei—penei .span2, .span3—mo te whakahaere i nga ine karakōnui.

Tohutohu

Ka rite ki te korero i mua, ko te tohu tohu mo nga karakōnui he maamaa, he maamaa. Anei he tirohanga ki te tatūnga taunoa mo nga whakaahua hono :

<ul class = "karakōnui" > 
  <li class = "span4" > 
    <a href = "#" class = "karakōnui" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Mo nga ihirangi HTML ritenga i roto i nga karakōnui, he paku rereke te tohu tohu. Hei tuku i nga ihirangi taumata paraka ki hea, ka huri tatou i <a>te <div>mea penei:

<ul class = "karakōnui" > 
  <li class = "span4" > 
    <div class = "karakōnui" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Tapanga karakōnui </h3>
      <p> Tapanga karakōnui... </p>
    </div>
  </li>
  ...
</ul>

Ētahi atu tauira

Te tirotiro i o whiringa katoa me nga momo karaehe matiti e waatea ana ki a koe. Ka taea hoki e koe te whakakotahi me te whakataurite i nga rahi rereke.

Matohi taunoa

Tākaihia he kuputuhi me te patene whakakore i roto i te kowhiringa .alertmo te karere matohi taketake.

<div class = "matohi" > 
  <button type = "button" class = "close" data-dismiss = "matohi" > &wa; </pātene>   
  <strong> Whakatūpato! </strong> He pai ake te tirotiro i a koe ano, kaore koe i te tino pai.
</div>

Waiho nga patene

Ko nga kaitirotiro Mobile Safari me te Opera Mobile, i tua atu i te data-dismiss="alert"huanga, me tono he href="#"mo te whakakore i nga matohi ina whakamahi <a>tohu.

<a href = "#" class = "close" data-dismiss = "matohi" > &wa; </a>   

Ka taea e koe te whakamahi i tetahi <button>huānga me te huanga raraunga, i whiriwhiria e matou ki te mahi mo o maatau tuhinga. I a koe e whakamahi ana <button>, me whakauru type="button"koe, karekau pea o puka e tuku.

<button type = "button" class = "close" data-dismiss = "matohi" > &wa; </pātene>   

Waiho nga matohi ma te JavaScript

Whakamahia te mono jQuery matohi mo te whakakore tere me te ngawari o nga matohi.

Kōwhiringa

Mo nga karere roa ake, whakanuia te papa ki runga me raro o te takai matohi ma te taapiri .alert-block.

<div class = "pararaka mataara" > 
  <button type = "button" class = "close" data-dismiss = "matohi" > &wa; </pātene>   
  <h4> Whakatupato! </h4>
  He pai ake te tirotiro i a koe ano, kaore koe ...
</div>

Nga momo horopaki

Taapirihia nga karaehe hei whakarereke i te tikanga o te matohi.

Hapa, morearea ranei

<div class = "matohi-hapa" > 
  ...
</div>

Angitu

<div class = "matatohi-angitu" > 
  ...
</div>

Nga korero

<div class = "mohiohio matohi matohi" > 
  ...
</div>

Nga tauira me te tohu tohu

Taketake

Pae ahunga whakamua taunoa me te rōnaki poutū.

<div class = "te ahunga whakamua" > 
  <div class = "bar" style = " whanui : 60 %; " ></div>   
</div>

Tāhekeheke

Ka whakamahi i te rōnaki hei hanga i te awenga purepure. Kaore i te waatea i IE7-8.

<div class = "te ahunga whakamua-striped" > 
  <div class = "bar" style = " whanui : 20 %; " ></div>   
</div>

Hangarite

Taapirihia .activeki .progress-stripedte whakakorikori i nga whiu matau ki maui. Kāore i te wātea ki ngā momo putanga katoa o IE.

<div class = "te ahunga whakamua-striped active" > 
  <div class = "bar" style = " whanui : 40 %; " ></div>   
</div>

Tāpae

Whakanohoia nga kaho maha ki roto i te kotahi .progresshei tapae.

<div class = "te ahunga whakamua" > 
  <div class = "bar bar-success" style = " whanui : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " whanui : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " whanui : 10 %; " ></div>   
</div>

Kōwhiringa

Tae taapiri

Ka whakamahia e nga pae ahu whakamua etahi o nga paatene me nga karaehe matohi mo nga momo rite.

<div class = "te ahunga whakamua-info" > 
  <div class = "bar" style = " whanui : 20 % " ></div>   
</div>
<div class = "te ahunga whakamua-angitu" > 
  <div class = "bar" style = " whanui : 40 % " ></div>   
</div>
<div class = "te ahunga whakamua-whakatupato" > 
  <div class = "bar" style = " whanui : 60 % " ></div>   
</div>
<div class = "te ahunga whakamua-te kino" > 
  <div class = "bar" style = " whanui : 80 % " ></div>   
</div>

Kaho tarekare

He rite ki nga tae totoka, he rerekee a matou paera ahu whakamua.

<div class = "te ahunga whakamua-te ahunga whakamua-whakawhitinga" > 
  <div class = "bar" style = " whanui : 20 % " ></div>   
</div>
<div class = "te ahunga whakamua-angitu te ahunga whakamua-striped" > 
  <div class = "bar" style = " whanui : 40 % " ></div>   
</div>
<div class = "te ahunga whakamua-whakatupato ahunga whakamua-striped" > 
  <div class = "bar" style = " whanui : 60 % " ></div>   
</div>
<div class = "te ahunga whakamua-te ahunga whakamua-te kino" > 
  <div class = "bar" style = " whanui : 80 % " ></div>   
</div>

Tautoko Pūtirotiro

Ka whakamahia e nga pae ahunga whakamua nga rōnaki CSS3, nga whakawhitinga, me nga pakiwaituhi hei whakatutuki i o raatau paanga katoa. Ko enei ahuatanga kaore i te tautokohia i roto i te IE7-9, i nga putanga tawhito ake ranei o Firefox.

Ko nga putanga o mua atu i a Internet Explorer 10 me Opera 12 kaore i te tautoko i nga pakiwaituhi.

Ko nga momo ahanoa maamaa mo te hanga momo momo waahanga (penei i nga korero rangitaki, Tweets, me etahi atu) e whakaatu ana i te taha maui- matau-tika ranei ki te taha o nga tuhinga tuhinga.

Tauira taunoa

Ka taea e te pāpāho taunoa te rewa i tetahi ahanoa pāpāho (whakaahua, ataata, ororongo) ki te taha maui, matau ranei o te paraka ihirangi.

Pane korero

Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.

Pane korero

Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.

Pane korero

Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class = "pāho" > 
  <a class = "kumea-maui" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "pāpāho-tinana" > 
    <h4 class = "media-heading" > Media heading </h4> 
    ...
 
    <!-- Kohanga ahanoa pāpāho -->
    <div class = "pāho" > 
      ...
    </div>
  </div>
</div>

Rārangi pāpāho

Ma te iti o te tohu tohu, ka taea e koe te whakamahi i nga panui o roto i te raarangi (he pai mo nga miro korero, rarangi tuhinga ranei).

<ul class = "rārangi-pāpāho" > 
  <li class = "pāpāho" > 
    <a class = "kumea-maui" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "pāpāho-tinana" > 
      <h4 class = "media-heading" > Media heading </h4> 
      ...
 
      <!-- Kohanga ahanoa pāpāho -->
      <div class = "pāho" > 
        ...
     </div>
    </div>
  </li>
</ul>

puna

Whakamahia te puna hei awe ngawari ki runga i tetahi huānga kia hoatu he awe whakauru.

<div class = "pai" > 
  ...
</div>

Nga karaehe whiriwhiri

Whakahaerehia te papa me nga kokonga porotaka me nga karaehe whakarereke e rua.

<div class = "pai pai-nui" > 
  ...
</div>

<div class = "pai pai-iti" > 
  ...
</div>

Katia te ata

Whakamahia te ata kati mo te whakakore i nga ihirangi penei i nga tikanga me nga matohi.

<button class = "kati" > × </pātene> 

Ko nga taputapu iOS e hiahia ana href="#"mo nga huihuinga panui mena ka hiahia koe ki te whakamahi i te punga.

<a class = "close" href = "#" > × </a>  

Nga karaehe kaiawhina

Ko nga karaehe ngawari, arotahi mo te whakaaturanga iti, mo nga takawiri whanonga ranei.

.toia-maui

Manu he huānga maui

akomanga = "toia-maui"

. toia - maui {
  mānu : maui ;
}

.toia-matau

Manu tetahi huānga matau

class = "toia-matau"

. toia - matau {
  mānu : tika ;
}

.wahangu

Hurihia te tae o te huānga ki#999

akomanga = "wahangu"

. wahangu {
  tae : #999; 
}

.whakatikatika

Ūkuia te floati runga i tetahi huānga

class = "whakatikatika"

. whakatika {
  * topa : 1 ; 
  &: mua ,
  &: muri {
    whakaatu : tepu ;
    ihirangi : "" ; 
  }
  &: muri {
    mārama : e rua ;
  }
}