Vaega

O le tele o vaega toe faʻaaogaina ua fausia i totonu o Bootstrap e tuʻuina atu ai faʻasalalauga, faʻaaliga, popovers, ma sili atu.

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:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </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.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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.

Fa'amau i lalo

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.

  1. <div class = "btn-group" >
  2. <a vasega = "btn dropdown-toggle" data-toggle = "pa'ū" href = "#" >
  3. Gaioiga
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "fa'alalo-menu" >
  7. <!-- so'oga fa'ai'u i lalo -->
  8. </ul>
  9. </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.


Vaevae fa'amau fa'amau i lalo

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.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "toso i lalo-menu toso-taumatau" >
  4. <!-- so'oga fa'ai'u i lalo -->
  5. </ul>
  6. </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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Action </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </fa'amau>
  6. <ul class = "fa'alalo-menu" >
  7. <!-- so'oga fa'ai'u i lalo -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Pa'u </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </fa'amau>
  6. <ul class = "fa'alalo-menu" >
  7. <!-- so'oga fa'ai'u i lalo -->
  8. </ul>
  9. </div>

itulau fa'akomepiuta itulau

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

  1. <div class = "fa'asinomaga" >
  2. <ul>
  3. <li><a href = "#" > Muamua </a></li>
  4. <li vasega = "toaga" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Sosoo </a></li>
  11. </ul>
  12. </div>

Pager Mo so'oga vave muamua ma isi

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.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Muamua </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Sosoo </a>
  7. </li>
  8. </ul>

So'oga fa'aoga

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

  1. <ul class = "pager" >
  2. <li vasega = "muamua" >
  3. <a href = "#" > Matua </a>
  4. </li>
  5. <li vasega = "sosoo" >
  6. <a href = "#" > Fou → </a>
  7. </li>
  8. </ul>
Fa'ailoga Fa'ailoga
Fa'atonu <span class="label">Default</span>
Manuia <span class="label label-success">Success</span>
Lapataiga <span class="label label-warning">Warning</span>
Taua <span class="label label-important">Important</span>
Fa'amatalaga <span class="label label-info">Info</span>
Fa'afeagai <span class="label label-inverse">Inverse</span>

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

Igoa Faataitaiga Fa'ailoga
Fa'atonu 1 <span class="badge">1</span>
Manuia 2 <span class="badge badge-success">2</span>
Lapataiga 4 <span class="badge badge-warning">4</span>
Taua 6 <span class="badge badge-important">6</span>
Fa'amatalaga 8 <span class="badge badge-info">8</span>
Fa'afeagai 10 <span class="badge badge-inverse">10</span>

Vaega toa

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:

  1. <div class = "toa-unite" >
  2. <h1> Ulutala </h1>
  3. <p> Fa'ailoga igoa </p>
  4. <p>
  5. <a vasega = "btn btn-primary btn-tele" >
  6. Aoao atili
  7. </a>
  8. </p>
  9. </div>

Talofa, lalolagi!

O se vaega toa faigofie lea, o se vaega faigofie jumbotron-style mo le vala'au atili atu i mea fa'aalia po'o fa'amatalaga.

Aoao atili

Ulutala itulau

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

  1. <div class = "itulau-ulutala" >
  2. <h1> Faataitaiga ulutala itulau </h1>
  3. </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 :

  1. <ul class = "tusia" >
  2. <li vasega = "span3" >
  3. <a href = "#" vasega = "tusia" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "tusia" >
  2. <li vasega = "span3" >
  3. <div class = "tusia" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Fa'ailoga laititi </h5>
  6. <p> Fa'amatalaga ata i'i... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.

Fa'aletonu mama

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.

Lapataiga! Sili siaki oe lava, e te le o foliga lelei tele.
  1. <div class = "talatala" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Lapataiga! </strong> Sili siaki oe lava ia, e te le o lelei tele.
  4. </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.

Lapataiga!

E sili le siaki ia oe lava, e te le o lelei tele. Nulla vitae elit libero, a pharetra augue. O le mea lea, o le mea moni, o le mea moni, o le fa'asoaina atu ma isi.

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

Su'esu'ega fa'atatau Fa'aopoopo vasega fa'apitoa e sui ai le uiga o le mataala

Sese pe lamatia

Oi vave! Suia ni nai mea ma toe taumafai e lafo.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Manuia

Malo lava! Na e faitauina ma le manuia lenei savali mataala taua.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Fa'amatalaga

Ulu i luga! O lenei mataala e manaʻomia lou gauai, ae e le sili ona taua.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Fa'ata'ita'iga ma fa'ailoga

Fa'avae

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

  1. <div class = "agai i luma" >
  2. <div vasega = "pa"
  3. style = " lautele : 60 %; " ></div>
  4. </div>

Talatala

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

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

Animated

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

  1. <div class = "agai i luma-fa'asolo
  2. malosi" >
  3. <div vasega = "pa"
  4. style = " lautele : 40 %; " ></div>
  5. </div>

Filifiliga ma lagolago su'esu'e

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.

Vaai, ua ou i totonu o se vaieli!
  1. <div class = "lelei" >
  2. ...
  3. </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.

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

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