Nga roopu patene

Whakamahia nga roopu patene hei hono i nga patene maha hei waahanga hiato kotahi. Hangaia ki te raupapa o nga huānga <a>ranei .<button>

Ka taea hoki e koe te whakakotahi i nga huinga o <div class="btn-group">ki te <div class="btn-toolbar">mo nga kaupapa uaua ake.

Tauira tohu

Anei te ahua o te HTML mo te roopu paatene paerewa i hangaia me nga paatene tohu punga:

<div class = "btn-rōpū" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Me te paeutauta mo nga roopu maha:

<div class = "btn-toolbar" > 
  <div class = "btn-rōpū" > 
    ...
  </div>
</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.

Tikina te javascript »

Mahunga ki runga

Ko te CSS mo nga roopu paatene kei roto i te konae motuhake, button-groups.less.

Patene takaiho

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.

Tauira tohu

He rite ki te roopu paatene, ka whakamahia e to maatau tohu te tohu paatene i ia wa, engari he iti noa nga taapiri hei whakamahine i te ahua me te tautoko i te mono jQuery takaiho a Bootstrap.

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

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.

Tauira tohu

Ka whakawhänuihia e mätou ngä pätene takaiho noa ki te whakarato i te mahi patene tuarua e mahi ana hei keu takaiho motuhake.

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

Te karaehe turanga kaha

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.

He aha nga ripa me nga pire

Ko nga ripa me nga pire kei Bootstrap ka hangaia i runga i <ul>te HTML matua rite tonu, he rarangi hononga. Hurihia i waenga i nga ripa me nga pire me te akomanga anake.

He pai nga waahanga e rua mo nga waahanga-iti o te ihirangi, te whakatere ranei i waenga i nga wharangi o nga mea e pa ana.

Ripa taketake

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

• Kainga
• Kōtaha
• Nga Karere

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

• Kainga
• Kōtaha
• Nga Karere

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

Me pēhea te tāpae 'em

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

• Kainga
• Kōtaha
• Nga Karere

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

Pire tāpae

• Kainga
• Kōtaha
• Nga Karere

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

He ngawari nga tahua taonga

He tino ngawari nga tahua whakaheke i roto i nga ripa Bootstrap me nga pire me te tono HTML iti me te mono jQuery mama.

Haere ki te wharangi Javascript ki te panui i nga tuhinga mo te tiimata i nga whakahekenga i Bootstrap .

Ripa whai takaiho

• Kainga
• Kōtaha
• Whakataka iho
  • Mahi
  • He mahi ano
  • He mea ke atu i konei
  • Hononga wehe

<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

• Kainga
• Kōtaha
• Whakataka iho
  • Mahi
  • He mahi ano
  • He mea ke atu i konei
  • Hononga wehe

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

Whakaterenga-ahua tono

Ka whakaratohia e nga rarangi Nav he huarahi ngawari me te ngawari ki te hanga i nga roopu o nga hononga whakatere me nga pane whiriwhiri. He pai ake te whakamahi ki nga paetaha penei i te Finder i OS X.

Ko te hanganga, he mea hanga i runga i nga momo nav matua rite ki nga ripa me nga pire, no reira he maamaa te whakamahi me te whakarite.

Me nga tohu

He ngawari hoki nga rarangi Nav ki te whakauru ki nga tohu. Tāpirihia te <i>tohu tika me te karaehe ka oti koe.

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" > 
    Rarangi pane
  </li>
  <li class = "kaha" > 
    <a href = "#" > Kāinga </a> 
  </li>
  <li>
    <a href = "#" > Whare Pukapuka </a> 
  </li>
  ...
</ul>

He tauira me nga tohu

He tauira ano, engari me <i>nga tohu mo nga tohu.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "pukapuka-ira" ></i> 
      Whare Pukapuka
    </a>
  </li>
  ...
</ul>

He aha kei roto

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.

He ngawari te huri i waenga i a raatau me te whakarereke i te tohu tohu iti noa iho.

Tauira ripanga

Kia taea ai te ripanga ripa, takaia te .nav-tabski tetahi atu div me te akomanga .tabbable.

mono jQuery ritenga

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

Tikina te javascript →

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>

Tauira Navbar

Ko te pae whakaterenga he torutoru noa nga div hei hanga pai mo te whakaaturanga pateko, whakapumau ranei.

<div class = "navbar" > 
  <div class = "navbar-roto" > 
    <div class = "putea" > 
      ...
    </div>
  </div>
</div>

Hei whakarite i te pae whakatere ki te tihi o te tauranga tirohanga, taapirihia ki te waahanga o .navbar-fixed-topwaho rawa, .navbar. I roto i to CSS, me whakaaro ano koe mo te inaki ka puta ma te taapiri atu padding-top: 40px;ki to <body>.

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

Ingoa waitohu

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

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

Puka rapu

Ko nga puka rapu ka whiwhi momo ritenga i te pae whakatere me te .navbar-searchkaraehe. Whakauruhia , ki runga .pull-leftranei .pull-rightki te formtiaaro.

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

He rerekee whakautu

I runga i te nui o nga ihirangi kei roto i to pae runga, ka hiahia pea koe ki te whakatinana i nga whiringa whakautu. Ki te pera, takai i to ihirangi nav ki roto i te div kei roto, .nav-collapse.collapse, ka taapirihia 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" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

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>

Te taapiri i nga takaiho

Ko te taapiri i nga takahanga ki te nav he tino ngawari, engari me whakamahi to maatau mono javascript .

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

Tikina te javascript →

He aha te whakamahi i a raatau

Ka whakamahia te whakatere paraoa hei huarahi whakaatu ki nga kaiwhakamahi kei roto ratou i tetahi taupānga, i tetahi pae ranei, engari kaua mo te whakatere tuatahi. Kia iti te whakamahi me te poto kia tino whai hua.

Tauira

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

• Kainga

• Kāinga /
• Whare Pukapuka

• Kāinga /
• Whare Pukapuka /
• Raraunga

Tohutohu

Ko HTML to rarangi paerewa kore raupapa me nga hononga.

<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 = "kaha" > 
    <a href = "#" > Raraunga </a> 
  </li>
</ul>

Ahea te whakamahi

Ko te whakaingoatanga tino ngawari me te ahua iti 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.

Hononga wharangi ahua

He mea whakarite nga hononga me te mahi i roto i te maha o nga ahuatanga me te karaehe tika. .disabledmo nga hononga kore e taea te panui me .activete wharangi o naianei.

Te tirohanga ngawari

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

Tauira

He ngawari te waahanga whakaingoatanga taunoa me te mahi i roto i te maha o nga rereketanga.

Tohutohu

Ka takaia ki roto i te <div>, ko te whakaingoatanga he mea noa <ul>.

<div class = "whakawhārangi" > 
  <ul>
    <li><a href = "#" > Tuhinga o mua </a> </li> 
    <li class = "kaha" > 
      <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 = "#" > Panuku </a> </li> 
  </ul>
</div>

Mo te wharangi

Ko te wahanga pager he huinga hononga mo nga mahi whakaingoatanga ngawari me te tohu marama me nga momo maamaa. He pai mo nga waahi ngawari penei i nga rangitaki me nga maheni.

Tauira taunoa

Ma te taunoa, ka pokapu hono te pager.

• Tuhinga o mua
• Whai muri

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

• ← Tawhito
• Hou ake →

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

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.

• 

  Tapanga karakōnui

  Ka taea e koe te mahi, ka taea e koe te whakahaere, ka taea e koe te mahi. Donec id elit non mi porta gravida and eget metus. Ko te ingoa o nga mea katoa ka taea e koe.

  Mahi Mahi

• 

  Tapanga karakōnui

  Ka taea e koe te mahi, ka taea e koe te whakahaere, ka taea e koe te mahi. Donec id elit non mi porta gravida and eget metus. Ko te ingoa o nga mea katoa ka taea e koe.

  Mahi Mahi

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.

Ko te tohu

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 = "span3" > 
    <a href = "#" class = "karakōnui" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "karakōnui" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Tapanga karakōnui </h5>
      <p> Tapanga karakōnui kei konei tonu... </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.

Tuhituhi ano te karaehe turanga

Ki te Bootstrap 2, kua whakangwarihia e matou te karaehe turanga: .alerthei utu mo .alert-message. Kua whakaitihia ano e matou te tohu tohu iti rawa atu— <p>kao me taunoa, ko te waho anake <div>.

Karere matohi kotahi

Mo te waahanga roa ake me te iti o te waehere, kua tangohia e matou te ahua rereke mo nga matohi poraka, nga karere ka tae mai me etahi atu papaa me te nuinga ake o nga tuhinga. Kua huri ano te karaehe ki .alert-block.

He pai ki te javascript

Ka tae mai a Bootstrap me tetahi mono jQuery nui e tautoko ana i nga karere mataara, kia tere, kia ngawari hoki te whakakore.

Tikina te mono »

Tauira matohi

Takaia to karere me tetahi ata kati ki roto i te riu me te karaehe ngawari.

<div class = "matohi" > 
  <a class = "kati" > × </a> 
  <strong> Whakatūpato! </strong> He pai ake te tirotiro i a koe ano, kaore koe i te tino pai.
</div>

Whakanuia te karere matohi paerewa me nga karaehe whiriwhiri e rua: .alert-blockmo te maha atu o nga papaa me nga mana kupu, me .alert-headingte pane e rite ana.

<div class = "pararaka mataara" > 
  <a class = "kati" > × </a> 
  <h4 class = "matohi-upoko" > Whakatupato! </h4> 
  He pai ake te tirotiro i a koe ano, kaore koe ...
</div>

Hapa, morearea ranei

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

Angitu

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

Nga korero

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

Taketake

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

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

Tāhekeheke

Ka whakamahi i te rōnaki hei hanga i te awenga purepure.

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

Hangarite

Ka mau i te tauira purepure me te whakakorikori.

<div class = "te ahunga whakamua-te kino 
     he kaha te ahunga whakamua" >
  <div class = "pae" 
       style = " whanui : 40 %; " ></div> 
</div>

Tae taapiri

Ka whakamahia e nga pae ahu whakamua etahi o nga ingoa o te karaehe rite ki nga paatene me nga matohi mo te ahua rite.

• .progress-info
• .progress-success
• .progress-danger

Ka taea e koe te whakarite i nga konae MAHI KAUPAPA me te huri i o ake tae me o rahi.

Whanonga

Ka whakamahia e nga pae ahunga whakamua nga whakawhitinga CSS3, na ki te whakatikatika koe i te whanui ma te javascript, ka pai te whakarereke i te rahi.

Mena ka whakamahi koe i te .activekaraehe, .progress-stripedka whakakorikorihia e to pae ahu whakamua nga whiu i te maui ki te matau.

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-8, i nga putanga tawhito ake ranei o Firefox.

Karekau a Opera e tautoko i nga pakiwaituhi i tenei wa.

puna

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

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

Tohu

Whakamahia he tohu i runga i tetahi huānga mo te kaute kaore ano kia panuitia, hei tohu ngawari ranei.

<span class = "tohu" > 3 </div> 

Katia te ata

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

×

<a class = "kati" > × </a>