Waehanga

He maha nga waahanga ka taea te whakamahi i roto i te Bootstrap hei whakarato whakatere, matohi, popovers, me te maha atu.

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:

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

Tauira paeutauta

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

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

Patene takaiho

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.

  1. <div class = "btn-rōpū" >
  2. <a class = "btn takaiho-takahuri" data-toggle = "whakaheke" href = "#" >
  3. Mahi
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "tahua-whakaheke" >
  7. <!-- nga hononga tahua takaiho -->
  8. </ul>
  9. </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.


Wehehia nga paatene takaiho

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.

  1. <div class = "btn-rōpū" >
  2. ...
  3. <ul class = "tahua-whakaheke kumea-matau" >
  4. <!-- nga hononga tahua takaiho -->
  5. </ul>
  6. </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.

  1. <div class = "btn-rōpū" >
  2. <button class = "btn" > Mahi </button>
  3. <button class = "btn takaiho-takahuri" data-toggle = "whakaheke" >
  4. <span class = "caret" ></span>
  5. </pātene>
  6. <ul class = "tahua-whakaheke" >
  7. <!-- nga hononga tahua takaiho -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Whakataka </button>
  3. <button class = "btn takaiho-takahuri" data-toggle = "whakaheke" >
  4. <span class = "caret" ></span>
  5. </pātene>
  6. <ul class = "tahua-whakaheke" >
  7. <!-- nga hononga tahua takaiho -->
  8. </ul>
  9. </div>

wharangi wharangi maha

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

  1. <div class = "whakawhārangi" >
  2. <ul>
  3. <li><a href = "#" > Tuhinga o mua </a> </li>
  4. <li class = "kaha" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a> </li>
  8. <li><a href = "#" > 3 </a> </li>
  9. <li><a href = "#" > 4 ​​</a> </li>
  10. <li><a href = "#" > Panuku </a> </li>
  11. </ul>
  12. </div>

Pager Mo nga hononga tere o mua me muri

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.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Tuhinga o mua </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Panuku </a>
  7. </li>
  8. </ul>

Hononga hono

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

  1. <ul class = "pager" >
  2. <li class = "mua" >
  3. <a href = "#" > Tawhito </a>
  4. </li>
  5. <li class = "muri" >
  6. <a href = "#" > Hou → </a>
  7. </li>
  8. </ul>
Tapanga Tohutohu
Taunoa <span class="label">Default</span>
Angitu <span class="label label-success">Success</span>
Whakatupato <span class="label label-warning">Warning</span>
He mea nui <span class="label label-important">Important</span>
Nga korero <span class="label label-info">Info</span>
Kōaroaro <span class="label label-inverse">Inverse</span>

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

Ingoa Tauira Tohutohu
Taunoa 1 <span class="badge">1</span>
Angitu 2 <span class="badge badge-success">2</span>
Whakatupato 4 <span class="badge badge-warning">4</span>
He mea nui 6 <span class="badge badge-important">6</span>
Nga korero 8 <span class="badge badge-info">8</span>
Kōaroaro 10 <span class="badge badge-inverse">10</span>

Waehe toa

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:

  1. <div class = "waewae-toa" >
  2. <h1> Pane </h1>
  3. <p> Tohutohu </p>
  4. <p>
  5. <a class = "btn btn-tuatahi btn-nui" >
  6. Ako atu
  7. </a>
  8. </p>
  9. </div>

Kia ora, te ao!

He wae toa ngawari tenei, he waahanga ahua-jumbotron mo te aro nui ki nga korero, korero ranei.

Ako atu

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

  1. <div class = "page-header" >
  2. <h1> Tauira pane whārangi </h1>
  3. </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 :

  1. <ul class = "karakōnui" >
  2. <li class = "span3" >
  3. <a href = "#" class = "karakōnui" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "karakōnui" >
  2. <li class = "span3" >
  3. <div class = "karakōnui" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Tapanga karakōnui </h5>
  6. <p> Tapanga karakōnui kei konei tonu... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.

Nga taunoa mama

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.

Whakatupato! He pai ake te tirotiro i a koe ano, kaore koe i te tino pai.
  1. <div class = "matohi" >
  2. <button class = "katia" data-dismiss = "matohi" > × </button>
  3. <strong> Whakatūpato! </strong> He pai ake te tirotiro i a koe ano, kaore koe i te tino pai.
  4. </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.

Whakatupato!

He pai ake te tirotiro i a koe ano, kaore koe i te tino pai. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "pararaka mataara" >
  2. <a class = "close" data-dismiss = "matohi" href = "#" > × </a>
  3. <h4 class = "matohi-upoko" > Whakatupato! </h4>
  4. He pai ake te tirotiro i a koe ano, kaore koe ...
  5. </div>

Nga momo horopaki Tāpirihia nga karaehe hei whakarereke i te tikanga o te matohi

Hapa, morearea ranei

Aue kapo! Hurihia etahi mea ka ngana ki te tuku ano.
  1. <div class = "matohi-hapa" >
  2. ...
  3. </div>

Angitu

Ka pai! I angitu koe ki te panui i tenei karere mataara nui.
  1. <div class = "matatohi-angitu" >
  2. ...
  3. </div>

Nga korero

Mahunga ake! Me aro mai tenei matohi, engari ehara i te mea tino nui.
  1. <div class = "mohiohio matohi matohi" >
  2. ...
  3. </div>

Nga tauira me te tohu tohu

Taketake

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

  1. <div class = "te ahunga whakamua" >
  2. <div class = "pae"
  3. style = " whanui : 60 %; " ></div>
  4. </div>

Tāhekeheke

Ka whakamahi i te rōnaki hei hanga i te awenga purepure (kaore he IE).

  1. <div class = "te ahunga whakamua-striped" >
  2. <div class = "pae"
  3. style = " whanui : 20 %; " ></div>
  4. </div>

Hangarite

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

  1. <div class = "te ahunga whakamua-tere
  2. kaha" >
  3. <div class = "pae"
  4. style = " whanui : 40 %; " ></div>
  5. </div>

Nga whiringa me te tautoko tirotiro

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.

Titiro, kei roto ahau i te puna!
  1. <div class = "pai" >
  2. ...
  3. </div>

Katia te ata

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

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

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