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" > 
  <pāpā pihi = " btn" > 1 </ pihi> 
  <pāpā pihi = " btn" > 2 </ pihi> 
  <pāpā pihi = " btn" > 3 </ pihi> 
</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 »

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.

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>

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.

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.

<div class = "btn-hui" > 
  ...
  <ul class = "huki-ʻākau-papa koho iho" > 
    <!-- nā loulou menu dropdown -->
  </ul>
</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.

<div class = "btn-hui" > 
  <button class = "btn" > Hana </button> 
  <button class = "btn dropdown-toggle" data- toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </ pihi>
  <ul class = "dropdown-menu" > 
    <!-- nā loulou menu dropdown -->
  </ul>
</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.

<div class = "btn-group dropdown" > 
  <pāpā pihi = " btn" > Haʻalele </ pihi> 
  <button class = "btn dropdown-toggle" data- toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </ pihi>
  <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
• Kokua
• hāʻule iho
  • Action
  • Another action
  • Something else here
  • Separated link

<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
• Kokua
• hāʻule iho
  • Action
  • Another action
  • Something else here
  • Separated link

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

Māhele hoʻokaʻawale

Hoʻohui i ka mea hoʻokaʻawale ākea ma ka hana ʻana i kahi mea papa inoa ʻole me ka papa .divider, e like me:

<ul class = "papa inoa nav" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

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.

Holoi ma nā pā

No ka hoʻopau ʻana i nā tabs, hoʻohui .fadei kēlā me kēia .tab-pane.

Pono ʻo jQuery plugin

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 tabs i ke ola ma ka ʻaoʻao docs javascript .

E kiʻi i ka javascript →

Ka laʻana tabable

No ka hana ʻana i nā ʻaoʻao i hiki ke hoʻopaʻa ʻia, hana i kahi .tab-paneID kūʻokoʻa no kēlā me kēia pā a hoʻopaʻa iā lākou i .tab-content.

No nā ʻaoʻao ʻākau a hema paha, e hoʻopili i ka .nav-tabsa .tab-contentme .tabbable.

Hoailona pololei

Pono ka hoʻohana ʻana i nā ʻaoʻao tabable i kahi div wrapping, kahi pūʻulu o nā ʻaoʻao, a me kahi pūʻulu o nā ʻaoʻao maʻiʻo.

<div class = "tabbable" > <-- Pono wale no nā ʻaoʻao hema/'ākau --> 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Māhele 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Māhele 2 </a></li>  
  </ul>
  <div class = "ʻaoʻao-papa" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Aia au ma ka Pauku 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Aloha, aia wau i ka pauku 2. </p>
    </div>
  </div>
</div>

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

E hoʻoponopono i ka navbar i luna a i lalo paha o ka viewport me kahi papa hou ma ka div waho loa, .navbar.

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

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

Ke hoʻopili ʻoe i ka navbar, e hoʻomanaʻo e helu i ka wahi huna ma lalo. Hoʻohui i 40px a ʻoi aku paha o ka padding i ka <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>

Nā palapala ma ka navbar

No ke kāhua pono a hoʻonoho i kahi ʻano i loko o ka navbar, e hoʻohui i nā papa kūpono e like me ka hōʻike ʻana ma lalo nei. No ka palapala paʻamau, e hoʻokomo .navbar-forma i .pull-leftʻole .pull-righte hoʻolike pono.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

No ka palapala huli i hoʻopilikino ʻia, e hoʻohui .navbar-searchi ka forma .search-queryme ka hoʻokomo no nā ʻano kūikawā ma ka navbar.

<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ā menus dropdown

ʻO ka hoʻohui ʻana i nā hāʻule i lalo a me nā hāʻule i ka nav he mea maʻalahi loa, 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 →

Kikokiko ma ka navbar

E kāʻei i nā kaula kikokikona i kahi <.navbar-text>, maʻamau ma kahi <p>hōʻailona no ke alakaʻi kūpono a me ke kala.

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 = "active" > Data </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.

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.

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

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

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 papa  = "hui meʻe" >
  <h1> Poʻomanaʻo </h1>
  <p> Lepe inoa </p>
  <p>
    <kahi 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 ʻ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).

<div class = "page-header" > 
  <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 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" > 
  <pāpā pihi = " pani" data-dismiss = "makaʻala" > × </ pihi>  
  <strong> 'Ōlelo Aʻo! </strong> ʻO ka nānā maikaʻi loa iā ʻoe iho, ʻaʻole ʻoe maikaʻi loa.
</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 buttonmea me ka ʻikepili ʻikepili, a mākou i koho ai e hana no kā mākou 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.

<div class = "pākaʻi makaʻala" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </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

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

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

Animated

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

<div class = "holoi holomua holomua 
     hana " >
  <div class = "pā" 
       style = " laula : 40 %; " ></div> 
</div>

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.

<div class = "maikaʻi" > 
  ...
</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.

×

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

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