Kpɔɖeŋunyagbɔgblɔ

Ame ɖekaɖekawo alo woƒo ƒu

Woateŋu ade plugins ɖekaɖeka (azã Bootstrap ƒe *.jsfaɛl ɖekaɖekawo), alo wo katã zi ɖeka (azã bootstrap.jsalo esiwo woɖe ɖe vovo bootstrap.min.js).

Nyatakaka ƒe nɔnɔmewo

Àteŋu azã Bootstrap ƒe kpeɖeŋutɔwo katã to dzeside API la dzi ko evɔ maŋlɔ JavaScript ƒe fli ɖeka pɛ hã o. Esia nye Bootstrap ƒe API gbãtɔ eye ele be wòanye wò susu gbãtɔ ne èle plugin zãm.

Ne míegblɔe alea la, le nɔnɔme aɖewo me la, ate ŋu anyo be woatsi dɔwɔnu sia. Eyata míenaa ŋutete hã be míawɔ nyatakaka ƒe nɔnɔme API la nuwɔametɔe to nudzɔdzɔ siwo katã le nuŋlɔɖi si ƒe ŋkɔwo le dometsotso me kple data-api. Esia le abe alea ene:

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

Alo, be nàɖo taɖodzinu na plugin aɖe koŋ la, ɖeko nàde plugin la ƒe ŋkɔ abe ŋkɔteƒe ene kpe ɖe data-api ŋkɔteƒe ŋu abe esia ene:

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

Ðoɖowɔɖi ƒe API

Míexɔe se hã be ele be nàte ŋu azã Bootstrap ƒe kpeɖeŋutɔwo katã to JavaScript API dzi ko. Dutoƒo APIwo katã nye mɔnu ɖeka, siwo ŋu kɔsɔkɔsɔ le, eye wogbugbɔa nuƒoƒoƒu si dzi wowɔ dɔ ɖo la trɔna.

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

Ele be mɔnuwo katã naxɔ tiatiawɔblɔɖe ƒe nu, ka si woɖo taɖodzinu na mɔnu aɖe koŋ, alo naneke o (si dzea kpeɖeŋutɔ gɔme kple nuwɔna si woɖo ɖi):

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

Plugin ɖesiaɖe hã ɖea eƒe raw constructor ɖe go le Constructornunɔamesi aɖe dzi: $.fn.popover.Constructor. Ne èdi be yeaxɔ plugin ƒe kpɔɖeŋu aɖe koŋ la, xɔe tẽ tso element aɖe me: $('[rel="popover"]').data('popover').

Ðoɖo siwo woɖo ɖi xoxo

Àteŋu atrɔ ɖoɖo siwo woɖo ɖi na plugin to asitɔtrɔ le plugin ƒe Constructor.DEFAULTSnu ŋu:

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

Masɔmasɔ aɖeke meli o

Ɣeaɖewoɣi la, ehiãna be woazã Bootstrap ƒe kpeɖeŋutɔwo kple UI ƒe ɖoɖo bubuwo. Le nɔnɔme siawo me la, ŋkɔteƒewo ƒe gododo ate ŋu adzɔ ɣeaɖewoɣi. Ne esia dzɔ la, àte ŋu ayɔ .noConflictplugin si nèdi be yeatrɔ asi le eƒe asixɔxɔ ŋu.

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

Nudzɔdzɔwo

Bootstrap naa nudzɔdzɔ tɔxɛwo na plugins akpa gãtɔ ƒe nuwɔna tɔxɛwo. Zi geɖe la, esiawo va le nyagbemanɔsitɔ kple akpaɖekedzimademade ƒe nɔnɔme si va yi me - afisi wodzea nyagbemanɔsitɔ (ex. show) gɔme le nudzɔdzɔ aɖe ƒe gɔmedzedze, eye eƒe akpaɖekedzimademade ƒe nɔnɔme si va yi (ex. shown) dzea egɔme le nuwɔna aɖe ƒe nuwuwu.

Tso 3.0.0 dzi la, Bootstrap nudzɔdzɔwo katã ƒe ŋkɔwo le dometsotso me.

Nudzɔdzɔ siwo katã me seɖoƒe meli na o naa preventDefaultdɔwɔwɔ. Esia naa ŋutete be woatɔ te nuwɔna aɖe wɔwɔ hafi wòadze egɔme.

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

Atike si wotsɔna klɔa nu ŋu

Dɔwɔnu ƒe aɖaŋuɖoɖowo kple Popovers zãa míaƒe dzadzɛnyenye si wotu ɖe eme tsɔ kɔa tiatia siwo xɔa HTML la ŋu.

Asixɔxɔ si woɖo ɖi whiteListlae nye esiawo:

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: []
}

Ne èdi be yeatsɔ asixɔxɔ yeyewo akpe ɖe default sia ŋu la whiteList, àteŋu awɔ nusiwo gbɔna:

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)

Ne èdi be yeato míaƒe dzadzɛnyenyemɔ̃a ŋu le esi nèdi be yeazã agbalẽdzraɖoƒe si woɖo ɖi koŋ ta, le kpɔɖeŋu me DOMPurify , ele be nàwɔ nu siwo gbɔna:

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

Version ƒe xexlẽdzesiwo

Woateŋu akpɔ Bootstrap ƒe jQuery ƒe kpeɖeŋutɔ ɖesiaɖe ƒe tɔtrɔ to VERSIONkpeɖeŋutɔ ƒe xɔtula ƒe nɔnɔme dzi. Le kpɔɖeŋu me, na dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔ la:

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

Fallback tɔxɛ aɖeke meli ne wotu JavaScript o

Bootstrap ƒe plugins medzea anyi ɖe megbe etɔxɛe amenuveve ne JavaScript nye nuwɔametɔ o. Ne ètsɔ ɖe le zãla ƒe nuteƒekpɔkpɔ me le go sia me la, zã <noscript>nàtsɔ aɖe nɔnɔmea me (kple alesi nàgbugbɔ JavaScript awɔ dɔe) me na wò zãlawo, kple/alo nàtsɔ wò ŋutɔ wò fallback siwo nèwɔ la akpe ɖe eŋu.

Trɔtrɔwo ƒe tɔtrɔ.js

Ku ɖe tɔtrɔwo ŋu

Ne èdi tɔtrɔ ƒe ŋusẽkpɔɖeamedzi bɔbɔewo la, transition.jstsɔ zi ɖeka kpe ɖe JS faɛl bubuawo ŋu. Ne èle compiled (alo minified) zãm la bootstrap.js, mehiã be nàde esia eme o—ele afima xoxo.

Nusi le eme

Transition.js nye kpeɖeŋutɔ vevi aɖe na transitionEndnudzɔdzɔwo kpakple CSS tɔtrɔ ƒe kpɔɖeŋu. Wozãnɛ to plugin bubuawo dzi tsɔ léa ŋku ɖe CSS ƒe tɔtrɔ ƒe kpekpeɖeŋu ŋu eye wòléa tɔtrɔ siwo le xɔxlɔ̃m.

Tɔtrɔwo ƒe nuwɔametɔnyenye

Woateŋu atɔ te tɔtrɔwo le xexeame katã to JavaScript ƒe akpa si gbɔna zazã me, si wòle be wòava le transition.js(alo bootstrap.jsalo bootstrap.min.js, abe alesi wòle ene) ƒe agba megbe:

$.support.transition = false

Mɔnuwo ƒe nɔnɔmewo modal.js

Modals nye streamlined, gake woateŋu atrɔ asi le, dzeɖoɖo ƒe nyabiasewo kple dɔwɔwɔ suetɔ kekeake si hiã kple smart defaults.

Le alesi HTML5 ɖea eƒe gɔmesese gɔmee ta la, autofocusHTML nɔnɔmea mekpɔa ŋusẽ aɖeke ɖe Bootstrap modals dzi o. Be nàkpɔ ŋusẽ ma ke la, zã JavaScript aɖewo siwo wowɔ ɖe ɖoɖo nu:

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

Kpɔɖeŋuwo

Kpɔɖeŋu si meʋãna o

Modal si woɖe gɔme kple ta, ŋutilã, kple nuwɔna ƒe ƒuƒoƒo le afɔti me.

<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 ƒe wɔwɔfia

Trɔ modal aɖe to JavaScript dzi to asiƒoƒo ɖe dzesi si le ete la dzi. Aɖiɖi ɖe anyi eye wòaɖiɖi tso axaa tame.

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

Agbɔsɔsɔme siwo woate ŋu atia

Modals ƒe lolome eve le wo ɖokui si, siwo li to modifier classes dzi be woatsɔ wo ade .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>

Ðe nɔnɔmetata siwo me woɖea nɔnɔmetatawo le la ɖa

Le modals siwo dzena ko tsɔ wu be woadzo le eme be woakpɔ la, ɖe .fadeklass la ɖa le wò modal markup la me.

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

Grid ƒe ɖoɖoa zazã

Be nàwɔ Bootstrap grid system la ŋudɔ le modal aɖe me la, ɖeko nest .rows le la me .modal-bodyeye emegbe nàzã normal grid system classes.

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

Modal me nyawo ƒe tɔtrɔ si wotu ɖe trigger button dzi

Ðe abɔta gbogbo aɖewo le asiwò siwo katã ʋãa modal ɖeka, siwo me nyawo to vovo vie ko? Zã event.relatedTargetkple HTML data-*nɔnɔmewo (ɖewohĩ to jQuery dzi ) tsɔ trɔ asi le modal la me nyawo ŋu le abɔta si dzi wozi nu. Kpɔ Modal Events docs hena numeɖeɖe bubuwo le 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)
})

Zãzã

Modal plugin la trɔa wò nyatakaka ɣaɣlawo ne wobiae, to nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Egatsɔa kpe .modal-openɖe <body>be woaɖe asi le ʋuʋudedi ƒe nuwɔna si woɖo ɖi ŋu eye wòwɔa a .modal-backdropbe woana teƒe si woate ŋu aƒo nu le hena asiɖeɖe le modal siwo woɖe fia ŋu ne wole asi ƒom le modal la godo.

To nyatakaka ƒe nɔnɔmewo dzi

Wɔ modal aɖe ŋudɔ JavaScript maŋlɔ o. Ðoe data-toggle="modal"ɖe dziɖunu ƒe akpa aɖe dzi, abe abɔta ene, kpakple data-target="#foo"alo href="#foo"be nàɖo taɖodzinu na modal aɖe koŋ be wòatrɔ.

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

To JavaScript dzi

Yɔ modal si si id myModalle kple JavaScript ƒe fli ɖeka:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-backdrop="".

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

Mɔnuwo

.modal(options)

Ewɔa wò nyatakakawo ŋudɔ abe modal ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

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

.modal('toggle')

Asitɔtrɔ le modal aɖe ŋu. Trɔ yi yɔla gbɔ hafi woɖe modal la fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.modalalo hidden.bs.modalnudzɔdzɔa nadzɔ).

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

.modal('show')

Eʋua modal aɖe kple asi. Trɔ yi yɔla gbɔ hafi woɖe modal la fia ŋutɔŋutɔ (si nye hafi shown.bs.modalnudzɔdzɔa nadzɔ).

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

.modal('hide')

Asi ɣlaa modal aɖe. Trɔ yi yɔla gbɔ hafi woɣla modal la ŋutɔŋutɔ (si nye hafi hidden.bs.modalnudzɔdzɔa nadzɔ).

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

.modal('handleUpdate')

Trɔ asi le modal ƒe nɔƒe ŋu be wòatsi tre ɖe agbalẽxatsaxatsa aɖe ŋu nenye be ɖeka adze, si ana modal la nati kpo ayi miame.

Ne modal la ƒe kɔkɔme trɔ esime wòle ʋuʋu ko hafi wòhiã.

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

Nudzɔdzɔwo

Bootstrap ƒe modal klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe modal dɔwɔwɔ me.

Woda tu modal nudzɔdzɔwo katã ɖe modal la ŋutɔ dzi (si nye le <div class="modal">).

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

Nusiwo wotsɔna ƒua gbe dropdown.js

Kpɔɖeŋuwo

Tsɔ nuɖuɖu siwo le tsia dzi kpe ɖe nusianu kloe ŋu kple kpeɖeŋutɔ bɔbɔe sia, siwo dometɔ aɖewoe nye navbar, tabs, kple pills.

Le navbar aɖe me

Le atikekuiwo me

Zãzã

To data attributes alo JavaScript dzi la, dropdown plugin la trɔa nya ɣaɣlawo (dropdown menus) to asitɔtrɔ le .openklass la ŋu le dzila ƒe xexlẽdzesi ƒe nu la dzi.

Le asitelefonwo dzi la, ne èʋu nusi le tsia dzi la, etsɔa teƒe aɖe kpena ɖe eŋu .dropdown-backdropabe afisi nàte ŋu aƒo nu le ene hena nuɖuɖu siwo le tsia dzi la nu tsotso ne èle nu ƒom le nuɖuɖua godo, si nye nudidi na iOS ƒe kpekpeɖeŋu nyuitɔ. Esia fia be ne èdi be yeatrɔ tso nu siwo le ʋuʋu ɖi la dzi ayi nu siwo le fli me bubu dzi la, ahiã be nàzi asitelefon dzi geɖe wu.

De dzesii: Woɖoa data-toggle="dropdown"ŋu ɖe nɔnɔmea ŋu hena nutsotso siwo le fli dzi le dɔwɔwɔ ƒe ɖoɖo aɖe dzi, eyata anyo be nàzãe ɣesiaɣi.

To nyatakaka ƒe nɔnɔmewo dzi

Tsɔe kpe data-toggle="dropdown"ɖe kadodo alo abɔta ŋu be nàtrɔ asi le nya aɖe ŋu.

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

Be URL-wo nanɔ anyi nyuie kple kadodo ƒe abɔtawo la, zã data-targetnɔnɔmea ɖe 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>

To JavaScript dzi

Yɔ nusiwo le fli dzi la to JavaScript dzi:

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

Tiatiawɔblɔɖewo

Ɖeke o

Mɔnuwo

$().dropdown('toggle')

Trɔa navbar alo tabbed navigation si wona la ƒe dropdown menu.

Nudzɔdzɔwo

Wodaa nudzɔdzɔ siwo katã le tsia dzi la ɖe .dropdown-menu's dzila ƒe akpaa dzi.

Nudzɔdzɔ siwo katã le tsia dzi la ƒe relatedTargetnɔnɔme le wo si, si ƒe asixɔxɔ nye toggling anchor element.

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

ScrollSpy ƒe agbalẽxatsaxatsa.js

Kpɔɖeŋu le navbar me

ScrollSpy ƒe kpeɖeŋutɔa nye na nav taɖodzinuwo ƒe asitɔtrɔ le eɖokui si le agbalẽxatsaxatsa ƒe nɔƒe nu. Ʋu teƒe si le navbar la te eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ. Woade dzesi nu sue siwo le fli dzi la hã.

Zãzã

Ebia be woaɖo teƒe si sɔ ɖe wo nɔewo nu

Eɖanye dɔwɔwɔ ƒe mɔnu ka kee o, scrollspy bia be woazã position: relative;le element si dzi nèle ŋku lém ɖo la dzi. Zi geɖe la, esiae nye <body>. Ne èle agbalẽ xatsaxatsa le nu bubu <body>siwo heightmenye overflow-y: scroll;.

To nyatakaka ƒe nɔnɔmewo dzi

Be nàtsɔ scrollspy nuwɔna akpe ɖe wò topbar ƒe mɔfiame ŋu bɔbɔe la, tsɔ kpe data-spy="scroll"ɖe nusi nèdi be yeatsa ŋku ŋu (zi geɖe la, esia anye <body>). Emegbe nàtsɔ data-targetnɔnɔme si me Bootstrap ƒe akpa ɖesiaɖe ƒe dzila ƒe akpa ƒe ID alo klass le akpe ɖe eŋu .nav.

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>

To JavaScript dzi

Ne ètsɔ position: relative;wò CSS kpe ɖe eŋu vɔ la, yɔ agbalẽxatsaxatsa la to JavaScript dzi:

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

Mɔnuwo

.scrollspy('refresh')

Ne èle scrollspy zãm kpe ɖe nusiwo wotsɔ kpe ɖe DOM ŋu alo wo ɖeɖe ɖa ŋu la, ahiã be nàyɔ gbugbɔgawɔ mɔnu la abe ale:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-offset="".

Nudzɔdzɔwo

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

Tab siwo woate ŋu atrɔ asi le tab.js

Kpɔɖeŋu tabwo

Tsɔ tab ƒe dɔwɔwɔ kabakaba, si trɔna kpe ɖe eŋu be nàtrɔ to nutoa me nyatakakawo ƒe akpawo dzi, to menu siwo le tsia dzi gɔ̃ hã dzi. Womewɔa dɔ ɖe tab siwo wotsɔ ƒo ƒui dzi o.

Zãzã

Na tabable tabwo nawɔ dɔ to JavaScript dzi (ele be woawɔ tab ɖesiaɖe ŋudɔ ɖekaɖeka):

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

Àte ŋu awɔ tab ɖekaɖekawo ŋudɔ le mɔ vovovowo nu:

$('#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)

Dzesidede dzesiwo

Àte ŋu awɔ tab alo pill navigation ŋudɔ JavaScript aɖeke maŋlɔ to element aɖe gbɔgblɔ data-toggle="tab"alo ɖe edzi ko me. data-toggle="pill"Ne ètsɔ navkple nav-tabsƒe klasswo kpe ɖe tab ulla ŋu la, àwɔ Bootstrap ƒe tab ƒe atsyã ŋudɔ , gake ne ètsɔ navkple nav-pillsƒe klasswo kpe ɖe eŋu la, àwɔ dɔ le pill ƒe atsyã ŋu .

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

Fade ƒe ŋusẽkpɔɖeamedzi

Be nàna tabwo naɖiɖi la, tsɔe kpe .fadeɖe wo dometɔ ɖesiaɖe .tab-paneŋu . Ele be tab ƒe akpa gbãtɔ hã .innana nya siwo le gɔmedzedzea me la nadze.

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

Mɔnuwo

$().tab

Ewɔa tab element kple emenyawo ƒe nugoe ŋudɔ. Ele be tab nanye a data-targetalo hreftaɖodzinu si nye container node le DOM la me. Le kpɔɖeŋu siwo le etame me la, tabawo nye <a>s siwo me data-toggle="tab"nɔnɔmewo le.

.tab('show')

Tia tab si wona eye wòaɖe eƒe nya siwo do ƒome kplii afia. Tab bubu ɖesiaɖe si wotia va yi la va zua esi wometia o eye eƒe nyatakaka siwo do ƒome kplii la ɣlana. Trɔ yi yɔla gbɔ hafi woɖe tab ƒe akpaa fia ŋutɔŋutɔ (si nye hafi shown.bs.tabnudzɔdzɔa nadzɔ).

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

Nudzɔdzɔwo

Ne èle tab yeye aɖe ɖem fia la, nudzɔdzɔawo dzona le ɖoɖo si gbɔna nu:

1. hide.bs.tab(le tab si le dɔ wɔm fifia dzi)
2. show.bs.tab(le tab si woaɖe afia la dzi)
3. hidden.bs.tab(le tab si le dɔ wɔm va yi dzi la, esi le hide.bs.tabnudzɔdzɔa gome la ke)
4. shown.bs.tab(le tab si woɖe fia teti koe nye ema si le dɔ wɔm yeyee la dzi la, esi sɔ kple esi wowɔ na show.bs.tabwɔnaa tɔ)

Ne tab aɖeke menɔ dɔ wɔm xoxo o la, ekema womaɖe asi le hide.bs.tabkple nudzɔdzɔawo ŋu o.hidden.bs.tab

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

Dɔwɔnu ƒe aɖaŋuɖoɖowo tooltip.js

Wotsɔ jQuery.tipsy ƒe kpeɖeŋutɔ nyuitɔ kekeake si Jason Frame ŋlɔ la ʋãe; Dɔwɔnu ƒe aɖaŋuɖoɖowo nye tɔtrɔ yeye aɖe, si meɖoa ŋu ɖe nɔnɔmetatawo ŋu o, zãa CSS3 hena nɔnɔmetata siwo me woɖea nɔnɔmetatawo le, kple data-attributes hena teƒea ƒe tanyawo dzraɖoƒe.

Womeɖea dɔwɔnu ƒe aɖaŋuɖoɖo siwo ƒe tanyawo ƒe didime nye zero la fiana gbeɖe o.

Kpɔɖeŋuwo

Tsɔ asi ɖo kadodo siwo le ete la dzi be nàkpɔ dɔwɔnu ƒe aɖaŋuɖoɖowo:

Static dɔwɔnu ƒe aɖaŋuɖoɖo

Tiatia ene li: etame, ɖusime, ete, kple miame.

Mɔfiame ene

<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()
})

Zãzã

Dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔa wɔa nyatakakawo kple dzesidede ne wobiae, eye le gɔmedzedzea me la, etsɔa dɔwɔnu ƒe aɖaŋuɖoɖowo ɖoa woƒe nusi ʋãa ame la megbe.

Dze dɔwɔnu ƒe aɖaŋuɖoɖoa gɔme to JavaScript dzi:

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

Dzesidede dzesiwo

Dzesi si hiã na dɔwɔnu ƒe aɖaŋuɖoɖo nye datanɔnɔme aɖe ko eye titlele HTML ƒe akpaa dzi la, èdi be dɔwɔnu ƒe aɖaŋuɖoɖo nanɔ ye si. Dɔwɔnu ƒe dzesi ƒe dzesi si wowɔ la le bɔbɔe vie, togbɔ be ebia teƒe aɖe hã (le gɔmedzedzea me la, woɖoe ɖe topto plugin la dzi).

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Ne èdi nyatakaka ƒe nɔnɔmewo la, tsɔ tiatia ƒe ŋkɔ kpe ɖe eŋudata-, abe alesi wòle le data-animation="".

Mɔnuwo

$().tooltip(options)

Kpe dɔwɔnu ƒe aɖaŋuɖoɖo ƒe asiléƒe ɖe element ƒe nuƒoƒoƒu ŋu.

.tooltip('show')

Eɖea element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo fiana. Trɔ yi yɔla gbɔ hafi woɖe dɔwɔnu ƒe aɖaŋuɖoɖoa fia ŋutɔŋutɔ (si nye hafi shown.bs.tooltipnudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe dɔwɔwɔ ƒe aɖaŋuɖoɖoa ƒe ʋuʋu. Womeɖea dɔwɔnu ƒe aɖaŋuɖoɖo siwo ƒe tanyawo ƒe didime nye zero la fiana gbeɖe o.

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

.tooltip('hide')

Ɣla element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo. Trɔ yi yɔla gbɔ hafi woɣla dɔwɔnu ƒe aɖaŋuɖoɖoa ŋutɔŋutɔ (si nye hafi hidden.bs.tooltipnudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe dɔwɔwɔ ƒe aɖaŋuɖoɖoa ƒe ʋuʋu.

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

.tooltip('toggle')

Trɔ asi le element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo ŋu. Trɔ yi yɔla gbɔ hafi woɖe dɔwɔnu ƒe aɖaŋuɖoɖoa fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.tooltipalo hidden.bs.tooltipnudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe dɔwɔwɔ ƒe aɖaŋuɖoɖoa ƒe ʋuʋu.

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

.tooltip('destroy')

Eɣlaa element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo eye wòtsrɔ̃nɛ. Dɔwɔnu ƒe aɖaŋuɖoɖo siwo zãa delegation (si wowɔ to tiatia ) zazã me laselector mateŋu atsrɔ̃ ɖekaɖeka le dzidzime ƒe trigger elements dzi o.

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

Nudzɔdzɔwo

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

Popovers ƒe nyatakakawo popover.js

Tsɔ nyatakaka suesuesue siwo wotsɔ ƒo xlãe, abe esiwo le iPad la dzi ene, kpe ɖe nu ɖesiaɖe ŋu hena nyatakaka evelia ƒe aƒe.

Womeɖea Popovers siwo ƒe tanya kple emenyawo siaa nye zero-didime fiana gbeɖe o.

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

Kpɔɖeŋuwo

Popover si meʋãna o

Tiatia ene li: etame, ɖusime, ete, kple miame.

Live demo ƒe wɔwɔfia

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

Mɔfiame ene

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

Ðe asi le eŋu le ʋuʋu si kplɔe ɖo me

Zã focustrigger la nàtsɔ aɖe popovers ɖa le click si kplɔe ɖo si zãla la awɔ me.

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

Zãzã

Na popovers nawɔ dɔ to JavaScript dzi:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-animation="".

Mɔnuwo

$().popover(options)

Edzea popovers gɔme na element nuƒoƒoƒu.

.popover('show')

Eɖea element aɖe ƒe popover fiana. Trɔ yi amesi yɔe gbɔ hafi woɖe popover la fia ŋutɔŋutɔ (si nye hafi shown.bs.popovernudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe popover ƒe ʋuʋu. Womeɖea Popovers siwo ƒe tanya kple emenyawo siaa nye zero-didime fiana gbeɖe o.

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

.popover('hide')

Eɣlaa element aɖe ƒe popover. Trɔ yi amesi yɔe gbɔ hafi woɣla popover la ŋutɔŋutɔ (si nye hafi hidden.bs.popovernudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe popover ƒe ʋuʋu.

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

.popover('toggle')

Trɔa element aɖe ƒe popover. Trɔ yi amesi yɔe gbɔ hafi woɖe popover la fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.popoveralo hidden.bs.popovernudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe popover ƒe ʋuʋu.

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

.popover('destroy')

Eɣlaa element aɖe ƒe popover eye wòtsrɔ̃nɛ. Popovers siwo zãa delegation (si wowɔ to tiatia ) zazã me laselector mateŋu atsrɔ̃ ɖekaɖeka le dzidzime ƒe trigger elements dzi o.

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

Nudzɔdzɔwo

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

Nuxlɔ̃ame gbedasiwo alert.js

Kpɔɖeŋu nuxlɔ̃amewo

Tsɔ dismiss dɔwɔwɔ kpe ɖe nuxlɔ̃ame gbedasiwo katã ŋu kple plugin sia.

Ne èle .closeabɔta zãm la, ele be wòanye vi gbãtɔ na .alert-dismissibleeye nuŋɔŋlɔ aɖeke mate ŋu ava do ŋgɔ nɛ le dzesidea me o.

Zãzã

Ðeko nàtsɔe akpe data-dismiss="alert"ɖe wò nutrenu ƒe dzesi ŋu be wòana nuxlɔ̃ame ƒe nutrenu ƒe dɔwɔwɔ le eɖokui si. Ne ètu nuxlɔ̃ame aɖe la, eɖenɛ ɖa le DOM la me.

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

Be wò nuxlɔ̃amewo nazã animation ne wole nuwuwu la, kpɔ egbɔ be wozã .fadekple .inklassawo le wo ŋu xoxo.

Mɔnuwo

$().alert()

Ewɔa nuxlɔ̃ame ɖoa to na ʋuʋu nudzɔdzɔwo le dzidzimeviwo ƒe akpa siwo si data-dismiss="alert"nɔnɔmea le. (Mehiã ne èle data-api ƒe auto-initialization zãm o.)

$().alert('close')

Etua nuxlɔ̃ame aɖe to eɖeɖe le DOM la me. Ne .fadekple .inklasswo le element la dzi la, nuxlɔ̃amea nu ayi hafi woaɖee ɖa.

Nudzɔdzɔwo

Bootstrap ƒe nuxlɔ̃ame plugin ɖea nudzɔdzɔ ʋee aɖewo ɖe go hena hooking ɖe nuxlɔ̃ame dɔwɔwɔ me.

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

Abɔtawo ƒe abɔta.js

Wɔ geɖe wu kple abɔtawo. Dzɔdzɔmeŋusẽ ƒe abɔta gblɔ alo wɔ abɔta ƒe ƒuƒoƒowo na akpa geɖe abe dɔwɔnu ƒe ʋuƒo ene.

Dukɔmevinyenye ƒe nuwɔna

Kpee ɖe eŋudata-loading-text="Loading..." ɖe eŋu be nàzã agbatsɔtsɔ ƒe nɔnɔme le abɔta aɖe dzi.

Wodzudzɔ nɔnɔme sia tso v3.3.5 eye woɖee ɖa le v4 me.

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

Toggle ɖeka ƒe tɔtrɔ

Tsɔ kpe ɖe eŋu data-toggle="button"be nàwɔ tɔtrɔ le abɔta ɖeka dzi ŋudɔ.

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

Dzesiwo ƒe Aɖaka / Radio

Tsɔe kpe data-toggle="buttons"ɖe .btn-groupaɖaka si me woŋlɔ nu ɖo alo radio dzi nyawo ŋu be wòana tɔtrɔ le woƒe atsyãwo me nawɔ dɔ.

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

Mɔnuwo

$().button('toggle')

Toggles push nɔnɔme. Enaa abɔta la dzena abe ɖe wowɔe ene.

$().button('reset')

Trɔ asi le abɔta ƒe nɔnɔme ŋu - trɔa nuŋɔŋlɔ ɖe nuŋɔŋlɔ gbãtɔ ŋu. Mɔnu sia nye asynchronous eye wòtrɔna hafi gbugbɔgaɖoɖoa wu enu ŋutɔŋutɔ.

$().button(string)

Trɔa nuŋɔŋlɔ ɖe nuŋɔŋlɔ ƒe nɔnɔme ɖesiaɖe si woɖe fia le nyatakaka me.

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

Kpɔ ɖa collapse.js

Plugin si te ŋu trɔna ɖe nɔnɔmewo ŋu si zãa klass ʋɛ aɖewo hena tɔtrɔ bɔbɔe ƒe nuwɔna.

Kpɔɖeŋu

Zi abɔti siwo le ete dzi be nàɖe nu bubu aɖe afia ahaɣlae to klass ƒe tɔtrɔwo dzi:

• .collapseɣlaa nyatakaka siwo le eme
• .collapsingwozãnɛ le tɔtrɔwo me
• .collapse.inɖea emenyawo fiana

Àte ŋu azã kadodo si me hrefnɔnɔmea le, alo abɔti si me data-targetnɔnɔmea le. Le go eveawo siaa me la, data-toggle="collapse"wobia tso ame si.

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

Accordion ƒe kpɔɖeŋu

Keke collapse nuwɔna si woɖo ɖi la ɖe enu be nàwɔ accordion kple panel ƒe akpaa.

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

Ateŋu adzɔ hã be woaɖɔli .panel-bodys kple .list-groups.

Zãzã

Collapse plugin la zãa klass ʋee aɖewo tsɔ kpɔa kpekpeme kɔkɔa gbɔ:

• .collapseɣlaa emenyawo
• .collapse.inɖea emenyawo fiana
• .collapsingwotsɔa kpenɛ ne tɔtrɔa dze egɔme, eye woɖenɛ ɖa ne ewu enu

Woate ŋu akpɔ klass siawo le component-animations.less.

To nyatakaka ƒe nɔnɔmewo dzi

Ðeko nàtsɔ data-toggle="collapse"kple a akpe data-targetɖe element la ŋu be wòade dɔ asi na element si woate ŋu agbã la dzi kpɔkpɔ le eɖokui si. Nɔnɔmea data-targetxɔa CSS tiatia aɖe be woatsɔ awɔ collapse la ŋudɔ ɖe. Kpɔ egbɔ be yetsɔ klass la kpe collapseɖe nusi woate ŋu agbã ŋu. Ne èdi be wòaʋu le gɔmedzedzea me la, tsɔ klass bubu la kpeein .

Be nàtsɔ ƒuƒoƒodzikpɔkpɔ si le abe accordion ene akpe ɖe dziɖuɖu si woate ŋu agbã ŋu la, tsɔ nyatakaka ƒe nɔnɔme kpe ɖe eŋu data-parent="#selector". Kpɔ demo la be nàkpɔ esia le dɔwɔwɔ me.

To JavaScript dzi

Na wòawɔ dɔ kple asi kple:

$('.collapse').collapse()

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-parent="".

Mɔnuwo

.collapse(options)

Ewɔa wò nyatakakawo ŋudɔ abe nusi woate ŋu agbã ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dziobject .

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

.collapse('toggle')

Trɔa nusi woate ŋu agbã la ɖe nusi woɖe fia alo woɣla ɖe eme. Trɔ yi yɔla gbɔ hafi woɖe nusi woateŋu agbã la afia ŋutɔŋutɔ alo aɣlae (si nye hafi shown.bs.collapsealo hidden.bs.collapsenudzɔdzɔa nadzɔ).

.collapse('show')

Fia nusi woate ŋu agbã. Trɔ yi yɔla gbɔ hafi woɖe nusi woateŋu agbã la afia ŋutɔŋutɔ (si nye hafi shown.bs.collapsenudzɔdzɔa nadzɔ).

.collapse('hide')

Eɣlaa nusi woate ŋu agbã. Trɔ yi yɔla gbɔ hafi woɣla nusi woateŋu agbã la ŋutɔŋutɔ (si nye hafi hidden.bs.collapsenudzɔdzɔa nadzɔ).

Nudzɔdzɔwo

Bootstrap ƒe collapse klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe collapse dɔwɔwɔ me.

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

Carousel ƒe ʋuƒo.js

Slideshow ƒe akpa aɖe si wotsɔna ƒua du toa nu veviwo me, abe carousel ene. Womedoa alɔ nested carousels o.

Kpɔɖeŋuwo

Si do ŋgᴐ Esi kplᴐe ɖo

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

Nya siwo woŋlɔ ɖe agbalẽa te siwo woate ŋu atia

Tsɔ nyawo kpe ɖe wò slidewo ŋu bɔbɔe kple .carousel-captionelement si le ɖesiaɖe me .item. Da HTML ɖesiaɖe kloe si nàte ŋu atia la ɖe afima eye wòaɖo eɖokui ɖe ɖoɖo nu ahawɔ ɖoɖo ɖe eŋu.

Slide ƒe dzeside gbãtɔ

Nulla vitae elit libero, si nye lã si woyɔna be pharetra augue mollis si wotsɔ ƒoa ƒui.

Slide ƒe dzeside evelia

Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit.

Slide ƒe dzeside etɔ̃lia

Praesent commodo cursus magna, si nye lãgbalẽgolo si wotsɔ ƒo ƒui.

Si do ŋgᴐ Esi kplᴐe ɖo

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

Zãzã

Carousel gbogbo aɖewo

Carousels bia be woazã an idle nugoe si le gota wu (the .carousel) dzi be carousel dziɖunuwo nate ŋu awɔ dɔ nyuie. Ne èle carousel geɖe kpem ɖe eŋu, alo ne èle carousel ƒe id, trɔm la, kpɔ egbɔ be yewɔ asitɔtrɔ le mɔ̃ siwo sɔ ŋu.

To nyatakaka ƒe nɔnɔmewo dzi

Zã data attributes nàtsɔ akpɔ carousel la ƒe nɔƒe dzi bɔbɔe. data-slidexɔa nya veviawo prevalo next, si trɔa slide ƒe nɔnɔme ne wotsɔe sɔ kple afisi wòle fifia. Alo zãe data-slide-tonàtsɔ atsɔ slide index si womewɔ o la ayi carousel data-slide-to="2"la gbɔ , si trɔa slide la ƒe nɔƒe ɖe index aɖe koŋ si dzea egɔme kple 0.

Wozãa data-ride="carousel"nɔnɔmea tsɔ dea dzesi carousel be enye animating si dzea egɔme tso axa ƒe agbatsɔtsɔ dzi. Womateŋu azãe kpe ɖe (si mehiã o kple esi mehiã o) JavaScript gɔmedzedze si me kɔ le carousel ɖeka ma ke ŋu o.

To JavaScript dzi

Yɔ carousel kple asi kple:

$('.carousel').carousel()

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-interval="".

Mɔnuwo

.carousel(options)

Edzea carousel la gɔme kple tiatia siwo woate ŋu atia objecteye wòdzea gasɔdodo gɔme to nuawo me.

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

.carousel('cycle')

Tsitsatsa to carousel-nuawo me tso miame yi ɖusime.

.carousel('pause')

Exea mɔ na carousel la be wòagazɔ to nuwo me o.

.carousel(number)

Trɔ carousel la ɖe frame aɖe koŋ dzi (0 si wotu ɖe edzi, si sɔ kple array).

.carousel('prev')

Tsitre ɖe nusi do ŋgɔ ŋu.

.carousel('next')

Tsitre ɖe nu si kplɔe ɖo ŋu.

Nudzɔdzɔwo

Bootstrap ƒe carousel klass ɖea nudzɔdzɔ eve ɖe go na hooking ɖe carousel dɔwɔwɔ me.

Nɔnɔme bubu siwo gbɔna la le nudzɔdzɔ eveawo siaa ŋu:

• direction: Mɔ si dzi carousel la le ʋuʋum ɖo ( "left"alo alo "right").
• relatedTarget: DOM ƒe akpa si wole ʋuʋum ɖe teƒea abe nusi le dɔ wɔm ene.

Wodaa tu carousel nudzɔdzɔwo katã ɖe carousel la ŋutɔ dzi (si nye le <div class="carousel">).

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

Tsɔ affix.js kpe ɖe eŋu

Kpɔɖeŋu

Affix plugin la trɔa asi position: fixed;le eŋu hetsia enu, eye wòsrɔ̃a ŋusẽkpɔɖeamedzi si wokpɔ kple position: sticky;. Subnavigation si le ɖusime la nye affix plugin la ƒe live demo.

Zãzã

Zã affix plugin la to data attributes dzi alo nàtsɔ asi awɔ wò ŋutɔ wò JavaScript.Le nɔnɔme eveawo siaa me la, ele be nàna CSS na wò nyatakaka siwo wotsɔ kpe ɖe eŋu ƒe nɔƒe kple kekeme.

De dzesii: Mègazã affix plugin ɖe element si le element si woɖo ɖe teƒe si sɔ gbɔ me, abe sɔti si wohe alo wotu ene, le Safari gɔmeɖeɖe ƒe vodada ta o ta .

Ðoƒe ɖoɖo to CSS dzi

Affix plugin la trɔa asi le hatsotso etɔ̃ dome, eye wo dometɔ ɖesiaɖe tsi tre ɖi na nɔnɔme aɖe koŋ: .affix, .affix-top, kple .affix-bottom. Ele be nàna atsyãawo, negbe position: fixed;on koe mele eme o.affix koe mele eme o , na klass siawo wò ŋutɔ (si le eɖokui si tso plugin sia gbɔ) be nàkpɔ nɔƒe ŋutɔŋutɔwo gbɔ.

Alesi affix plugin la wɔa dɔe enye si:

1. Be nàdze egɔme la, plugin la kpena ɖe eŋu.affix-top ɖe eŋu be wòafia be element la le eƒe nɔƒe si le etame wu. Le afisia la, CSS ƒe ɖoɖo aɖeke mehiã o.
2. Ele be ʋuʋu to element si nèdi be woatsɔ akpe ɖe eŋu ŋu la, ele be wòaʋã nusi wotsɔ kpe ɖe eŋu ŋutɔŋutɔ. Afi siae .affixwoɖɔlia .affix-topkple ɖoa position: fixed;(si Bootstrap ƒe CSS na).
3. Ne woɖe eteƒe ƒe vovototo gɔme la, ele be .affixnàtsɔ .affix-bottom. Esi wònye be offsets nye tiatia ta la, ɖoɖo ɖeka bia be nàɖo CSS si sɔ. Le go sia me la, tsɔe kpee position: absolute;ne ehiã. Plugin la zãa data attribute alo JavaScript tiatia tsɔ nyaa afisi woaɖo element la tso afima.

Wɔ ɖe afɔɖeɖe siwo le etame dzi nàtsɔ aɖo wò CSS na zazã ƒe tiatia siwo le ete la dometɔ ɖesiaɖe.

To nyatakaka ƒe nɔnɔmewo dzi

Be nàtsɔ affix behavior akpe ɖe element ɖesiaɖe ŋu bɔbɔe la, ɖeko nàtsɔe akpe data-spy="affix"ɖe element si nèdi be yeatsa ŋku ŋu. Zã offsets tsɔ ɖe ɣeyiɣi si nàtrɔ element ƒe pinning la gɔme.

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

To JavaScript dzi

Yɔ affix plugin la to JavaScript dzi:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-offset-top="200".

Mɔnuwo

.affix(options)

Ewɔa wò nyatakakawo ŋudɔ abe nyatakaka siwo wotsɔ kpe ɖe eŋu ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

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

.affix('checkPosition')

Gbugbɔ bu akɔnta le affix la ƒe nɔnɔme ŋu le nusiwo sɔ ƒe didime, teƒe si wole, kple agbalẽxatsaxatsa ƒe nɔƒe nu. Wotsɔa .affix, .affix-top, kple .affix-bottomklassawo kpena ɖe nya siwo wotsɔ kpe ɖe eŋu la ŋu alo ɖea wo ɖa le nɔnɔme yeyea nu. Ele be woayɔ mɔnu sia ɣesiaɣi si woatrɔ nya siwo wotsɔ kpe ɖe eŋu alo nusi woɖo taɖodzinu na ƒe didimewo, be woakpɔ egbɔ be nya siwo wotsɔ kpe ɖe eŋu la le teƒe nyuitɔ.

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

Nudzɔdzɔwo

Bootstrap ƒe affix plugin ɖea nudzɔdzɔ ʋee aɖewo ɖe go hena hooking ɖe affix dɔwɔwɔ me.