Nā ʻāpana

Hoʻokumu ʻia nā ʻāpana he nui i hiki ke hoʻohana hou ʻia i Bootstrap e hāʻawi i ka hoʻokele, nā mākaʻikaʻi, nā popovers, a me nā mea hou aku.

Nā pūʻulu pihi

E hoʻohana i nā pūʻulu pihi no ka hoʻohui ʻana i nā pihi he nui ma ke ʻano he ʻāpana hui. E kūkulu iā lākou me kahi pūʻulu a i <a>ʻole <button>nā ​​mea.

Nā hana maikaʻi loa

Manaʻo mākou i kēia mau alakaʻi no ka hoʻohana ʻana i nā pūʻulu pihi a me nā mea hana:

  • E hoʻohana mau i ka mea like i loko o kahi pūʻulu pihi, a i <a>ʻole <button>.
  • Mai hoʻohui i nā pihi o nā kala like ʻole i ka hui pihi hoʻokahi.
  • E hoʻohana i nā kiʻiʻoniʻoni ma kahi a i ʻole ma kahi kikokikona, akā e hoʻokomo i ka alt a me ka title kikokikona inā kūpono.

Pono e hoʻokaʻawale ʻia nā pūʻulu pihi pili me nā hāʻule iho (e ʻike i lalo) a e hoʻokomo mau i kahi papa hāʻule i lalo e hōʻike i ka hana i manaʻo ʻia .

Laʻana paʻamau

Penei ke nānā ʻana o ka HTML i kahi pūʻulu pihi maʻamau i kūkulu ʻia me nā pihi hōʻailona heleuma:

  1. <div class = "btn-hui" >
  2. <pāpā pihi = " btn" > 1 </ pihi>
  3. <pāpā pihi = " btn" > 2 </ pihi>
  4. <pāpā pihi = " btn" > 3 </ pihi>
  5. </div>

Laʻana pahu hana

E hoʻohui i nā pūʻulu o <div class="btn-group">i a <div class="btn-toolbar">no nā ʻāpana paʻakikī.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-hui" >
  3. ...
  4. </div>
  5. </div>

ʻO ka pahu pahu a me nā mea lekiō

Hiki i nā pūʻulu pihi ke hana ma ke ʻano he lekiō, kahi hoʻokahi wale nō pihi e paʻa ai, a i ʻole nā ​​pahu pahu, kahi e paʻa ai kekahi helu o nā pihi. E nānā i nā palapala Javascript no kēlā.

E kiʻi i ka javascript »

Hoʻokuʻu iho i nā pūʻulu pihi

Nā poʻo i luna! Pono e hoʻopili paʻa ʻia nā pihi me nā hāʻule iho i loko o lākou iho .btn-groupi loko o kahi .btn-toolbarno ka unuhi kūpono.

Pihi hāʻule iho

Nānā a me nā laʻana

E hoʻohana i kekahi pihi no ka hoʻomaka ʻana i kahi papa kuhikuhi ma ka waiho ʻana i loko o kahi .btn-groupa me ka hāʻawi ʻana i ka hōʻailona papa kuhikuhi kūpono.

hōʻailona laʻana

E like me ka pūʻulu pihi, hoʻohana kā mākou markup i ka markup pihi maʻamau, akā me ka lima o nā mea hoʻohui e hoʻomaʻemaʻe i ke ʻano a kākoʻo i kā Bootstrap dropdown jQuery plugin.

  1. <div class = "btn-hui" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Hana
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- nā loulou menu dropdown -->
  8. </ul>
  9. </div>

Hana me nā nui pihi āpau

Ke hana nei nā pihi hāʻule i lalo i kēlā me kēia nui. ka nui o kāu pihi i .btn-large, .btn-small, a i ʻole .btn-mini.

Pono javascript

Pono nā pihi hāʻule i ka Bootstrap dropdown plugin e hana.

I kekahi mau hihia—e like me ke kelepona—e hoʻolōʻihi ʻia nā menus hāʻule iho ma waho o ke awa ʻike. Pono ʻoe e hoʻoholo i ka alignment me ka lima a i ʻole me ka javascript maʻamau.


E hoʻokaʻawale i nā pihi i lalo

Nānā a me nā laʻana

Ke kūkulu ʻana i nā ʻano pūʻulu pihi a me ka markup, hiki iā mākou ke hana maʻalahi i kahi pihi hoʻokaʻawale. Loaʻa nā pihi hoʻokaʻawale i kahi hana maʻamau ma ka hema a me kahi hoʻololi i lalo ma ka ʻākau me nā loulou pili.

Nui

E hoʻohana i nā papa pihi keu .btn-mini, .btn-small, a i ʻole .btn-largeno ka nui.

  1. <div class = "btn-hui" >
  2. ...
  3. <ul class = "huki-ʻākau-papa koho iho" >
  4. <!-- nā loulou menu dropdown -->
  5. </ul>
  6. </div>

hōʻailona laʻana

Hoʻonui mākou i nā pihi hoʻokuʻu maʻamau e hāʻawi i kahi hana pihi lua e hana ana ma ke ʻano he hoʻoiho hoʻokaʻawale.

  1. <div class = "btn-hui" >
  2. <button class = "btn" > Hana </button>
  3. <button class = "btn dropdown-toggle" data- toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </ pihi>
  6. <ul class = "dropdown-menu" >
  7. <!-- nā loulou menu dropdown -->
  8. </ul>
  9. </div>

Nā papa kuhikuhi

Hiki ke hoʻololi ʻia nā menus dropdown mai lalo i luna ma o ka hoʻohui ʻana i hoʻokahi papa i ka makua koke o .dropdown-menu. E hoʻohuli i ke kuhikuhi o ka .careta hoʻonohonoho hou i ka papa kuhikuhi ponoʻī e neʻe mai lalo i luna ma kahi o luna i lalo.

  1. <div class = "btn-group dropdown" >
  2. <pāpā pihi = " btn" > Haʻalele </ pihi>
  3. <button class = "btn dropdown-toggle" data- toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </ pihi>
  6. <ul class = "dropdown-menu" >
  7. <!-- nā loulou menu dropdown -->
  8. </ul>
  9. </div>

ʻAoʻao ʻaoʻao multicon

I ka wā e hoʻohana ai

ʻO ka pagination maʻalahi a me ka liʻiliʻi i hoʻoikaika ʻia e Rdio, maikaʻi no nā noi a me nā hopena ʻimi. ʻO ka poloka nui he paʻakikī ke hala, hiki ke hoʻonui ʻia, a hāʻawi i nā wahi kaomi nui.

Nā loulou ʻaoʻao mokuʻāina

Hiki ke hoʻopilikino ʻia nā loulou a hana i kekahi mau kūlana me ka papa kūpono. .disabledno nā loulou unclickable a .activeno ka ʻaoʻao o kēia manawa.

Hoʻopololei maʻalahi

E hoʻohui i kekahi o nā papa koho ʻelua e hoʻololi i ka alignment o nā loulou pagination: .pagination-centereda .pagination-right.

Nā laʻana

Hiki ke maʻalahi ka ʻāpana pagination paʻamau a hana i nā ʻano like ʻole.

Markup

Hoʻopili ʻia i kahi <div>, ʻo ka pagination he <ul>.

  1. <div class = "ka helu helu" >
  2. <ul>
  3. <li><a href = "#" > Mamua </a></li>
  4. <li class = "ʻoihana" >
  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 = "#" > Aʻe </a></li>
  11. </ul>
  12. </div>

Pager No nā loulou mua a me nā loulou e hiki mai ana

E pili ana i ka pager

ʻO ka ʻāpana pager he pūʻulu o nā loulou no ka hoʻokō ʻana i ka pagination maʻalahi me ka māka māmā a me nā ʻano māmā. He mea maikaʻi ia no nā pūnaewele maʻalahi e like me nā blog a i ʻole nā ​​makasina.

Mokuʻāina kīnā ʻole koho

Hoʻohana pū nā loulou Pager i ka .disabledpapa maʻamau mai ka pagination.

Laʻana paʻamau

Ma ka maʻamau, hoʻonohonoho ka pager i nā loulou.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Mua </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Aʻe </a>
  7. </li>
  8. </ul>

Nā loulou aligned

ʻO kahi ʻē aʻe, hiki iā ʻoe ke hoʻohālikelike i kēlā me kēia loulou i nā ʻaoʻao:

  1. <ul class = "pager" >
  2. <li class = "mua" >
  3. <a href = "#" > Kahiko </a>
  4. </li>
  5. <li class = "next" >
  6. <a href = "#" > Mea hou → </a>
  7. </li>
  8. </ul>
Lepili Markup
Default <span class="label">Default</span>
Pōmaikaʻi <span class="label label-success">Success</span>
ʻŌlelo aʻo <span class="label label-warning">Warning</span>
Mea nui <span class="label label-important">Important</span>
ʻIke <span class="label label-info">Info</span>
Hoʻololi <span class="label label-inverse">Inverse</span>

E pili ana

He ʻano liʻiliʻi a maʻalahi nā pahu no ka hōʻike ʻana i kahi hōʻailona a i ʻole helu o kekahi ʻano. Loaʻa pinepine ʻia lākou ma nā mea leka uila e like me Mail.app a i ʻole ma nā polokalamu kelepona no ka hoʻolaha ʻana.

Nā papa i loaʻa

inoa Laʻana Markup
Default 1 <span class="badge">1</span>
Pōmaikaʻi 2 <span class="badge badge-success">2</span>
ʻŌlelo aʻo 4 <span class="badge badge-warning">4</span>
Mea nui 6 <span class="badge badge-important">6</span>
ʻIke 8 <span class="badge badge-info">8</span>
Hoʻololi 10 <span class="badge badge-inverse">10</span>

Hui Hero

Hāʻawi ʻo Bootstrap i kahi ʻāpana māmā a maʻalahi i kapa ʻia he pūʻulu koa e hōʻike i ka ʻike ma kāu pūnaewele. He hana maikaʻi ia ma nā kahua kūʻai a me nā ʻike-kaumaha.

Markup

E kāʻei i kāu ʻike ma ke divʻano penei:

  1. <div class = "hui meʻe" >
  2. <h1> Poʻomanaʻo </h1>
  3. <p> Lepe inoa </p>
  4. <p>
  5. <a papa = "btn btn-kumu btn-nui" >
  6. Aʻo hou mai
  7. </a>
  8. </p>
  9. </div>

Aloha, honua!

He pūʻali koa maʻalahi kēia, he ʻano ʻano jumbotron maʻalahi no ke kāhea ʻana i ka nānā hou aku i nā ʻike i hōʻike ʻia.

Aʻo hou mai

Poʻo ʻaoʻao

He pūpū maʻalahi no ka h1hoʻokaʻawale ʻana i nā ʻāpana o ka ʻikepili ma kahi ʻaoʻao. Hiki iā ia ke hoʻohana i ka h1' default small, element a me ka hapa nui o nā mea ʻē aʻe (me nā ʻano ʻē aʻe).

  1. <div class = "page-header" >
  2. <h1> Ke poʻo ʻaoʻao laʻana </h1>
  3. </div>

Nā kiʻi liʻiliʻi paʻamau

Ma ka paʻamau, ua hoʻolālā ʻia nā kiʻi liʻiliʻi o Bootstrap e hōʻike i nā kiʻi i hoʻopili ʻia me ka hōʻailona liʻiliʻi.

Hiki ke hoʻopilikino ʻia

Me kahi hōʻailona ʻokoʻa, hiki ke hoʻohui i nā ʻano HTML like ʻole e like me nā poʻo, nā paukū, a i ʻole nā ​​pihi i loko o nā kiʻi liʻiliʻi.

  • Lepili liʻiliʻi liʻiliʻi

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Hana Hana

  • Lepili liʻiliʻi liʻiliʻi

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Hana Hana

No ke aha e hoʻohana ai i nā kiʻi liʻiliʻi

He mea maikaʻi nā kiʻi liʻiliʻi (ma mua .media-grida hiki i ka v1.4) no nā pahu kiʻi a i ʻole wikiō, nā hopena huli kiʻi, nā huahana kūʻai aku, nā portfolios, a me nā mea hou aku. Hiki iā lākou ke loulou a i ʻole maʻiʻo static.

Māmā maʻalahi a maʻalahi

He mea maʻalahi ka hōʻailona kiʻi liʻiliʻi—ʻo ulia liwale nō ka mea e pono ai. He mea maʻalahi hoʻi ia, e ʻae ana i kēlā me kēia ʻano maʻiʻo me kahi markup hou aʻe e kāʻei i kāu ʻike.

Hoʻohana i ka nui kolamu kolamu

ʻO ka mea hope, hoʻohana ka ʻāpana kiʻi liʻiliʻi i nā papa ʻōnaehana grid i loaʻa-like .span2a i ʻole .span3-no ka hoʻomalu ʻana i nā ana liʻiliʻi liʻiliʻi.

Ka hoailona

E like me ka mea i ʻōlelo ʻia ma mua, ʻo ka markup i koi ʻia no nā thumbnails he māmā a pololei. Eia ka nānā ʻana i ka hoʻonohonoho paʻamau no nā kiʻi i hoʻopili ʻia :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

No ka maʻiʻo HTML maʻamau i nā kiʻi liʻiliʻi, hoʻololi iki ka markup. No ka ʻae ʻana i ka maʻiʻo pae poloka ma nā wahi āpau, hoʻololi mākou i ka <a>mea <div>like me:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Lepili liʻiliʻi liʻiliʻi < /h5>
  6. <p> Ke kiʻi kiʻi liʻiliʻi ma ʻaneʻi... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Nā laʻana hou aku

E ʻimi i kāu mau koho a pau me nā papa mākia like ʻole i loaʻa iā ʻoe. Hiki iā ʻoe ke hoʻohui a hoʻohālikelike i nā nui like ʻole.

Māmā māmā paʻamau

Papa kumu kākau hou

Me Bootstrap 2, ua maʻalahi mākou i ka papa kumu: .alertma kahi o .alert-message. Ua hōʻemi pū mākou i ka māka liʻiliʻi i koi ʻia - ʻaʻole <p>koi ʻia ma ka paʻamau, ʻo ka waho wale nō <div>.

Ka leka makaʻala hoʻokahi

No ka mea ʻoi aku ka lōʻihi me ka liʻiliʻi o nā code, ua wehe mākou i ka nānā ʻokoʻa no nā makaʻala poloka, nā memo i hele mai me ka padding a me nā kikokikona maʻamau. Ua loli ka papa i .alert-block.


Hele maikaʻi me javascript

Hele mai ʻo Bootstrap me kahi plugin jQuery nui e kākoʻo ana i nā memo makaʻala, e hoʻokuʻu iā lākou me ka wikiwiki a me ka maʻalahi.

E kiʻi i ka plugin »

Hoʻolaha laʻana

E kāʻei i kāu memo a me kahi ikona pani koho i loko o kahi div me ka papa maʻalahi.

'Ōlelo Aʻo! ʻO ka nānā maikaʻi iā ʻoe iho, ʻaʻole maikaʻi ʻoe.
  1. <div class = "makaʻala" >
  2. <pāpā pihi = " pani" data-dismiss = "makaʻala" > × </ pihi>
  3. <strong> 'Ōlelo Aʻo! </strong> ʻO ka nānā maikaʻi loa iā ʻoe iho, ʻaʻole ʻoe maikaʻi loa.
  4. </div>

Nā poʻo i luna! Pono nā polokalamu iOS href="#"no ka hoʻokuʻu ʻana i nā makaʻala. E ʻoluʻolu e hoʻokomo iā ia a me ke ʻano ʻikepili no nā kiʻi kokoke i heleuma. ʻO kahi ʻē aʻe, hiki iā ʻoe ke hoʻohana i kahi <button>mea me ka ʻikepili ʻikepili, a mākou i koho ai e hana no kā mākou mau palapala. I ka hoʻohana ʻana iā <button>, pono ʻoe e hoʻokomo type="button"a i ʻole e waiho ʻia kāu mau palapala.

E hoʻonui maʻalahi i ka memo makaʻala maʻamau me nā papa koho ʻelua: .alert-blockno ka hoʻopaʻa ʻana a me nā mana kikokikona a .alert-headingno kahi poʻomanaʻo like.

'Ōlelo Aʻo!

ʻO ka nānā maikaʻi iā ʻoe iho, ʻaʻole maikaʻi ʻoe. Nulla vitae elit libero, a pharetra augue. ʻO ka hoʻomaka ʻana o ka cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "pākaʻi makaʻala" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > ' Ōlelo Aʻo! </h4>
  4. ʻO ka nānā maikaʻi loa iā ʻoe iho, ʻaʻole ʻoe ...
  5. </div>

Pākuʻi ʻokoʻa E hoʻohui i nā papa koho e hoʻololi i ka manaʻo o ka makaʻala

Kupa a pilikia paha

ʻŌ! E hoʻololi i kekahi mau mea a hoʻouna hou.
  1. <div class = "alaala-hewa" >
  2. ...
  3. </div>

Pōmaikaʻi

Hana maikaʻi! Ua heluhelu pono ʻoe i kēia memo makaʻala nui.
  1. <div class = "alaala-kūpono" >
  2. ...
  3. </div>

ʻIkepili

Nā poʻo i luna! Pono kēia makaʻala i kou nānā ʻana, akā ʻaʻole ia he mea nui.
  1. <div class = "ʻike makaʻala makaʻala" >
  2. ...
  3. </div>

Nā laʻana a me ka markup

Kumu

Paʻamau pae holomua me ka gradient kū pololei.

  1. <div class = "holomua" >
  2. <div class = "pā"
  3. style = " laula : 60 %; " ></div>
  4. </div>

ʻōniʻoniʻo

E hoʻohana i kahi gradient e hana i kahi hopena kaha (ʻaʻohe IE).

  1. <div class = "holoi holomua holomua" >
  2. <div class = "pā"
  3. style = " laula : 20 %; " ></div>
  4. </div>

Animated

Lawe i ka laʻana kaha ʻoniʻoni a hoʻolalelale iā ia (ʻaʻohe IE).

  1. <div class = "holoi holomua holomua
  2. hana " >
  3. <div class = "pā"
  4. style = " laula : 40 %; " ></div>
  5. </div>

Nā koho a me ke kākoʻo polokalamu kele pūnaewele

Nā kala hou

Hoʻohana nā pahu holomua i kekahi o nā pihi like a me nā papa makaʻala no nā ʻano like.

Nā lāʻau kaha ʻoniʻoni

E like me nā waihoʻoluʻu paʻa, loaʻa iā mākou nā ʻāpana holomua ʻokoʻa.

ʻAno

Hoʻohana nā pā holomua i nā hoʻololi CSS3, no laila inā hoʻololi ʻoe i ka laulā ma o javascript, e hoʻololi ʻia ka nui.

Inā ʻoe e hoʻohana i ka .activepapa, e hoʻolalelale kāu mau .progress-stripedkaola holomua i nā kaha mai ka hema a i ka ʻākau.

Kākoʻo polokalamu kele pūnaewele

Hoʻohana nā pā holomua i nā gradient CSS3, nā hoʻololi, a me nā animation e hoʻokō i kā lākou hopena āpau. ʻAʻole kākoʻo ʻia kēia mau hiʻohiʻona ma IE7-9 a i ʻole nā ​​mana kahiko o Firefox.

ʻAʻole kākoʻo ʻo Opera a me IE i nā animation i kēia manawa.

Punawai

E hoʻohana i ka pūnāwai ma ke ʻano he hopena maʻalahi i kahi mea e hāʻawi ai i kahi hopena inset.

Aia au i loko o ka luawai!
  1. <div class = "maikaʻi" >
  2. ...
  3. </div>

Pani ikona

E hoʻohana i ka hōʻailona kokoke maʻamau no ka hoʻokuʻu ʻana i nā ʻike e like me nā modals a me nā makaʻala.

  1. <pāpā pihi = " kokoke" > &manawa; </ pihi>

Pono nā polokalamu iOS i kahi href="#" no nā hanana kaomi inā makemake ʻoe e hoʻohana i kahi heleuma.

  1. <a papa = "kokoke" href = "#" > &manawa; </a>