Vaaiga lautele

Ta'ito'atasi pe tuufaatasia

E mafai ona fa'apipi'i fa'apipi'i ta'ito'atasi (fa'aaogā *.jsfaila ta'itasi a Bootstrap), po'o fa'atasi uma (fa'aoga bootstrap.jspo'o le fa'aitiitiga bootstrap.min.js).

Uiga fa'amaumauga

E mafai ona e fa'aogaina uma Bootstrap plugins mama e ala i le fa'ailoga API e aunoa ma le tusiaina o se laina se tasi o le JavaScript. O le API muamua lea a Bootstrap ma e tatau ona avea ma au iloiloga muamua pe a faʻaaogaina se mea faʻapipiʻi.

Na faapea mai, i nisi tulaga atonu e manaʻomia e tape lenei galuega. O le mea lea, matou te tuʻuina atu foʻi le malosi e faʻamalo ai le faʻamatalaga uiga API e ala i le tatalaina o mea uma na tutupu i luga o le igoa o le pepa faʻatasi ma le data-api. E pei o lenei:

$(document).off('.data-api')

I le isi itu, e faʻatatau i se mea faʻapipiʻi faʻapitoa, naʻo le faʻapipiʻiina o le igoa ole plugin o se igoa avanoa faʻatasi ai ma le data-api namespace pei o lenei:

$(document).off('.alert.data-api')

API polokalame

Matou te talitonu foi e tatau ona e faʻaogaina uma Bootstrap plugins mama e ala i le JavaScript API. O API fa'alaua'itele uma e tasi, auala e mafai ona filifili, ma toe fa'afo'i le aoina na fa'atino.

$('.btn.danger').button('toggle').addClass('fat')

O metotia uma e tatau ona talia se mea e filifili ai filifiliga, se manoa e faʻatatau i se metotia faʻapitoa, poʻo leai se mea (lea e amataina ai se faʻapipiʻi ma amioga le lelei):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

E fa'aalia fo'i e fa'apipi'i ta'itasi lona faufale mata'utia i luga o se Constructormeatotino: $.fn.popover.Constructor. Afai e te manaʻo e maua se faʻataʻitaʻiga faʻapitoa faʻapipiʻi, aumai saʻo mai se elemene: $('[rel="popover"]').data('popover').

Fa'atonuga

E mafai ona e suia tulaga fa'aletonu mo se fa'apipi'i e ala i le suia o le Constructor.DEFAULTSmea fa'apipi'i:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Leai se feteenaiga

O nisi taimi e manaʻomia le faʻaogaina o Bootstrap plugins ma isi faʻavae UI. I ia tulaga, e mafai ona tupu i nisi taimi le fete'ena'iga o igoa. Afai e tupu lenei mea, e mafai ona e valaʻau .noConflicti le plugin e te manaʻo e toe faʻafoʻi le tau o.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Mea na tutupu

O le Bootstrap e tuʻuina atu mea faʻapitoa mo le tele o mea faʻapitoa a plugins. E masani lava, o nei mea e sau i se fa'ailoga fa'apitoa ma le taimi ua tuana'i - lea e fa'aosoina ai le infinitive (ex. show) i le amataga o se mea na tupu, ma lona fa'ailoga participle ua mavae (ex. shown) e fa'aosoina pe a mae'a se gaioiga.

E pei o le 3.0.0, o mea uma a Bootstrap o loʻo faʻaigoaina igoa.

O mea fa'apitoa uma e maua ai preventDefaultgaluega fa'atino. O lenei mea e maua ai le malosi e taofi ai le faʻatinoina o se gaioiga aʻo leʻi amataina.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Sanitizer

Tooltips ma Popovers e fa'aogaina le matou fa'amama fa'afale e fa'amama ai filifiliga e talia HTML.

O le tau fa'aletonu whiteListo mea nei:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Afai e te manaʻo e faʻaopoopo ni tau fou i lenei faaletonu whiteListe mafai ona e faia mea nei:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Afai e te manaʻo e faʻamalo le matou sanitizer ona e te manaʻo e faʻaoga se faletusi faʻapitoa, mo se faʻataʻitaʻiga DOMpurify , e tatau ona e faia mea nei:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

Numera fa'aliliuga

E mafai ona maua le fa'asologa o mea ta'itasi a Bootstrap's jQuery plugins e ala i le VERSIONmeatotino a le faufale o le plugin. Mo se faʻataʻitaʻiga, mo le meafaigaluega faʻapipiʻi:

$.fn.tooltip.Constructor.VERSION // => "3.4.1"

Leai ni fa'aletonu fa'apitoa pe a fa'aletonu le JavaScript

O plugini a Bootstrap e le toe fo'i fa'apitoa pe a fa'aletonu le JavaScript. Afai e te popole e uiga i le tagata faʻaoga i lenei tulaga, faʻaaoga <noscript>e faʻamatala ai le tulaga (ma pe faʻafefea ona toe faʻaogaina le JavaScript) i au tagata faʻaoga, ma / pe faʻaopoopo au lava faʻaleaga masani.

Transitions transition.js

E uiga i suiga

Mo a'afiaga faigofie o suiga, transition.jsfa'atasi ma isi faila JS. Afai o loʻo e faʻaaogaina le tuʻufaʻatasia (poʻo le faʻaititia) bootstrap.js, e leai se manaʻoga e aofia ai lenei mea-ua uma ona iai.

O a mea i totonu

Transition.js ose fesoasoani fa'avae mo transitionEndmea e tutupu fa'apea fo'i ma le CSS transition emulator. O lo'o fa'aogaina e isi fa'apipi'i e siaki ai le lagolago mo suiga o le CSS ma pu'e fa'aoga fa'atautau.

Fa'aleaogaina suiga

O suiga e mafai ona fa'aletonu i le lalolagi atoa e ala i le fa'aogaina o le snippet JavaScript o lo'o mulimuli mai, lea e tatau ona o'o mai pe a mae'a ona utaina transition.js(po'o bootstrap.jsle bootstrap.min.js, pe a o'o i ai le tulaga):

$.support.transition = false

Modals modal.js

O auala e fa'afaigofie, ae fetu'una'i, fa'asalalauga fa'atasi ma le fa'aitiitiga mana'omia ma fa'aletonu atamai.

Ona o le auala e faʻamatalaina ai e le HTML5 ona faʻaoga, o le autofocusuiga HTML e leai se aoga i Bootstrap modals. Ina ia ausia le aafiaga tutusa, faʻaaoga nisi JavaScript masani:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Faataitaiga

Fa'ata'ita'iga tumau

Se fa'atusa fa'atusa fa'atasi ai ma ulutala, tino, ma se seti o gaioiga i le vae.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Live demo

Su'e se fa'aoga e ala ile JavaScript ile kilikiina ole ki lalo. O le a fa'ase'e ifo i lalo ma mou atu mai le pito i luga o le itulau.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Fa'ailoga tetele

E lua lapopo'a filifiliga, e maua e ala i vasega modifier e tu'u i luga o se .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Aveese le animation

Mo auala e foliga mai nai lo le mou atu e matamata ai, aveese le .fadevasega mai lau faʻailoga faʻailoga.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Fa'aaogāina ole faiga fa'ata

Ina ia fa'aoga lelei le faiga fa'asologa o Bootstrap i totonu o se fa'ata'ita'iga, na'o le ofaga .rowi totonu o le .modal-bodyfa'aoga ona fa'aaoga lea o vasega masani fa'asologa.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Fesuia'i mea fa'avae fa'avae ile fa'amau fa'aoso

E i ai ni fa'amau fa'amau e fa'aosoina uma le faiga e tasi, na'o sina mea e 'ese'ese ai? Fa'aoga event.relatedTargetma uiga HTMLdata-* (atonu e ala i le jQuery ) e fesuia'i mea o lo'o i totonu o le modal fa'atatau i le fa'amau na kiliki. Va'ai le Modal Events docs mo fa'amatalaga i luga relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Fa'aoga

O le modal plugin e fesuia'i au mea natia pe a mana'omia, e ala i fa'amatalaga uiga po'o le JavaScript. E fa'aopoopoina fo'i .modal-openi le <body>fa'ato'a fa'aletonu le ta'avale amio ma fa'atupuina se .modal-backdrope tu'uina atu ai se vaega kiliki mo le fa'ate'aina o fa'aaliga fa'aalia pe a kiliki i fafo atu o le fa'ailoga.

E ala i fa'amaumauga uiga

Fa'agaoioia se faiga e aunoa ma le tusia o le JavaScript. Seti data-toggle="modal"i luga o se elemene e pulea, pei o se faamau, faatasi ai ma se data-target="#foo"po href="#foo"o le taulaʻi i se faiga faʻapitoa e fesuiaʻi.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

E ala i le JavaScript

Valaau se modal ma id myModalma se laina e tasi o le JavaScript:

$('#myModal').modal(options)

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Metotia

.modal(options)

Fa'agaoioia lau anotusi e fai ma fa'ata'ita'iga. Talia se filifiliga faitalia object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Su'e ma le lima se faiga. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le modal (fa'atusa a'o le'i tupu le shown.bs.modalpo'o le hidden.bs.modalmea na tupu).

$('#myModal').modal('toggle')

.modal('show')

Tatala ma le lima se auala. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni le modal (fa'atusa a'o le'i tupu le shown.bs.modalmea na tupu).

$('#myModal').modal('show')

.modal('hide')

Natia ma le lima se auala. Toe fo'i i le tagata vala'au a'o le'i natia moni le modal (fa'atusa a'o le'i tupu le hidden.bs.modalmea na tupu).

$('#myModal').modal('hide')

.modal('handleUpdate')

Toe fetu'una'i le tulaga o le modal e fa'asaga i se ta'avale pe a aliali mai se tasi, o le a oso ai le auala i le agavale.

E na'o le mana'omia pe a suia le maualuga o le auala a'o tatala.

$('#myModal').modal('handleUpdate')

Mea na tutupu

O le vasega fa'apitoa a Bootstrap o lo'o fa'aalia ai ni nai mea na tutupu mo le fa'aogaina o galuega fa'atino.

O mea faʻapitoa uma e faʻaumatia i le modal lava ia (ie i le <div class="modal">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Pa'u i lalo dropdown.js

Faataitaiga

Fa'aopoopo i lalo menus i le toetoe lava o so'o se mea fa'atasi ma lenei fa'aoga faigofie, e aofia ai le navbar, tabs, ma pills.

I totonu o se navbar

I totonu o fualaau

Fa'aoga

E ala i fa'amatalaga uiga po'o le JavaScript, o le pa'ū fa'apipi'i fa'apipi'i mea natia (pa'u i lalo menus) e ala i le fa'anofoina o le .openvasega i le lisi o matua.

I luga o masini feaveaʻi, o le tatalaina o se pa'ū faʻaopoopo faʻaopoopo a .dropdown-backdrope fai ma tapuni e tapuni ai menus pa'ū pe a tapuni i fafo o le lisi, o se manaʻoga mo le lagolago iOS talafeagai. O lona uiga o le fesuia'i mai se lisi fa'atulalo tatala i se isi fa'ailoga fa'alalo e mana'omia ai se tap fa'aopoopo ile telefoni feavea'i.

Fa'aaliga: O le data-toggle="dropdown"uiga e fa'alagolago i ai mo le tapunia o menus pa'u i lalo i se tulaga o talosaga, o se manatu lelei le fa'aaogaina i taimi uma.

E ala i fa'amaumauga uiga

Fa'aopoopo data-toggle="dropdown"i se so'oga po'o se fa'amau e fa'asolo i lalo.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Ina ia fa'atumauina URL ma fa'amau so'otaga, fa'aoga le data-targetuiga nai lo le href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

E ala i le JavaScript

Valaau le to'alalo e ala i le JavaScript:

$('.dropdown-toggle').dropdown()

Filifiliga

Leai

Metotia

$().dropdown('toggle')

Fa'asolo i lalo le lisi o le navbar ua tu'uina atu po'o le fa'atautaiga fa'apipi'i.

Mea na tutupu

O mea uma e pa'u i lalo e fa'ao i le .dropdown-menu'elemene matua.

O mea uma e pa'u i lalo o lo'o i ai se relatedTargetmea totino, o lona tau o le elemene taula fa'afefe.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Faataitaiga i le navbar

O le ScrollSpy plugin e mo le fa'afouina otometi fa'atatau i luga ole laiga e fa'atatau ile tulaga ta'ai. Fa'asolo le vaega i lalo o le navbar ma matamata le suiga o le vasega. O le a fa'amaninoina fo'i le fa'ailoga pito i lalo.

Fa'aoga

Mana'omia le fa'atulagaina o tulaga

Po o le a lava le faiga o le faatinoga, scrollspy e manaʻomia le faʻaogaina o position: relative;le elemene o loʻo e vaʻavaʻai i ai. I le tele o tulaga o le <body>. Pe a taʻavale i elemene e ese mai i le <body>, ia mautinoa e iai se heightseti ma overflow-y: scroll;faʻaoga.

E ala i fa'amaumauga uiga

Ina ia fa'afaigofie ona fa'aopoopo le amio ta'avale i lau ta'avale pito i luga, fa'aopoopo data-spy="scroll"i le elemene e te mana'o e sipai ai (sili ona masani o le <body>). Ona faʻaopoopo lea o le data-targetuiga faʻatasi ma le ID poʻo le vasega o le matua elemene o soʻo se .navvaega Bootstrap.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

E ala i le JavaScript

A uma ona faʻaopoopo position: relative;i lau CSS, valaʻau le scrollspy e ala i le JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Metotia

.scrollspy('refresh')

A faʻaaoga le scrollspy faʻatasi ma le faʻaopoopoina poʻo le aveesea o elemene mai le DOM, e tatau ona e valaʻau le auala faʻafouina e pei o lea:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-offset="".

Mea na tutupu

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Togglable tabs tab.js

Fa'ata'ita'iga tabs

Fa'aopoopo le fa'agaioiga fa'agaoioiga fa'avavevave ma fa'amalosi i le fa'aliliuina atu i fa'amalama o mea fa'apitonu'u, e o'o lava ile fa'aulu i lalo menus. E le lagolagoina fa'amau fa'aputuga.

Fa'aoga

Fa'aaga tabbable tabs e ala i le JavaScript (ta'itasi ta'itasi e mana'omia ona fa'agaoioia ta'ito'atasi):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

E mafai ona e fa'agaoioia ta'iala ta'itasi i le tele o auala:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Fa'ailoga

E mafai ona e fa'agaoioia se fa'ailoga po'o se pill navigation e aunoa ma le tusiaina o so'o se JavaScript i le na'o le fa'ama'oti data-toggle="tab"po'o data-toggle="pill"luga o se elemene. O le fa'aopoopoina o le navma nav-tabsvasega i le fa'ailoga o le ula fa'aaoga ai le Bootstrap tab styling , a'o fa'aopoopoina le navma nav-pillsvasega o le a fa'aogaina ai le styling pili .

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Aafiaga mou

Ina ia fa'agesegese fa'amau i totonu, fa'aopoopo .fadei .tab-pane. E tatau fo'i .ini le fa'ailoga muamua ona fa'aalia le mea muamua.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Metotia

$().tab

Fa'aagaoioia se fa'ailoga elemene ma mea o lo'o i totonu. O le Tab e tatau ona i ai se data-targetpoʻo se hreffaʻatatau i se pusa pusa i le DOM. I faʻataʻitaʻiga o loʻo i luga, o laupepa o le <a>s ma data-toggle="tab"uiga.

.tab('show')

Filifili le lisi o loʻo tuʻuina atu ma faʻaalia ai mea e fesoʻotaʻi ai. So'o se isi lava fa'amau na filifilia muamua e le'i filifilia ma o lo'o natia mea fa'atasi. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni le fa'ailoga (fa'atusa a'o le'i tupu le shown.bs.tabmea na tupu).

$('#someTab').tab('show')

Mea na tutupu

Pe a fa'aalia se lisi fou, e mu mea na tutupu i le fa'asologa lenei:

1. hide.bs.tab(i luga o le lisi o lo'o galue nei)
2. show.bs.tab(i luga o le faʻailoga o le a faʻaalia)
3. hidden.bs.tab(i luga o le lisi galue muamua, tutusa ma le hide.bs.tabmea na tupu)
4. shown.bs.tab(i luga o le faʻailoga fou faatoa faʻaalia, tutusa ma le show.bs.tabmea na tupu)

Afai e le'i fa'agaoioi le tab, o le a le tapeina le hide.bs.tabma mea tutupu.hidden.bs.tab

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Musuia e le sili jQuery.tipsy plugin tusia e Jason Frame; Tooltips o se fa'afouga fou, e le fa'alagolago i ata, fa'aoga le CSS3 mo fa'afiafiaga, ma fa'amaumauga-uiga mo le teuina o suafa fa'apitonu'u.

E le fa'aalia lava ni mea faigaluega e leai ni fa'ailoga umi.

Faataitaiga

Fa'apa i luga o so'oga o lo'o i lalo e va'ai i mea faigaluega:

Fa'atonu meafaigaluega

E fa filifiliga o lo'o avanoa: luga, taumatau, pito i lalo, ma agavale fa'aoga.

Fa ituala

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Fa'aoga

O le tooltip plugin e fa'atupuina ai mea ma fa'ailoga pe a mana'omia, ma e le mafai ona tu'u meafaigaluega pe a mae'a a latou elemene fa'aoso.

Fa'aoso le mea faigaluega e ala ile JavaScript:

$('#example').tooltip(options)

Fa'ailoga

Ole fa'ailoga mana'omia mo se mea faigaluega e na'o se datauiga ma titleluga ole elemene HTML e te mana'o e maua se meafaigaluega. O le faʻailoga faʻatupuina o se meafaigaluega e faigofie tele, e ui lava e manaʻomia se tulaga (e ala i le faaletonu, seti i tople plugin).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-animation="".

Metotia

$().tooltip(options)

Fa'apipi'i se tu'u fa'amatalaga meafaigaluega i se aoina elemene.

.tooltip('show')

Fa'aalia le mea faigaluega o se elemene. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni mai le mea faigaluega (fa'atusa a'o le'i tupu le shown.bs.tooltipmea na tupu). E manatu lenei mea o se "manu'al" faʻaosoina o le meafaigaluega. E le fa'aalia lava ni mea faigaluega e leai ni fa'ailoga umi.

$('#element').tooltip('show')

.tooltip('hide')

Natia le mea faigaluega o se elemene. Toe fo'i atu i le tagata vala'au a'o le'i natia le mea faigaluega (fa'atusa a'o le'i tupu le hidden.bs.tooltipmea na tupu). E manatu lenei mea o se "manu'al" faʻaosoina o le meafaigaluega.

$('#element').tooltip('hide')

.tooltip('toggle')

Su'e le pito meafaigaluega a se elemene. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le mea faigaluega (fa'atusa a'o le'i tupu le shown.bs.tooltippo'o le hidden.bs.tooltipmea na tupu). E manatu lenei mea o se "manu'al" faʻaosoina o le meafaigaluega.

$('#element').tooltip('toggle')

.tooltip('destroy')

Natia ma fa'aleaga le pito meafaigaluega a se elemene. Tooltips e fa'aogaina le tu'uina atu (lea e faia i le fa'aogaina o le selectorfilifiliga ) e le mafai ona fa'aumatia ta'ito'atasi i elemene fa'aoso tupuaga.

$('#element').tooltip('destroy')

Mea na tutupu

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Fa'aopoopo ni fa'aputuga laiti o mea, pei o i luga ole iPad, i so'o se elemene mo fa'amatalaga lona lua o fale.

Popovers o latou igoa ma anotusi e leai se umi e le fa'aalia.

$(function () {
  $('[data-toggle="popover"]').popover()
})

Faataitaiga

Fa'ato'a fa'apipi'i

E fa filifiliga o lo'o avanoa: luga, taumatau, pito i lalo, ma agavale fa'aoga.

Live demo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Fa ituala

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Fa'ate'a ile isi kiliki

Fa'aaoga le focusfa'aoso e fa'ate'a ai popovers i le isi kiliki e faia e le tagata fa'aoga.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Fa'aoga

Fa'amalo popovers e ala i le JavaScript:

$('#example').popover(options)

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-animation="".

Metotia

$().popover(options)

E amata popovers mo se aoina elemene.

.popover('show')

Fa'aalia le popover o se elemene. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le popover (fa'atusa a'o le'i tupu le shown.bs.popovermea na tupu). E manatu lenei mea o se "manual" faʻaosoina le popover. Popovers o latou igoa ma anotusi e leai se umi e le fa'aalia.

$('#element').popover('show')

.popover('hide')

Natia le popover o se elemene. Toe fo'i i le tagata vala'au a'o le'i natia le popover (fa'atusa a'o le'i tupu le hidden.bs.popovermea na tupu). E manatu lenei mea o se "manual" faʻaosoina le popover.

$('#element').popover('hide')

.popover('toggle')

Su'e le fa'apipi'i o se elemene. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le popover (fa'atusa a'o le'i tupu le shown.bs.popoverpo'o le hidden.bs.popovermea na tupu). E manatu lenei mea o se "manual" faʻaosoina le popover.

$('#element').popover('toggle')

.popover('destroy')

Natia ma fa'aumatia le popover o se elemene. Popovers e fa'aogaina le tu'uina atu (lea e faia e fa'aaoga ai le selectorfilifiliga ) e le mafai ona fa'aumatia ta'ito'atasi i elemene fa'aoso tupuaga.

$('#element').popover('destroy')

Mea na tutupu

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Fa'ailoa savali alert.js

Faataitaiga mataala

Fa'aopoopo galuega fa'ate'a i fe'au mataala uma i lenei fa'apipi'i.

A fa'aaoga se .closefaamau, e tatau ona avea ma tama muamua o le .alert-dismissiblema e leai se anotusi e mafai ona muamua mai i le fa'ailoga.

Fa'aoga

Na'o le fa'aopoopo data-dismiss="alert"i lau ki tapuni e otometi ai ona tu'uina atu se fa'agaioiga vavalalata mataalia. O le tapunia o se mataala e aveese ai mai le DOM.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Ina ia fa'aoga lau fa'aaliga fa'afiafia pe a tapuni, ia mautinoa o lo'o iai a latou vasega .fadema .inua uma ona fa'aoga ia i latou.

Metotia

$().alert()

Faia se mataala e fa'alogo mo kiliki mea e tutupu i elemene tupuaga o lo'o iai le data-dismiss="alert"uiga. (E le manaʻomia pe a faʻaaogaina le faʻamatalaga-autometi a le data-api.)

$().alert('close')

Tapuni se mataala e ala i le aveese mai le DOM. Afai o le .fadema .invasega o loʻo i ai i luga o le elemene, o le mataala o le a mou ese atu aʻo leʻi aveesea.

Mea na tutupu

O le plugin alert a Bootstrap e fa'aalia ai ni nai mea na tutupu mo le fa'aogaina i galuega mataala.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Fa'amau button.js

Fai atili i fa'amau. Fa'amalo fa'aigoa po'o le faia o vaega o fa'amau mo nisi vaega e pei o meafaigaluega.

Fa'atutonu

Fa'aopoopo data-loading-text="Loading..."e fa'aoga se tulaga o le utaina i luga o se ki.

O lenei vaega ua le toe faaaogaina talu mai le v3.3.5 ma ua aveese i le v4.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Kilo tasi

Fa'aopoopo data-toggle="button"e fa'agaoioi ai le sosolo i luga o le ki se tasi.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Pusa siaki / Leitio

Fa'aopoopo data-toggle="buttons"i se .btn-groupatigipusa o lo'o i ai po'o mea fa'aoga leitio ina ia mafai ai ona fesuia'i i latou sitaili.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Radio 3
  </label>
</div>

Metotia

$().button('toggle')

Togi le tulaga tulei. Tu'u atu i le ki le foliga mai ua fa'agaoioia.

$().button('reset')

Toe setiina le tulaga fa'amau - fesuia'i tusitusiga i tusitusiga muamua. O lenei metotia e le fetaui ma toe fo'i mai a'o le'i mae'a le toe setiina.

$().button(string)

Fa'afesuia'i tusitusiga i so'o se fa'amatalaga fa'amatalaina tulaga o tusitusiga.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Pa'u collapse.js

Fa'apipi'i fetu'una'i e fa'aogaina ai ni nai vasega mo le fa'agasologa faigofie o amioga.

Faataitaiga

Kiliki fa'amau i lalo e fa'aali ma nana se isi elemene e ala i suiga o vasega:

• .collapsenatia mea e aofia ai
• .collapsinge fa'aaogaina i taimi o suiga
• .collapse.infa'aalia anotusi

E mafai ona e faʻaogaina se fesoʻotaʻiga ma le hrefuiga, poʻo se faʻamau ma le data-targetuiga. I tulaga uma e lua, data-toggle="collapse"e manaʻomia.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Fa'ata'ita'iga akordion

Fa'alautele le amio fa'aletonu e fai ai se akordion ma le vaega o le laulau.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

E mafai fo'i ona fesuia'i le .panel-bodys ma .list-grouple s.

Fa'aoga

O le pa'u fa'apipi'i fa'aoga ni nai vasega e taulima ai le si'i mamafa:

• .collapsenana le anotusi
• .collapse.infa'aalia le anotusi
• .collapsinge faaopoopo pe a amata le suiga, ma aveese pe a uma

O nei vasega e mafai ona maua i component-animations.less.

E ala i fa'amaumauga uiga

Na'o le fa'aopoopo data-toggle="collapse"ma le a data-targeti le elemene e otometi ona tu'uina atu le fa'atonuga o se elemene e mafai ona pa'u. E data-targettalia e le uiga le CSS filifilia e fa'aoga le pa'u i. Ia mautinoa e faaopoopo le vasega collapsei le elemene e mafai ona pa'u. Afai e te mana'o e le'i tatalaina, fa'aopoopo le vasega fa'aopoopo in.

Ina ia fa'aopoopo le pulega vaega e pei o le accordion i se pule e mafai ona pa'u, fa'aopoopo le uiga fa'amaumauga data-parent="#selector". Va'ai i le demo e va'ai ai i lenei gaioiga.

E ala i le JavaScript

Fa'aaga ma le lima ile:

$('.collapse').collapse()

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-parent="".

Metotia

.collapse(options)

Fa'aagaoioia lau anotusi o se elemene e mafai ona pa'u. Talia se filifiliga faitalia object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Su'e se elemene e mafai ona pa'u e fa'aali pe natia. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le shown.bs.collapsepo'o le hidden.bs.collapsemea na tupu).

.collapse('show')

Fa'aalia se elemene e mafai ona pa'u. Toe fo'i i le tagata vala'au a'o le'i fa'aalia moni le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le shown.bs.collapsemea na tupu).

.collapse('hide')

Natia se elemene e mafai ona pa'u. Toe fo'i i le tagata vala'au a'o le'i natia moni le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le hidden.bs.collapsemea na tupu).

Mea na tutupu

O le vasega pa'u a Bootstrap o lo'o fa'aalia ni nai mea na tutupu mo le fa'aogaina o galuega fa'aletonu.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

O se vaega fa'ata'ita'i mo le tietie uila i elemene, pei o se carousel. E le lagolagoina carousels.

Faataitaiga

Muamua Sosoo ai

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Fa'aupuga e filifili ai

Fa'aopoopo fa'amatalaga i au fa'ase'e faigofie ma le .carousel-captionelemene i totonu o so'o se .item. Tu'u toetoe lava o so'o se HTML e filifili i totonu iina ma o le a otometi lava ona fa'aoga ma fa'atulaga.

Fa'ailoga fa'ase'e muamua

Nulla vitae elit libero, a pharetra augue mollis interdum.

Fa'ailoga fa'asolo lona lua

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fa'ailoga fa'asolo lona tolu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Muamua Sosoo ai

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Fa'aoga

Carousels tele

E mana'omia e Carousels le fa'aogaina o se idatigipusa pito i fafo (le .carousel) mo fa'atonuga o ta'avale e fa'atino lelei. Pe a fa'aopoopoina le tele o ta'avale, po'o le suia o se ta'avale id, ia mautinoa e fa'afou fa'atonuga talafeagai.

E ala i fa'amaumauga uiga

Fa'aoga uiga fa'amaumauga e faigofie ai ona pulea le tulaga o le carousel. data-slidetalia upu autu prevpo'o next, lea e suia ai le tulaga fa'ase'e fa'atatau i lona tulaga o iai nei. I le isi itu, fa'aaoga data-slide-toe pasi ai se fa'ailoga fa'ase'e mata'utia i le carousel data-slide-to="2", lea e sui ai le tulaga fa'ase'e i se fa'ailoga fa'apitoa e amata i le 0.

O le data-ride="carousel"uiga e fa'aoga e fa'ailoga ai se carousel e fa'aola e amata ile utaina o itulau. E le mafai ona fa'aogaina fa'atasi ma (e le toe mana'omia) fa'amatagofie le JavaScript o le carousel e tasi.

E ala i le JavaScript

Valaau ma le lima le carousel ma:

$('.carousel').carousel()

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-interval="".

Metotia

.carousel(options)

Fa'amataina le carousel i se filifiliga e filifili objectma amata ai le uila i mea.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Taamilomilo i aitema carousel mai le agavale i le taumatau.

.carousel('pause')

Taofi le carousel mai le tietie uila i aitema.

.carousel(number)

Ta'amilomilo le carousel i se fa'avaa fa'apitoa (fa'avae 0, tutusa ma se fa'asologa).

.carousel('prev')

Ta'amilosaga i le mea muamua.

.carousel('next')

Ta'amilosaga i le isi mea.

Mea na tutupu

O le vasega carousel a Bootstrap o lo'o fa'aalia ai mea e lua mo le fa'aogaina o galuega fa'aoga.

O mea tutupu uma e lua e iai mea fa'aopoopo nei:

• direction: Le itu o lo'o fa'ase'e ai le carousel ( "left"po'o le "right").
• relatedTarget: O le elemene DOM o loʻo faʻasolo i totonu o le mea o loʻo galue.

O mea uma e tutupu i le carousel e fa'amu i le carousel lava ia (ie i le <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Fa'apipi'i affix.js

Faataitaiga

O le fa'apipi'i fa'apipi'i e ki position: fixed;ma tape, fa'aa'oa'o le a'afiaga o lo'o maua i le position: sticky;. O le subnavigation i le itu taumatau o se faʻaaliga ola o le faʻapipiʻi faʻapipiʻi.

Fa'aoga

Fa'aoga le fa'apipi'i fa'apipi'i e ala i fa'amatalaga uiga po'o le lima ma lau lava JavaScript. I tulaga uma e lua, e tatau ona e tuʻuina atu le CSS mo le faʻatulagaina ma le lautele o lau mea faʻapipiʻi.

Manatua: Aua le faʻaogaina le faʻapipiʻi faʻapipiʻi i luga o se elemene o loʻo i totonu o se elemene faʻatulagaina, e pei o se koluma toso pe tuleia, ona o se pusa faʻaalia Safari .

Tulaga e ala ile CSS

O le fa'apipi'i fa'apipi'i e fesuia'i i le va o vasega se tolu, e ta'itasi e fai ma sui o se setete patino: .affix, .affix-top, ma .affix-bottom. E tatau ona e tu'uina atu sitaili, se'i vagana ai le position: fixed;on .affix, mo nei vasega oe lava (tuto'atasi mai lenei fa'apipi'i) e fa'atautaia ai tulaga tonu.

O le auala lenei e galue ai le affix plugin:

1. Ina ia amata, o le plugin faʻaopoopo .affix-tope faʻaalia ai le elemene o loʻo i lona tulaga pito i luga. I le taimi nei e leai se CSS tulaga e manaʻomia.
2. O le solo i tua o le elemene e te manaʻo e faʻapipiʻi e tatau ona faʻaosoina le faʻapipiʻi moni. O le mea lea .affixe sui ai .affix-topma seti position: fixed;(tuuina mai e Bootstrap's CSS).
3. Afai e faʻamalamalamaina se pito i lalo, o le taʻavale i tua atu e tatau ona suia .affixi le .affix-bottom. Talu ai o offsets e filifili, o le setiina e mana'omia ai oe e seti le CSS talafeagai. I lenei tulaga, faaopoopo position: absolute;pe a manaʻomia. O lo'o fa'aogaina e le fa'apipi'i le fa'amatalaga fa'amatalaga po'o le filifiliga JavaScript e iloa ai le mea e tu'u ai le elemene mai iina.

Mulimuli i laasaga o loʻo i luga e seti ai lau CSS mo se tasi o filifiliga faʻaoga i lalo.

E ala i fa'amaumauga uiga

Ina ia faigofie ona faʻapipiʻi amioga i soʻo se elemene, naʻo le faʻaopoopo data-spy="affix"i le elemene e te manaʻo e sipai ai. Fa'aoga offsets e fa'amatala ai le taimi e sui ai le pine o se elemene.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

E ala i le JavaScript

Valaau le affix plugin e ala i le JavaScript:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-offset-top="200".

Metotia

.affix(options)

Fa'agaoioi lau anotusi e pei o mea fa'apipi'i. Talia se filifiliga faitalia object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Toe fuaina le tulaga o le fa'apipi'i e fa'atatau i le fua, tulaga, ma le tulaga ta'ai o elemene talafeagai. O le .affix, .affix-top, ma .affix-bottomvasega e fa'aopoopo i pe aveese mai mea fa'apipi'i e tusa ai ma le setete fou. E mana'omia le vala'au lea i so'o se taimi e suia ai le tele o mea fa'apipi'i po'o le elemene fa'atatau, ina ia mautinoa le tu'u sa'o o mea fa'apipi'i.

$('#myAffix').affix('checkPosition')

Mea na tutupu

O le fa'apipi'i fa'apipi'i a Bootstrap e fa'aalia ai ni nai mea na tutupu mo le fa'aogaina o galuega fa'apipi'i.