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>

Nga mahi pai

Ka tūtohu matou i nga aratohu e whai ake nei mo te whakamahi i nga roopu paatene me nga paeutauta:

• Whakamahia i nga wa katoa te huānga kotahi i roto i te roopu paatene kotahi <a>, <button>.
• Kaua e hanumi nga patene he rereke nga tae i roto i te roopu paatene kotahi.
• Whakamahia nga tohu hei taapiri atu, hei utu ranei i te tuhinga, engari me whakauru mai te alt me ​​te tuhinga taitara ina tika.

Ko nga roopu Patene e pa ana me nga takahanga (tirohia ki raro) me karanga motuhake me te whakauru i nga wa katoa he waahi takaiho hei tohu i te whanonga e hiahiatia ana.

Tauira taunoa

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

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

Tauira paeutauta

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>

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 »

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.

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>

Ka mahi me nga rahi paatene katoa

Ka mahi nga takaiho paatene ahakoa te rahi. te rahi o to patene ki te .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 koe i te tirohanga a-ringa, me te javascript ritenga ranei.

Tirohanga me nga tauira

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.

Rahi

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

<div class = "btn-rōpū" > 
  ...
  <ul class = "tahua-whakaheke kumea-matau" > 
    <!-- nga hononga tahua takaiho -->
  </ul>
</div>

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

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>

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.

Ahea te whakamahi

He pai nga ripa me nga pire mo nga waahanga o te ihirangi, te whakatere ranei i waenga i nga wharangi o nga ihirangi e pa ana.

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.

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

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>

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.

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. Panuitia atu mo te pehea e ora ai nga ripa ripa i runga i te wharangi tuhinga javascript .

Tikina te javascript →

Tauira ripanga

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

Mo nga ripa tiaaro matau, maui ranei, takai te .nav-tabsme .tab-contentte .tabbable.

Tohu tika

Ma te whakamahi i nga ripa ripanga ka hiahiatia he waahanga takai, he huinga ripa, me te huinga o nga pihanga ripanga o te ihirangi.

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

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>

Navbar kua mau

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

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

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

Ina whakapirihia e koe te pae whakatere, mahara ki te kaute mo te waahi huna kei raro. Tāpirihia te 40px neke atu rānei o te papa ki te <body>. Kia mahara ki te taapiri i muri i te Bootstrap CSS matua me mua i te CSS whakautu.

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 ki te pae whakatere

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" >  
</form>

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>

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>

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>

Tirohanga wae

Hei whakahāngai i te 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 taapiri i nga tahua takaiho

Ko te taapiri i nga whakahekenga me nga whakaheke 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 →

Kuputuhi i te pae whakatere

Takaia nga aho o te kuputuhi ki roto i te <.navbar-text>, i te nuinga o te waa ki te <p>tohu mo te arahi me te tae tika.

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 = "active" > Raraunga </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 whakatinanatanga whakarangirangi ngawari me te tohu marama me nga momo maamaa. He pai mo nga waahi ngawari penei i nga rangitaki me nga maheni.

Ko te ahua monokia

Ka whakamahi hoki nga hononga pager i te .disabledkaraehe whanui mai i te wharangi.

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>

Mō

Ko nga tohu he waahanga iti, he maamaa noa mo te whakaatu i tetahi tohu, tatau ranei. Ka kitea i roto i nga kaihoko imeera penei i a Mail.app, i runga ranei i nga taupānga waea mo nga panui pana.

Nga karaehe e waatea ana

Ka whakaratohia e Bootstrap tetahi waahanga ngawari, ngawari e kiia ana ko te wae toa hei whakaatu i nga ihirangi ki to papaanga. He pai te mahi i runga i nga waahi hokohoko me nga waahi-taimaha.

Tohutohu

Porohia to ihirangi divkia penei:

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

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 whārangi </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.

• 

  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 whakahekehia ano e matou te tohu tohu iti rawa atu—kao <p>e hiahiatia ana ma te taunoa, ko te waho <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" > 
  <button class = "katia" data-dismiss = "matohi" > × </button>  
  <strong> Whakatūpato! </strong> He pai ake te tirotiro i a koe ano, kaore koe i te tino pai.
</div>

Mahunga ake! Ko nga taputapu iOS e hiahia ana href="#"mo te whakakore i nga matohi. Kia mahara ki te whakauru me te huanga raraunga mo nga tohu kati punga. 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.

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 = "close" data-dismiss = "matohi" href = "#" > × </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 (kaore he IE).

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

Hangarite

Ka mau i te tauira purepure ka whakakorikori (kare he IE).

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

Tae taapiri

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

Kaho tarekare

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

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

Karekau a Opera me IE i te 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>

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 he href = "#" mo nga huihuinga panui mena ka whakamahia e koe he punga.

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