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

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

<div class = "btn-hui" > 
  <a papa = "btn" href = "#" > 1 </a>  
  <a papa = "btn" href = "#" > 2 </a>  
  <a papa = "btn" href = "#" > 3 </a>  
</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ī.

<div class = "btn-toolbar" > 
  <div class = "btn-hui" > 
    ...
  </div>
</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 »

Nā poʻo i luna

Aia ka CSS no nā pūʻulu pihi ma kahi waihona ʻokoʻa, pihi-groups.less.

Pihi hāʻule iho

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.

Nā poʻo i luna! Pono nā pihi hāʻule i ka Bootstrap dropdown plugin e hana.

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.

<div class = "btn-hui" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Hana
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- nā loulou menu dropdown -->
  </ul>
</div>

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

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.

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.

<div class = "btn-hui" > 
  <a class = "btn" href = "#" > Hana </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- nā loulou menu dropdown -->
  </ul>
</div>

Papa kumu ikaika

ʻO nā ʻāpana nav āpau ma ʻaneʻi—nā papa, nā pila, a me nā papa inoa— kaʻana like i ka hōʻailona kumu a me nā ʻano ma o ka .navpapa.

I ka wā e hoʻohana ai

He mea maikaʻi nā papa a me nā pila no nā ʻāpana o ka ʻike a i ʻole ka hoʻokele ʻana ma waena o nā ʻaoʻao o nā ʻike pili.

Hoʻopololei ʻāpana

No ka hoʻolikelike ʻana i nā loulou nav, e hoʻohana i .pull-leftnā .pull-rightpapa hana. E hoʻohui nā papa ʻelua i kahi lana CSS ma ke kuhikuhi i kuhikuhi ʻia.

Nā papa kumu

E lawe i nā <ul>loulou mau a hoʻohui .nav-tabs:

• Home
• Pilikino
• Nā memo

<ul class = "nav nav-tabs" > 
  <li class = "ʻoihana" > 
    <a href = "#" > Home </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

ʻO nā pila kumu

E lawe i kēlā HTML like, akā e hoʻohana .nav-pillsma kahi:

• Home
• Pilikino
• Nā memo

<ul class = "nav nav-pills" > 
  <li class = "ʻoihana" > 
    <a href = "#" > Home </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pehea e hoʻopaʻa ai iā lākou

No ka paʻamau, e hoʻohui i ka papa ʻelua, .nav-stacked, e hōʻike iā lākou i hoʻopaʻa pololei ʻia.

Nā pā i hoʻopaʻa ʻia

• Home
• Pilikino
• Nā memo

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Hoʻopaʻa ʻia nā lāʻau

• Home
• Pilikino
• Nā memo

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

Ua maʻalahi nā menus waiwai

He maʻalahi loa nā menus dropdown i nā ʻaoʻao Bootstrap a me nā pila a koi wale i kahi HTML liʻiliʻi a me kahi plugin jQuery māmā.

E poʻo i ka ʻaoʻao Javascript e heluhelu i nā palapala i ka hoʻomaka ʻana i nā hāʻule i Bootstrap.

Nā papa me nā hāʻule iho

• Home
• Pilikino
• hāʻule iho
  • Hana
  • ʻO kekahi hana
  • He mea ʻē aʻe ma ʻaneʻi
  • loulou kaawale

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a papa = "hoʻohuli-hoʻololi" 
       data- toggle = "koho iho"
       href = "#" >
        hāʻule iho
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- loulou -->
    </ul>
  </li>
</ul>

ʻO nā pila me nā hāʻule iho

• Home
• Pilikino
• hāʻule iho
  • Hana
  • ʻO kekahi hana
  • He mea ʻē aʻe ma ʻaneʻi
  • loulou kaawale

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a papa = "hoʻohuli-hoʻololi" 
       data- toggle = "koho iho"
       href = "#" >
        hāʻule iho
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- loulou -->
    </ul>
  </li>
</ul>

Hoʻokele kaila noi

Hāʻawi nā papa inoa Nav i kahi ala maʻalahi a maʻalahi e kūkulu i nā hui o nā loulou nav me nā poʻomanaʻo koho. Hoʻohana maikaʻi ʻia lākou ma nā ʻaoʻao ʻaoʻao e like me ka Finder ma OS X.

Ma ke ʻano hoʻolālā, kūkulu ʻia lākou ma nā ʻano nav koʻikoʻi like me nā tabs a me nā pila, no laila ua maʻalahi ka hoʻohana ʻana a me ka hana maʻamau.

Me nā kiʻi

He maʻalahi hoʻi nā papa inoa Nav e hoʻolako me nā kiʻi. Hoʻohui i ka <i>hōʻailona kūpono me ka papa a ua hoʻonohonoho ʻoe.

Laʻana nav list

E lawe i ka papa inoa o nā loulou a hoʻohui class="nav nav-list":

<ul class = "papa inoa nav" > 
  <li class = "nav-header" > 
    Poʻomanaʻo papa inoa
  </li>
  <li class = "ʻoihana" > 
    <a href = "#" > Home </a> 
  </li>
  <li>
    <a href = "#" > Hale Waihona Puke </a> 
  </li>
  ...
</ul>

Laʻana me nā kiʻi

Hoʻohālike like, akā me <i>nā hōʻailona no nā kiʻi.

<ul class = "papa inoa nav" > 
  ...
  <li>
    <a href = "#" > 
      <i papa = "icon-book" ></i> 
      Hale Waihona Puke
    </a>
  </li>
  ...
</ul>

He aha ka mea i komo

E hoʻolaʻa i kāu mau pā me kahi plugin maʻalahi e hoʻololi i waena o nā ʻike ma o nā pā. Hoʻohui ʻo Bootstrap i nā ʻaoʻao papa ma nā ʻano ʻehā: luna (paʻamau), ʻākau, lalo, a hema.

He maʻalahi ka hoʻololi ʻana ma waena o lākou a pono e hoʻololi i ka markup liʻiliʻi.

Ka laʻana tabable

No ka hana ʻana i nā papa i hiki ke hoʻopaʻa ʻia, e hoʻopili i ka .nav-tabsdiv me ka papa .tabbable.

Pākuʻi jQuery maʻamau

Hoʻohana ʻia nā pā papa āpau e kā mākou plugin jQuery māmā. E heluhelu hou aʻe e pili ana i ka lawe ʻana i nā tabable tab i ke ola ma ka ʻaoʻao docs javascript.

E kiʻi i ka javascript →

Nā papa ma lalo

E hoʻohuli i ke kauoha o ka HTML a hoʻohui i kahi papa e kau i nā ʻaoʻao ma lalo.

<div class = "nā papa papa-lalo" > 
  <div class = "ʻaoʻao-papa" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Nā papa ma ka hema

E hoʻololi i ka papa e kau i nā pā ma ka hema.

<div class = "ʻaoʻao hema-hema" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "ʻaoʻao-papa" > 
    ...
  </div>
</div>

Nā papa ma ka ʻākau

E hoʻololi i ka papa e kau i nā ʻaoʻao ma ka ʻākau.

<div class = "ʻaoʻao papa-pono" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "ʻaoʻao-papa" > 
    ...
  </div>
</div>

Navbar scaffolding

Pono ka navbar i kekahi mau divs e hoʻolālā maikaʻi no ka hōʻike paʻa a paʻa paha.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Navbar paʻa

No ka hoʻopaʻa ʻana i ka navbar i ka piko o ka viewport, hoʻohui .navbar-fixed-topi ka div waho loa, .navbar.

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

Ma kāu CSS, pono ʻoe e helu no ka uhi ʻana o ia mea ma ka hoʻohui ʻana i 40px a ʻoi aku paha o ka padding i kāu <body>. E hōʻoia e hoʻohui i kēia ma hope o ke kumu Bootstrap CSS a ma mua o ka CSS pane koho.

inoa inoa

ʻO kahi loulou maʻalahi e hōʻike i kāu hōʻailona a i ʻole ka inoa papahana e koi wale i kahi hōʻailona heleuma.

<a papa = "brand" href = "#" >  
  inoa papahana
</a>

Palapala huli

Loaʻa nā ʻano hulina i nā kaila maʻamau i ka navbar me ka .navbar-searchpapa. E hoʻokomo a i .pull-leftʻole .pull-rightma ka formʻaoʻao e hoʻolike ai.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Huli" >   
</form>

Hoʻololi pane koho

Ma muli o ka nui o ka ʻike ma kāu topbar, makemake paha ʻoe e hoʻokō i nā koho pane. No ka hana ʻana pēlā, hoʻopili i kāu ʻike nav i loko o kahi div, .nav-collapse.collapse, a hoʻohui i ke pihi hoʻololi navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- Hoʻohana ʻia ʻo .btn-navbar ma ke ʻano he hoʻololi no ka ʻike navbar hāʻule -->
      <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>
 
      <!-- E haʻalele i ka brand ma laila inā makemake ʻoe e hōʻike ʻia -->
      <a class = "brand" href = "#" > inoa papahana </a>  
 
      <!-- ʻO nā mea a pau āu e makemake ai e hūnā ma 940px a i ʻole ka liʻiliʻi, e waiho i loko ma aneʻi -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Nā loulou Nav

Maʻalahi nā mea Nav e hoʻohui me nā papa inoa ʻole.

<ul class = "nav" > 
  <li class = "ʻoihana" > 
    <a href = "#" > Home </a> 
  </li>
  <li><a href = "#" > loulou </a></li> 
  <li><a href = "#" > loulou </a></li> 
</ul>

Hiki iā ʻoe ke hoʻohui i nā mea hoʻokaʻawale i kāu mau loulou nav me kahi mea papa inoa ʻole a me kahi papa maʻalahi. Hoʻohui wale i kēia ma waena o nā loulou:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Hoʻopololei ʻāpana

No ka hoʻopololei ʻana i kahi nav, ʻimi ʻimi, a i ʻole kikokikona, e hoʻohana i nā papa hana a i .pull-leftʻole .pull-rightnā ​​mea pono. E hoʻohui nā papa ʻelua i kahi lana CSS ma ke kuhikuhi i kuhikuhi ʻia.

Hoʻohui i nā hāʻule iho

ʻO ka hoʻohui ʻana i nā hāʻule i ka nav he mea maʻalahi loa ia, akā pono e hoʻohana i kā mākou plugin javascript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          papa = "hoʻohuli-hoʻololi"
          data- toggle = "dropdown" >
          moʻokāki
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

E kiʻi i ka javascript →

No ke aha e hoʻohana ai iā lākou

Hoʻohana ʻia ka hoʻokele Breadcrumb ma ke ʻano he ala e hōʻike ai i nā mea hoʻohana i ko lākou wahi i loko o kahi polokalamu a i ʻole kahi pūnaewele, akā ʻaʻole no ka hoʻokele mua. E mālama i kā lākou hoʻohana liʻiliʻi a maʻalahi i mea maikaʻi loa.

Nā laʻana

Hoʻokahi laʻana i hōʻike ʻia e hōʻike ʻia ma nā ʻaoʻao he nui.

• Home

• Home /
• Hale Waihona Puke

• Home /
• Hale Waihona Puke /
• ʻIkepili

Markup

ʻO HTML kāu papa inoa maʻamau ʻole me nā loulou.

<ul class = "palapalapala" > 
  <li>
    <a href = "#" > Home </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Hale Waihona Puke </a> <span class = "divider" > / </span>   
  </li>
  <li class = "ʻoihana" > 
    <a href = "#" > ʻIkepili </a> 
  </li>
</ul>

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

<div class = "ka helu helu" > 
  <ul>
    <li><a href = "#" > Mamua </a></li> 
    <li class = "ʻoihana" > 
      <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 = "#" > Aʻe </a></li> 
  </ul>
</div>

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.

Laʻana paʻamau

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

• Mamua
• Aʻe

<ul class = "pager" > 
  <li>
    <a href = "#" > Mua </a> 
  </li>
  <li>
    <a href = "#" > Aʻe </a> 
  </li>
</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:

• ← Kahiko
• Hou →

<ul class = "pager" > 
  <li class = "mua" > 
    <a href = "#" > ← Kahiko </a> 
  </li>
  <li class = "next" > 
    <a href = "#" > Mea hou → </a> 
  </li>
</ul>

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:

<div class = "hui meʻe" > 
  <h1> Poʻomanaʻo </h1>
  <p> Lepe inoa </p>
  <p>
    <a papa = "btn btn-kumu btn-nui" > 
      Aʻo hou mai
    </a>
  </p>
</div>

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

<div class = "page-haeder" > 
  <h1> Ke poʻo ʻaoʻao laʻana </h1>
</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 :

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</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:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Lepili liʻiliʻi liʻiliʻi < /h5>
      <p> Ke kiʻi kiʻi liʻiliʻi ma ʻaneʻi... </p>
    </div>
  </li>
  ...
</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.

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 maikaʻi e kākoʻo ana i nā leka makaʻala, e wikiwiki a maʻalahi hoʻi ka haʻalele ʻana iā lākou.

E kiʻi i ka plugin »

Hoʻolaha laʻana

E kāʻei i kāu memo a me kahi ikona kokoke i kahi div me ka papa maʻalahi.

<div class = "makaʻala" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <strong> 'Ōlelo Aʻo! </strong> ʻO ka nānā maikaʻi loa iā ʻoe iho, ʻaʻole ʻoe maikaʻi loa.
</div>

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.

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

Kupa a pilikia paha

<div class = "alaala-hewa" > 
  ...
</div>

Pōmaikaʻi

<div class = "alaala-kūpono" > 
  ...
</div>

ʻIkepili

<div class = "ʻike makaʻala makaʻala" > 
  ...
</div>

Kumu

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

<div class = "holomua" > 
  <div class = "pā" 
       style = " laula : 60 %; " ></div> 
</div>

ʻōniʻoniʻo

Hoʻohana i ka gradient e hana i kahi hopena kaha.

<div class = "ʻike holomua holomua 
     holomua-holoi" >
  <div class = "pā" 
       style = " laula : 20 %; " ></div> 
</div>

Animated

Lawe i ka la'ana kaha kaha a ho'ohiwahiwa ia.

<div class = "holomua holomua-pilikia 
     holomua-striped active" >
  <div class = "pā" 
       style = " laula : 40 %; " ></div> 
</div>

Nā kala hou

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

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

ʻO kahi ʻē aʻe, hiki iā ʻoe ke hana i nā faila LESS a ʻōwili i kāu mau kala a me kou nui.

ʻ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-8 a i ʻole nā ​​mana kahiko o Firefox.

ʻAʻole kākoʻo ʻo Opera 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.

<div class = "maikaʻi" > 
  ...
</div>

Nā hōʻailona

E hoʻohana i kahi hōʻailona ma kahi mea no ka helu helu ʻole ʻia a i ʻole he hōʻailona maʻalahi.

<span class = "badge" > 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.

×

<a papa = "kokoke" > &manawa; </a>