Okulaba okutwalira awamu

Kinoomu oba ekikuŋŋaanyiziddwa

Plugins zisobola okuteekebwamu kinnoomu (nga okozesa *.jsfayiro za Bootstrap ssekinnoomu), oba zonna omulundi gumu (nga okozesa bootstrap.jsoba ezikendeezeddwa bootstrap.min.js).

Ebintu ebikwata ku data

Osobola okukozesa Bootstrap plugins zonna okuyita mu markup API yokka nga towandiise layini emu eya JavaScript. Eno ye API ya Bootstrap ey’omutindo ogusooka era yandibadde esooka okulowoozaako ng’okozesa plugin.

Ekyo kyogeddwa, mu mbeera ezimu kiyinza okuba ekirungi okuggyako omulimu guno. Nolwekyo, era tuwa obusobozi okulemesa API attribute ya data nga tusumulula ebibaddewo byonna ku kiwandiiko namespaced ne data-api. Kino kifaanana bwe kiti:

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

Ekirala, okutunuulira plugin eyeetongodde, ssaamu erinnya lya plugin nga ekifo ky'amannya wamu n'ekifo ky'amannya kya data-api nga kino:

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

API ya pulogulaamu

Era tukkiriza nti olina okusobola okukozesa Bootstrap plugins zonna okuyita mu JavaScript API yokka. API zonna ez'olukale nkola emu, eziteekebwako enjegere, era zizzaayo okukung'aanya okwakolebwako.

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

Enkola zonna zirina okukkiriza ekintu eky'okulonda eky'okwesalirawo, olunyiriri olugenderera enkola entongole, oba tewali kintu kyonna (ekitandika plugin n'enneeyisa eya bulijjo):

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

Buli plugin era eraga constructor yaayo embisi ku Constructorproperty: $.fn.popover.Constructor. Bw'oba oyagala okufuna ekifaananyi kya plugin ekimu, kiggye butereevu okuva mu elementi: $('[rel="popover"]').data('popover').

Enteekateeka ezisookerwako

Osobola okukyusa ensengeka ezisookerwako eza plugin nga okyusa Constructor.DEFAULTSekintu kya plugin:

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

Tewali butakkaanya

Oluusi kyetaagisa okukozesa Bootstrap plugins ne UI frameworks endala. Mu mbeera zino, okutomeragana kw'ekifo ky'amannya kuyinza okubaawo oluusi n'oluusi. Kino bwe kibaawo, oyinza okuyita .noConflictku plugin gy’oyagala okuzzaawo omuwendo gwayo.

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

Ebibaddewo

Bootstrap egaba ebibaddewo eby'enjawulo ku bikolwa eby'enjawulo ebya plugins ebisinga obungi. Okutwalira awamu, bino bijja mu ngeri etaliiko nkomerero n’ennyiriri eziyise - nga ekintu ekitaliiko nkomerero (ex. show) kitandikibwawo ku ntandikwa y’ekintu ekibaawo, ate engeri yaakyo ey’ekitundu ekiyise (ex. shown) n’etandika nga ekikolwa kiwedde.

Okuva ku 3.0.0, ebibaawo byonna ebya Bootstrap biba biteekeddwa mu mannya.

Ebintu byonna ebibaawo ebitaliiko nkomerero biwa preventDefaultenkola. Kino kiwa obusobozi okuyimiriza okukola ekikolwa nga tekinnatandika.

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

Eddagala erirongoosa

Tooltips ne Popovers zikozesa sanitizer yaffe ezimbiddwa mu sanitize options ezikkiriza HTML.

Omuwendo ogusookerwako whiteListgwe guno wammanga:

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

Bw'oba oyagala okwongera emiwendo emipya ku kino ekisookerwako whiteListosobola okukola bino wammanga:

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)

Bw’oba ​​oyagala okuyita ku sanitizer yaffe kubanga oyagala nnyo okukozesa etterekero ly’ebitabo eriweereddwayo, okugeza DOMPurify , olina okukola bino wammanga:

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

Ennamba z’enkyusa

Enkyusa ya buli emu ku jQuery plugins za Bootstrap esobola okuyingizibwa ng'oyita mu VERSIONby'obugagga by'omuzimbi wa plugin. Okugeza, ku plugin ya tooltip:

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

Tewali kugwa kwa njawulo nga JavaScript eremeddwa

Bootstrap's plugins tezigwa mabega naddala gracefully nga JavaScript eremeddwa. Bw’oba ​​ofaayo ku bumanyirivu bw’omukozesa mu mbeera eno, kozesa <noscript>okunnyonnyola embeera (n’engeri y’okuddamu okusobozesa JavaScript) eri abakozesa bo, ne/oba okwongerako ebikuddirira byo eby’ennono.

Enkyukakyuka enkyukakyuka.js

Ebikwata ku nkyukakyuka

Ku bikolwa eby'enkyukakyuka ebyangu, ssaamu transition.jsomulundi gumu ku mabbali ga fayiro za JS endala. Bw’oba ​​okozesa ekikung’aanyiziddwa (oba ekitono) bootstrap.js, tekyetaagisa kussaamu kino—kyabaddewo dda.

Ekiri munda

Transition.js ye muyambi omukulu eri transitionEndebibaawo nga kwotadde ne CSS transition emulator. Ekozesebwa plugins endala okukebera obuwagizi bw'enkyukakyuka ya CSS n'okukwata enkyukakyuka eziwaniridde.

Okulemesa enkyukakyuka

Enkyukakyuka zisobola okulemesa mu nsi yonna nga okozesa ekitundu kya JavaScript kino wammanga, ekiteekwa okujja oluvannyuma transition.js(oba bootstrap.jsoba bootstrap.min.js, nga bwe kiyinza okuba) okutikkibwa:

$.support.transition = false

Enkola za modal.js

Modals zirongooseddwa, naye nga zikyukakyuka, dialog prompts nga zirina enkola entono ezeetaagisa n'okusooka okugezi.

Olw’engeri HTML5 gy’ennyonnyolamu amakulu gaayo, ekintu kya autofocusHTML tekirina kye kikola mu Bootstrap modals. Okusobola okutuuka ku nkola y’emu, kozesa JavaScript ezimu ez’enjawulo:

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

Eby’okulabirako

Ekyokulabirako ekitali kikyukakyuka

Modal ekoleddwa nga erimu omutwe, omubiri, n'ekibinja ky'ebikolwa mu wansi.

<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

Toggle a modal nga oyita mu JavaScript nga onyiga button wansi. Kijja kuseeyeeya wansi era kizike okuva waggulu ku lupapula.

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

Sayizi ez’okwesalirawo

Modals zirina sayizi bbiri ez'okwesalirawo, ezifunibwa okuyita mu kiraasi z'abakyusa okuteekebwa ku .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>

Ggyawo ebifaananyi ebirina obulamu

Ku modals ezimala okulabika okusinga okuzikira mu okulaba, ggyawo .fadeekibiina okuva ku modal markup yo.

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

Nga tukozesa enkola ya grid

Okusobola okweyambisa enkola ya Bootstrap grid munda mu modal, just nest .rows within the .modal-bodyand then use the 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 -->

Okukyusakyusa ebirimu mu modal okusinziira ku trigger button

Olina ekibinja kya buttons nga zonna zisitula modal y’emu, just with slightly different contents? Kozesa event.relatedTargetne HTML data-*attributes (kiyinzika okuyita mu jQuery ) okukyusakyusa ebirimu mu modal okusinziira ku button ki eyanyigibwa. Laba ebiwandiiko bya Modal Events okumanya ebisingawo ku 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)
})

Enkozesa

Modal plugin ekyusa ebirimu byo ebikwekebwa nga bwe kyetaagisa, okuyita mu data attributes oba JavaScript. Era eyongera .modal-openku <body>to override default scrolling behavior era ekola a .modal-backdropokuwa ekifo eky'okunyiga okugoba modals eziragiddwa nga onyiga ebweru wa modal.

Okuyita mu bikwata ku data

Kozesa modal nga towandiise JavaScript. Teeka data-toggle="modal"ku elementi y'ekifuga, nga button, wamu ne a data-target="#foo"oba href="#foo"okutunuulira modal eyeetongodde okukyusakyusa.

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

Okuyita mu JavaScript

Kuba modal eriko id myModalnga erina layini emu eya JavaScript:

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

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-backdrop="".

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

Enkola

.modal(options)

Ekola ebirimu byo nga modal. Akkiriza eby'okulonda eby'okwesalirawo object.

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

.modal('toggle')

Mu ngalo ekyusakyusa modal. Edda eri oyo ayita nga modal tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.modaloba hidden.bs.modalekintu tekinnabaawo).

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

.modal('show')

Mu ngalo aggulawo modal. Edda eri omuyita nga modal tennalagibwa ddala (kwe kugamba nga shown.bs.modalekintu tekinnabaawo).

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

.modal('hide')

Mu ngalo akweka modal. Edda eri oyo akubira nga modal tennakwekebwa ddala (kwe kugamba nga hidden.bs.modalekintu tekinnabaawo).

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

.modal('handleUpdate')

Eddamu okutereeza ekifo kya modal okuziyiza scrollbar singa emu erina okulabika, ekyandifudde modal okubuuka ku kkono.

Yeetaagibwa yokka ng’obugulumivu bwa modal bukyuse ng’eggule.

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

Ebibaddewo

Bootstrap's modal class eraga ebitonotono ebibaawo olw'okuyunga mu nkola ya modal.

Ebintu byonna ebibaawo mu modal bikubwa ku modal yennyini (kwe kugamba ku <div class="modal">).

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

Ebintu ebigwa wansi dropdown.js

Eby’okulabirako

Okwongerako menus ezikka kumpi ku kintu kyonna ne plugin eno ennyangu, omuli navbar, tabs, n’empeke.

Munda mu navbar

Munda mu mpeke

Enkozesa

Okuyita mu data attributes oba JavaScript, dropdown plugin ekyusa ebirimu ebikwekebwa (dropdown menus) nga ekyusa .openclass ku kintu ky'olukalala lw'omuzadde.

Ku byuma ebikozesebwa ku ssimu, okuggulawo ekintu ekikka wansi kwongerako a .dropdown-backdropng’ekifo eky’okukwatako okuggalawo menyu ezikka ng’onyiga ebweru wa menu, ekyetaagisa okuwagira obulungi iOS. Kino kitegeeza nti okukyusa okuva ku menu eggule okudda ku menu ey’enjawulo kyetaagisa okukuba ennyo ku ssimu.

Note: data-toggle="dropdown"Attribute yesigamyeko okuggalawo dropdown menus ku ddaala ly'enkola, kale kirungi bulijjo okugikozesa.

Okuyita mu bikwata ku data

Yongera data-toggle="dropdown"ku link oba button okukyusa dropdown.

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

Okukuuma URL nga tezifudde ne buttons z'enkolagana, kozesa data-targetattribute mu kifo kya 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>

Okuyita mu JavaScript

Kuba ku bigenda okukka wansi ng’oyita mu JavaScript:

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

Eby’okulondako

Tewali

Enkola

$().dropdown('toggle')

Ekyusa menu egwa wansi eya navbar oba tabbed navigation eweereddwa.

Ebibaddewo

Ebintu byonna ebigwa wansi bikubwa ku .dropdown-menu's parent element.

Ebintu byonna ebigwa wansi birina ekintu relatedTarget, omuwendo gwakyo gwe kintu ekikyusakyusa ennanga.

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

ScrollSpy omuwandiisi w'ebitabo.js

Okugeza mu navbar

ScrollSpy plugin ya kulongoosa nav targets mu ngeri ey’otoma okusinziira ku scroll position. Ssenda ekitundu wansi wa navbar era olabe enkyukakyuka ya kiraasi ekola. Ebintu ebitonotono ebigwa wansi nabyo bijja kulagibwa.

Enkozesa

Yeetaaga okuteeka mu kifo ekituufu

Si nsonga enkola y'okussa mu nkola, scrollspy yeetaaga okukozesa position: relative;ku elementi gy'oketta. Ebiseera ebisinga kino kye <body>. Nga scrollspying ku elements endala ezitali <body>, kakasa nti olina heightset era nga overflow-y: scroll;osiigiddwa.

Okuyita mu bikwata ku data

Okusobola okwanguyirwa okwongerako enneeyisa ya scrollspy ku topbar navigation yo, yongera data-spy="scroll"ku elementi gy’oyagala okuketta (okusinga kino kyandibadde <body>). Oluvannyuma yongera ku data-targetattribute ne ID oba class ya parent element ya Bootstrap .navcomponent yonna.

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>

Okuyita mu JavaScript

Oluvannyuma lw’okugattako position: relative;mu CSS yo, yita scrollspy ng’oyita mu JavaScript:

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

Enkola

.scrollspy('refresh')

Bw'oba okozesa scrollspy wamu n'okugattako oba okuggyawo ebintu okuva mu DOM, ojja kwetaaga okuyita enkola y'okuzza obuggya nga bwe kityo:

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

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-offset="".

Ebibaddewo

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

Tabs ezikyusibwakyusibwa tab.js

Eby’okulabirako tabu

Okwongerako enkola ya tabu ey’amangu, ekyukakyuka okukyuka okuyita mu bitundu by’ebirimu eby’omu kitundu, wadde ng’oyita mu menyu ezikka. Nested tabs teziwagirwa.

Enkozesa

Ssobozesa tabu eziriko tabba ng’oyita mu JavaScript (buli tabu yeetaaga okukozesebwa kinnoomu):

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

Osobola okukola tabu ssekinnoomu mu ngeri eziwerako:

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

Okuteeka obubonero

Osobola okukola tab oba pill navigation nga towandiise JavaScript yonna nga omala kulaga data-toggle="tab"oba data-toggle="pill"ku element. Okwongera navne nav-tabsclasses ku tab ulkijja kukozesa Bootstrap tab styling , ate okugattako navne nav-pillsclasses kijja kukozesa pill styling .

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

Okusobola okufuula tabu okuzikira mu, yongera .fadeku buli .tab-pane. Ekipande kya tabu ekisooka nakyo kirina okuba nga .inkirina okufuula ebirimu ebisooka okulabika.

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

Enkola

$().tab

Ekola ekintu kya tabu n'ekintu ekirimu. Tab erina okuba ne oba a data-targetoba an hreftargeting a container node mu DOM. Mu byokulabirako waggulu, tabu ze <a>s ezirina data-toggle="tab"ebifaananyi.

.tab('show')

Elonda ekitundu ekiweereddwa era n’alaga ebirimu ebikwatagana nabyo. Taabu endala yonna eyalondebwa emabegako efuuka etalondeddwa era ebikwatagana nayo ne bikwekebwa. Edda eri omuyita nga ekitundu kya tabu tekinnalagibwa ddala (kwe kugamba nga shown.bs.tabekintu tekinnabaawo).

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

Ebibaddewo

Nga olaga tabu empya, ebibaawo bikuba amasasi mu nsengeka eno wammanga:

1. hide.bs.tab(ku tabu ekola kati)
2. show.bs.tab(ku kitundu ekigenda okulagibwa)
3. hidden.bs.tab(ku tabu ekola emabega, y’emu hide.bs.tabn’ey’omukolo)
4. shown.bs.tab(ku kitundu ekipya-ekikola ekyaakalagibwa, kye kimu show.bs.tabn'eky'omukolo)

Singa tewali tabu yali yakola dda, olwo hide.bs.tabne hidden.bs.tabevents tezijja kugobwa.

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

Ebikozesebwa tooltip.js

Nga efunye okubudaabudibwa okuva mu nkola ennungi ennyo eya jQuery.tipsy eyawandiikibwa Jason Frame; Tooltips ye nkyusa erongooseddwa, etasinziira ku bifaananyi, ekozesa CSS3 ku animations, ne data-attributes okutereka emitwe egy'omu kitundu.

Ebikozesebwa ebirina emitwe egy’obuwanvu bwa zero tebiragibwangako.

Eby’okulabirako

Hover ku links wammanga olabe ebikozesebwa:

Ekiwandiiko ky’ebikozesebwa ekitali kikyukakyuka

Enkola nnya ziriwo: waggulu, ku ddyo, wansi, ne kkono nga zikwatagana.

Endagiriro nnya

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

Enkozesa

Plugin y'obukodyo bw'ebikozesebwa ekola ebirimu n'obubonero ku bwetaavu, era nga bwe kibadde eteeka obukodyo bw'ebikozesebwa oluvannyuma lw'ekintu kyabwe ekiziyiza.

Trigger the tooltip nga oyita mu JavaScript:

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

Okuteeka obubonero

Markup ekyetaagisa ku tooltip ye dataattribute yokka era titleku HTML element oyagala okuba ne tooltip. Obubonero obukoleddwa obw'ekintu ekikozesebwa buba bwangu nnyo, wadde nga kyetaagisa ekifo (nga bwe kibadde, kiteekeddwawo topnga 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>

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-animation="".

Enkola

$().tooltip(options)

Egattako omukwasi w'ebikozesebwa ku kukungaanya elementi.

.tooltip('show')

Abikkula ekiwandiiko ky'ekintu ekiyitibwa tooltip. Edda eri oyo akubira nga tooltip tennalagibwa ddala (kwe kugamba nga shown.bs.tooltipekintu tekinnabaawo). Kino kitwalibwa nga "manual" triggering ya tooltip. Ebikozesebwa ebirina emitwe egy’obuwanvu bwa zero tebiragibwangako.

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

.tooltip('hide')

Ekweka ekiwandiiko ky'ekintu ekiyitibwa tooltip. Edda eri oyo akubira nga tooltip tennakwekebwa ddala (kwe kugamba nga hidden.bs.tooltipekintu tekinnabaawo). Kino kitwalibwa nga "manual" triggering ya tooltip.

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

.tooltip('toggle')

Ekyusakyusa ekintu ekiyitibwa tooltip. Edda eri oyo akubira nga tooltip tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.tooltipoba hidden.bs.tooltipekintu tekinnabaawo). Kino kitwalibwa nga "manual" triggering ya tooltip.

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

.tooltip('destroy')

Ekweka n'okusaanyaawo ekintu ekiyitibwa tooltip. Tooltips ezikozesa delegation (ezitondebwa nga tukozesa option )selector teziyinza kusaanawo kinnoomu ku descendant trigger elements.

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

Ebibaddewo

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

Popovers popover.js nga bwe kiri

Okwongerako obutonotono obubikkiddwako ebirimu, ng’ebyo ebiri ku iPad, ku kintu kyonna eky’okuteeka amawulire ag’okubiri.

Popovers nga omutwe gwazo n’ebirimu byombi biri zero-length tebiragibwangako.

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

Eby’okulabirako

Static popover nga bwe kiri

Enkola nnya ziriwo: waggulu, ku ddyo, wansi, ne kkono nga zikwatagana.

Live demo

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

Endagiriro nnya

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

Goba ku click okuddako

Kozesa focustrigger okugoba popovers ku click okuddako omukozesa kw'akola.

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

Enkozesa

Ssobozesa popovers nga oyita mu JavaScript:

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

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-animation="".

Enkola

$().popover(options)

Etandikawo popovers olw'okukung'aanya elementi.

.popover('show')

Abikkula popover ya elementi. Edda eri oyo akubira nga popover tennalagibwa ddala (kwe kugamba nga shown.bs.popoverekintu tekinnabaawo). Kino kitwalibwa nga "manual" triggering ya popover. Popovers nga omutwe gwazo n’ebirimu byombi biri zero-length tebiragibwangako.

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

.popover('hide')

Akweka popover ya elementi. Edda eri oyo akubira nga popover tennakwekebwa ddala (kwe kugamba nga hidden.bs.popoverekintu tekinnabaawo). Kino kitwalibwa nga "manual" triggering ya popover.

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

.popover('toggle')

Ekyusakyusa popover ya elementi. Edda eri oyo akubira nga popover tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.popoveroba hidden.bs.popoverekintu tekinnabaawo). Kino kitwalibwa nga "manual" triggering ya popover.

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

.popover('destroy')

Akweka era asaanyaawo popover ya elementi. Popovers ezikozesa delegation (ezitondebwa nga tukozesa option )selector teziyinza kuzikirizibwa kinnoomu ku descendant trigger elements.

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

Ebibaddewo

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

Obubaka obw'okulabula alert.js

Eky’okulabirako okulabula

Okwongerako enkola y'okugoba ku bubaka bwonna obw'okulabula ne plugin eno.

Nga okozesa .closebutton, erina okuba omwana asooka owa .alert-dismissibleera tewali biwandiiko biyinza kujja mu maaso gaayo mu markup.

Enkozesa

Just add data-dismiss="alert"ku close button yo okuwa automatically okuwa alert close functionality. Okuggalawo okulabula kukiggya mu DOM.

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

Okusobola okuba nga alerts zo zikozesa animation nga oggalawo, kakasa nti zirina .fadene .inclasses ezaakozesebwa edda ku zo.

Enkola

$().alert()

Ekola okulabula okuwuliriza ebibaawo mu kunyiga ku elementi z’ezzadde ezirina data-dismiss="alert"attribute. (Tekyetaagisa nga okozesa data-api's auto-initialization.)

$().alert('close')

Eggalawo okulabula ng'akuggya mu DOM. Singa .fadene .inclasses zibeerawo ku elementi, okulabula kujja kuzikira nga tekunnaggyibwawo.

Ebibaddewo

Bootstrap's alert plugin eraga ebitonotono ebibaawo olw'okuyunga mu nkola y'okulabula.

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

Ebintu ebikozesebwa button.js

Kola ebisingawo ne buttons. Control button states oba tonda ebibinja bya buttons ku bitundu ebisingawo nga toolbars.

Stateful

Okwongerako data-loading-text="Loading..."okukozesa embeera y'okutikka ku bbaatuuni.

Ekintu kino tekikozesebwa okuva ku v3.3.5 era kyaggyibwawo mu v4.

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

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

Okukyusakyusa okumu

Okwongerako data-toggle="button"okukola toggling ku button emu.

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

Checkbox / Leediyo

Okwongera data-toggle="buttons"ku .btn-groupkasanduuko akalimu oba ebiyingizibwa ku leediyo okusobozesa okukyusakyusa mu sitayiro zaabwe.

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

Enkola

$().button('toggle')

Ekyusakyusa embeera y'okusika. Awa button endabika nti ebadde ekozeseddwa.

$().button('reset')

Ezzaawo embeera ya button - ekyusa ebiwandiiko okudda mu biwandiiko eby'olubereberye. Enkola eno ya asynchronous era ekomawo nga resetting tennaggwa ddala.

$().button(string)

Ewanyisiganya ebiwandiiko ku mbeera yonna eya data etegeezeddwa ekiwandiiko.

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

Collapse okugwa.js

Plugin ekyukakyuka ekozesa kiraasi ntono olw’enneeyisa ennyangu ey’okukyusakyusa.

Eky'okulabirako

Nywa ku buttons wansi okulaga n'okukweka elementi endala ng'oyita mu nkyukakyuka za kiraasi:

• .collapseakweka ebirimu
• .collapsingekozesebwa mu biseera by’enkyukakyuka
• .collapse.ineraga ebirimu

Osobola okukozesa enkolagana n'ekintu href, oba bbaatuuni eriko data-targetekintu. Mu mbeera zombi, the data-toggle="collapse"is required.

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

Ekyokulabirako kya Accordion

Gaziya enneeyisa y'okugwa esookerwako okukola accordion n'ekitundu ky'ekipande.

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

Era kisoboka okukyusakyusa out .panel-bodys ne .list-groups.

Enkozesa

Plugin y’okugwa ekozesa kiraasi ntono okukwata okusitula ebizito:

• .collapseakweka ebirimu
• .collapse.ineraga ebirimu
• .collapsingeyongerwako ng’enkyukakyuka etandise, n’eggyibwawo ng’ewedde

Ebisulo bino osobola okubisanga mu component-animations.less.

Okuyita mu bikwata ku data

Just add data-toggle="collapse"ne a data-targetku element okugaba automatically control ya element eyinza okugwa. Ekintu data-targetkikkiriza ekisunsula CSS okukozesa okugwa. Kakasa nti ogattako kiraasi collapseku elementi eyinza okugwa. Bw'oba oyagala kiggule nga kisookerwako, yongera ku kiraasi ey'okugattako in.

Okwongera okuddukanya ekibinja ekiringa accordion ku control eyinza okugwa, yongera ku data attribute data-parent="#selector". Laba demo olabe kino mu bikolwa.

Okuyita mu JavaScript

Ssobozesa mu ngalo ne:

$('.collapse').collapse()

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-parent="".

Enkola

.collapse(options)

Ekola ebirimu byo nga ekintu ekiyinza okugwa. Akkiriza eby'okulonda eby'okwesalirawo object.

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

.collapse('toggle')

Ekyusa ekintu ekiyinza okugwa okukiragibwa oba okukwekebwa. Edda eri oyo ayita nga ekintu ekiyinza okugwa tekinnalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.collapseoba hidden.bs.collapseekintu tekinnabaawo).

.collapse('show')

Alaga ekintu ekiyinza okugwa. Edda eri oyo ayita nga ekintu ekiyinza okugwa tekinnalagibwa ddala (kwe kugamba nga shown.bs.collapseekintu tekinnabaawo).

.collapse('hide')

Ekweka ekintu ekiyinza okugwa. Edda eri oyo ayita nga ekintu ekiyinza okugwa tekinnakwekebwa ddala (kwe kugamba nga hidden.bs.collapseekintu tekinnabaawo).

Ebibaddewo

Bootstrap's collapse class eraga ebitonotono ebibaawo olw'oku hooking mu collapse functionality.

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

Carousel carousel.js nga bwe kiri

Ekitundu kya slideshow eky’okuvuga obugaali okuyita mu elementi, nga carousel. Nested carousels teziwagirwa.

Eby’okulabirako

Jjuuzi Ekiddako

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

Ebigambo ebiwandiikiddwako eby’okwesalirawo

Okwongera ebigambo ku slide zo mu ngeri ennyangu nga .carousel-captionelementi eri munda mu .item. Teeka kumpi HTML yonna ey’okwesalirawo munda eyo era ejja kusengekebwa mu ngeri ey’otoma era efuulibwe ensengeka.

Ekiwandiiko kya slayidi ekisooka

Nulla vitae elit libero, eddagala eriyitibwa pharetra augue mollis erya wakati.

Layibu ya slayidi eyokubiri

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit.

Layibu ya slayidi ey’okusatu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Jjuuzi Ekiddako

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

Enkozesa

Carousels eziwera

Carousels zeetaaga okukozesa an idku kibya ekisinga ebweru (the .carousel) okusobola carousel controls okukola obulungi. Bw’oba ​​oyongerako carousel eziwera, oba ng’okyusa carousel’s id, kakasa nti ozza obuggya ebifuga ebikwatagana.

Okuyita mu bikwata ku data

Kozesa data attributes okwanguyirwa okufuga ekifo kya carousel. data-slideekkiriza ebigambo ebikulu prevoba next, ekikyusa ekifo kya slayidi okusinziira ku kifo kyayo ekiriwo kati. Ekirala, kozesa data-slide-tookuyisa omuwendo gwa slayidi embisi ku carousel data-slide-to="2", ekikyusa ekifo kya slayidi okudda ku muwendo ogw’enjawulo okutandika ne 0.

Attribute data-ride="carousel"ekozesebwa okussaako akabonero ku carousel nga animating okutandika ku page load. Tesobola kukozesebwa wamu ne (redundant and unnecessary) okutandika kwa JavaScript okw’olwatu okwa carousel y’emu.

Okuyita mu JavaScript

Kuba carousel mu ngalo nga okozesa:

$('.carousel').carousel()

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-interval="".

Enkola

.carousel(options)

Atandikawo carousel n’enkola ez’okwesalirawo objectn’atandika okuvuga obugaali ng’ayita mu bintu.

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

.carousel('cycle')

Ezingulula okuyita mu bintu bya carousel okuva ku kkono okudda ku ddyo.

.carousel('pause')

Ayimiriza carousel okuvuga obugaali okuyita mu bintu.

.carousel(number)

Ezingulula carousel ku fuleemu entongole (0 okusinziira, okufaananako n'ensengekera).

.carousel('prev')

Enzirukanya okutuuka ku kintu ekyayita.

.carousel('next')

Ezingulula okutuuka ku kintu ekiddako.

Ebibaddewo

Bootstrap's carousel class eraga ebibaddewo bibiri eby'oku hooking mu carousel functionality.

Ebintu byombi birina eby’obugagga bino wammanga eby’okwongerako:

• direction: Obulagirizi carousel mw’eseeyeeya (oba "left"oba "right").
• relatedTarget: Ekintu kya DOM ekiseerezebwa mu kifo nga ekintu ekikola.

Ebintu byonna ebibaawo mu carousel bikubwa ku carousel yennyini (kwe kugamba ku <div class="carousel">).

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

Teekako affix.js

Eky'okulabirako

Plugin y'okugattako ekyusakyusa position: fixed;n'okuggyako, ng'ekoppa ekikolwa ekisangibwa ne position: sticky;. Subnavigation ku ddyo ye live demo ya affix plugin.

Enkozesa

Kozesa affix plugin ng'oyita mu data attributes oba mu ngalo ne JavaScript yo. Mu mbeera zombi, olina okuwa CSS ku kifo n'obugazi bw'ebirimu byo ebiteekeddwako.

Weetegereze: Tokozesa affix plugin ku elementi erimu mu elementi eteekeddwa mu kifo ekituufu, gamba nga ennyiriri ezisiddwa oba ezinyigirizibwa, olw'ekizibu ky'okulaga Safari .

Okuteeka ekifo nga oyita mu CSS

Affix plugin ekyusakyusa wakati wa kiraasi ssatu, buli emu ekiikirira embeera eyeetongodde: .affix, .affix-top, ne .affix-bottom. Olina okuwa emisono, okuggyako position: fixed;ku.affix , ku bibiina bino ggwe kennyini (nga tebyetongodde ku plugin eno) okukwata ebifo ebituufu.

Laba engeri affix plugin gy'ekola:

1. Okutandika, plugin eyongerako.affix-top okulaga nti elementi eri mu kifo kyakyo eky’oku ntikko-ekisinga. Mu kiseera kino tewali kuteeka CSS kwetaagibwa.
2. Okuyita ku elementi gy’oyagala okuteekebwako kisaana okutandika okuteekebwako okwennyini. Wano we .affixwakyusa .affix-topn'okuteeka position: fixed;(eweebwa CSS ya Bootstrap).
3. Singa offset eya wansi etegeezebwa, okutambula okuyita ku yo kulina okukyusa .affixne .affix-bottom. Okuva offsets bweziba za kwesalirawo, okuteekawo emu kyetaagisa okuteekawo CSS esaanira. Mu mbeera eno, yongerako position: absolute;bwe kiba kyetaagisa. Plugin ekozesa data attribute oba JavaScript option okuzuula wa okuteeka element okuva awo.

Goberera emitendera egyo waggulu okuteekawo CSS yo ku emu ku nkola z'okukozesa wansi.

Okuyita mu bikwata ku data

Okusobola okwanguyirwa okwongera ku nneeyisa y’okugatta ku elementi yonna, yongera data-spy="affix"ku elementi gy’oyagala okuketta. Kozesa offsets okunnyonnyola ddi lw'olina okukyusakyusa okusiba ekintu.

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

Okuyita mu JavaScript

Kuba ku affix plugin ng'oyita mu JavaScript:

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

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-offset-top="200".

Enkola

.affix(options)

Ekola ebirimu byo nga ebirimu ebiteekeddwako. Akkiriza eby'okulonda eby'okwesalirawo object.

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

.affix('checkPosition')

Eddamu okubala embeera y’ekigambo okusinziira ku bipimo, ekifo, n’ekifo ky’omuzingo gw’ebintu ebikwatagana. Ebika bya .affix, .affix-top, ne .affix-bottombyongerwa ku oba biggyibwa mu birimu ebiteekeddwako okusinziira ku mbeera empya. Enkola eno yeetaaga okuyitibwa buli lwe wabaawo ebipimo by’ebirimu ebiteekeddwako oba ekintu ekigendererwa bikyusibwa, okukakasa nti ebirimu ebiteekeddwako biteekebwa mu kifo ekituufu.

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

Ebibaddewo

Bootstrap's affix plugin eraga ebitonotono ebibaawo olw'okukwata mu nkola ya affix.