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

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

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>

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>

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>

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>

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 tua'oi 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 faaaogaina<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

Pe a faʻaogaina meafaigaluega poʻo popovers i elemene i totonu ole.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.

@

@example.com

$ .00

https://example.com/users/
<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.

O le fa'aogaina o navs mo fa'amaufa'ailoga e mana'omia ai le fa'apipi'i fa'apipi'i JavaScript

Mo faʻamau e iai vaega e mafai ona faʻapipiʻi, e tatau ona e faʻaogaina le laupepa JavaScript plugin . Ole fa'ailoga ole a mana'omia fo'i roleuiga fa'aopoopo ma ARIA – va'ai le fa'ailoga fa'ata'ita'i ole plugin mo nisi fa'amatalaga.

Fa'aoga navs e fa'aoga avanoa

Afai o lo'o e fa'aogaina navs e tu'uina atu ai se pa fa'atauta'iga, ia mautinoa e fa'aopoopo se role="navigation"i le koneteina matua sili ona talafeagai o le <ul>, po'o le afifiina o se <nav>elemene i le ta'avale atoa. Aua le fa'aopoopoina le matafaioi ia <ul>te ia lava, aua o le a taofia ai mai le fa'asalalauina o se lisi moni e ala i tekinolosi fesoasoani.

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>

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>

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.

Safari ma talitaliga tauamio navs

E o'o mai i le v9.1.2, ua fa'aalia e Safari se pusi lea e toe fa'alava ai lau su'esu'ega fa'alava fa'atupu fa'aletonu i totonu o le nav fa'amaonia e kilia pe a toe fa'afouina. O lenei pusa o loʻo faʻaalia foi i le faʻataʻitaʻiga nav faʻamaonia .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

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 .

Le fa'aogaina o feso'ota'iga

O lenei vasega o le a na o le suia o <a>foliga, ae le o lona faʻatinoga. Fa'aoga le JavaScript masani e tape ai so'oga iinei.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Faaopoopo i lalo menus ma sina HTML faaopoopo ma le dropdowns 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

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.

Taumasua mea i totonu

Talu ai e le iloa e Bootstrap le tele o le avanoa o mea o loʻo manaʻomia i totonu o lau navbar, atonu e te ono tulaʻi mai i faʻafitauli i mea e afifiina i se laina lona lua. Ina ia foia lenei mea, e mafai ona e:

  1. Fa'aitiitia le aofa'i po'o le lautele o mea navbar.
  2. Natia ni aitema navbar ile tele ole lau e fa'aaoga ai vasega fa'aoga tali .
  3. Suia le mea e sui ai lau navbar i le va o le pa'u ma le fa'alava. Fa'apitoa le @grid-float-breakpointfesuiaiga pe fa'aopoopo lau oe lava fa'asalalauga fesili.

Manaomia le JavaScript plugin

Afai e le atoatoa le Javascript ma e vaapiapi le va'aiga e pa'u ai le navbar, o le a le mafai ona fa'alautele le navbar ma matamata i mea i totonu o le .navbar-collapse.

O le tali navbar e manaʻomia le faʻapipiʻi faʻapipiʻi e aofia ai i lau lomiga o Bootstrap.

Suia le tulaga malepe navbar feavea'i

O le navbar e pa'u i lona va'aiga fe'avea'i tu'usa'o pe a vaapiapi le va'aiga va'ai nai lo le @grid-float-breakpoint, ma fa'alautele atu i lona va'aiga fa'alava e le o feavea'i pe a la'ititi @grid-float-breakpointle lautele o le va'aiga. Fetuuna'i le fesuiaiga lea i le Less source e pulea ai pe a pa'u/faalautele le navbar. Ole tau fa'aletonu ole 768px(le la'ititi "la'iiti" po'o le "papa" mata).

Fai navbars avanoa

Ia mautinoa e fa'aoga se <nav>elemene po'o, pe a fa'aaogaina se elemene e sili atu le lautele e pei o le <div>, fa'aopoopo se role="navigation"i luga ole navbar e fa'ailoa manino ai o se fa'ailoga mata'ina mo tagata fa'aoga tekinolosi fesoasoani.

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

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>

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'atonuga o masini feavea'i

O lo'o iai ni fa'amatalaga e fa'atatau i le fa'aogaina o fa'atonuga i totonu o elemene mautu i masini feavea'i. Va'ai la matou su'esu'ega lagolago docs mo fa'amatalaga.

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 fomu i totonu, e mafai ona e nanaina igoa e fa'aaoga ai le .sr-onlyvasega. O lo'o i ai isi auala fa'aopoopo e tu'uina atu ai se fa'ailoga mo tekinolosi fesoasoani, e pei o le aria-label, aria-labelledbypo'o le titleuiga. Afai e leai se tasi o nei mea, e mafai e le au faitau lautusi ona faʻaogaina le placeholderuiga, pe a iai, ae ia maitauina e placeholderle fautuaina le faʻaaogaina e suitulaga i isi metotia faʻailoga.

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>

Fa'aoga fa'apitoa

E pei o vasega faʻamau faʻamau , .navbar-btne mafai ona faʻaoga i luga <a>ma <input>elemene. Ae ui i lea, e .navbar-btnle tatau ona faʻaaogaina poʻo vasega faʻamau masani i <a>elemene i totonu .navbar-nav.

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>

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'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'aoga sa'o vaega e tele

Navbars i le taimi nei o loʻo i ai se tapulaʻa ma le tele o .navbar-rightvasega. Ina ia sa'o le avanoa o le anotusi, matou te fa'aogaina le pito le lelei i le .navbar-rightelemene mulimuli. A tele elemene o lo'o fa'aaogaina lena vasega, e le'o aoga nei pito e pei ona fa'amoemoeina.

Matou te toe asia lenei mea pe a mafai ona matou toe tusia lena vaega i le v4.

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>

E manaʻomia le faʻapipiʻiina o le tino

O le navbar mautu o le a ufiufi ai isi au mea, se'i vagana ua e faaopoopo paddingi le pito i luga ole <body>. Fa'ata'ita'i au lava fa'atauga pe fa'aoga la matou snippet i lalo. Motugaafa: I le faaletonu, o le navbar e 50px le maualuga.

body { padding-top: 70px; }

Ia mautinoa e aofia ai pe a uma le Bootstrap CSS autu.

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>

E manaʻomia le faʻapipiʻiina o le tino

O le navbar mautu o le a ufiufi ai isi au mea, se'i vagana ua e fa'aopoopo paddingi le pito i lalo ole <body>. Fa'ata'ita'i au lava fa'atauga pe fa'aoga la matou snippet i lalo. Motugaafa: I le faaletonu, o le navbar e 50px le maualuga.

body { padding-bottom: 70px; }

Ia mautinoa e aofia ai pe a uma le Bootstrap CSS autu.

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>

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">&laquo;</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">&raquo;</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">&laquo;</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">&laquo;</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>

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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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 <span class="badge">so'otaga, Bootstrap navs, ma isi mea.

Pusa meli42

<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

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

Aoao atili

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

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

100%x200

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.

faamau faamau

100%x200

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.

faamau faamau

100%x200

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.

faamau faamau

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

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

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</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.

Fa'aoga le .alert-linkvasega aoga e vave tu'uina atu ai so'otaga lanu tutusa i totonu o so'o se mataala.

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

60% Maea
<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.

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

0%
2%
<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.

40% Maea (manuia)
20% Maea
60% Maea (lapataiga)
80% Maea (tulaga matautia)
<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.

40% Maea (manuia)
20% Maea
60% Maea (lapataiga)
80% Maea (tulaga matautia)
<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.

45% Maea
<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.

35% Maea (manuia)
20% Maea (lapataiga)
10% Maea (tulaga matautia)
<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.

<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'avasegaina. Peita'i, o lapo'a fa'amau o <h1>- <h6>ua fa'asolo e le .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>

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