Vaega fa'amau

Fa'aoga vaega fa'amau e tu'ufa'atasia fa'atasi fa'amau e tasi o se vaega tu'ufa'atasi. Fausia i latou i se faasologa o <a>elemene <button>.

Fa'ata'ita'iga sili

Matou te fautuaina taʻiala nei mo le faʻaogaina o vaega faʻamau ma meafaigaluega:

• Fa'aaoga i taimi uma le elemene lava e tasi i se vaega fa'amau tasi, <a>po'o <button>.
• Aua ne'i fa'afefiloi fa'amau o lanu 'ese'ese i le vaega fa'amau e tasi.
• Fa'aoga aikona e fa'aopoopo i po'o nai lo tusitusiga, ae ia mautinoa e aofia ai le alt ma le ulutala tusitusiga pe a talafeagai ai.

O vaega Fa'atatau ile pa'u i lalo (silasila i lalo) e tatau ona vala'au 'ese'ese ma fa'aaofia i taimi uma se fa'amaufa'ailoga e fa'ailoa ai le amio fa'amoemoe.

Fa'ata'ita'iga masani

O le auala lenei e suʻe ai e le HTML se vaega faʻamaufaʻailoga e fausia i faʻamau faʻamau faʻamau:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Fa'ata'ita'iga o meafaigaluega

Tu'u fa'atasi seti o <div class="btn-group">i le a <div class="btn-toolbar">mo vaega e sili atu ona lavelave.

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Pusa siaki ma mea'ai leitio

E mafai fo'i ona fa'agaoioi vaega fa'amau e pei o leitio, e na'o le tasi le ki e mafai ona fa'agaoioia, po'o ni pusa siaki, lea e mafai ona ola ai so'o se numera o ki. Va'ai le Javascript docs mo lena.

Maua le javascript »

Pa'u i lalo i vaega fa'amau

Ulu i luga! O fa'amau o lo'o i lalo e tatau ona afifiina ta'ito'atasi i .btn-grouptotonu o le a .btn-toolbarmo le fa'aliliuga tatau.

Vaaiga lautele ma faataitaiga

Fa'aaogā so'o se fa'amau e fa'aoso ai se lisi fa'amaulalo e ala i le tu'u i totonu o le .btn-groupma tu'u le fa'ailoga o le lisi sa'o.

Faataitaiga faailoga

E tutusa ma le vaega fa'amau, e fa'aogaina e le matou fa'ailoga le fa'ailoga fa'amau fa'amau, ae fa'atasi ai ma ni nai fa'aopoopoga e fa'alelei ai le sitaili ma lagolago ai le fa'apipi'i a Bootstrap's dropdown jQuery plugin.

<div class = "btn-group" > 
  <a vasega = "btn dropdown-toggle" data-toggle = "pa'ū" href = "#" >   
    Gaioiga
    <span class = "caret" ></span> 
  </a>
  <ul class = "fa'alalo-menu" > 
    <!-- so'oga fa'ai'u i lalo -->
  </ul>
</div>

E galue i le tele o faamau uma

O fa'amau fa'amau i lalo e galue i so'o se tele. o lau fa'amau lapopo'a i le .btn-large, .btn-small, po'o le .btn-mini.

Manaomia javascript

O fa'amau fa'amau e mana'omia le fa'apipi'i pa'u i lalo Bootstrap e fa'atino.

I nisi tulaga-pei o le feavea'i-fa'alalo menus o le a faalautele atu i fafo o le va'aiga. E te manaʻomia le faʻaogaina o le faʻaogaina ma le lima poʻo le javascript masani.

Vaaiga lautele ma faataitaiga

Fausia i luga o sitaili kulupu fa'amau ma fa'ailoga, e faigofie ona tatou faia se ki vaelua. O fa'amau vaevae o lo'o fa'aalia ai se gaioiga masani i le agavale ma se pa'u pa'u i lalo i le taumatau ma feso'ota'iga.

Tele

Fa'aaoga vasega fa'aopoopo fa'amau .btn-mini, .btn-small, po'o .btn-largele fa'avasegaina.

<div class = "btn-group" > 
  ...
  <ul class = "toso i lalo-menu toso-taumatau" > 
    <!-- so'oga fa'ai'u i lalo -->
  </ul>
</div>

Faataitaiga faailoga

Matou te fa'alauteleina le fa'aulu fa'amau fa'amau e tu'u mai ai se fa'agaioiga fa'amau lona lua e fa'agaoioi e fai ma fa'aoso tu'ueseese.

<div class = "btn-group" > 
  <button class = "btn" > Action </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </fa'amau>
  <ul class = "fa'alalo-menu" > 
    <!-- so'oga fa'ai'u i lalo -->
  </ul>
</div>

Tu'u mea'ai

E mafai fo'i ona fesuia'i mai le pito i lalo e ala i le fa'aopoopoina o se vasega e tasi i le matua matua o le .dropdown-menu. O le a liliu le itu o le .caretma toe fa'atulaga le lisi lava ia e alu ese mai le pito i luga ae le o luga i lalo.

<div class = "btn-group dropup" > 
  <button class = "btn" > Pa'u </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </fa'amau>
  <ul class = "fa'alalo-menu" > 
    <!-- so'oga fa'ai'u i lalo -->
  </ul>
</div>

Vasega faavae malosi

O vaega uma o le nav iinei—tabs, pills, and lists— faasoa tutusa le faailoga faavae ma sitaili i le .navvasega.

Le taimi e fa'aoga ai

O laupepa ma fualaau e lelei tele mo vaega o anotusi poʻo le faʻatautaia i le va o itulau o mea e fesoʻotaʻi.

Fa'atonuga vaega

Ina ia fa'aoga feso'ota'iga nav, fa'aoga le .pull-leftpo'o .pull-rightvasega aoga. O vasega uma e lua o le a faʻaopoopoina se CSS faʻafefe i le itu faʻapitoa.

Fa'amaumauga autu

Fai so'otaga masani <ul>ma fa'aopoopo .nav-tabs:

• Aiga
• Tala'aga
• Feau

<ul class = "nav nav-tabs" > 
  <li vasega = "toaga" > 
    <a href = "#" > Aiga </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Fualaau masani

Ave lena lava HTML, ae faʻaaoga .nav-pillsnai lo:

• Aiga
• Tala'aga
• Feau

<ul class = "nav nav-pills" > 
  <li vasega = "toaga" > 
    <a href = "#" > Aiga </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

E fa'afefea ona fa'aputuina

A'o fa'alava fa'alava fa'amau ma fuala'au, na'o le fa'aopoopoina o se vasega lona lua, .nav-stacked, ina ia fa'aalia fa'aputu i luga sa'o.

Fa'aputu fa'amau

• Aiga
• Tala'aga
• Feau

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

Fa'aputu fualaau

• Aiga
• Tala'aga
• Feau

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

Fa'afaigofie mea'ai menus

Pa'u i lalo menus i Bootstrap tabs ma pills e sili ona faigofie ma e manaʻomia naʻo sina HTML faʻaopoopo ma se mea mama jQuery plugin.

Ulu atu i le itulau Javascript e faitau le docs i le amataina o pa'ū i Bootstrap.

Fa'amau i lalo

• Aiga
• Fesoasoani
• Pa'u i lalo
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li vasega = "pa'u i lalo" > 
    <a vasega = "fa'alalo-toggle" 
       data-toggle = "pa'u i lalo"
       href = "#" >
        Pa'u i lalo
        <b class = "caret" ></b> 
      </a>
    <ul class = "fa'alalo-menu" > 
      <!-- so'oga -->
    </ul>
  </li>
</ul>

Pills ma pa'u i lalo

• Aiga
• Fesoasoani
• Pa'u i lalo
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li vasega = "pa'u i lalo" > 
    <a vasega = "fa'alalo-toggle" 
       data-toggle = "pa'u i lalo"
       href = "#" >
        Pa'u i lalo
        <b class = "caret" ></b> 
      </a>
    <ul class = "fa'alalo-menu" > 
      <!-- so'oga -->
    </ul>
  </li>
</ul>

Fa'asagaga faiga fa'aoga

O lisi o le Nav e maua ai se auala faigofie ma faigofie e fausia ai vaega o feso'ota'iga fa'atasi ma ulutala e filifili ai. E sili ona fa'aoga i itu e pei o le Saili ile OS X.

I le fa'atulagaina, o lo'o fausia i luga o sitaili autu lava e tasi e pei o tabs ma fualaau, o le fa'aoga ma le fa'avasegaina e sa'o.

Faatasi ai ma ata

E faigofie foʻi ona faʻapipiʻi lisi o nav i ata. Fa'aopoopo le fa'ailoga talafeagai <i>ma le vasega ma ua e seti.

Vaevae faalava

Fa'aopoopo se vase vaeluaga e ala i le faia o se mea lisi gaogao ma le vasega .divider, pei o lea:

<ul class = "nav nav-list" > 
  ...
  <li vasega = "vaelua" ></li> 
  ...
</ul>

Faataitaiga nav lisi

Ave se lisi o so'oga ma fa'aopoopo class="nav nav-list":

<ul class = "nav nav-list" > 
  <li vasega = "nav-header" > 
    Lisi ulutala
  </li>
  <li vasega = "toaga" > 
    <a href = "#" > Aiga </a> 
  </li>
  <li>
    <a href = "#" > Faletusi </a> 
  </li>
  ...
</ul>

Faataitaiga ma ata

Fa'ata'ita'iga tutusa, ae fa'atasi ma <i>fa'ailoga mo fa'ailoga.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i vasega = "icon-book" ></i> 
      Faletusi
    </a>
  </li>
  ...
</ul>

O mea e aofia ai

Fa'aola lau laupepa i se masini faigofie e fesuiai i le va o mea e ala i faʻamau. O le Bootstrap e tu'ufa'atasia ai tabbable tabs i sitaili e fa: pito i luga (fa'aletonu), taumatau, pito i lalo, ma le agavale.

Suiga i le va o latou e faigofie ma e manaʻomia ai le suia o se faʻailoga laʻititi.

Mo'e i luga o laupepa

Ina ia fa'agesegese fa'amau i totonu, fa'aopoopo .fadei .tab-pane.

Manaomia le plugin jQuery

O tabbable tabs uma o lo'o fa'aosoina e la matou mea mama jQuery plugin. Faitau atili e uiga i le auala e faʻaola ai tabable tabs i luga o le javascript docs itulau .

Maua le javascript →

Fa'ata'ita'iga laulau

Ina ia fa'apipi'i fa'amaufa'ailoga, fai se .tab-paneID fa'apitoa mo fa'amau ta'itasi ma afifi i totonu .tab-content.

Mo fa'amau fa'aoga taumatau po'o le agavale, afifi le .nav-tabsma .tab-contenttotonu .tabbable.

Fa'ailoga sa'o

O le fa'aogaina o tabbable tabs e mana'omia ai se afifi afifi, se seti o fa'amaufa'ailoga, ma se seti o tabbable pane o anotusi.

<div class = "tabable" > <!-- Na'o le itu agavale/taumatau e mana'omia -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Vaega 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Vaega 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Ua ou i ai i le Vaega 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Talofa, ua ou i le Vaega 2. </p>
    </div>
  </div>
</div>

Faʻamau i le pito i lalo

Su'e le fa'asologa o le HTML ma fa'aopoopo se vasega e tu'u ai fa'amau i le pito i lalo.

<div class = "tabbable tabs-lalo" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Fa'amau i le agavale

Su'e le vasega e tuu fa'amau i le agavale.

<div class = "tabbable tabs-agavale" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Fa'amau i le itu taumatau

Su'e le vasega e tu'u ai fa'amau i le itu taumatau.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Fa'ailoga fa'atauva'a

O le navbar e manaʻomia naʻo ni nai divs e faʻapipiʻi lelei mo faʻaaliga faʻapitoa pe tumau.

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

Navbar mau

Fa'asa'o le navbar i le pito i luga po'o le pito i lalo ole va'aiga va'ai ma se vasega fa'aopoopo ile pito pito i fafo, .navbar.

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

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

A e fa'apipi'i le navbar, manatua e fa'amauina le vaega natia i lalo. Fa'aopoopo le 40px po'o le sili atu fo'i o le padding i le <body>. Ia mautinoa e faʻaopopo lenei mea pe a uma le Bootstrap CSS autu ma aʻo leʻi faia le CSS tali mai.

Su'ega igoa

O se feso'ota'iga faigofie e fa'aalia ai lau fa'ailoga po'o le igoa o le poloketi e mana'omia ai se pine taula.

<a vasega = "fa'ailoga" href = "#" >  
  Igoa o le poloketi
</a>

Fomu ile navbar

Ina ia fa'apena lelei ma fa'atulaga se fomu i totonu o le navbar, fa'aopoopo vasega talafeagai e pei ona fa'aalia i lalo. Mo se fomu e le mafai, fa'aofi .navbar-formma so'o se .pull-leftpo'o .pull-rightle fa'aoga lelei.

<form vasega = "navbar-form toso-agavale" > 
  <input type = "text" class = "span2" >  
</form>

Mo se fomu su'esu'e fa'apitoa, fa'aopoopo .navbar-searchi le formma .search-queryle fa'aoga mo sitaili fa'apitoa i le navbar.

<form class = "navbar-search toso-agavale" > 
  <input type = "text" class = "search-query" placeholder = "Su'esu'e" >   
</form>

Fa'asagaga tali fa'afeagai

Faʻalagolago i le aofaʻi o mea i totonu o lau pito i luga, atonu e te manaʻo e faʻatino filifiliga tali. Ina ia faia, afifi lau mea nav i totonu o se div o loʻo i ai, .nav-collapse.collapse, ma faʻaopopo le ki o le navbar toggle, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar o lo'o fa'aaogaina e fai ma sui mo mea navbar malepe -->
      <a vasega = "btn btn-navbar" data-toggle = "pa'ū" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Ia mautinoa e tu'u le fa'ailoga i fafo pe a e mana'o e fa'aalia -->
      <a class = "brand" href = "#" > Igoa o le Poloketi </a>  
 
      <!-- O mea uma e te mana'o e natia ile 940px pe itiiti, tu'u i totonu iinei -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

So'oga nav

O mea nav e faigofie ona fa'aopoopo e ala i lisi e le fa'atonuina.

<ul vasega = "nav" > 
  <li vasega = "toaga" > 
    <a href = "#" > Aiga </a> 
  </li>
  <li><a href = "#" > So'oga </a></li> 
  <li><a href = "#" > So'oga </a></li> 
</ul>

E faigofie ona e fa'aopoopoina vaeluaga i au feso'ota'iga nav ma se mea lisi gaogao ma se vasega faigofie. Fa'aopoopo le mea lea i le va o so'otaga:

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

Fa'atonuga vaega

Ina ia fa'aoga se nav, fomu su'esu'e, po'o tusitusiga, fa'aoga le .pull-leftpo'o .pull-rightvasega aoga. O vasega uma e lua o le a faʻaopoopoina se CSS faʻafefe i le itu faʻapitoa.

Fa'aopoopo i lalo menus

O le fa'aopoopoina o fa'alalolalo ma fa'alalo i le nav e matua faigofie lava, ae e mana'omia le fa'aogaina o la matou fa'apipi'i javascript .

<ul vasega = "nav" > 
  <li vasega = "pa'u i lalo" > 
    <a href = "#" 
          vasega = "pa'ū-toggle"
          data-toggle = "pa'u i lalo" >
          Account
          <b class = "caret" ></b> 
    </a>
    <ul class = "fa'alalo-menu" > 
      ...
    </ul>
  </li>
</ul>

Maua le javascript →

Tusi i le navbar

Afifi manoa o tusitusiga i se <.navbar-text>, e masani lava i luga o se <p>pine mo le taʻitaʻiga saʻo ma le lanu.

Aisea e faaaoga ai

E fa'aogaina le fa'ata'ita'iga Breadcrumb o se auala e fa'aali atu ai i tagata fa'aoga le mea o lo'o iai i totonu o se app po'o se saite, ae le mo le fa'atauga muamua. Fa'atumauina la latou fa'aoga fa'apitoa ma fa'apuupuu ina ia sili ona aoga.

Faataitaiga

O se fa'ata'ita'iga e tasi o lo'o fa'aalia e ono fa'aalia ile tele o itulau.

• Aiga

• Aiga /
• Faletusi

• Aiga /
• Faletusi /
• Fa'amaumauga

Fa'ailoga

HTML o lau lisi masani e le fa'atonuina ma feso'ota'iga.

<ul class = "falaoa" > 
  <li>
    <a href = "#" > Aiga </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Faletusi </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Fa'amaumauga </li> 
</ul>

Le taimi e fa'aoga ai

Fa'atosina fa'afaigofie ma la'ititi la'ititi na fa'aosoina e le Rdio, lelei mo polokalame ma fa'ai'uga su'esu'e. O le poloka tele e faigata ona misi, faigofie ona faʻaleleia, ma maua ai vaega tetele kiliki.

So'oga itulau fa'atulafonoina

O feso'ota'iga e fa'avasegaina ma galue i le tele o tulaga ma le vasega sa'o. .disabledmo so'otaga e le mafai ona kiliki ma .activemo itulau o lo'o iai nei.

Fa'aoga fetuutuunai

Fa'aopoopo se tasi o vasega e lua e filifili e sui ai le fa'aogaina o feso'ota'iga pagination: .pagination-centeredma .pagination-right.

Faataitaiga

Ole vaega ole pagination e fa'aogaina e fetu'una'i ma galue i le tele o fesuiaiga.

Fa'ailoga

A'ai i se <div>, fa'akomepiuta ua na'o se <ul>.

<div class = "fa'asinomaga" > 
  <ul>
    <li><a href = "#" > Muamua </a></li> 
    <li vasega = "toaga" > 
      <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 = "#" > Sosoo </a></li> 
  </ul>
</div>

E uiga i le pager

O le vaega pager o se seti o fesoʻotaʻiga mo faʻatinoga faigofie pagination faʻatasi ai ma faʻailoga malamalama ma e oʻo lava i sitaili mama. E manaia tele mo nofoaga faigofie e pei o blogs poʻo mekasini.

Fa'atonu tulaga le atoatoa

O feso'ota'iga Pager e fa'aogaina fo'i le .disabledvasega lautele mai le fa'ailoga.

Fa'ata'ita'iga masani

Ona o le faaletonu, o le pager e totonugalemu sootaga.

• Muamua
• Sosoo ai

<ul class = "pager" > 
  <li>
    <a href = "#" > Muamua </a> 
  </li>
  <li>
    <a href = "#" > Sosoo </a> 
  </li>
</ul>

So'oga fa'aoga

I le isi itu, e mafai ona e fa'aogaina so'oga ta'itasi i itu:

• ← Matua
• Fou →

<ul class = "pager" > 
  <li vasega = "muamua" > 
    <a href = "#" > ← Matua </a> 
  </li>
  <li vasega = "sosoo" > 
    <a href = "#" > Fou → </a> 
  </li>
</ul>

E uiga i

O pine o ni vaega laiti, faigofie mo le fa'aalia o se fa'ailoga po'o se numera o se ituaiga. E masani ona maua ile imeli e pei ole Mail.app po'o luga ole telefoni feavea'i mo fa'amatalaga tulei.

Vasega avanoa

O le Bootstrap e maua ai se vaega mama, fetuutuunai e taʻua o le hero unit e faʻaalia ai mea i luga o lau 'upega tafaʻilagi. E galue lelei i luga o maketi ma mea-mamafa nofoaga.

Fa'ailoga

Afifi lau anotusi i se divtulaga faapea:

<div class = "toa-unite" > 
  <h1> Ulutala </h1>
  <p> Fa'ailoga igoa </p>
  <p>
    <a vasega = "btn btn-primary btn-tele" > 
      Aoao atili
    </a>
  </p>
</div>

O se atigi faigofie mo se h1avanoa talafeagai ma vaelua vaega o anotusi i luga o se itulau. E mafai ona fa'aogaina le h1's default small, elemene fa'apea le tele o isi vaega (fa'atasi ai ma sitaili fa'aopoopo).

<div class = "itulau-ulutala" > 
  <h1> Faataitaiga ulutala itulau </h1>
</div>

Laiti fa'apitoa

Ona o le faaletonu, ua mamanuina ata laiti a Bootstrap e faʻaalia ata fesoʻotaʻi ma sina faʻailoga manaʻomia.

E sili ona fa'avasegaina

Faatasi ai ma sina faʻailoga faʻaopoopo, e mafai ona faʻaopoopo soʻo se ituaiga o mea HTML pei o ulutala, parakalafa, poʻo faʻamau i totonu o ata.

• 

  Fa'ailoga laititi

  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.

  Gaioiga Gaioiga

• 

  Fa'ailoga laititi

  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.

  Gaioiga Gaioiga

Aisea e fa'aoga ai ata

O ata laiti (muamua .media-gridseia oo i le v1.4) e lelei tele mo fa'asologa o ata po'o vitiō, fa'ai'uga o su'esu'ega ata, oloa fa'atau oloa, fa'amaumauga, ma le tele o isi mea. E mafai ona avea ma so'oga po'o mea fa'amautu.

Fa'ailoga faigofie, fetu'una'i

E faigofie lava le fa'ailoga o le la'ititi—a ulma so'o se numera o lielemene na'o mea e mana'omia. E sili fo'i ona fetu'una'i, fa'ataga mo so'o se ituaiga o anotusi ma na'o sina fa'ailoga e afifi ai au mea.

Fa'aaoga le tele o koluma fa'asologa

O le mea mulimuli, e fa'aogaina e le vaega o ata laititi vasega o faiga fa'avasega o lo'o iai—pei .span2po'o le .span3—mo le fa'atonutonuina o le tele o ata.

Le fa'ailoga

E pei ona taʻua muamua, o le faʻailoga manaʻomia mo ata laiti e mama ma tuusaʻo. O se va'aiga lea i le seti fa'aletonu mo ata feso'ota'i :

<ul class = "tusia" > 
  <li vasega = "span3" > 
    <a href = "#" vasega = "tusia" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Mo mea masani HTML i ata, o le faʻailoga e suia teisi. Ina ia faʻataga le poloka poloka i soʻo se mea, matou te fesuiaʻi le <a>mo se <div>faʻapea:

<ul class = "tusia" > 
  <li vasega = "span3" > 
    <div class = "tusia" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Fa'ailoga laititi </h5>
      <p> Fa'amatalaga ata i'i... </p>
    </div>
  </li>
  ...
</ul>

E tele fa'ata'ita'iga

Su'esu'e au filifiliga uma i vasega fa'asologa eseese o lo'o avanoa mo oe. E mafai fo'i ona e fa'afefiloi ma fa'afetaui lapo'a eseese.

Toe tusia vasega faavae

Faatasi ai ma le Bootstrap 2, ua matou faafaigofieina le vasega faavae: .alertnai lo le .alert-message. Ua matou faʻaititia foʻi le faʻailoga pito i lalo e manaʻomia - leai <p>e manaʻomia ona o le faaletonu, naʻo le pito i fafo <div>.

Fe'au mataala tasi

Mo se vaega e sili atu le umi ma le itiiti ifo o le code, ua matou aveesea le vaʻaiga vaʻaia mo faʻasalalauga poloka, feʻau e oʻo mai ma le tele o padding ma e masani lava ona sili atu tusitusiga. Ua suia foi le vasega i .alert-block.

E fetaui lelei ma le javascript

O le Bootstrap e sau ma se faʻapipiʻi tele jQuery e lagolagoina savali mataala, faʻateʻa vave ma faigofie.

Maua le plugin »

Faataitaiga mataala

Afi lau fe'au ma se fa'aikona tapuni e filifili i totonu o se div ma se vasega faigofie.

<div class = "talatala" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Lapataiga! </strong> Sili siaki oe lava ia, e te le o lelei tele.
</div>

Ulu i luga! O masini iOS e manaʻomia se href="#"mo le faʻateʻaina o faʻasalalauga. Ia mautinoa e aofia ai ma le uiga o faʻamatalaga mo ata vavalalata taula. I le isi itu, e mafai ona e faʻaogaina se <button>elemene ma le faʻamatalaga uiga, lea na matou filifili e fai mo a matou pepa. A fa'aaoga le <button>, e tatau ona e fa'aofi type="button"pe le mafai ona tu'uina atu au fomu.

Fa'afaigofie ona fa'alautele le fe'au mataala fa'atasi ma ni vasega se lua e filifili ai: .alert-blockmo le tele o padding ma fa'atonuga o tusitusiga ma .alert-headingmo se ulutala fetaui.

<div class = "poloka mataala" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alt-heading" > Lapataiga! </h4> 
  E sili le siaki oe lava ia, e te le...
</div>

Sese pe lamatia

<div class = "alert alert-error" > 
  ...
</div>

Manuia

<div class = "alert alert-success" > 
  ...
</div>

Fa'amatalaga

<div class = "alert alert-info" > 
  ...
</div>

Fa'avae

Pa'u aga'i i luma fa'atasi ma le fa'asolo sa'o.

<div class = "agai i luma" > 
  <div vasega = "pa" 
       style = " lautele : 60 %; " ></div> 
</div>

Talatala

Fa'aaogā le fa'alili e fa'atupu ai se fa'ai'uga ta'oto (leai se IE).

<div class = "agai i luma-fa'asolo" > 
  <div vasega = "pa" 
       style = " lautele : 20 %; " ></div> 
</div>

Animated

Ave le fa'ata'ita'iga fa'ailoga ma fa'aola (leai se IE).

<div class = "agai i luma-fa'asolo 
     malosi" >
  <div vasega = "pa" 
       style = " lautele : 40 %; " ></div> 
</div>

Fa'aopoopo lanu

E fa'aogaina e pa o le alualu i luma nisi o ki tutusa ma vasega mataala mo sitaili faifai pea.

Fa'amau sasa

E tutusa ma lanu mafiafia, e iai a matou pa'u fa'asolosolo laina eseese.

Amioga

Fa'aoga pa'u o le alualu i luma CSS3 suiga, o lea afai e te fetuutuunai malosi le lautele e ala i le javascript, o le a sologa lelei le suiga.

Afai e te fa'aogaina le .activevasega, .progress-stripedo le a fa'aola e au pa'u aga'i i luma ta'i mai le agavale i le taumatau.

Lagolago su'esu'e

Fa'aoga pa o le alualu i luma CSS3 gradients, suiga, ma fa'afiafiaga e ausia uma ai o latou aafiaga. O nei foliga e le lagolagoina i le IE7-9 poʻo faʻasologa tuai o Firefox.

Opera ma IE e le lagolagoina fa'afiafiaga i le taimi nei.

Vaieli

Fa'aoga le vaieli e fai ma fa'aoga faigofie i luga o se elemene e tu'uina atu i ai se aafiaga fa'aofi.

<div class = "lelei" > 
  ...
</div>

Tapuni aikona

Fa'aoga le fa'aigoa tapuni lautele mo le fa'ate'aina o mea e pei o fa'ata'ita'iga ma fa'aaliga.

×

<button class = "close" > &taimi; </fa'amau> 

O masini iOS e mana'omia se href="#" mo kiliki mea e tutupu pe afai e te mana'o e fa'aoga se taula.

<a vasega = "latalata" href = "#" > &taimi; </a>