Nā ʻāpana

ʻO ka nui o nā mea hoʻohana hou i kūkulu ʻia e hāʻawi i ka hoʻokele, nā mākaʻikaʻi, nā popovers, a me nā mea hou aku.

Nā laʻana

ʻElua mau koho maʻamau, me ʻelua mau ʻokoʻa kikoʻī.

Pūʻulu pihi hoʻokahi

E ʻōwili i nā pihi me .btnka in .btn-group.

  1. <div class = "btn-hui" >
  2. <Pōʻihi papa = "btn" > Hema </ pihi>
  3. <button class = "btn" > Middle </button>
  4. <button class = "btn" > Akau </ pihi>
  5. </div>

Pūʻulu pihi lehulehu

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

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

Pūʻulu pihi kū pololei

E hōʻike i kahi pūʻulu o nā pihi i hoʻopaʻa pololei ʻia ma mua o ka pae ākea.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </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ā.

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.

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.

  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

Hoʻohana nā pihi hāʻule i lalo i kēlā me kēia nui: .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 JavaScript maʻamau.


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

Ke kūkulu ʻana i nā ʻano hui pūʻulu a me ka markup, hiki iā mākou ke hana maʻalahi i kahi pihi hoʻokaʻawale. Hōʻike ʻia 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.

  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>

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. <pāpāpā pihi = " btn btn-mini" > Hana </ pihi>
  3. <pāpā pihi = " btn btn-mini 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>

Ka helu helu maʻamau

ʻO ka pagination maʻalahi i hoʻoulu ʻ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.

  1. <div class = "ka helu helu" >
  2. <ul>
  3. <li><a href = "#" > Mamua </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Aʻe </a></li>
  10. </ul>
  11. </div>

Nā koho

Nā mokuʻāina kīnā ʻole a ʻeleu

Hoʻopilikino ʻia nā loulou no nā kūlana like ʻole. E hoʻohana .disabledno nā loulou unclickable a .activee kuhikuhi i ka ʻaoʻao o kēia manawa.

  1. <div class = "ka helu helu" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Hiki iā ʻoe ke hoʻololi i nā heleuma ikaika a paʻa ʻole paha no nā spans e wehe i ka hana kaomi ʻoiai e mālama ana i nā ʻano i manaʻo ʻia.

  1. <div class = "ka helu helu" >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Nui

Makemake ʻoe i ka helu helu nui a liʻiliʻi paha? Hoʻohui .pagination-large, .pagination-small, a i ʻole .pagination-minino nā nui ʻē aʻe.

  1. <div class = "pagination pagination-nui" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "ka helu helu" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-liʻiliʻi" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Hoʻopololei

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

  1. <div class = "ka helu helu helu helu helu" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-akau" >
  2. ...
  3. </div>

Pager

Nā loulou wikiwiki mua a me hope no ka hoʻokō ʻana i ka pagination maʻalahi me ka māka māmā a me nā ʻano. He mea maikaʻi ia no nā pūnaewele maʻalahi e like me nā blog a i ʻole nā ​​makasina.

Laʻana paʻamau

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

  1. <ul class = "pager" >
  2. <li><a href = "#" > Mua </a> </li>
  3. <li><a href = "#" > Aʻe </a></li>
  4. </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>

Mokuʻāina kīnā ʻole koho

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

  1. <ul class = "pager" >
  2. <li class = "kūpono ʻole ma mua" >
  3. <a href = "#" > Kahiko </a>
  4. </li>
  5. ...
  6. </ul>

Lepili

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>

Nā hōʻailona

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>

Hiki ke collapse

No ka hoʻokō maʻalahi, e hāʻule wale nā ​​lepili a me nā hōʻailona (ma o ka :emptymea koho CSS) inā ʻaʻohe ʻike i loko.

Hui Hero

ʻO kahi ʻāpana māmā a maʻalahi e hōʻike i nā ʻike koʻikoʻi ma kāu pūnaewele. He hana maikaʻi ia ma nā kahua kūʻai a me nā ʻike-kaumaha.

Aloha, honua!

He pūʻali koa maʻalahi kēia, kahi ʻ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

  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>

Poʻo ʻaoʻao

He pūpū maʻalahi no ka h1hoʻokaʻawale ʻana i nā ʻāpana o ka ʻike 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 <small> Subtext no ke poʻo </small></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.

  • 300x200

    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

  • 300x200

    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

  • 300x200

    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 paʻa.

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.

Markup

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 = "span4" >
  3. <a href = "#" class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" 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 = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Lepili liʻiliʻi liʻiliʻi < /h3>
  6. <p> Kākau kiʻi liʻiliʻ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ā ʻano papa papa kuhikuhi i loaʻa iā ʻoe. Hiki iā ʻoe ke hoʻohui a hoʻohālikelike i nā nui like ʻole.

Makaʻala paʻamau

E kāʻei i kekahi kikokikona a me kahi pihi hoʻokuʻu koho .alertno ka memo makaʻala kumu.

'Ōlelo Aʻo! ʻO ka nānā maikaʻi iā ʻoe iho, ʻaʻole maikaʻi ʻoe.
  1. <div class = "makaʻala" >
  2. < ʻano kī = "pāpā" papa = "pani" data-dismiss = "makaʻala" > &manawa; </ 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>

Hoʻokuʻu i nā pihi

ʻO nā polokalamu kele pūnaewele Mobile Safari a me Mobile Opera, me ka hoʻohui ʻana i ke data-dismiss="alert"ʻano, koi ʻia kahi href="#"no ka hoʻopau ʻana i nā mākaʻikaʻi i ka wā e hoʻohana ai i kahi <a>hōʻailona.

  1. <a href = "#" class = "close" data-dismiss = "alert" > × </a>

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

  1. < ʻano kī = "pāpā" papa = "pani" data-dismiss = "makaʻala" > &manawa; </ pihi>

E hoʻokuʻu i nā leka ma o JavaScript

E hoʻohana i ka plugin jQuery makaʻala no ka hoʻopau wikiwiki a me ka maʻalahi o nā makaʻala.


Nā koho

No nā memo lōʻihi, e hoʻonui i ka padding ma luna a ma lalo o ka ʻōwili makaʻala ma ka hoʻohui ʻana i .alert-block.

'Ō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. < ʻano kī = "pāpā" papa = "pani" data-dismiss = "makaʻala" > &manawa; </ pihi>
  3. <h4> 'Ōlelo Aʻo! </h4>
  4. ʻO ka nānā maikaʻi loa iā ʻoe iho, ʻaʻole ʻoe ...
  5. </div>

Nā mea ʻokoʻa ʻokoʻa

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 = "bar" style = " laula : 60 %; " ></div>
  3. </div>

ʻōniʻoniʻo

Hoʻohana i ka gradient e hana i kahi hopena kaha. ʻAʻole i loaʻa ma IE7-8.

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

Animated

Hoʻohui .activei .progress-stripede hoʻolalelale i nā kaha ʻākau a hema. ʻAʻole loaʻa i nā mana āpau o IE.

  1. <div class = "progress progress-striped active" >
  2. <div class = "bar" style = " laula : 40 %; " ></div>
  3. </div>

Hoʻopaʻa ʻia

E kau i nā pahu he nui i loko o ka mea like .progresse hoʻopaʻa iā lākou.

  1. <div class = "holomua" >
  2. <div class = "bar bar-success" style = " laula : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " laula : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " laula : 10 %; " ></div>
  5. </div>

Nā koho

Nā kala hou

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

  1. <div class = "ʻike holomua holomua" >
  2. <div class = "bar" style = " laula : 20 % " ></div>
  3. </div>
  4. <div class = "holomua-holomua" >
  5. <div class = "bar" style = " laula : 40 % " ></div>
  6. </div>
  7. <div class = "palapala holomua holomua" >
  8. <div class = "bar" style = " laula : 60 % " ></div>
  9. </div>
  10. <div class = "holomua holomua-pilikia" >
  11. <div class = "bar" style = " laula : 80 % " ></div>
  12. </div>

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.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " laula : 20 % " ></div>
  3. </div>
  4. <div class = "holomua holomua-holomua holomua-striped" >
  5. <div class = "bar" style = " laula : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " laula : 60 % " ></div>
  9. </div>
  10. <div class = "holomua holomua-pilikia ka holomua" >
  11. <div class = "bar" style = " laula : 80 % " ></div>
  12. </div>

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 nā mana ma mua o Internet Explorer 10 a me Opera 12 i nā animation.

Nā ʻano mea ʻokoʻa no ke kūkulu ʻana i nā ʻano ʻāpana like ʻole (e like me nā manaʻo blog, Tweets, etc.) e hōʻike ana i kahi kiʻi hema a i ʻole ʻākau paha me ka ʻike kikokikona.

Laʻana paʻamau

ʻAe ka media paʻamau e lana i kahi mea media (kiʻi, wikiō, leo) ma ka hema a ʻākau paha o kahi poloka maʻiʻo.

64x64

Poʻomanaʻo Media

Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Poʻomanaʻo Media

Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Poʻomanaʻo Media

Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div class = "media" >
  2. <a papa = "huki-hema" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Media heading </h4>
  7. ...
  8.  
  9. <!-- Mea hoʻopaʻa ʻia -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Papa inoa Media

Me kahi hōʻailona ʻokoʻa, hiki iā ʻoe ke hoʻohana i ka media i loko o ka papa inoa (pono no nā pae manaʻo a i ʻole nā ​​​​papa inoa ʻatikala).

  • 64x64

    Poʻomanaʻo Media

    Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Poʻomanaʻo hoʻopaʻa ʻia

    Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Poʻomanaʻo hoʻopaʻa ʻia

    Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Poʻomanaʻo hoʻopaʻa ʻia

    Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Poʻomanaʻo Media

    Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a papa = "huki-hema" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Media heading </h4>
  8. ...
  9.  
  10. <!-- Mea hoʻopaʻa ʻia -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

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>

Nā papa koho

E hoʻomalu i ka padding a me nā kihi pōʻai me ʻelua papa hoʻololi koho.

Aia au i loko o ka luawai!
  1. <div class = "well well-nui" >
  2. ...
  3. </div>
Aia au i loko o ka luawai!
  1. <div class = "well well-liʻiliʻ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 nā href="#"hanana kaomi inā makemake ʻoe e hoʻohana i kahi heleuma.

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

Nā papa kōkua

ʻO nā papa maʻalahi no ka hōʻike liʻiliʻi a i ʻole nā ​​ʻano tweak.

.huki-hema

E lana i kahi mea i koe

  1. papa = "huki-hema"
  1. . huki - hema {
  2. lana : hema ;
  3. }

.huki-akau

E lana pono i kekahi mea

  1. papa = "huki-'ākau"
  1. . huki - ʻākau {
  2. lana : pololei ;
  3. }

.muted

E hoʻololi i ke kala o kekahi mea i#999

  1. papa = "muted"
  1. . leo {
  2. kala : #999;
  3. }

.hoʻomaʻemaʻe

Hoʻomaʻemaʻe i ka floatma luna o kekahi mea

  1. papa = "hoʻomaʻemaʻe"
  1. . clearfix {
  2. * zoom : 1 ;
  3. &: mamua ,
  4. &: ma hope o {
  5. hōʻike : papaʻaina ;
  6. maʻiʻo : "" ;
  7. }
  8. &: ma hope o {
  9. maopopo : laua ;
  10. }
  11. }