Botali ya mozindo

Moto na moto to oyo esangisi yango

Ba plugins ekoki kozala moko moko (kosalela ba *.jsfichiers moko moko ya Bootstrap), to nionso na mbala moko (kosalela bootstrap.jsto oyo ekitisami bootstrap.min.js).

Ba attributs ya ba données

Okoki kosalela ba plugins nionso ya Bootstrap kaka na nzela ya API ya marquage sans kokoma ata ligne moko ya JavaScript. Oyo ezali API ya liboso ya Bootstrap mpe esengeli kozala likambo na yo ya liboso oyo osengeli kotalela ntango ozali kosalela plugin.

Yango elobami, na makambo mosusu ekoki kozala malamu kokanga fonctionnalité oyo. Yango wana, tozali mpe kopesa makoki ya kokanga API ya attribut ya ba données na ko délinger ba événements nionso na document namespaced na data-api. Oyo ezali komonana boye:

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

Na lolenge mosusu, mpo na ko cibler plugin moko ya sikisiki, kotia kaka kombo ya plugin lokola esika ya nkombo elongo na esika ya nkombo ya data-api lokola oyo:

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

API ya programme

Tondimi mpe ete osengeli kozala na likoki ya kosalela ba plugins nyonso ya Bootstrap kaka na nzela ya API ya JavaScript. Ba API nionso ya leta ezali ba méthodes moko, oyo ekoki kozala na chaîne, mpe ezongisaka bosangisi oyo esalemaki na yango.

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

Ba méthodes nionso esengeli kondima objet ya ba options optionnelles, chaîne oyo ezo cibler méthode moko boye, to eloko moko te (oyo ebandisaka plugin na comportement par défaut):

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

Plugin moko na moko e exposer pe constructeur na yango brut na Constructorpropriété moko: $.fn.popover.Constructor. Soki olingi kozwa instance ya plugin moko boye, zwa yango mbala moko na élément moko: $('[rel="popover"]').data('popover').

Ba paramètres ya défaut

Okoki kobongola ba paramètres ya liboso ya plugin na kobongola Constructor.DEFAULTSeloko ya plugin:

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

Matata moko te

Tango mosusu esengeli kosalela ba plugins ya Bootstrap na ba cadres mosusu ya UI. Na makambo oyo, bokutani ya esika ya nkombo ekoki kobima ntango mosusu. Soki likambo yango esalemi, okoki kobenga .noConflictplugin oyo olingi kozongisa motuya na yango.

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

Makambo oyo esalemaki

Bootstrap epesaka ba événements personnalisés pona ba actions unique ya ba plugins mingi. Mingimingi, yango eyaka na lolenge ya infinitif mpe ya participe eleki - esika oyo infinitif (ex. show) ebandisami na ebandeli ya likambo moko, mpe lolenge na yango ya participe ya kala (ex. shown) ebandisami na bosilisi ya likambo moko.

Kobanda na 3.0.0, makambo nyonso ya Bootstrap ezali na esika ya nkombo.

Ba événements infinitifs nionso epesaka preventDefaultfonctionnalité. Yango epesaka makoki ya kopekisa exécution ya action moko avant ebanda.

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

Mituya ya ba versions

Version ya moko na moko ya ba plugins jQuery ya Bootstrap ekoki kozuama na nzela ya VERSIONpropriété ya constructeur ya plugin. Ndakisa, mpo na plugin ya tooltip:

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

Ba fallbacks ya sipesiale te tango JavaScript ezali désactivé

Ba plugins ya Bootstrap ezongaka sima te particulièrement gracement tango JavaScript ezali désactivé. Soki ozali komibanzabanza mpo na mayele ya mosaleli na likambo oyo, salelá <noscript>mpo na kolimbola likambo (mpe ndenge ya kofungola lisusu JavaScript) epai ya basaleli na yo, mpe/to kobakisa ba fallbacks na yo moko oyo olingi.

Ba transitions ya transition.js

Na ntina na mbongwana

Mpo na ba effets ya transition ya pete, kotia transition.jsmbala moko pembeni ya ba fichiers JS misusu. Soki ozali kosalela oyo esangisi (to oyo ekitisami) bootstrap.js, ntina ya kokɔtisa oyo ezali te —ezali deja wana.

Nini eza na kati

Transition.js ezali mosungi ya moboko mpo na transitionEndmakambo lokola mpe emulateur ya transition ya CSS. Esalelamaka na ba plugins mosusu mpo na kotala soki ezali na lisungi ya mbongwana ya CSS mpe mpo na kokanga ba transitions oyo ekangami.

Ko désactiver ba transitions

Ba transitions ekoki kozala désactivé na mokili mobimba na kosalelaka fragment ya JavaScript oyo elandi, oyo esengeli koya sima ya transition.js(to bootstrap.jsto bootstrap.min.js, ndenge ekoki kozala) e charger:

$.support.transition = false

Ba modɛlɛ modal.js

Ba modales ezali rationalisé, kasi flexible, ba prompts ya dialogue na fonctionnalité minimum oyo esengeli mpe ba défauts intelligents.

Na tina ya ndenge HTML5 elimbolaka sémantique na yango, autofocusattribut HTML ezali na effet moko te na ba modal ya Bootstrap. Mpo na kozwa eloko moko, salelá mwa JavaScript oyo olingi:

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

Bandakisa

Ndakisa ya statique

Modal oyo esalemi na motó, nzoto, mpe ensemble ya misala na nse ya lokasa.

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

Démonstration en direct

Toggle modal moko na nzela ya JavaScript na kofinaka bouton oyo ezali awa na nse. Ekokita mpe ekosila na kati longwa na likoló ya lokasa.

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

Ba taille oyo okoki kopona

Ba modales ezali na ba taille mibale ya option, oyo ezali na nzela ya ba classes ya modificateur oyo esengeli kotiama na .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 bs-example-modal-lg" 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 bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Longola animation

Mpo na ba modal oyo emonanaka kaka na esika ya kosila mpo na kotala, longola .fadekelasi na bilembo na yo ya modal.

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

Kosalela système ya grille

Pona ko profiter na système ya grille Bootstrap na kati ya modal moko, kaka nest .rows na kati ya .modal-bodyet puis salela ba classes ya système ya grille normal.

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

Kobongola makambo ya modal na kotalela bouton ya déclencheur

Ozali na liboke ya ba boutons oyo nionso e déclencher modal moko, kaka na ba contenus un peu différent? Salelá event.relatedTargetmpe bizaleli ya HTMLdata-* (ekoki kozala na nzela ya jQuery ) mpo na kobongola makambo oyo ezali na kati ya modal engebene bouton nini obɛtaki. Tala ba docs ya Modal Events pona ba détails na 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)
})

Kosalela yango

Plugin modal ebalusaka ba contenus na yo oyo ebombami na demande, na nzela ya ba attributs ya ba données to JavaScript. Ebakisi mpe .modal-openna <body>mpo na koboya bizaleli ya défilement par défaut mpe ebimisaka a .modal-backdropmpo na kopesa esika ya kofina mpo na koboya ba modal oyo elakisami ntango ozali kofina libanda ya modal.

Na nzela ya ba attributs ya ba données

Activer un modal sans kokoma JavaScript. Set data-toggle="modal"na élément ya contrôleur, lokola bouton, elongo na data-target="#foo"to href="#foo"mpo na ko cibler modal spécifique mpo na ko toggler.

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

Na nzela ya JavaScript

Benga modal na id myModalna ligne moko ya JavaScript:

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

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-backdrop="".

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

Ba méthodes ya kosala

.modal(options)

Active contenus na yo lokola modal. Andimi ba options moko ya option object.

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

.modal('toggle')

Manuellement ebalukaka modal moko. Ezongi na mobengi yambo modal elakisama to ebombama mpenza (elingi koloba liboso ete likambo shown.bs.modalto hidden.bs.modalesalema).

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

.modal('show')

Manuellement efungolaka modal moko. Ezongi na mobengi yambo modal elakisama mpenza (elingi koloba liboso ete shown.bs.modallikambo esalema).

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

.modal('hide')

Manuellement abombaka modal moko. Ezongi na mobengi yambo ete modal ebombama mpenza (elingi koloba liboso ete hidden.bs.modallikambo esalema).

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

.modal('handleUpdate')

Ebongisaka lisusu positionnement ya modal mpo na ko contrer barre de défilement na cas moko esengeli ebima, oyo ekosala que modal epumbwa na gauche.

Esengeli kaka tango hauteur ya modal ebongwanaka tango ezali polele.

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

Makambo oyo esalemaki

Classe modal ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité modal.

Ba événements modaux nionso ezo betama na modal yango moko (c.a.d. na <div class="modal">).

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

Ba dropdowns ya kokita.js

Bandakisa

Bakisa ba menu ya kokita na pene na eloko nyonso na plugin oyo ya pete, bakisa mpe navbar, ba onglets, mpe ba pilili.

Na kati ya navbar moko

Na kati ya bankisi

Kosalela yango

Na nzela ya ba attributs ya ba données to JavaScript, plugin oyo ezali kokita ebalusaka makambo oyo ebombami (ba menu oyo ezali kokita) na kobongola .openkelasi na eloko ya liste ya baboti.

Na ba appareils mobiles, kofungola déroulant ebakisi esika .dropdown-backdropya kofina lokola esika ya kofina mpo na kokanga ba menu ya kokita ntango ozali kobɛta libanda ya menu, esengelami mpo na lisungi ya malamu ya iOS. Yango elingi koloba ete mpo na kolongwa na menu oyo ezali polele mpo na kokende na menu mosusu oyo ezali kokita, esɛngaka obɛta lisusu mingi na telefone ya mabɔkɔ.

Liyebisi: data-toggle="dropdown"Attribut etie motema mpo na kokanga ba menu ya kokita na niveau ya application, yango wana ezali likanisi malamu kosalela yango ntango nyonso.

Na nzela ya ba attributs ya ba données

Bakisa data-toggle="dropdown"na lien to na bouton mpo na kobongola esika oyo ezali kokita.

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

Mpo na kobatela ba URL ndenge moko na ba boutons ya lien, salelá data-targetattribut na esika ya 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>

Na nzela ya JavaScript

Benga ba dropdowns na nzela ya JavaScript:

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

Makambo oyo okoki kopona

Moko te

Ba méthodes ya kosala

$().dropdown('toggle')

Ezali kobongola menu oyo ezali kokita ya navbar to navigation oyo ezali na onglet oyo epesami.

Makambo oyo esalemaki

Ba événements nionso ya dropdown ezo betama na .dropdown-menuélément parent ya '.

Ba événements nionso ya kokita ezali na relatedTargetpropriété, oyo valeur na yango ezali élément anchor toggling.

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

ScrollSpy ezali scrollspy.js

Ndakisa na navbar

Plugin ScrollSpy ezali mpo na kosala mikolo oyo automatiquement ba cibles nav na kotalela position ya défilement. Défiler na esika oyo ezali na se ya navbar mpe tala mbongwana ya kelasi oyo ezali kosala. Ba sous-éléments oyo ezali kokita ekozala mpe na elembo.

Kosalela yango

Esengaka positionnement relative

Ata méthode ya mise en œuvre, scrollspy esengaka kosalela position: relative;na élément oyo ozali espionnage na yango. Mbala mingi yango nde <body>. Ntango ozali kosala défilement na biloko mosusu oyo ezali te <body>, salá makasi ozala na heightensemble mpe overflow-y: scroll;osaleli yango.

Na nzela ya ba attributs ya ba données

Mpo na kobakisa na pete bizaleli ya scrollspy na navigation na yo ya topbar, bakisa data-spy="scroll"na élément oyo olingi kosala espionnage (mingi mingi oyo ekozala na <body>). Na sima bakisa data-targetattribut na ID to classe ya élément parent ya .navcomposant nionso ya 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>

Na nzela ya JavaScript

Nsima ya kobakisa position: relative;na CSS na yo, benga scrollspy na nzela ya JavaScript:

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

Ba méthodes ya kosala

.scrollspy('refresh')

Ntango ozali kosalela scrollspy elongo na kobakisa to kolongola biloko na DOM, ekosɛnga obenga lolenge ya kozongisa sika lokola boye:

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

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-offset="".

Makambo oyo esalemaki

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

Ba onglets oyo ekoki ko changer tab.js

Ndakisa ya ba onglets

Bakisa fonctionnalité ya tab ya mbangu, dynamique mpo na transition na nzela ya ba panneaux ya contenus local, ata na nzela ya ba menus déroulants. Ba onglets encastrés esimbami te.

Kosalela yango

Activer ba onglets ya ba tabbables na nzela ya JavaScript (onglet moko na moko esengeli ko activer yango moko):

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

Okoki ko activer ba onglets moko moko na ba façons ebele:

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

Kosala bilembo

Okoki ko activer navigation ya onglet to ya pilili sans kokoma JavaScript moko te na ko préciser kaka data-toggle="tab"to data-toggle="pill"na élément moko. Kobakisa ba classes ya navmpe nav-tabsna tab ulekosalela styling ya tab Bootstrap , nzokande kobakisa ba classes navmpe nav-pillsekosalela styling ya pilili .

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

Effet ya kosila

Mpo na kosala ete ba onglets esila, bakisá .fadena mokomoko na yango .tab-pane. Panneau ya onglet ya liboso esengeli mpe kozala .inna kosala ete makambo ya ebandeli emonanaka.

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

Ba méthodes ya kosala

$().tab

Ezali ko activer élément ya onglet na conteneur ya contenus. Onglet esengeli kozala na soit a soit data-targetun hrefciblant node ya conteneur na DOM. Na bandakisa oyo ezali likolo, ba onglets ezali ba <a>s oyo ezali na ba data-toggle="tab"attributs.

.tab('show')

Pona tab oyo epesami mpe elakisaka makambo oyo ezali na boyokani na yango. Onglet mosusu nyonso oyo eponami liboso ekómaka oyo eponami te mpe makambo oyo etali yango ebombamaka. Ezongi na mobengi yambo ete esika ya tab elakisama mpenza (elingi koloba liboso ete shown.bs.tablikambo esalema).

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

Makambo oyo esalemaki

Ntango ozali kolakisa tab ya sika, makambo yango ekobeta na molɔngɔ oyo elandi:

1. hide.bs.tab(na tab oyo ezali kosala lelo)
2. show.bs.tab(na tab oyo esengeli kolakisa)
3. hidden.bs.tab(na onglet actif ya liboso, ndenge moko na oyo ya hide.bs.tabévénement)
4. shown.bs.tab(na tab oyo euti kolakisa sika oyo ezali kosala sika, ndenge moko na oyo ya show.bs.tablikambo yango)

Soki onglet moko te ezalaki déjà activé, alors ba événements hide.bs.tabmpe hidden.bs.tabekobeta te.

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

Batoli ya bisaleli tooltip.js

Inspiré na plugin ya malamu mpenza ya jQuery.tipsy oyo ekomami na Jason Frame; Tooltips ezali version ya sika, oyo etie motema na bilili te, esalela CSS3 mpo na ba animations, mpe ba data-attributs mpo na kobomba titre ya esika.

Ba toli ya bisaleli oyo ezali na mitó ya makambo ya bolai zéro emonisami ata mokolo moko te.

Bandakisa

Botia maboko na ba liens oyo ezali awa na se mpo na komona ba toli ya bisaleli:

Conseil d'outils statique

Ba options minei ezali: likolo, droite, na se, mpe gauche aligné.

Ba direction minei

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

Kosalela yango

Plugin ya tooltip ebimisaka contenus mpe marquage na demande, mpe par défaut etie ba tooltip sima ya élément ya déclencheur na bango.

Déclenchez tooltip na nzela ya JavaScript:

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

Kosala bilembo

Marquage oyo esengeli mpo na tooltip ezali kaka dataattribut mpe titlena élément HTML olingi kozala na tooltip. Marquage oyo esalemi ya tooltip ezali plutôt simple, atako esengaka position (par défaut, etiamaki na topna 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>

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-animation="".

Ba méthodes ya kosala

$().tooltip(options)

Ezali kokangisa mosaleli ya tooltip na liboke ya biloko.

.tooltip('show')

Ezali kobimisa tooltip ya élément moko. Ezongi na mobengi yambo ete tooltip elakisama mpenza (elingi koloba liboso ete shown.bs.tooltiplikambo esalema). Yango etalelami lokola déclenchement "manuel" ya tooltip. Ba toli ya bisaleli oyo ezali na mitó ya makambo ya bolai zéro emonisami ata mokolo moko te.

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

.tooltip('hide')

Ebombaka tooltip ya élément moko. Ezongi na mobengi yambo ete tooltip ebombama mpenza (elingi koloba liboso ete hidden.bs.tooltiplikambo esalema). Yango etalelami lokola déclenchement "manuel" ya tooltip.

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

.tooltip('toggle')

Ezali kobongola toggle ya tooltip ya élément moko. Ezongi na mobengi yambo ete toli ya bisaleli elakisama to ebombama mpenza (elingi koloba liboso ete likambo shown.bs.tooltipto hidden.bs.tooltipesalema). Yango etalelami lokola déclenchement "manuel" ya tooltip.

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

.tooltip('destroy')

Ebombaka mpe ebebisaka tooltip ya élément moko. Ba toli ya bisaleli oyo esalela délégation (oyo esalemi na kosalelaka option selector) ekoki kobebisama moko moko te na ba éléments déclencheur descendant.

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

Makambo oyo esalemaki

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

Ba popovers ba popover.js

Bakisa ba superpositions ya mike ya contenus, lokola oyo ezali na iPad, na élément nionso pona ko loger ba informations secondaires.

Ba Popovers oyo titre na yango na contenus na yango ezali na bolai ya zéro elakisami jamais.

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

Bandakisa

Popover ya statique

Ba options minei ezali: likolo, droite, na se, mpe gauche aligné.

Démonstration en direct

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

Ba direction minei

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

Bolongola na clic oyo elandi

Salelá focusdéclencheur mpo na koboya ba popovers na clic oyo elandi oyo mosaleli azali kosala.

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

Kosalela yango

Bofungola ba popovers na nzela ya JavaScript:

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

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-animation="".

Ba méthodes ya kosala

$().popover(options)

Initialise ba popovers pona collection ya élément.

.popover('show')

Ezali kobimisa popover ya élément moko. Ezongi na mobengi yambo popover elakisama mpenza (elingi koloba liboso ete shown.bs.popoverlikambo esalema). Yango etalelami lokola déclenchement "manuel" ya popover. Ba Popovers oyo titre na yango na contenus na yango ezali na bolai ya zéro elakisami jamais.

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

.popover('hide')

Ebombaka popover ya élément moko. Ezongi na mobengi yambo ete popover ebombama mpenza (elingi koloba liboso ete hidden.bs.popoverlikambo esalema). Yango etalelami lokola déclenchement "manuel" ya popover.

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

.popover('toggle')

Toggles popover ya élément moko. Ezongi na mobengi yambo popover elakisama to ebombama mpenza (elingi koloba yambo ete likambo shown.bs.popoverto hidden.bs.popoveresalema). Yango etalelami lokola déclenchement "manuel" ya popover.

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

.popover('destroy')

Ebombaka mpe ebebisaka popover ya élément moko. Popovers oyo esalela délégation (oyo esalemi na nzela ya selectoroption ) ekoki kobebisama moko moko te na ba éléments déclencheur descendant.

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

Makambo oyo esalemaki

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

Ba messages ya alert alert.js

Ndakisa ya makebisi

Bakisa fonctionnalité ya démission na ba messages nionso ya alerte na plugin oyo.

Ntango ozali kosalela .closebouton, esengeli kozala mwana ya liboso ya .alert-dismissiblempe eloko moko te ya makomi ekoki koya liboso na yango na elembo.

Kosalela yango

Bakisa kaka data-dismiss="alert"na bouton na yo ya kokanga mpo na kopesa automatiquement fonctionnalité ya kokanga alerte. Kokanga alerte elongolaka yango na DOM.

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

Mpo na kosala ete ba alertes na yo esalela animation ntango ozali kokanga, sala ete ezala na .fadempe.in classes ya pe esi esalemi na bango

Ba méthodes ya kosala

$().alert()

Esalaka alerte koyoka ba événements ya clic na ba éléments descendants oyo ezali na data-dismiss="alert"attribut. (Ezali na ntina te ntango ozali kosalela auto-initialisation ya data-api.)

$().alert('close')

Ekangaka alerte na kolongola yango na DOM. Soki ba classes .fadempe .inezali na élément, alerte ekosila liboso ya kolongola yango.

Makambo oyo esalemaki

Plugin ya alerte ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité ya alerte.

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

Ba boutons bouton.js

Sala mingi na ba boutons. Bouton ya contrôle ezo loba to kosala ba groupes ya ba boutons pona ba composants ebele lokola ba barres d'outils.

Kozala na Leta

Bakisa data-loading-text="Loading..."mpo na kosalela état ya chargement na bouton moko.

Ezaleli oyo ezali déprecated banda v3.3.5 mpe elongolami na v4.

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

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

Toggle moko

Bakisa data-toggle="button"mpo na ko activer toggling na bouton moko.

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

Boîte de coche / Radio

Bakisa data-toggle="buttons"na .btn-groupcase ya kotiya elembo oyo ezali na to ba entrées ya radio mpo na ko permettre toggling na ba styles na bango respectifs.

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

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

Ba méthodes ya kosala

$().button('toggle')

Toggles état ya kopusama. Epesaka bouton apparence que esili ko activer.

$().button('reset')

Ezongisaka état ya bouton - ebongoli makomi na makomi ya ebandeli. Méthode oyo ezali asynchrone mpe ezongaka avant réinitialisation esila vraiment.

$().button(string)

Echanger texte na état nionso ya texte oyo e définir na ba données.

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

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

Bopanzani collapse.js

Plugin flexible oyo esalelaka mwa ba classes pona comportement ya toggle facile.

Ndakisa

Finá na ba boutons oyo ezali awa na nse mpo na kolakisa mpe kobomba eloko mosusu na nzela ya mbongwana ya kelasi:

• .collapseebombaka makambo oyo ezali na kati
• .collapsingesalelamaka na ntango ya mbongwana
• .collapse.inelakisaka makambo oyo ezali na kati

Okoki kosalela lien oyo ezali na hrefattribut, to bouton oyo ezali na data-targetattribut. Na makambo nyonso mibale, data-toggle="collapse"esɛngami.

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

Ndakisa ya accordéon

Bobakisa comportement ya collapse par défaut mpo na kosala accordéon na composant ya panneau.

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

Ezali mpe possible ko swap out .panel-bodys na .list-groups.

Kosalela yango

Plugin ya collapse esalelaka mua ba classes pona ko gérer levage ya kilo:

• .collapseebombaka makambo oyo ezali na kati
• .collapse.inelakisaka makambo oyo ezali na kati
• .collapsingebakisami ntango mbongwana ebandi, mpe elongolami ntango esili

Bakelasi yango ekoki kozwama na component-animations.less.

Na nzela ya ba attributs ya ba données

Bakisa kaka data-toggle="collapse"na a data-targetna élément pona ko assigner automatiquement contrôle ya élément collapsible. Attribut data-targetendimi moponi ya CSS mpo na kosalela collapse na yango. Bozala sûr ya kobakisa classe collapsena élément collapsible. Soki olingi ete efungwama na ndenge ya liboso, bakisá kelasi ya kobakisa in.

Mpo na kobakisa boyangeli ya etuluku lokola accordéon na contrôle collapsible, bakisa attribut ya ba données data-parent="#selector". Tala démonstration po omona likambo oyo na action.

Na nzela ya JavaScript

Activer manuellement na:

$('.collapse').collapse()

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-parent="".

Ba méthodes ya kosala

.collapse(options)

Active contenus na yo lokola élément collapsible. Andimi ba options moko ya option object.

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

.collapse('toggle')

Ezali kobongola eloko oyo ekoki kokangama mpo na kolakisa to kobombama. Ezongi na mobengi yambo ete eloko oyo ekoki kokangama ezala mpenza kolakisa to ebombama (elingi koloba liboso ete likambo shown.bs.collapseto hidden.bs.collapseesalema).

.collapse('show')

Ezali kolakisa eleman moko oyo ekoki kokangama. Ezongisaka na mobengi yambo ete eloko oyo ekoki kokangama elakisama mpenza (elingi koloba liboso ete shown.bs.collapselikambo esalema).

.collapse('hide')

Ebombaka eloko moko oyo ekoki kokangama. Ezongi na mobengi yambo ete eloko oyo ekoki kokangama ebombama mpenza (elingi koloba liboso ete hidden.bs.collapselikambo esalema).

Makambo oyo esalemaki

Classe ya collapse ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité ya collapse.

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

Carrousel ya carosel.js

Composant ya diaporama mpo na kokende na velo na kati ya ba éléments, lokola carrousel. Ba carousels encadrés esimbami te.

Bandakisa

Oyo eleki Oyo elandi

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

Ba captions oyo okoki kopona

Bakisa ba captions na ba diapositives na yo facilement na .carousel-captionélément na kati ya nionso .item. Tia kaka pene na HTML nionso ya option na kati kuna mpe ekozala automatiquement aligné mpe formaté.

Etiquette ya diapositive ya liboso

Nulla vitae elit libero, nyama moko oyo babengi pharetra augue mollis interdum.

Étiquette ya diapositive ya mibale

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto.

Étiquette ya diapositive ya misato

Praesent commodo cursus magna, oyo ezali na biloko oyo ezali na nse ya mabelé.

Oyo eleki Oyo elandi

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

Kosalela yango

Ba carrousels ebele

Ba carousel esengaka kosalela an idna récipient ya libanda mingi (le .carousel) mpo ba contrôles ya carousel esala malamu. Ntango ozali kobakisa ba carousel ebele, to ntango ozali kobongola oyo ya carousel id, kobosana te kosala mikolo oyo ba contrôles oyo etali yango.

Na nzela ya ba attributs ya ba données

Salelá ba attributs ya ba données mpo na ko contrôler facilement position ya carrousel. data-slideendimaka maloba ya ntina prevto next, oyo ebongoli esika ya diapositive na kotalela esika oyo ezali sikoyo. Na lolenge mosusu, salelá data-slide-tompo na koleka index ya diapositive brut na carousel data-slide-to="2", oyo ebongoli esika ya diapositive na index moko boye oyo ebandi na 0.

Attribut data-ride="carousel"esalelamaka mpo na kotya elembo na carousel lokola animateur kobanda na chargement ya lokasa. Ekoki kosalelama te elongo na (redundante mpe oyo ezali na ntina te) initialisation explicite ya JavaScript ya carousel moko.

Na nzela ya JavaScript

Benga carousel na maboko na:

$('.carousel').carousel()

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-interval="".

Ba méthodes ya kosala

.carousel(options)

Initialiser carrousel na options optionnelles objectmpe abandi ko cycler na nzela ya biloko.

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

.carousel('cycle')

Ezali kosala cycle na kati ya biloko ya carrousel kobanda na lobɔkɔ ya mwasi tii na lobɔkɔ ya mobali.

.carousel('pause')

Epekisaka carrousel ekende na velo na nzela ya biloko.

.carousel(number)

Ezali kosala cycle ya carousel na cadre moko boye (0 basé, ndenge moko na array).

.carousel('prev')

Ba cycles na eloko oyo eleki.

.carousel('next')

Ezali kosala ba cycles tii na eloko oyo elandi.

Makambo oyo esalemaki

Classe ya carrousel ya Bootstrap e exposer deux événements pona ko crochet na fonctionnalité ya carrousel.

Ba événements nionso mibale ezali na ba propriétés ya kobakisa oyo elandi:

• direction: Nzela oyo carrousel ezali kogumbama (soit "left"to "right").
• relatedTarget: Elemento ya DOM oyo ezali ko glisser na esika lokola eloko ya active.

Ba événements nionso ya carrousel ebetamaka na carrousel yango moko (c.a.d. na <div class="carousel">).

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

Bokanga affix.js

Ndakisa

Plugin ya affixe efungolaka position: fixed;mpe ekangamaka, emulaka effet oyo ezwami na position: sticky;. Sous-navigation oyo ezali na droite ezali démonstration en direct ya plugin ya affix.

Kosalela yango

Salelá plugin ya affix na nzela ya ba attributs ya ba données to manuellement na JavaScript na yo moko. Na ba situations nionso mibale, esengeli opesa CSS pona positionnement na largeur ya contenus na yo oyo ekangami.

Liyebisi: Kosalela te plugin ya affix na élément oyo ezali na kati ya élément oyo ezali relativement positionné, lokola colonne oyo ebendami to oyo epusami, mpo na bug ya rendu ya Safari .

Positionnement na nzela ya CSS

Plugin ya affixe ebalukaka kati na bakelasi misato, moko na moko ezali komonisa ezalela moko boye: .affix, .affix-top, mpe .affix-bottom. Esengeli opesa ba styles, longola kaka position: fixed;on .affix, mpo na ba classes oyo yo moko (indépendant ya plugin oyo) mpo na ko gérer ba positions ya solo.

Tala ndenge plugin ya affix esalaka:

1. Mpo na kobanda, plugin ebakisi .affix-topmpo na kolakisa ete eloko yango ezali na esika na yango ya likoló mpenza. Na esika oyo positionnement ya CSS esengeli te.
2. Kosala défilement koleka élément oyo olingi ko affixer esengeli ko déclencher fixation ya solo. Oyo ezali esika .affixezo remplacer .affix-toppe ezo set position: fixed;(epesami na CSS ya Bootstrap).
3. Soki offset ya nse elimbolami, kosala défilement koleka yango esengeli kozwa esika na yango .affixna .affix-bottom. Lokola ba offsets ezali optionnel, ko setting moko esengi yo o setting CSS oyo ebongi. Na likambo yango, bakisá position: absolute;ntango esengeli. Plugin esalela attribut ya ba données to option JavaScript pona koyeba esika nini esengeli ko positionner élément depuis kuna.

Landa ba étapes oyo ezali likolo pona ko setting CSS na yo pona moko ya ba options ya usage oyo ezali awa na se.

Na nzela ya ba attributs ya ba données

Pona kobakisa facilement comportement ya affix na élément nionso, bakisa kaka data-spy="affix"na élément oyo olingi o espionner. Salelá ba offsets mpo na kolimbola ntango nini kobongola pinning ya eleman moko.

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

Na nzela ya JavaScript

Benga plugin ya affix na nzela ya JavaScript:

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

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-offset-top="200".

Ba méthodes ya kosala

.affix(options)

Active contenus na yo lokola contenus affixé. Andimi ba options moko ya option object.

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

.affix('checkPosition')

Ezali kosala lisusu calcul ya état ya affixe na kotalela ba dimensions, position, mpe position ya défilement ya ba éléments oyo etali yango. Ba .affix, .affix-top, mpe .affix-bottombakelasi ebakisami to elongolami na makambo oyo ekangami engebene ezalela ya sika. Esengeli kobenga méthode oyo tango nionso ba dimensions ya contenus oyo ekangami to élément cible ebongwanaka, pona ko assurer positionnement correct ya contenus oyo ekangami.

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

Makambo oyo esalemaki

Plugin ya affix ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité ya affix.