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 o <a>nā <button>mea.

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

hōʻailona laʻana

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>

A me kahi mea hana no nā hui he nui:

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

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

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

hōʻailona laʻana

Hoʻonui mākou i nā hāʻule iho pihi maʻamau e hāʻawi i kahi hana pihi lua e hana ana ma ke ʻano he kumu 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.

No ke aha nā papa a me nā pila

Hoʻokumu ʻia nā papa a me nā pila ma Bootstrap <ul>me ka HTML kumu like, kahi papa inoa o nā loulou. E hoʻololi i waena o nā papa a i ʻole nā ​​​​palapala me kahi papa wale nō.

He maikaʻi nā koho ʻelua no nā ʻāpana ʻāpana o ka ʻikepili a i ʻole ka hoʻokele ʻana ma waena o nā ʻaoʻao o nā ʻike pili.

Nā papa kumu

E lawe i nā <ul>loulou maʻamau 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, i mea e ʻike ʻia ai lākou i hoʻopaʻa ʻ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 mea maʻalahi loa nā menus dropdown ma 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ā tabs i hiki ke hoʻopaʻa ʻia, e kāwili i ka .nav-tabsdiv me ka papa .tabbable.

Pākuʻi jQuery maʻamau

Hoʻohana ʻia nā ʻāpana tabable ā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ā papa 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-ʻākau" > 
  <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>

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. Ma kāu CSS, pono ʻoe e helu no ka hoʻopili ʻana ma ka hoʻohui padding-top: 40px;ʻana i kāu <body>.

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

inoa inoa

ʻO kahi loulou maʻalahi e hōʻike i kāu hōʻailona a i ʻole 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

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

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 ia 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 nā hoʻokō 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 paʻ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>

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ā ʻano papa papa kuhikuhi 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 »

Laʻana makaʻala

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 papa = "kokoke" > × </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 papa = "kokoke" > × </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 = "ka holomua holomua-info 
     holomua-holoi" >
  <div class = "pā" 
       style = " laula : 20 %; " ></div> 
</div>

Animated

Lawe i ka la'ana kaha kaha a ho'ohuoi 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 laula ma o javascript, e hoʻololi ʻia ka nui.

Inā ʻoe e hoʻohana i ka .activepapa, .progress-stripede hoʻolalelale ʻia nā ʻōniʻoniʻo 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>