Laʻana

Hiki ke hoʻololi i ka papa kuhikuhi no ka hōʻike ʻana i nā papa inoa o nā loulou. Hana ʻia me ka plugin JavaScript dropdown .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Hana </a></li>  
  <li><a tabindex = "-1" href = "#" > Hana hou </a></li>  
  <li><a tabindex = "-1" href = "#" > He mea ʻē aʻe ma aneʻi </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > loulou kaʻawale </a></li>  
</ul>

Markup

Ke nānā wale nei i ka papa kuhikuhi iho, eia ka HTML pono. Pono ʻoe e kāʻei i ke kumu o ka hāʻule iho a me ka papa kuhikuhi i lalo i loko o .dropdown, a i ʻole kekahi mea e haʻi aku ai position: relative;. A laila hana wale i ka papa kuhikuhi.

<div class = "dropdown" > 
  <!-- Link a i ʻole pihi e hoʻohuli i ka hāʻule iho -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Hana </a></li>  
    <li><a tabindex = "-1" href = "#" > Hana hou </a></li>  
    <li><a tabindex = "-1" href = "#" > He mea ʻē aʻe ma aneʻi </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > loulou kaʻawale </a></li>  
  </ul>
</div>

Nā koho

Hoʻopili i nā menus i ka ʻākau a hoʻohui i nā pae hoʻokuʻu iho.

Hoʻoponopono i nā menus

Hoʻohui .pull-righti kahi .dropdown-menue hoʻolike ʻākau i ka papa kuhikuhi hāʻule iho.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Nā koho papa kuhikuhi

E hoʻohui .disabledi kahi <li>ma ka hāʻule iho e hoʻopau i ka loulou.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Loulou mau </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Ua pio ka loulou </a></li>   
  <li><a tabindex = "-1" href = "#" > ʻO kekahi loulou </a></li>  
</ul>

Nā papa kuhikuhi ma nā hāʻule iho

Hoʻohui i kahi pae kiʻekiʻe o nā menus dropdown, e ʻike ʻia ma ka hover e like me ka OS X, me kekahi mau hoʻohui markup maʻalahi. E hoʻohui .dropdown-submenui kekahi lii loko o kahi papa kuhikuhi hoʻokuʻu iho no ka hoʻolālā ʻakomi.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Nā koho hou aku </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

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.

<div class = "btn-hui" > 
  <Pōʻihi papa = "btn" > Hema </ pihi> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Akau </ pihi> 
</div>

Pūʻulu pihi lehulehu

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>

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 hoʻopaʻa ʻana.

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

<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

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

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

Nui

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

<div class = "btn-hui" > 
  <pāpāpā pihi = " btn btn-mini" > Hana </ pihi> 
  <pāpā pihi = " btn btn-mini 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>

Māmā māmā ʻO ka markup like, nā papa like ʻole

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

Nā papa kumu

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

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

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

Mokuʻāina kīnā

No kēlā me kēia ʻāpana nav (nā papa, nā pila, a i ʻole ka papa inoa), e hoʻohui .disabledi nā loulou hina hina a ʻaʻohe hopena hover . Hiki ke kaomi ʻia nā loulou, ke ʻole ʻoe e wehe i ke hrefʻano. ʻO kahi ʻē aʻe, hiki iā ʻoe ke hoʻokō i ka JavaScript maʻamau e pale i kēlā mau kaomi.

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

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.

Hiki ke hoʻopaʻa ʻia

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

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

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

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

Nā hāʻule iho

Hoʻohui i nā menus dropdown me kahi HTML hou aʻe a me ka plugin JavaScript dropdowns .

Nā papa me nā hāʻule iho

<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

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

Nā papa inoa

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

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" > Papa inoa </li> 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Hale Waihona Puke </a></li> 
  ...
</ul>

NānāNo ka pūnana i loko o ka papa inoa nav, e hoʻokomo class="nav nav-list"ma kekahi pūnana <ul>.

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>

ʻO ka papa kuhikuhi nav

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.

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.

<div class = "tabbable" > <!-- Pono wale no nā pā 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>

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

Hoʻopili ʻia ma kēlā me kēia ʻaoʻao

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 kumu

No ka hoʻomaka, paʻa nā navbars (ʻaʻole i hoʻopaʻa ʻia i luna) a hoʻokomo i ke kākoʻo no kahi inoa papahana a me ka hoʻokele kumu. E kau i kekahi ma nā wahi a pau i loko o kahi .container, e hoʻonohonoho ana i ka laulā o kāu pūnaewele a me ka ʻike.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Poʻo inoa </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Home </a></li>  
      <li><a href = "#" > loulou </a></li> 
      <li><a href = "#" > loulou </a></li> 
    </ul>
  </div>
</div>

Nā ʻāpana Navbar

Brand

ʻ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 class = "brand" href = "#" > inoa papahana </a>  

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>

Nā palapala

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" >  
  <button type = "submit" class = "btn" > Hoʻouna </button>  
</form>

Palapala huli

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ʻopololei ʻāpana

E hoʻopololei i nā loulou nav, palapala ʻimi, a i ʻole kikokikona, 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.

Ke hoʻohana nei i nā hāʻule iho

Hoʻohui i nā hāʻule iho a me nā hāʻule i ka nav me kahi kikoʻī o ka markup a me ka plugin JavaScript dropdowns .

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

E kipa i ka palapala hāʻule iho JavaScript no ka hōʻailona hou aʻe a me ka ʻike e pili ana i ke kāhea ʻana i nā dropdown.

kikokikona

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

Nā ʻokoʻa hōʻike koho

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.

Paʻa i luna

Hoʻohui .navbar-fixed-topa hoʻomanaʻo i ka helu no ka wahi huna ma lalo o ka hoʻohui ʻana i ka liʻiliʻi 40px paddingi 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.

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

Paʻa i lalo

Hoʻohui .navbar-fixed-bottomma kahi.

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

Navbar ma luna

E hana i kahi navbar ākea piha e holo ana me ka ʻaoʻao ma ka hoʻohui ʻana .navbar-static-top. ʻAʻole e like me ka .navbar-fixed-toppapa, ʻaʻole pono ʻoe e hoʻololi i kahi padding ma ka body.

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

Navbar pane

No ka hoʻokō ʻana i kahi navbar pane hāʻule, e ʻohi i kāu ʻike navbar 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Hoʻololi hoʻohuli

E hoʻololi i ke ʻano o ka navbar ma ka hoʻohui ʻana .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Nā laʻana

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

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

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.

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

<div class = "ka helu helu" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</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.

<div class = "ka helu helu" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Nui

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

<div class = "pagination pagination-nui" > 
  <ul>
    ...
  </ul>
</div>
<div class = "ka helu helu" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-liʻiliʻi" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</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.

<div class = "ka helu helu helu helu helu" > 
  ...
</div>

<div class = "pagination pagination-akau" > 
  ...
</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.

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

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

Mokuʻāina kīnā ʻole koho

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

<ul class = "pager" > 
  <li class = "kūʻokoʻa mua" > 
    <a href = "#" > ← Kahiko </a> 
  </li>
  ...
</ul>

Lepili

Nā hōʻailona

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.

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

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

<div class = "page-header" > 
  <h1> Ke poʻo ʻaoʻao laʻana <small> Subtext no ke poʻo </small></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.

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.

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 :

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Lepili liʻiliʻi < /h3>
      <p> Kākau kiʻi liʻiliʻ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.

Makaʻala paʻamau

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

<div class = "makaʻala" > 
  < ʻano kī = "pāpā" papa = "kokoke" data-dismiss = "makaʻala" > &manawa; </ pihi>   
  <strong> 'Ōlelo Aʻo! </strong> ʻO ka nānā maikaʻi loa iā ʻoe iho, ʻaʻole ʻoe maikaʻi loa.
</div>

Hoʻokuʻu i nā pihi

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

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

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

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

E hoʻohana i ka plugin jQuery alerts 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.

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

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

Pōmaikaʻi

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

ʻIkepili

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

Nā laʻana a me ka markup

Kumu

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

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

ʻōniʻoniʻo

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

<div class = "holoi holomua holomua" > 
  <div class = "bar" style = " laula : 20 %; " ></div>   
</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.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " laula : 40 %; " ></div>   
</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.

<div class = "holomua" > 
  <div class = "bar bar-success" style = " laula : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " laula : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " laula : 10 %; " ></div>   
</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 like.

<div class = "ʻike holomua holomua" > 
  <div class = "bar" style = " laula : 20 % " ></div>   
</div>
<div class = "holomua-holomua" > 
  <div class = "bar" style = " laula : 40 % " ></div>   
</div>
<div class = "palapala holomua holomua" > 
  <div class = "bar" style = " laula : 60 % " ></div>   
</div>
<div class = "holomua holomua-pilikia" > 
  <div class = "bar" style = " laula : 80 % " ></div>   
</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.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " laula : 20 % " ></div>   
</div>
<div class = "holomua holomua-holomua holomua-striped" > 
  <div class = "bar" style = " laula : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " laula : 60 % " ></div>   
</div>
<div class = "holomua holomua-pilikia-pilikia" > 
  <div class = "bar" style = " laula : 80 % " ></div>   
</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.

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.

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.

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.

<div class = "media" > 
  <a papa = "huki-hema" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media heading </h4> 
    ...
 
    <!-- Mea hoʻopaʻa ʻia -->
    <div class = "media" > 
      ...
    </div>
  </div>
</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).

<ul class = "media-list" > 
  <li class = "media" > 
    <a papa = "huki-hema" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media heading </h4> 
      ...
 
      <!-- Mea hoʻopaʻa ʻia -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</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.

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

Nā papa koho

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

<div class = "well well-nui" > 
  ...
</div>

<div class = "well well-liʻiliʻ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 nā href="#"hanana kaomi inā makemake ʻoe e hoʻohana i kahi heleuma.

<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

papa = "huki-hema"

. huki - hema {
  lana : hema ;
}

.huki-akau

E lana pono i kekahi mea

papa = "huki-'ākau"

. huki - ʻākau {
  lana : pololei ;
}

.muted

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

papa = "muted"

. leo {
  kala : #999; 
}

.hoʻomaʻemaʻe

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

papa = "hoʻomaʻemaʻe"

. clearfix {
  * zoom : 1 ; 
  &: mamua ,
  &: ma hope o {
    hōʻike : papaʻaina ;
    maʻiʻo : "" ; 
  }
  &: ma hope o {
    maopopo : laua ;
  }
}