Vaega
E silia ma le luasefulu vaega e mafai ona toe fa'aaogaina e fausia e tu'uina atu ai fa'ailoga, fa'alalolalo, vaega fa'aoga, fa'atautaiga, fa'aaliga, ma le tele o isi mea.
Glyphicons
Avanoa glyphs
E aofia ai le sili atu i le 250 glyphs i le faʻasologa o vai mai le Glyphicon Halflings set. Glyphicons Halflings e masani lava e le maua fua, ae o latou foafoa na fa'aavanoaina mo Bootstrap e aunoa ma se tau. O se fa'afetai, na'o matou talosaga atu ia e fa'aofi se so'otaga i tua i Glyphicons pe a mafai.
- glyphicon glyphicon-asterisk
- glyphicon glyphicon-plus
- glyphicon glyphicon-euro
- glyphicon glyphicon-eur
- glyphicon glyphicon-minus
- glyphicon glyphicon-cloud
- glyphicon glyphicon-teutusi
- glyphicon glyphicon-penitala
- glyphicon glyphicon-tioata
- glyphicon glyphicon-musika
- glyphicon glyphicon-su'esu'e
- glyphicon glyphicon-loto
- glyphicon glyphicon-fetu
- glyphicon glyphicon-fetu-gaogao
- glyphicon glyphicon-tagata fa'aoga
- glyphicon glyphicon-film
- glyphicon glyphicon-th-tele
- glyphicon glyphicon-th
- glyphicon glyphicon-th-lisi
- glyphicon glyphicon-ok
- glyphicon glyphicon-aveese
- glyphicon glyphicon-zoom-i totonu
- glyphicon glyphicon-zoom-out
- glyphicon glyphicon-off
- glyphicon glyphicon-signal
- glyphicon glyphicon-cog
- glyphicon glyphicon- lapisi
- glyphicon glyphicon-fale
- glyphicon glyphicon-faila
- glyphicon glyphicon-taimi
- glyphicon glyphicon-auala
- glyphicon glyphicon-download-alt
- glyphicon glyphicon-download
- glyphicon glyphicon-upload
- glyphicon glyphicon-inbox
- glyphicon glyphicon-ta'alo-li'o
- glyphicon glyphicon-toe fai
- glyphicon glyphicon-refresh
- glyphicon glyphicon-list-alt
- glyphicon glyphicon-loka
- glyphicon glyphicon-fu'a
- glyphicon glyphicon-telefoni
- glyphicon glyphicon-volume-off
- glyphicon glyphicon-volume-lalo
- glyphicon glyphicon-volume-up
- glyphicon glyphicon-qrcode
- glyphicon glyphicon-barcode
- glyphicon glyphicon-tag
- glyphicon glyphicon-tags
- glyphicon glyphicon-tusi
- glyphicon glyphicon-faailoga tusi
- glyphicon glyphicon-lomitusi
- glyphicon glyphicon-kamera
- glyphicon glyphicon-font
- glyphicon glyphicon-bold
- glyphicon glyphicon-italic
- glyphicon glyphicon-tusi-maualuga
- glyphicon glyphicon-tusi-lautele
- glyphicon glyphicon-align-agavale
- glyphicon glyphicon-align-center
- glyphicon glyphicon-align-right
- glyphicon glyphicon-align-justify
- glyphicon glyphicon-lisi
- glyphicon glyphicon-indent-agavale
- glyphicon glyphicon-indent-taumatau
- glyphicon glyphicon-facetime-video
- glyphicon glyphicon-ata
- glyphicon glyphicon-map-marker
- glyphicon glyphicon-adjust
- glyphicon glyphicon-tint
- glyphicon glyphicon-edit
- glyphicon glyphicon-share
- glyphicon glyphicon-siaki
- glyphicon glyphicon-move
- glyphicon glyphicon-step-backward
- glyphicon glyphicon-vave-i tua
- glyphicon glyphicon-i tua
- glyphicon glyphicon-play
- glyphicon glyphicon-pause
- glyphicon glyphicon-taofi
- glyphicon glyphicon-i luma
- glyphicon glyphicon-vave-agai i luma
- glyphicon glyphicon-laasaga-agai luma
- glyphicon glyphicon-eject
- glyphicon glyphicon-chevron-agavale
- glyphicon glyphicon-chevron-taumatau
- glyphicon glyphicon-plus-sign
- glyphicon glyphicon-minus-sign
- glyphicon glyphicon-aveese-faailoga
- glyphicon glyphicon-ok-sign
- glyphicon glyphicon-faailoga-fesili
- glyphicon glyphicon-info-sign
- glyphicon glyphicon-screenshot
- glyphicon glyphicon-ave'ese-li'o
- glyphicon glyphicon-ok-li'o
- glyphicon glyphicon-ban-li'o
- glyphicon glyphicon-arrow-agavale
- glyphicon glyphicon-arrow-taumatau
- glyphicon glyphicon-arrow-up
- glyphicon glyphicon-arrow-lalo
- glyphicon glyphicon-share-alt
- glyphicon glyphicon-suia-tumu
- glyphicon glyphicon-resize-laiti
- glyphicon glyphicon-faailoga-fa'ailoga
- glyphicon glyphicon-meaalofa
- glyphicon glyphicon-leaf
- glyphicon glyphicon-afi
- glyphicon glyphicon-mata-matatala
- glyphicon glyphicon-mata-latalata
- glyphicon glyphicon-warni-sign
- glyphicon glyphicon-vaalele
- glyphicon glyphicon-kalena
- glyphicon glyphicon-faafuase'i
- glyphicon glyphicon-faamatalaga
- glyphicon glyphicon-magnet
- glyphicon glyphicon-chevron-up
- glyphicon glyphicon-chevron-down
- glyphicon glyphicon-retweet
- glyphicon glyphicon-fa'atau-taavale
- glyphicon glyphicon-folder-close
- glyphicon glyphicon-folder-tatala
- glyphicon glyphicon-suia-tutusa
- glyphicon glyphicon-suia-fa'asaga
- glyphicon glyphicon-hdd
- glyphicon glyphicon-bullhorn
- glyphicon glyphicon-bell
- glyphicon glyphicon-certificate
- glyphicon glyphicon-thumbs-up
- glyphicon glyphicon-thumbs-down
- glyphicon glyphicon-lima-taumatau
- glyphicon glyphicon-lima-agavale
- glyphicon glyphicon-lima i luga
- glyphicon glyphicon-lima-lalo
- glyphicon glyphicon-li'o-arrow-taumatau
- glyphicon glyphicon-circle-arrow-agavale
- glyphicon glyphicon-circle-arrow-up
- glyphicon glyphicon-li'o-arrow-lalo
- glyphicon glyphicon-globe
- glyphicon glyphicon-wrench
- glyphicon glyphicon-galuega
- glyphicon glyphicon-filter
- glyphicon glyphicon-pepa
- glyphicon glyphicon-fullscreen
- glyphicon glyphicon-dashboard
- glyphicon glyphicon-pepepa
- glyphicon glyphicon-loto-gaogao
- glyphicon glyphicon-sootaga
- glyphicon glyphicon-telefoni
- glyphicon glyphicon-pushpin
- glyphicon glyphicon-usd
- glyphicon glyphicon-gbp
- glyphicon glyphicon-sort
- glyphicon glyphicon-faavasega-i-alafapeta
- glyphicon glyphicon-sort-by-alphabet-alt
- glyphicon glyphicon-sort-by-order
- glyphicon glyphicon-sort-by-order-alt
- glyphicon glyphicon-faavasega-i-uiga
- glyphicon glyphicon-sort-by-attributes-alt
- glyphicon glyphicon-e le siakiina
- glyphicon glyphicon-faalautele
- glyphicon glyphicon-pa'u-lalo
- glyphicon glyphicon-pa'u-i luga
- glyphicon glyphicon-log-in
- glyphicon glyphicon-flash
- glyphicon glyphicon-log-out
- glyphicon glyphicon-new-window
- glyphicon glyphicon-faamaumauga
- glyphicon glyphicon-save
- glyphicon glyphicon-tatala
- glyphicon glyphicon-sefe
- glyphicon glyphicon-import
- glyphicon glyphicon-e auina atu i fafo
- glyphicon glyphicon-send
- glyphicon glyphicon-floppy-disk
- glyphicon glyphicon-floppy-sefe
- glyphicon glyphicon-floppy-aveese
- glyphicon glyphicon-floppy-save
- glyphicon glyphicon-floppy-tatala
- glyphicon glyphicon-credit-card
- glyphicon glyphicon-transfer
- glyphicon glyphicon-cutlery
- glyphicon glyphicon-header
- glyphicon glyphicon-compressed
- glyphicon glyphicon-earphone
- glyphicon glyphicon-telefoni-alt
- glyphicon glyphicon-olo
- glyphicon glyphicon-stats
- glyphicon glyphicon-sd-vitio
- glyphicon glyphicon-hd-vitio
- glyphicon glyphicon-subtitles
- glyphicon glyphicon-sound-stereo
- glyphicon glyphicon-sound-dolby
- glyphicon glyphicon-sound-5-1
- glyphicon glyphicon-sound-6-1
- glyphicon glyphicon-sound-7-1
- glyphicon glyphicon-copyright-mark
- glyphicon glyphicon-resitala-faailoga
- glyphicon glyphicon-cloud-download
- glyphicon glyphicon-cloud-upload
- glyphicon glyphicon-tree-conifer
- glyphicon glyphicon-laau-gogo
- glyphicon glyphicon-cd
- glyphicon glyphicon-save-file
- glyphicon glyphicon-tutala-faila
- glyphicon glyphicon-level-up
- glyphicon glyphicon-kopi
- glyphicon glyphicon-paste
- glyphicon glyphicon-alert
- glyphicon glyphicon-equalizer
- glyphicon glyphicon-king
- glyphicon glyphicon-masiofo
- glyphicon glyphicon-pawn
- glyphicon glyphicon-bishop
- glyphicon glyphicon-knight
- glyphicon glyphicon-pepe-fuafua
- glyphicon glyphicon-faleie
- glyphicon glyphicon-papatusi
- glyphicon glyphicon-moega
- glyphicon glyphicon-apu
- glyphicon glyphicon- tapeina
- glyphicon glyphicon-hourglass
- glyphicon glyphicon-lamepa
- glyphicon glyphicon-duplicate
- glyphicon glyphicon-piggy-bank
- glyphicon glyphicon-seulu
- glyphicon glyphicon-bitcoin
- glyphicon glyphicon-btc
- glyphicon glyphicon-xbt
- glyphicon glyphicon-yen
- glyphicon glyphicon-jpy
- glyphicon glyphicon-ruble
- glyphicon glyphicon-rub
- glyphicon glyphicon-scale
- glyphicon glyphicon-ice-lolly
- glyphicon glyphicon-ice-lolly-tofo
- glyphicon glyphicon-a'oa'oga
- glyphicon glyphicon-option-tutusa
- glyphicon glyphicon-filifiliga-tutusa
- glyphicon glyphicon-menu-hamburger
- glyphicon glyphicon-modal-window
- glyphicon glyphicon-suau'u
- glyphicon glyphicon-grain
- glyphicon glyphicon-mata tioata
- glyphicon glyphicon-tusi-tele
- glyphicon glyphicon-text-lanu
- glyphicon glyphicon-text-background
- glyphicon glyphicon-object-align-top
- glyphicon glyphicon-object-align-bottom
- glyphicon glyphicon-object-align-horizontal
- glyphicon glyphicon-object-align-agavale
- glyphicon glyphicon-object-align-vertical
- glyphicon glyphicon-object-align-right
- glyphicon glyphicon-tafatolu-taumatau
- glyphicon glyphicon-tafatolu-agavale
- glyphicon glyphicon-tafatolu-lalo
- glyphicon glyphicon-tafatolu-pito i luga
- glyphicon glyphicon-console
- glyphicon glyphicon-superscript
- glyphicon glyphicon-subscript
- glyphicon glyphicon-menu-agavale
- glyphicon glyphicon-menu-taumatau
- glyphicon glyphicon-menu-lalo
- glyphicon glyphicon-menu-up
Fa'afefea ona fa'aoga
Mo mafua'aga o fa'atinoga, e mana'omia e ata uma se vasega fa'avae ma se vasega fa'ailoga ta'ito'atasi. Ina ia fa'aoga, tu'u le fa'ailoga lea i so'o se mea. Ia mautinoa e tu'u se avanoa i le va o le atigipusa ma le tusitusiga mo le fa'apipi'i talafeagai.
Aua le fa'afefiloi ma isi vaega
E le mafai ona tu'ufa'atasia sa'o vasega ata ma isi vaega. E le tatau ona faʻaaogaina faʻatasi ma isi vasega ile elemene tutusa. Nai lo lena, fa'aopoopo se faamoega <span>ma fa'aoga vasega fa'ailoga i le <span>.
Na'o le fa'aoga i elemene gaogao
E tatau ona fa'aoga vasega fa'ailoga i luga o elemene e leai ni tusitusiga ma e leai ni mea fa'atamaiti.
Suia le nofoaga vaitusi aikona
O Bootstrap e fa'apea o le a maua faila faila i totonu o le ../fonts/lisi, fa'atatau i faila CSS tu'ufa'atasia. O le siiina po'o le toe fa'aigoaina o faila faila o lona uiga o le fa'afouina o le CSS i se tasi o auala e tolu:
- Suia le
@icon-font-pathma/po'o@icon-font-namefesuiaiga i le puna Fa'aitiiti faila. - Fa'aaogā le filifiliga o URL feso'ota'i ua saunia e le Less compiler.
- Suia
url()auala i le CSS tuufaatasia.
Fa'aaogā so'o se filifiliga e fetaui lelei ma lau fa'atonuga fa'apitoa.
Fa'ailoga avanoa
O fa'aonaponei fa'aonaponei o feso'ota'iga feso'ota'iga o le a fa'ailoa mai ai le CSS fa'atupuina anotusi, fa'apea fo'i ma fa'amatalaga patino Unicode. Ina ia aloese mai mea e leʻi mafaufauina ma fenumiai i le au faitau mata (aemaise lava pe a faʻaaogaina ata mo teuteuga), matou te natia i latou i le aria-hidden="true"uiga.
Afai o lo'o e fa'aogaina se atigipusa e fa'ailoa ai le uiga (nai lo le na'o se elemene teuteu), ia mautinoa o lo'o fa'apea fo'i ona fa'ao'o atu lenei uiga i tekinolosi fesoasoani - mo se fa'ata'ita'iga, aofia ai mea fa'aopoopo, o lo'o natia i le .sr-onlyvasega.
Afai o lo'o e faia ni fa'atonuga e aunoa ma se isi tusitusiga (e pei o le <button>na'o se fa'ailoga), e tatau lava ona e tu'uina atu isi anotusi e iloa ai le fa'amoemoega o le fa'atonuga, ina ia fa'aogagofie i tagata fa'aoga tekinolosi fesoasoani. I lenei tulaga, e mafai ona e faʻaopoopoina se aria-labeluiga ile pule lava ia.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>Faataitaiga
Fa'aoga i fa'amau, vaega fa'amau mo se mea faigaluega, ta'avale, po'o mea fa'apipi'i fomu.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>O se atigipusa e faʻaaogaina i se mataala e faʻaalia ai o se feʻau sese, faʻatasi ai ma .sr-onlytusitusiga faʻaopoopo e faʻaalia ai lenei faʻamatalaga i tagata faʻaoga o tekinolosi fesoasoani.
Sese:Ulufale se tuatusi imeli aoga
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>Pa'u i lalo
E mafai ona fesuia'i, lisi autu mo le fa'aalia o lisi o so'otaga. Faia feso'ota'iga ma le pa'ū JavaScript plugin .
Faataitaiga
Afi le fa'aoso o le pa'u i lalo ma le lisi o le pa'u i lalo i totonu .dropdown, po'o se isi elemene e fa'ailoa mai position: relative;. Ona faaopoopo lea o le HTML o le lisi.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>E mafai ona suia menus pa'u i lalo e fa'alautele i luga (nai lo lalo) e ala i le fa'aopoopo .dropupi le matua.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Fa'atonuga
Ona o le faaletonu, e otometi lava ona tu'u 100% mai le pito i luga ma le itu agavale o lona matua. Fa'aopoopo .dropdown-menu-righti le .dropdown-menufa'aoga i le taumatau le lisi o le pa'u i lalo.
Atonu e mana'omia se fa'aputuga fa'aopoopo
E otometi lava ona tu'u le pa'u i lalo e ala i le CSS i totonu ole fa'agasolo masani ole pepa. O lona uiga e mafai ona fa'ato'ilalo e matua o lo'o iai ni overflowmea totino po'o foliga mai i fafo atu o le va'aiga. Fa'atalanoaina na o oe ia mataupu pe a tula'i mai.
Fa'ato'a .pull-rightfa'aogaina
E o'o mai i le v3.1.0, ua matou le toe .pull-rightfa'aogaina i luga o fa'aulu i lalo menus. Ina ia fa'aoga sa'o se lisi, fa'aoga .dropdown-menu-right. O vaega o le nav fa'aoga taumatau i totonu o le navbar e fa'aoga ai se fa'afefiloi o lenei vasega e fa'aoga otometi ai le lisi. Ina ia soloia, faaaoga .dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>Ulutala
Fa'aopoopo se ulutala e fa'ailoga vaega o gaioioiga i so'o se lisi fa'alalo.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>Vaevae
Fa'aopoopo se vase e va'ava'ai fa'asologa o feso'ota'iga i se lisi fa'alalo.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>Ua le atoatoa mea o le lisi
Fa'aopoopo .disabledi le a <li>i le pa'u i lalo e tape ai le so'oga.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>Vaega fa'amau
Fa'aputu fa'atasi se fa'asologa o fa'amau fa'atasi i luga o se laina e tasi ma le vaega fa'amau. Fa'aopoopo i luga o le leitio JavaScript ma le fa'ailoga o le pusa siaki fa'atasi ma a matou fa'amau fa'amau .
Meafaigaluega & popovers i vaega fa'amau e mana'omia se fa'atulagaga fa'apitoa
A fa'aogaina meafaigaluega po'o popovers i elemene i totonu o le .btn-group, e tatau ona e fa'amaoti le filifiliga container: 'body'e aloese ai mai a'afiaga e le mana'omia (e pei o le elemene o lo'o tuputupu a'e lautele ma/po'o le leiloa o ona tulimanu lapotopoto pe a fa'aoso le mea faigaluega po'o le popover).
Ia mautinoa sa'o rolema aumai se igoa
Ina ia mafai e tekinolosi fesoasoani - e pei o le au faitau mataʻitusi - e faʻaalia ai o se faasologa o faʻamau e tuʻufaʻatasia, rolee manaʻomia ona tuʻuina atu se uiga talafeagai. Mo vaega fa'amau, o le mea lea role="group", a'o meafaigaluega e tatau ona i ai se role="toolbar".
O le tasi tuusaunoaga o vaega ia e na'o le tasi le pule (mo se fa'ata'ita'iga o vaega fa'amaonia fa'atasi ma <button>elemene) po'o se pa'u i lalo.
E le gata i lea, o vaega ma meafaigaluega e tatau ona tuʻuina atu i ai se faʻailoga manino, aua o le tele o tekinolosi fesoasoani o le a le faʻasalalauina i latou, e ui lava i le i ai o le roleuiga saʻo. I faʻataʻitaʻiga o loʻo tuʻuina atu iinei, matou te faʻaaogaina aria-label, ae o isi mea e pei o le aria-labelledbymafai foi ona faʻaaogaina.
Fa'ata'ita'iga fa'avae
Afifi se faasologa o faamau i .btntotonu .btn-group.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>Fa'amau 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" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>Tele
Nai lo le fa'aogaina o vasega fa'avasega fa'amau i fa'amau ta'itasi i totonu o se kulupu, na'o le fa'aopoopo .btn-group-*i kulupu ta'itasi .btn-group, e aofia ai ma le fa'aputuina o ni vaega se tele.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>Faamoega
Tuu se .btn-groupi totonu o le isi .btn-grouppe ae mana'o e fa'afefiloi menus ma se fa'asologa o ki.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>Fa'asagaga tu'usa'o
Fai se seti o faamau e foliga fa'aputu i luga sa'o nai lo fa'alava. E le lagolagoina i'i le to'alalo o ki lalo.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>Fa'aigoa fa'amau vaega
Fai se vaega o fa'amau fa'aloloa i le lapopo'a tutusa e fa'alautele le lautele atoa o lona matua. E galue fo'i i fa'amau fa'amau i lalo i le vaega fa'amau.
Taulimaina tuaoi
Ona o le HTML ma le CSS faʻapitoa na faʻaaogaina e faʻamaonia ai faʻamau (faʻaigoaina display: table-cell), o tuaoi i le va oi latou e faʻaluaina. I vaega fa'amau fa'amau, margin-left: -1pxe fa'aaogaina e fa'aputu ai tuaoi nai lo le aveese. Ae ui i lea, margine le aoga ma display: table-cell. O le i'uga, e fa'atatau i au fa'asinomaga i Bootstrap, atonu e te mana'o e aveese pe toe valivali tuaoi.
IE8 ma tuaoi
Internet Explorer 8 e le tu'uina atu tuaoi i luga o fa'amau i totonu o se fa'aupu fa'amaonia, pe o luga <a>po'o <button>elemene. Ina ia fa'ata'amilo i lena mea, afifi fa'amau ta'itasi i le isi .btn-group.
Va'ai #12476 mo nisi fa'amatalaga.
Faatasi ai ma <a>elemene
Na'o le afifiina o se faasologa o .btns i totonu .btn-group.btn-group-justified.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>So'oga e fai fa'amau
Afai o <a>elemene e faʻaaogaina e fai ma faʻamau - faʻaosoina galuega i totonu o le itulau, nai lo le faʻafeiloaʻi i se isi pepa poʻo se vaega i totonu o le itulau o loʻo i ai nei - e tatau foi ona tuʻuina atu i ai se role="button".
Faatasi ai ma <button>elemene
Mo le fa'aogaina o vaega fa'amau fa'atatau ma <button>elemene, e tatau ona e afifiina fa'amau ta'itasi i se fa'amau fa'amau . O le tele o tagata su'esu'e e le fa'aogaina lelei a matou CSS mo le fa'amaoniaina o <button>elemene, ae talu ai matou te lagolagoina le pa'u i lalo, e mafai ona matou fa'aogaina lena mea.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>Fa'amau i lalo
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.
Fa'alagolago fa'apipi'i
O fa'amau fa'amau e mana'omia le fa'apipi'i pa'u i lalo e fa'aaofia i lau fa'aliliuga o Bootstrap.
Fa'amau fa'amau tasi
Su'e se ki i se pa'u i lalo ma nisi suiga fa'ailoga autu.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Vaevae fa'amau fa'amau i lalo
E fa'apena fo'i, fa'atupu fa'amau fa'amau fa'atasi ma suiga fa'ailoga tutusa, na'o se fa'amau e ese.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Tele
O fa'amau fa'amau e galue i fa'amau o so'o se lapopo'a.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>Fesuia'iga fa'atu'u
Fa'aoso lisi fa'alalo i luga o elemene e ala i le fa'aopoopo .dropupi le matua.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>Vaega fa'aofi
Fa'alautele le fa'atonutonuina o fomu e ala i le fa'aopoopoina o tusitusiga po'o fa'amau i luma, pe a uma, po'o i itu uma e lua o so'o se tusitusiga-fa'avae <input>. Fa'aoga .input-groupma se .input-group-addonpo'o .input-group-btne fa'apipi'i pe fa'aopoopo elemene i se .form-control.
Na'o <input>tusitusiga
Aloese mai le fa'aogaina <select>o elemene iinei aua e le mafai ona fa'avasega atoatoa ile WebKit browsers.
Aloese mai le faʻaaogaina <textarea>o elemene iinei aua o latou rowsuiga o le a le faʻaaloalogia i nisi tulaga.
Tooltips & popovers i vaega fa'aoga e mana'omia se fa'atulagaga fa'apitoa
A fa'aogaina meafaigaluega po'o popovers i elemene i totonu o le .input-group, e tatau ona e fa'amaoti le filifiliga container: 'body'e aloese ai mai a'afiaga e le mana'omia (e pei o le elemene o lo'o tuputupu a'e lautele ma/po'o le leiloa o ona tulimanu lapotopoto pe a fa'aoso le mea faigaluega po'o le popover).
Aua le fa'afefiloi ma isi vaega
Aua ne'i fa'afefiloi sa'o vaega fo'i po'o vasega koluma laina fa'atasi ma vaega o lo'o tu'u iai. Nai lo lena, fa'anofo le vaega o lo'o i totonu o le fomu kulupu po'o le elemene e feso'ota'i i le grid.
Fa'aopoopo i taimi uma igoa
O le a iai ni fa'afitauli a le au faitau mata i au fomu pe afai e te le fa'aofiina se fa'ailoga mo fa'aoga uma. Mo nei vaega fa'aoga, ia mautinoa o so'o se fa'ailoga fa'aopoopo po'o galuega fa'atino e tu'uina atu i tekinolosi fesoasoani.
Ole auala tonu e fa'aoga (elemene va'aia <label>, <label>elemene o lo'o natia e fa'aaoga ai le .sr-onlyvasega, po'o le fa'aogaina o le aria-label, aria-labelledby, aria-describedby, titlepo'o le placeholderuiga) ma o a fa'amatalaga fa'aopoopo e mana'omia e tu'uina atu o le a eseese e fa'atatau i le ituaiga sa'o o le widget interface o lo'o e fa'atinoina. O faʻataʻitaʻiga i lenei vaega o loʻo tuʻuina atu ai ni nai faʻataʻitaʻiga, faʻapitoa faʻapitoa.
Fa'ata'ita'iga fa'avae
Tuu se mea faaopoopo po o se faamau i itu uma e lua o se mea e tuu i totonu. E mafai fo'i ona e tu'u le tasi i itu uma e lua o se mea fa'aoga.
Matou te le lagolagoina le tele o faʻaopoopoga ( .input-group-addonpoʻo .input-group-btn) i le tasi itu.
Matou te le lagolagoina le tele o fomu-pulea i totonu o se vaega e tasi.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>Tele
Fa'aopoopo le fa'avasegaina o vasega fa'atusa i .input-groupia lava ma o mea o lo'o i totonu o le a otometi lava ona toe fa'aopoopo—leai se mana'oga mo le toe faia o vasega fa'atonutonu le lapopoa i elemene ta'itasi.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>Pusa siaki ma fa'aopoopo leitio
Tuu so'o se pusa siaki po'o le leitio i totonu ole fa'aopoopo a le kulupu fa'aopoopo nai lo tusitusiga.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Fa'aopoopo fa'amau
O fa'amau i kulupu fa'aoga e fai si 'ese'ese ma e mana'omia se isi fa'aopoopoga o le fa'amoega. Nai lo le .input-group-addon, e mana'omia lou fa'aoga .input-group-btne afifi ai fa'amau. E mana'omia lenei mea ona o sitaili su'esu'e fa'aletonu e le mafai ona soloia.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Fa'amau fa'atasi ma fa'alalo
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Fa'amau fa'amau
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>Fa'amau fa'atele
E ui e na'o le tasi le fa'aopoopoga i le itu e tasi, e mafai ona tele ni fa'amau i totonu o le tasi .input-group-btn.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>Navs
Navs o loʻo maua i Bootstrap ua faʻasoa faʻailoga, amata i le .navvasega faavae, faʻapea foʻi ma setete faʻasoa. Fa'afesuia'i vasega sui e fesuia'i i le va o sitaili ta'itasi.
Tabs
Manatua .nav-tabse manaʻomia e le vasega le .navvasega faʻavae.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>Pills
Ave lena lava HTML, ae faʻaaoga .nav-pillsnai lo:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>O fuala'au e mafai fo'i ona fa'aputu i luga. Fa'aopoopo .nav-stacked.
<ul class="nav nav-pills nav-stacked">
...
</ul>Tauamiotonuina
Fa'afaigofie ona fai fa'amau po'o fuala'au e tutusa le lautele o latou matua ile lau e lautele atu nai lo le 768px ma .nav-justified. I luga o lau laiti, o loʻo faʻapipiʻi soʻotaga nav.
O feso'ota'iga navbar nav e le'o lagolagoina i le taimi nei.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>So'oga fa'aletonu
Mo so'o se vaega o le nav (pepa po'o fualaau), fa'aopoopo .disabledmo so'oga efuefu ma leai ni a'afiaga fa'afefe .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>Fa'aaogā fa'alalolalo
Fa'aopoopo i lalo menus fa'atasi ai ma sina HTML fa'aopoopo ma le fa'amaufa'ailoga JavaScript plugin .
Fa'amau i lalo
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>Pills ma pa'u i lalo
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>Navbar
Navbar masani
Navbars o vaega meta tali e fai ma ulutala fa'asagaga mo lau talosaga po'o lau saite. E amata ona pa'u (ma e mafai ona fesuia'i) i va'aiga feavea'i ma fa'alava a'o fa'atupula'ia le lautele o le va'aiga avanoa.
O feso'ota'iga navbar nav e le'o lagolagoina i le taimi nei.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>Fa'ailoga fa'ailoga
Suia le navbar brand i lau lava ata e ala i le fesuiai o le tusitusiga mo se <img>. Talu ai o .navbar-brandloʻo i ai lona lava paʻu ma le maualuga, atonu e te manaʻomia le faʻaogaina o nisi CSS e faʻatatau i lau ata.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>Fomu
Tu'u mea o lo'o i totonu o le fomu .navbar-formmo le fa'aoga sa'o i luga o le sa'o ma le amio pa'u ile va'ai vaapiapi. Fa'aoga le fa'aoga filifiliga e filifili ai po'o fea e nofo ai i totonu o le navbar content.
A'o fa'auluuluga, .navbar-formfa'asoa le tele o ana code fa'atasi ma .form-inlineala mixin. O nisi fa'atonuga, e pei o vaega fa'aoga, e ono mana'omia ni fa'amautu lautele ina ia fa'aalia lelei i totonu o le navbar.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Fa'amau
Fa'aopoopo le .navbar-btnvasega i <button>elemene e le o nofo i totonu <form>e fa'atotonu i luga i le navbar.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>Tusitusi
Afifi manoa o tusitusiga i se elemene ma le .navbar-text, e masani lava i luga o se <p>pine mo le taʻitaʻiga saʻo ma le lanu.
<p class="navbar-text">Signed in as Mark Otto</p>So'oga e le nav
Mo tagata o lo'o fa'aogaina so'otaga masani e le oi totonu o le vaega masani o le navbar navigation, fa'aoga le .navbar-linkvasega e fa'aopoopo ai lanu talafeagai mo le fa'aletonu ma le fa'afeagai o le navbar filifiliga.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>Fa'atonuga vaega
Fa'aoga feso'ota'iga, fomu, fa'amau, po'o tusitusiga, fa'aaoga le .navbar-leftpo'o .navbar-rightvasega aoga. O vasega uma e lua o le a faʻaopoopoina se CSS faʻafefe i le itu faʻapitoa. Mo se fa'ata'ita'iga, ina ia fa'aoga feso'ota'iga nav, tu'u ese'ese <ul>fa'atasi ma le vasega fa'aoga ta'itasi.
O nei vasega o fa'afefiloi fa'aliliuga o le .pull-leftma .pull-right, ae o lo'o va'aia i fa'asalalauga fa'asalalauga mo le fa'afaigofieina o le fa'aogaina o vaega o le navbar i le tele o masini.
Fa'amau i luga
Fa'aopoopo .navbar-fixed-topma fa'aaofia se mea .containerpo'o .container-fluidle totonugalemu ma le pad navbar content.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>Fa'amau i lalo
Fa'aopoopo .navbar-fixed-bottomma fa'aaofia se mea .containerpo'o .container-fluidle totonugalemu ma le pad navbar content.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>Tu'u luga
Fausia se navbar lautele lautele e taʻavale ese ma le itulau e ala i le faʻaopoopo .navbar-static-topma aofia ai le .containerpoʻo .container-fluidle ogatotonu ma le pad navbar anotusi.
E le pei o .navbar-fixed-*vasega, e te le manaʻomia le suia o soʻo se padding i luga o le body.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>Navbar liliu
Suia foliga o le navbar e ala i le faaopoopo .navbar-inverse.
<nav class="navbar navbar-inverse">
...
</nav>O falaoamata
Fa'ailoa le tulaga o le itulau o lo'o i ai nei i totonu o se fa'atonuga fa'atautaia.
Separators e otometi lava ona faaopoopo i le CSS e ala i :beforema content.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>Itulautusi
Tuuina atu feso'ota'iga fa'akomepiuta mo lau 'upega tafa'ilagi po'o le polokalama fa'atasi ai ma le vaega o itulau fa'akomepiuta, po'o le fa'aoga faigofie o le pager .
Fa'ailoga itulau
Fa'akomepiuta faigofie fa'aosoina e 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.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>Fa'ailogaina o le vaega o le fa'ailoga
O le vaega o le pagination e tatau ona afifi i se <nav>elemene e iloa ai o se vaega faʻatautaia e suʻe ai le au faitau ma isi tekinolosi fesoasoani. E le gata i lea, talu ai o se itulau e foliga mai e sili atu ma le tasi le vaega o le faʻaogaina o loʻo i ai (e pei o le faʻasalalauga muamua i le ulutala, poʻo se faʻataʻitaʻiga i itu), e fautuaina le tuʻuina atu o se faʻamatalaga aria-labelmo le <nav>mea e atagia ai lona faʻamoemoe. Mo se faʻataʻitaʻiga, afai e faʻaogaina le vaega o le pagination e faʻatautaia ai i le va o se seti o suʻesuʻega, o se igoa talafeagai e mafai ona aria-label="Search results pages".
Malo le atoatoa ma toaga
O feso'ota'iga e mafai ona fa'atulagaina mo tulaga eseese. Fa'aoga .disabledmo so'oga e le mafai ona kiliki ma fa'ailoa .activele itulau o lo'o iai nei.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>Matou te fautua atu e te suitulaga i tua o taula po'o ua le atoatoa mo <span>, pe aveese le taula i le tulaga o aū muamua/so'o mai, e aveese ai le fa'aogaina o le kiliki a'o taofi sitaili fuafuaina.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>Tele
Mana'o e lapopo'a pe la'ititi itulau? Fa'aopoopo .pagination-lgpe .pagination-smmo isi lapopo'a.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>Pager
So'oga vave muamua ma so'otaga mo fa'atinoga faigofie fa'akomepiuta ma fa'ailoga malamalama ma sitaili. E manaia tele mo nofoaga faigofie e pei o blogs poʻo mekasini.
Fa'ata'ita'iga masani
Ona o le faaletonu, o le pager e totonugalemu sootaga.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>So'oga fa'aoga
I le isi itu, e mafai ona e fa'aogaina so'oga ta'itasi i itu:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Fa'atonu tulaga le atoatoa
O feso'ota'iga Pager e fa'aogaina fo'i le .disabledvasega fa'aoga lautele mai le fa'ailoga.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Fa'ailoga
Faataitaiga
Faataitaiga ulutala Fou
Faataitaiga ulutala Fou
Faataitaiga ulutala Fou
Faataitaiga ulutala Fou
Faataitaiga ulutala Fou
Faataitaiga ulutala Fou
<h3>Example heading <span class="label label-default">New</span></h3>Va'aiga eseese
Fa'aopoopo so'o se vasega o fa'aliliuga o lo'o ta'ua i lalo e sui ai foliga o se igoa.
Lapataiga Lapata'iga Fa'amatalaga
Manuia Tulaga Muamua
Fa'aletonu
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>E tele tone o fa'ailoga?
E mafai ona tula'i mai fa'afitauli o le fa'aliliuina pe a tele au fa'ailoga i totonu ole koneteina vaapiapi, o lo'o i ai uma lava inline-blockelemene (pei o se fa'ailoga). O le auala i lenei mea o le seti display: inline-block;. Mo fa'amatalaga ma se fa'ata'ita'iga, va'ai #13219 .
Faailoga
Fa'amatagofie mea fou pe le'i faitauina e ala i le fa'aopoopoina o se <span class="badge">i so'otaga, Bootstrap navs, ma isi mea.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>Pa'u ifo o ia lava
Afai e leai ni mea fou pe le'i faitauina, o le a na'o le pa'u o pine (e ala i le CSS's :emptyselector) pe a leai se mea o iai i totonu.
Fesoasoani cross-browser
E le pa'u lava pine ile Internet Explorer 8 ona e leai se lagolago mo le :emptytagata filifilia.
Fetuuna'i i setete gaogao nav
O lo'o iai sitaili fa'apipi'i mo le tu'uina o pine i setete fa'agaoioi i ta'avale pili.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>Jumbotron
O se vaega mama, fetuutuuna'i e mafai ona fa'alauteleina le va'aiga atoa e fa'aalia ai mea autu i luga o lau saite.
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.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>Ina ia faia le jumbotron lautele lautele, ma e aunoa ma ni tulimanu lapotopoto, tuu i fafo .containers uma ae faaopoopo i .containertotonu.
<div class="jumbotron">
<div class="container">
...
</div>
</div>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'elemene fa'aletonu small, fa'apea fo'i ma le tele o isi vaega (fa'atasi ai ma sitaili fa'aopoopo).
Fa'aa'oa'oga ulutala ulutala So'oga mo ulutala
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>Ata laititi
Fa'alautele le faiga fa'asologa o le Bootstrap ma le vaega o ata e fa'afaigofie ona fa'aali fa'asologa o ata, vitiō, tusitusiga, ma isi mea.
Afai o loʻo e suʻeina Pinterest-pei o le faʻaalia o ata o le maualuga ma / poʻo le lautele, e tatau ona e faʻaogaina se faʻapipiʻi lona tolu e pei o Masonry , Isotope , poʻo Salvattore .
Fa'ata'ita'iga masani
Ona o le faaletonu, ua mamanuina ata laiti a Bootstrap e faʻaalia ata fesoʻotaʻi ma sina faʻailoga manaʻomia.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>Tulaga fa'apitoa
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.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>Fa'aliga
Tuuina atu fe'au fa'amatalaga fa'atatau mo fa'atinoga masani a tagata fa'aoga fa'atasi ai ma le lima o fe'au mataala avanoa ma fetu'una'i.
Faataitaiga
Afifi so'o se tusitusiga ma se fa'amau fa'ate'a i totonu .alertma se tasi o vasega fa'asinoala e fa (fa'ata'ita'iga, .alert-success) mo fe'au mataala.
Leai se vasega faaletonu
Lapata'i e leai ni vasega fa'aletonu, na'o vasega fa'avae ma fa'aliliuga. Ole fa'ailoga lanu efuefu e le talafeagai, o lea e mana'omia ai lou fa'ama'otiina o se ituaiga e ala ile vasega fa'alaua'itele. Filifili mai le manuia, faʻamatalaga, lapataiga, poʻo le lamatiaga.
Malo lava! Na e faitauina ma le manuia lenei savali mataala taua.
Ulu i luga! O lenei mataala e manaʻomia lou gauai, ae e le sili ona taua.
Lapataiga! Sili ia siaki oe, e te le o lelei tele.
Oi vave! Suia ni nai mea ma toe taumafai e lafo.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>Fa'aliga fa'ate'aina
Fausia i luga o soʻo se mataala e ala i le faʻaopoopoina o se .alert-dismissibleki e filifili ma tapuni.
Manaomia le JavaScript mataala plugin
Mo le fa'atinoina atoatoa, fa'ate'aina fa'aliga, e tatau ona e fa'aogaina le fa'amaufa'ailoga JavaScript plugin .
Lapataiga! Sili ia siaki oe, e te le o lelei tele.
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>Ia mautinoa le amio sa'o i masini uma
Ia mautinoa e faʻaaoga le <button>elemene ma le data-dismiss="alert"faʻamatalaga faʻamatalaga.
So'oga i fa'aaliga
Fa'aoga le .alert-linkvasega aoga e vave tu'uina atu ai so'otaga lanu tutusa i totonu o so'o se mataala.
Malo lava! Ua e faitauina ma le manuia
lenei savali mataala taua .
Ulu i luga! O lenei
fa'aaliga e mana'omia lou fa'alogo , ae e le sili atu le taua.
Lapataiga! E sili atu le siaki oe lava, e te
le o foliga lelei tele .
Oi vave!
Suia ni nai mea ma toe taumafai e lafo.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>Pa o le alualu i luma
Tuuina atu faʻamatalaga lata mai i le alualu i luma o se faʻasologa o galuega poʻo se gaioiga faʻatasi ai ma paʻu alualu i luma faigofie ae fetuutuunai.
Fesoasoani cross-browser
Fa'aoga pa o le alualu i luma CSS3 suiga ma fa'afiafiaga e ausia ai nisi o latou aafiaga. O nei foliga e le lagolagoina i Internet Explorer 9 ma lalo ifo poʻo faʻasologa tuai o Firefox. Opera 12 e le lagolagoina fa'afiafiaga.
Faiga Fa'avae Saogalemu (CSP).
Afai o lau 'upega tafaʻilagi o loʻo i ai se Faiga Faʻavae Saogalemu (CSP) e le faʻatagaina style-src 'unsafe-inline', o le a le mafai ona e faʻaogaina styleuiga faʻaoga e seti ai le lautele o le alualu i luma e pei ona faʻaalia i a matou faʻataʻitaʻiga i lalo. O isi auala mo le setiina o le lautele e fetaui ma CSP faʻamalosi e aofia ai le faʻaaogaina o se JavaScript masani (e seti element.style.width) poʻo le faʻaaogaina o vasega CSS masani.
Fa'ata'ita'iga fa'avae
Fa'asologa o le aga'i i luma.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>Fa'ailoga
Aveese le vasega <span>faatasi .sr-onlymai totonu o le pa o le alualu i luma e faʻaalia ai se pasene iloa.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>Ina ia mautinoa o loʻo tumau pea le faʻaogaina o le igoa e tusa lava pe maualalo pasene, mafaufau e faʻaopoopo le a min-widthi le pa o le alualu i luma.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>Su'ega fa'atatau
E fa'aogaina e pa o le alualu i luma nisi o ki tutusa ma vasega mataala mo sitaili faifai pea.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>Talatala
Fa'aaogā se fa'ali'i e fai ai se fa'aa'oa'oga fa'ailoga. E le maua ile IE9 ma lalo.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>Animated
Fa'aopoopo .activei .progress-bar-stripede fa'aola ai ta'i taumatau i le agavale. E le maua ile IE9 ma lalo.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>Fa'aputu
Tuu le tele o pa i totonu e tasi .progresse faaputu ai.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>Mea fa'asalalau
Sitaili mea faitino mo le fausiaina o ituaiga eseese o vaega (pei o faʻamatalaga blog, Tweets, ma isi) o loʻo faʻaalia ai se ata agavale poʻo taumatau faʻatasi ma tusitusiga.
Fa'asalalau fa'asalalau
O fa'asalalauga fa'aletonu e fa'aalia ai se mea fa'asalalau (ata, vitiō, leo) i le agavale po'o le taumatau o se poloka anotusi.
Ulutala fa'asalalau
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Ulutala fa'asalalau
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Ulutala fa'asalalau fa'aputu
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.Ulutala fa'asalalau
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis.
Ulutala fa'asalalau
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>O vasega .pull-leftma .pull-righto lo'o iai fo'i ma sa fa'aaogaina muamua e avea o se vaega o le vaega o fa'asalalauga, ae ua le toe fa'aaogaina e pei o le v3.3.0. E tutusa lelei ma le .media-leftma .media-right, vagana ai e .media-righttatau ona tu'u pe a uma le .media-bodyi le html.
Fa'asoa fa'asalalauga
O ata po'o isi fa'asalalauga e mafai ona fa'aoga i luga, ogatotonu, po'o lalo. O le faaletonu o lo'o fa'aoga i luga.
Fa'asalalau fa'aoga pito i luga
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Fa'asalalauga fa'aogatotonu
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Fa'asalalauga fa'aoga i lalo
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>Lisi fa'asalalau
Fa'atasi ai ma sina fa'ailoga fa'aopoopo, e mafai ona e fa'aogaina fa'asalalauga i totonu o le lisi (fa'aoga mo fa'amatalaga filo po'o lisi o tala).
-
Ulutala fa'asalalau
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis.
Ulutala fa'asalalau fa'aputu
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis.
Ulutala fa'asalalau fa'aputu
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis.
Ulutala fa'asalalau fa'aputu
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>Lisi vaega
Lisi vaega o se vaega fetuutuunai ma mamana mo le faʻaalia e le gata o lisi faigofie o elemene, ae faʻalavelave faʻatasi ma mea masani.
Fa'ata'ita'iga fa'avae
Ole vaega pito sili ona taua ole lisi ole lisi e le fa'atonuina ma lisi mea, ma vasega talafeagai. Fausia i luga ma filifiliga e mulimuli mai, poʻo lau lava CSS pe a manaʻomia.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum ma eros
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>Faailoga
Fa'aopoopo le vaega o fa'ailoga i so'o se vaega o le lisi ma o le a otometi lava ona tu'u i le itu taumatau.
- 14Cras justo odio
- 2Dapibus ac facilisis in
- 1Morbi leo risus
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Mea fa'afeso'ota'i
Fa'afeso'ota'i le lisi o mea e ala i le fa'aogaina o fa'ailoga taula nai lo mea lisi (o lona uiga o se matua <div>nai lo se <ul>). Leai se mana'oga mo matua ta'ito'atasi i elemene ta'itasi.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>mea fa'amau
Lisi aitema vaega atonu o faamau nai lo mea lisi (o lona uiga foi o se matua <div>nai lo se <ul>). Leai se mana'oga mo matua ta'ito'atasi i elemene ta'itasi. Aua le fa'aogaina .btnvasega masani iinei.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>Mea ua le atoatoa
Fa'aopoopo .disabledi le .list-group-itema fa'aefuefu ina ia foliga mai e le atoatoa.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Vasega fa'atatau
Fa'aoga vasega fa'apitoa e fa'apena ai mea lisi, fa'aletonu pe feso'ota'i. E aofia ai foi ma .activele setete.
- Dapibus ac facilisis in
- Cras nofo amet nibh libero
- Porta ac consectetur ac
- Vestibulum ma eros
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>Tulaga fa'apitoa
Fa'aopoopo toetoe lava o so'o se HTML i totonu, e o'o lava i fa'alapotopotoga o lisi feso'ota'i pei o le tasi i lalo.
Lisi le ulutala mea vaega
Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.
Lisi le ulutala mea vaega
Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.
Lisi le ulutala mea vaega
Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>Panela
E ui e le o taimi uma e manaʻomia, o nisi taimi e te manaʻomia le tuʻuina o lau DOM i totonu o se pusa. Mo na tulaga, taumafai le vaega o le panel.
Fa'ata'ita'iga fa'avae
Ona o le faaletonu, o mea uma .panele fai o le faʻaogaina o se tuaoi autu ma padding e aofia ai nisi mea.
Faataitaiga faavae faavae
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>Panela ma ulutala
Fa'afaigofie ona fa'aopoopo se koneteina ulutala i lau laulau fa'atasi ma .panel-heading. E mafai fo'i ona e fa'aofiina so'o se <h1>- <h6>fa'atasi ai ma se .panel-titlevasega e fa'aopoopo i ai se ulutala na mua'i fa'avasega. Peita'i, o lapo'a fa'amau o <h1>- <h6>ua fa'asolo e .panel-heading.
Mo le valivaliina o sooga talafeagai, ia mautinoa e tuu sooga i ulutala i totonu .panel-title.
Ulutala vaega e aunoa ma se ulutala
Mea e aofia ai le laulau
Ulutala laulau
Mea e aofia ai le laulau
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>Panel ma vae
Afi faamau po o tusitusiga lona lua ile .panel-footer. Manatua e le tu'ufa'atasia ni lanu ma tuaoi pe a fa'aogaina suiga fa'atatau ona e le fa'atatau i le pito i luma.
Mea e aofia ai le laulau
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>Su'ega fa'atatau
E pei o isi vaega, faigofie ona fai se laulau e sili atu ona anoa i se anotusi patino e ala i le faʻaopoopoina o soʻo se vasega o le setete.
Ulutala laulau
Mea e aofia ai le laulau
Ulutala laulau
Mea e aofia ai le laulau
Ulutala laulau
Mea e aofia ai le laulau
Ulutala laulau
Mea e aofia ai le laulau
Ulutala laulau
Mea e aofia ai le laulau
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>Faatasi ai ma laulau
Fa'aopoopo so'o se mea e le o tuaoi .tablei totonu o se laulau mo se mamanu e le fa'aogaina. Afai ei ai se .panel-body, matou te faʻaopoopoina se tuaoi faaopoopo i le pito i luga o le laulau mo le vavaeeseina.
Ulutala vaega
O nisi o mea o lo'o i ai i le panel e le mafai ona fa'aogaina iinei. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
| # | Igoa muamua | Fa'aiu | Username |
|---|---|---|---|
| 1 | Mareko | Otto | @mdo |
| 2 | Iakopo | Thornton | @ga'o |
| 3 | Larry | le Manu |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Afai e leai se tino laulau, e alu le vaega mai le ulutala ulutala i le laulau e aunoa ma le faalavelaveina.
Ulutala vaega
| # | Igoa muamua | Fa'aiu | Username |
|---|---|---|---|
| 1 | Mareko | Otto | @mdo |
| 2 | Iakopo | Thornton | @ga'o |
| 3 | Larry | le Manu |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Faatasi ai ma vaega lisi
Fa'afaigofie ona fa'aaofia kulupu lisi lautele lautele i totonu o so'o se laulau.
Ulutala vaega
O nisi o mea o lo'o i ai i le panel e le mafai ona fa'aogaina iinei. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum ma eros
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>Fa'apipi'i tali
Fa'ataga tagata su'esu'e e su'e ata vitio po'o fa'ata'ita'iga fua e fa'atatau i le lautele o latou poloka poloka e ala i le faia o se fua fa'atatau e fa'atatau lelei i so'o se masini.
O tulafono e fa'atatau tonu ile <iframe>, <embed>, <video>, ma <object>elemene; fa'aaoga fa'apea se vasega fa'alilolilo suli .embed-responsive-itempe a e mana'o e fa'afetaui le sitaili mo isi uiga.
Fesoasoani-Fautuaga! E te le mana'omia le fa'aofiina frameborder="0"i lau <iframe>s a'o matou fa'asili lena mo oe.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>Vaieli
Fa'alelei lelei
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!
<div class="well">...</div>Vasega faitalia
Pulea padding ma tulimanu lapotopoto faatasi ai ma ni vasega se lua e suia.
Vaai, ua ou i totonu o se vaieli tele!
<div class="well well-lg">...</div>
Vaai, ua ou i totonu o se vaieli laitiiti!
<div class="well well-sm">...</div>