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

Okukozesa JavaScript ekuŋŋaanyiziddwa

Zombi bootstrap.jsera bootstrap.min.jszirimu plugins zonna mu fayiro emu. Muteekemu omu yekka.

Ebintu ebisinziira ku plugin

Plugins ezimu n'ebitundu bya CSS byesigamye ku plugins endala. Bw'oba ossaamu plugins kinnoomu, kakasa nti okebera bino ebisinziirako mu docs. Era weetegereze nti plugins zonna zeesigamye ku jQuery (kino kitegeeza nti jQuery erina okuteekebwamu nga fayiro za plugin tezinnabaawo). Weebuuze ku yaffebower.json olabe enkyusa ki eza jQuery eziwagirwa.

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

Plugin emu yokka buli elementi okuyita mu data attributes

Tokozesa data attributes okuva mu plugins eziwera ku element emu. Okugeza, button tesobola byombi kuba na tooltip ne toggle modal. Okutuukiriza kino, kozesa ekintu ekizinga.

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

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

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.

Amaterekero g’ebitabo ag’abantu ab’okusatu

Bootstrap tewagira mu butongole tterekero lya JavaScript ery'ekibiina eky'okusatu nga Prototype oba jQuery UI. Wadde nga waliwo .noConflictebibaddewo nga biteekeddwa mu kifo ky’amannya, wayinza okubaawo ebizibu by’okukwatagana by’olina okutereeza ku bubwo.

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 ekikendeezeddwa) 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 zikyukakyuka, dialog prompts nga zirina enkola entono ezeetaagisa n'okusooka okugezi.

Modal eziwera eziggule teziwagirwa

Kakasa nti toggulawo modal ng’endala ekyalabika. Okulaga modal ezisukka mu emu omulundi gumu kyetaagisa custom code.

Okuteeka obubonero bwa modal

Bulijjo gezaako okuteeka koodi ya HTML eya modal mu kifo eky’omutendera ogw’oku ntikko mu kiwandiiko kyo okwewala ebitundu ebirala ebikosa endabika ya modal ne/oba enkola.

Okulabula kw’ebyuma ebikozesebwa ku ssimu

Waliwo okulabula okumu ku bikwata ku kukozesa modals ku byuma ebikozesebwa ku ssimu. Laba ebiwandiiko byaffe ebiwagira browser okumanya ebisingawo.

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>

Fuula modals ezituukirirwa

Kakasa nti ossaako role="dialog"ne aria-labelledby="...", ng’ojuliza omutwe gwa modal, ku .modal, ne role="document"ku .modal-dialoggwennyini.

Okugatta ku ekyo, oyinza okuwa ennyonyola ku mboozi yo eya modal ne aria-describedbyon .modal.

Okuyingiza obutambi bwa YouTube

Okuteeka obutambi bwa YouTube mu modals kyetaagisa JavaScript endala etali mu Bootstrap okuyimiriza otomatiki okuzannya n’ebirala. Laba kino ekiyamba Stack Overflow post okumanya ebisingawo.

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

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

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

...ebirala buttons...
<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="".

Erinnya okuwandiika okukosamu okunnyonnyola
ekifaananyi eky’emabega boolean oba olunyiriri'static' kituufu Mulimu ekintu ekiyitibwa modal-backdrop element. Ekirala, lambika staticku backdrop etaggalawo modal ku click.
ekitabo ekikwata ku kibboodi boolean kituufu Eggalawo modal nga escape key enyigiddwa
okulaga boolean kituufu Alaga modal nga etandikiddwawo.
limooti ekkubo -kyaamu

Enkola eno evudde ku v3.3.0 era eggiddwawo mu v4. Tukuwa amagezi mu kifo ky'ekyo okukozesa client-side templating oba data binding framework, oba okuyita jQuery.load ggwe kennyini.

Singa URL ey'ewala eweebwa, ebirimu bijja kutikkibwa omulundi gumu nga biyita mu nkola ya jQuery loadera bifukiddwa mu .modal-contentdiv. Bw'oba okozesa data-api, oyinza okukozesa engeri endala hrefokulaga ensibuko ey'ewala. Ekyokulabirako ku kino kiragiddwa wansi:

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

Enkola

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

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

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

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

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

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

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

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

Ekika ky’Ekibaddewo Okunnyonnyola
okulaga.bs.modal Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa. Singa kiva ku kunyiga, ekintu ekinyigiddwa kibeerawo ng’eky’obugagga ky’ekintu relatedTargetekibaddewo.
eragiddwa.bs.modal Ekintu kino kikubwa nga modal ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). Singa kiva ku kunyiga, ekintu ekinyigiddwa kibeerawo ng’eky’obugagga ky’ekintu relatedTargetekibaddewo.
okukweka.bs.modal Ekintu kino kikubwa amangu ddala nga hideenkola ya instance eyitiddwa.
ekikwekebwa.bs.modal Ekintu kino kikubwa nga modal emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
etikkiddwa.bs.modal Ekintu kino kikubwa nga modal ebadde etisse ebirimu nga ekozesa remoteeky'okulonda.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Ebintu ebigwa wansi dropdown.js

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

Munda mu navbar

Munda mu mpeke

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

data-toggle="dropdown"kikyali kyetaagisa

Nga tofuddeeyo oba oyita dropdown yo ng'oyita mu JavaScript oba mu kifo ky'ekyo okozesa data-api, data-toggle="dropdown"bulijjo kyetaagisa okubeerawo ku dropdown's trigger element.

Tewali

Ekyusa menu egwa wansi eya navbar oba tabbed navigation eweereddwa.

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

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

Ekika ky’Ekibaddewo Okunnyonnyola
show.bs.okugwa wansi Ekintu kino kikuba amangu ddala nga enkola ya show instance eyitiddwa.
eragiddwa.bs.okukka wansi Ekintu kino kikubwa nga ekigwa kikoleddwa okulabika eri omukozesa (kijja kulinda enkyukakyuka za CSS, okuggwa).
hide.bs.okukka wansi Ekintu kino kikubwa amangu ddala nga enkola ya hide instance eyitiddwa.
ekikwekebwa.bs.okukka wansi Ekintu kino kikubwa nga ekigwa kiwedde okukwekebwa okuva eri omukozesa (kijja kulinda enkyukakyuka za CSS, okuggwa).
$('#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.

@obunene

Ad leggings keytar, brunch id art akabaga ka dolor labore. Pitchfork yr enim lo-fi nga tebannaba kutunda qui. Tumblr eddembe ly'obugaali okuva ku faamu okutuuka ku mmeeza kyonna. Anim keffiyeh kaadi ya carles. Velit seitan mcsweeney's ekifaananyi ekifo 3 omusege omwezi irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui osanga toziwuliddeko et cardigan ssente z'obwesige culpa biodiesel wes anderson aesthetic. Nihil alina ttatu accusamus, cred irony biodiesel keffiyeh omukozi w'emikono ullamco ekivaamu.

@mdo

Veniam marfa ebirevu skateboard, adipisicing ekirevu kya fugiat velit ekirevu eky’ekika kya pitchfork. Freegan ekirevu aliqua cupidatat ekirevu kya mcsweeney. Cupidatat abantu bana loko nisi, ea helvetica nulla carles. Loole y'emmere ya ssweeta ya cosby eriko ttatu, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 eby’okwewunda. Carles non aesthetic okukola dduyiro quis gentrify. Brooklyn adipisicing eby'emikono bbiya vice keytar deserunt.

emu

Occaecat ekika kya commodo ekiyitibwa ekirungo ekiyitibwa occaecat. Fap ebyemikono bbiya deserunt skateboard ea. Lomo obugaali eddembe adipisicing banh mi, velit ea sunt omutendera oguddako locavore kaawa ow’ensibuko emu mu magna veniam. Obulamu obw'amaanyi id vinyl, echo park consequat quis aliquip banh mi ppipa. Vero VHS est okusiiga amasanyalaze. Consectetur nisi DIY minim ensawo y'omubaka. Cred ex mu, okuwangaala delectus consectetur fanny pack iphone.

bbiri

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa ensawo y'omubaka marfa kyonna delectus loole y'emmere. Sapiente synth id okulowooza nti. Locavore sed helvetica cliche irony, okubwatuka osanga towuliddeko consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat nga tebannaba kutunda, terry richardson proident brunch nesciunt quis cosby ssweeta pariatur keffiyeh ut helvetica omukubi w'emikono. Cardigan craft bbiya seitan nga yeetegefu velit. VHS chambray laboris ekika kya veniam eky’ekiseera. Anim mollit minim commodo ullamco okubwatuka kw'okubwatuka.

Enkozesa

Yeetaaga Bootstrap nav

Scrollspy mu kiseera kino yeetaaga okukozesa ekitundu kya Bootstrap nav okusobola okulaga obulungi enkolagana ezikola.

Ebiruubirirwa bya ID ebigonjoolwa byetaagisa

Enkolagana za Navbar zirina okuba n'ebigendererwa bya id ebisobola okugonjoolwa. Okugeza, a <a href="#home">home</a>erina okukwatagana n’ekintu mu DOM nga <div id="home"></div>.

:visibleEbintu ebitali bigendererwa bibuusibwa amaaso

Ebintu ebigendererwa ebitali :visibleokusinziira ku jQuery bijja kubuusibwa amaaso era ebintu byabwe ebya nav ebikwatagana tebijja kulagibwa.

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

Erinnya okuwandiika okukosamu okunnyonnyola
offset omuwendo 10. 10 Pixels oku offset okuva waggulu nga obala ekifo ky'omuzingo.

Ebibaddewo

Ekika ky’Ekibaddewo Okunnyonnyola
okukola.bs.srollspy Ekintu kino kikuba omuliro buli ekintu ekipya lwe kifuuka ekikozesebwa scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Tabs ezikyusibwakyusibwa tab.js

Eby’okulabirako tabu

Okwongera ku nkola ya tabu ey’amangu, ekyukakyuka okukyuka okuyita mu bitundu by’ebirimu eby’omu kitundu, wadde ng’oyita mu menyu ezikka. Taabu eziteekeddwa mu kisenge teziwagirwa.

Raw denim osanga toziwuliddeko jean shorts Austin. Nesciunt tofu stumptown aliqua, okuyonja omukugu mu kukola eby’amaguzi eby’edda. Ebirevu cliche ekiseera, williamsburg carles vegan helvetica. Reprehenderit omunyama retro keffiyeh omukwasi w'ebirooto synth. Ssweeta ya cosby eu banh mi, qui irure terry richardson eyali squid. Aliquip placeat omusajja omulala ayitibwa salvia cillum iphone. Seitan aliquip quis cardigan engoye z'omumerika, omunyama voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Egaziya okutambulira ku tabbed

Plugin eno egaziya ekitundu ky'okutambulira ku tabbed okugattako ebitundu ebiriko tabba.

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

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

Ekika ky’Ekibaddewo Okunnyonnyola
okulaga.bs.tab Ekintu kino kikuba omuliro ku tab show, naye nga tab empya tennalagibwa. Kozesa event.targetne event.relatedTargetokutunuulira tabu ekola ne tabu ekola eyasooka (bwe kiba nga kiriwo) mu kulondako.
eragiddwa.bs.tab Ekintu kino kikuba omuliro ku tab show oluvannyuma lwa tab okulagibwa. Kozesa event.targetne event.relatedTargetokutunuulira tabu ekola ne tabu ekola eyasooka (bwe kiba nga kiriwo) mu kulondako.
okukweka.bs.tab Ekintu kino kikuba omuliro nga tabu empya egenda kulagibwa (era bwe kityo tabu ekola eyasooka erina okukwekebwa). Kozesa event.targetne event.relatedTargetokutunuulira tabu ekola kati ne tabu empya egenda okukola mu bbanga ttono, mu kulondako.
ekikwekebwa.bs.tab Ekintu kino kikuba omuliro oluvannyuma lwa tabu empya okulagibwa (era bwe kityo tabu ekola eyasooka ekwekebwa). Kozesa event.targetne event.relatedTargetokutunuulira tabu ekola emabega ne tabu empya ekola, mu kulondako.
$('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:

Tight pants next level keffiyeh osanga toziwuliddeko . Ekifaananyi ekibanda ekirevu embisi denim letterpress vegan omubaka ensawo stumptown. Seitan okuva ku faamu okutuuka ku mmeeza, engoye za mcsweeney eziyitibwa fixie sustainable quinoa 8-bit american apparel zirina terry richardson vinyl chambray. Ekirevu stumptown, cardigans banh mi lomo okubwatuka. Tofu biodiesel williamsburg marfa, bana loko mcsweeney's okuyonja vegan chambray. A really ironic artisan whatever keytar , scenester faamu-ku-mmeeza banksy Austin twitter okukwata freegan cred embisi denim ensibuko emu kaawa viral.

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>

Enkola y’okwesalirawo (opt-in).

Olw'ensonga z'okukola, Tooltip ne Popover data-apis zibeera opt-in, ekitegeeza nti olina okuzitandika ggwe kennyini .

Engeri emu ey’okutandikawo obukodyo bwonna obw’ebikozesebwa ku lupapula yandibadde okubironda okusinziira ku ngeri yaabwe data-toggle:

$(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 ekiyitibwa tooltip kyangu nnyo, wadde nga kyetaaga ekifo (nga bwe kibadde, kiteekeddwawo ku topby the 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>

Enkolagana ez’ennyiriri eziwera

Oluusi oyagala okwongerako tooltip ku hyperlink ezizinga layini eziwera. Enneeyisa esookerwako eya tooltip plugin kwe kugiteeka wakati mu horizontal ne vertically. Okwongerako white-space: nowrap;ku nnanga zo okwewala kino.

Ebikozesebwa mu bibinja bya button, ebibinja by'okuyingiza, n'emmeeza byetaaga okuteekawo okw'enjawulo

Bw’oba ​​okozesa obukodyo bw’ebikozesebwa ku bintu ebiri munda mu a .btn-groupoba an .input-group, oba ku bintu ebikwatagana n’emmeeza ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), ojja kuba olina okulaga eky’okulonda container: 'body'(ekiwandiikiddwa wansi) okwewala ebizibu ebiteetaagibwa (nga ekintu okukula nga kigazi ne/ oba okufiirwa enkoona zaayo ezeetooloovu nga tooltip ekoleddwa).

Togezaako kulaga bikozesebwa ku bintu ebikwekebwa

Okuyita $(...).tooltip('show')nga ekintu ekigendererwa kiri display: none;kijja kuleetera tooltip okubeera mu kifo ekikyamu.

Ebikozesebwa ebituukirirwa eri abakozesa keyboard ne tekinologiya ayamba

Ku bakozesa abatambulira ku kibboodi, n’okusingira ddala abakozesa tekinologiya ayamba, olina okwongerako obukodyo bwokka ku bintu ebitunuulirwa ku kibboodi nga enkolagana, ebifuga foomu, oba ekintu kyonna eky’okwesalirawo ekirina tabindex="0"ekintu.

Ebikozesebwa ku bintu ebilema byetaaga ebintu ebizingako

Okwongera ekiwandiiko ky’ebikozesebwa ku a disabledoba .disabledekintu, teeka ekintu munda mu a <div>era osiige ekiwandiiko ky’ebikozesebwa ku ekyo <div>mu kifo ky’ekyo.

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

Erinnya Okuwandiika Okukosamu Okunnyonnyola
okukola ebifaananyi ebirina obulamu boolean kituufu Kozesa enkyukakyuka ya CSS fade ku tooltip
ekintu ekirimu ebintu olunyiriri | -kyaamu -kyaamu

Egattako ekintu ekikozesebwa ku kintu ekigere. Okugeza: container: 'body'. Enkola eno ya mugaso nnyo mu ngeri nti ekusobozesa okuteeka ekintu ekikozesebwa mu kutambula kw'ekiwandiiko okumpi n'ekintu ekitandika - ekijja okulemesa ekintu ekikozesebwa okulengejja okuva ku kintu ekitandika mu kiseera ky'okukyusa obunene bw'eddirisa.

okulwawo ennamba | ekintu 0.

Okulwawo okulaga n'okukweka tooltip (ms) - tekikwata ku kika kya manual trigger

Singa ennamba eweebwa, okulwawo kukozesebwa ku byombi okukweka/okulaga

Ensengeka y’ekintu eri nti:delay: { "show": 500, "hide": 100 }

html boolean -kyaamu Teeka HTML mu tooltip. Bwe kiba kya bulimba, enkola ya jQuery textejja kukozesebwa okuyingiza ebirimu mu DOM. Kozesa ebiwandiiko bw'oba weeraliikirira obulumbaganyi bwa XSS.
okuteekebwa mu kifo olunyiriri | enkola 'waggulu'

Engeri y'okuteeka ekiwandiiko ky'ebikozesebwa - waggulu | wansi | ku kkono | ku ddyo | auto.
"auto" bwe eragiddwa, ejja kuddamu okulungamya ekintu ekikozesebwa mu ngeri ey'amaanyi. Okugeza, singa okuteeka kuba "auto left", tooltip ejja kulaga ku kkono nga kisoboka, bwe kitaba ekyo ejja kulaga ku ddyo.

Omulimu bwe gukozesebwa okuzuula ekifo, guyitibwa nga tooltip DOM node ye argument yaayo esooka ate triggering element DOM node nga eyookubiri. Ensonga thiseteekeddwa ku kifaananyi ky'ekintu ekikozesebwa.

omusunsuzi akaguwa -kyaamu Singa omusunsula aweebwa, ebintu ebikozesebwa bijja kuweebwa ebigendererwa ebiragiddwa. Mu nkola, kino kikozesebwa okusobozesa ebirimu ebya HTML ebikyukakyuka okuba n’obukodyo bw’ebikozesebwa obugattibwako. Laba kino n'ekyokulabirako ekirimu amawulire .
ekifaananyi ky’ebifaananyi akaguwa '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML okukozesa nga okola tooltip.

Tooltip's titlezijja kufukibwa mu .tooltip-inner.

.tooltip-arrowejja kufuuka akasaale k'ekintu ekikozesebwa.

Ekintu eky’okuzinga ekisinga ebweru kirina okuba ne .tooltipkiraasi.

omutwe olunyiriri | enkola '' .

Omuwendo gw'omutwe ogusookerwako singa titleekintu tekibaawo.

Singa omulimu guweebwa, gujja kuyitibwa nga thisreference yaago eteekeddwa ku elementi tooltip gye yegattibwako.

okusiikula akaguwa 'okussa essira ku 'hover'. Engeri tooltip gy'etandikibwamu - nyweza | hover | okussa essira | maniyo. Oyinza okuyisa ebizibu ebiwerako; zaawule n’ekifo. manualtesobola kugattibwa wamu na kiziyiza kirala kyonna.
ekifo eky’okulaba olunyiriri | ekintu | enkola { omusunsuzi: 'omubiri', padding: 0 } .

Akuuma tooltip mu nsalo za elementi eno. Okugeza: viewport: '#viewport'oba{ "selector": "#viewport", "padding": 0 }

Singa omulimu guweebwa, guyitibwa nga ekintu ekiziyiza DOM node nga ensonga yaakyo yokka. Omuthis eteekeddwa ku kifaananyi ky'ekintu ekikozesebwa.

Ebikwata ku data ku bikozesebwa ssekinnoomu

Enkola z’ebikozesebwa ssekinnoomu zisobola okulagibwa mu ngeri endala okuyita mu kukozesa ebikwata ku data, nga bwe kinnyonnyoddwa waggulu.

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

Ekika ky’Ekibaddewo Okunnyonnyola
show.bs.ekintu eky'okukozesa Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa.
eragiddwa.bs.ekintu ekikozesebwa Ekintu kino kikubwa nga tooltip ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
hide.bs.ekintu eky'okukozesa Ekintu kino kikubwa amangu ddala nga hideenkola ya instance eyitiddwa.
ekiwandiiko ekikwekebwa.bs.tooltip Ekintu kino kikubwa nga tooltip emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
eyingiziddwa.bs.ekintu ekikozesebwa Ekintu kino kigobwa oluvannyuma show.bs.tooltiplw'ekintu nga ekifaananyi ky'ekikozesebwa kyongeddwa ku DOM.
$('#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 n’ebirimu byombi biri zero-length tebiragibwangako.

Okwesigamira ku plugin

Popovers zeetaaga tooltip plugin okuteekebwa mu nkyusa yo eya Bootstrap.

Enkola y’okwesalirawo (opt-in).

Olw'ensonga z'okukola, Tooltip ne Popover data-apis zibeera opt-in, ekitegeeza nti olina okuzitandika ggwe kennyini .

Engeri emu ey'okutandikawo popovers zonna ku lupapula yandibadde okuzilonda okusinziira ku data-toggleattribute yazo:

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

Popovers mu bibinja bya button, ebibinja by'okuyingiza, n'emmeeza zeetaaga okuteekawo okw'enjawulo

Bw’oba ​​okozesa popovers ku elementi eziri munda mu a .btn-groupoba an .input-group, oba ku elementi ezikwatagana n’emmeeza ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), ojja kuba olina okulaga eky’okulonda container: 'body'(ewandiikiddwa wansi) okwewala ebizibu ebiteetaagibwa (nga elementi okukula nga egazi ne/ oba okufiirwa enkoona zaayo ezeetooloovu nga popover ekoleddwa).

Togezaako kulaga popovers ku elements ezikwekebwa

Okuyita $(...).popover('show')nga ekintu ekigendererwa kiri display: none;kijja kuleetera popover okubeera mu kifo ekikyamu.

Popovers ku elements ezilema zeetaaga wrapper elements

Okwongera popover ku a disabledoba .disabledelement, teeka element munda mu a <div>era osiige popover ku ekyo <div>mu kifo ky’ekyo.

Enkolagana ez’ennyiriri eziwera

Oluusi oyagala okwongerako popover ku hyperlink ezizinga layini eziwera. Enneeyisa esookerwako eya popover plugin kwe kugiteeka wakati mu horizontal ne vertically. Okwongerako white-space: nowrap;ku nnanga zo okwewala kino.

Eby’okulabirako

Static popover nga bwe kiri

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

Popover waggulu

Sed posuere consectetur esangibwa mu kifo ekiyitibwa lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia ekisenge ky’omu lubuto ekiyitibwa vestibulum.

Popover kituufu

Sed posuere consectetur esangibwa mu kifo ekiyitibwa lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia ekisenge ky’omu lubuto ekiyitibwa vestibulum.

Popover wansi

Sed posuere consectetur esangibwa mu kifo ekiyitibwa lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia ekisenge ky’omu lubuto ekiyitibwa vestibulum.

Popover yavuddeyo

Sed posuere consectetur esangibwa mu kifo ekiyitibwa lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia ekisenge ky’omu lubuto ekiyitibwa vestibulum.

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.

Markup eyenjawulo yeetaagibwa ku kugobwa-ku-ku-ku-ku-dako-okunyiga

Okusobola enneeyisa entuufu eya cross-browser ne cross-platform, olina okukozesa <a>tag, so si tag <button>, era era olina okussaamu attributes role="button"ne .tabindex

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

Erinnya Okuwandiika Okukosamu Okunnyonnyola
okukola ebifaananyi ebirina obulamu boolean kituufu Kozesa enkyukakyuka ya CSS fade ku popover
ekintu ekirimu ebintu olunyiriri | -kyaamu -kyaamu

Agattako popover ku elementi eyeetongodde. Okugeza: container: 'body'. Enkola eno ya mugaso nnyo mu ngeri nti ekusobozesa okuteeka popover mu kutambula kw'ekiwandiiko okumpi n'ekintu ekiziyiza - ekijja okulemesa popover okulengejja okuva ku kintu ekiziyiza mu kiseera ky'okukyusa obunene bw'eddirisa.

okwesiima olunyiriri | enkola '' .

Omuwendo gw'ebirimu ogusookerwako singa data-contentekintu tekibaawo.

Singa omulimu guweebwa, gujja kuyitibwa nga thisreference yaayo eteekeddwa ku elementi popover gy’eyungiddwako.

okulwawo ennamba | ekintu 0.

Okulwawo okulaga n'okukweka popover (ms) - tekikwata ku kika kya manual trigger

Singa ennamba eweebwa, okulwawo kukozesebwa ku byombi okukweka/okulaga

Ensengeka y’ekintu eri nti:delay: { "show": 500, "hide": 100 }

html boolean -kyaamu Teeka HTML mu popover. Bwe kiba kya bulimba, enkola ya jQuery textejja kukozesebwa okuyingiza ebirimu mu DOM. Kozesa ebiwandiiko bw'oba weeraliikirira obulumbaganyi bwa XSS.
okuteekebwa mu kifo olunyiriri | enkola 'kituufu'

Engeri y'okuteeka popover - waggulu | wansi | ku kkono | ku ddyo | auto.
"auto" bwe eragiddwa, ejja kuddamu okulungamya popover mu ngeri ey'amaanyi. Okugeza, singa okuteeka kuba "auto left", popover ejja kulaga ku kkono nga kisoboka, bwe kitaba ekyo ejja kulaga ku ddyo.

Omulimu bwe gukozesebwa okuzuula ekifo, guyitibwa nga popover DOM node nga ensonga yaayo esooka ate triggering element DOM node nga eyookubiri. Ensonga thiseteekeddwa ku popover instance.

omusunsuzi akaguwa -kyaamu Singa omusunsula aweebwa, ebintu bya popover bijja kuweebwa ebigendererwa ebiragiddwa. Mu nkola, kino kikozesebwa okusobozesa ebirimu bya HTML ebikyukakyuka okuba ne popovers ezigattibwako. Laba kino n'ekyokulabirako ekirimu amawulire .
ekifaananyi ky’ebifaananyi akaguwa '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML okukozesa nga okola popover.

Popover's titleegenda kufuyirwa mu .popover-title.

Popover's contentegenda kufuyirwa mu .popover-content.

.arrowejja kufuuka akasaale ka popover.

Ekintu eky’okuzinga ekisinga ebweru kirina okuba ne .popoverkiraasi.

omutwe olunyiriri | enkola '' .

Omuwendo gw'omutwe ogusookerwako singa titleekintu tekibaawo.

Singa omulimu guweebwa, gujja kuyitibwa nga thisreference yaayo eteekeddwa ku elementi popover gy’eyungiddwako.

okusiikula akaguwa 'nyiga'. Engeri popover gy'etandika - nyweza | hover | okussa essira | maniyo. Oyinza okuyisa ebizibu ebiwerako; zaawule n’ekifo. manualtesobola kugattibwa wamu na kiziyiza kirala kyonna.
ekifo eky’okulaba olunyiriri | ekintu | enkola { omusunsuzi: 'omubiri', padding: 0 } .

Akuuma popover mu nsalo za elementi eno. Okugeza: viewport: '#viewport'oba{ "selector": "#viewport", "padding": 0 }

Singa omulimu guweebwa, guyitibwa nga ekintu ekiziyiza DOM node nga ensonga yaakyo yokka. Ensonga thiseteekeddwa ku popover instance.

Ebikwata ku data ku popovers ssekinnoomu

Enkola za popovers ssekinnoomu zisobola mu ngeri endala okulagibwa okuyita mu kukozesa data attributes, nga bwe kinnyonnyoddwa waggulu.

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

Ekika ky’Ekibaddewo Okunnyonnyola
show.bs.obwavu Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa.
alagiddwa.bs.obwavu Ekintu kino kigobwa nga popover ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
okukweka.bs.obwavu Ekintu kino kikubwa amangu ddala nga hideenkola ya instance eyitiddwa.
okukwekebwa.bs.obwavu Ekintu kino kigobwa nga popover emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
eyingiziddwa.bs.obwavu Omukolo guno gugobwa oluvannyuma show.bs.popoverlw'omukolo nga popover template eyongezeddwa ku DOM.
$('#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 ziggalawo, kakasa nti zirina .fadene.in classes 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.

Ekika ky’Ekibaddewo Okunnyonnyola
okuggalawo.bs.okulabula Ekintu kino kikuba amangu ddala nga closeenkola ya instance eyitiddwa.
eggaddwa.bs.okulabula Ekintu kino kikubwa nga okulabula kuggaddwa (kijja kulinda enkyukakyuka za CSS okuggwa).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Ebikondo ebiyitibwa ButtonsEbintu ebikozesebwa

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

Okukwatagana kwa cross-browser

Firefox enywerera ku mbeera z'okufuga ffoomu (obulema n'okukeberebwa) mu kutikka empapula zonna . Eky'okugonjoola kino kwe kukozesa autocomplete="off". Laba ekizibu kya Mozilla #654072 .

Stateful

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

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

Kozesa embeera yonna gy’oyagala!

Ku lw'obulungi bw'okwolesebwa kuno, tukozesa data-loading-textne $().button('loading'), naye eyo si y'embeera yokka gy'osobola okukozesa. Laba ebisingawo ku kino wansi mu $().button(string)biwandiiko .

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

Okukyusakyusa okumu

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

Pre-toggled buttons zeetaaga.active eraaria-pressed="true"

Ku buttons ezikyusiddwa nga tezinnabaawo, olina okugattako .activeekibiina aria-pressed="true"n'ekintu ku buttonyourself.

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

Checkbox / Leediyo

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

Enkola ezirondeddwa nga tezinnabaawo zeetaaga.active

Ku by'okulonda ebirondeddwa, olina okwongera .activeekibiina ku input's labelggwe kennyini.

Visual checked state yokka etereezebwa ku click

Singa embeera erongooseddwa eya button ya checkbox etereezebwa awatali kukuba clickkintu ku button (okugeza okuyita <input type="reset">oba okuyita mu kuteekawo checkedeky'obugagga ky'okuyingiza), ojja kwetaaga okukyusa .activeekibiina ku input's labelggwe kennyini.

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

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" autocomplete="off">
  ...
</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.

Okwesigamira ku plugin

Okugwa kyetaagisa plugin y'enkyukakyuka okuteekebwa mu nkyusa yo eya Bootstrap.

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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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.

Anim pariatur cliche reprehenderit, enim eiusmod obulamu obw'ekika ekya waggulu accusamus terry richardson ad squid. 3 omusege omwezi officia aute, etali ya cupidatat skateboard dolor brunch. Loole y’emmere quinoa nesciunt laborum eiusmod. Brunch 3 omusege omwezi tempor, sunt aliqua okugiteekako ekinyonyi squid kaawa ow’ensibuko emu nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, bbiya ow’emikono omulimu wes anderson cred nesciunt sapiente ea proident. Ad vegan okujjako ennyama vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt osanga towuliddeko ku bo accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod obulamu obw'ekika ekya waggulu accusamus terry richardson ad squid. 3 omusege omwezi officia aute, etali ya cupidatat skateboard dolor brunch. Loole y’emmere quinoa nesciunt laborum eiusmod. Brunch 3 omusege omwezi tempor, sunt aliqua okugiteekako ekinyonyi squid kaawa ow’ensibuko emu nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, bbiya ow’emikono omulimu wes anderson cred nesciunt sapiente ea proident. Ad vegan okujjako ennyama vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt osanga towuliddeko ku bo accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod obulamu obw'ekika ekya waggulu accusamus terry richardson ad squid. 3 omusege omwezi officia aute, etali ya cupidatat skateboard dolor brunch. Loole y’emmere quinoa nesciunt laborum eiusmod. Brunch 3 omusege omwezi tempor, sunt aliqua okugiteekako ekinyonyi squid kaawa ow’ensibuko emu nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, bbiya ow’emikono omulimu wes anderson cred nesciunt sapiente ea proident. Ad vegan okujjako ennyama vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt osanga towuliddeko ku bo accusamus labore sustainable VHS.
<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.

  • Bootply nga bwe kiri
  • Ekimu itmus ac facilin
  • Eros eyokubiri

Fuula ebifuga okugaziya/okugwa okutuukirika

Kakasa nti oyongera aria-expandedku kintu ekifuga. Ekintu kino kitegeeza mu bulambulukufu embeera eriwo kati ey’ekintu ekiyinza okugwa okusengejja abasomi ne tekinologiya ow’okuyamba afaananako bwetyo. Singa ekintu ekiyinza okugwa kiggalwawo nga bwe kibadde, kisaana okuba n'omuwendo gwa aria-expanded="false". Bw'oba otaddewo ekintu ekiyinza okugwa okubeera ekiggule nga bwe kibadde ng'okozesa inkiraasi, teeka aria-expanded="true"ku kifuga mu kifo ky'ekyo. Plugin ejja kukyusakyusa ekintu kino mu ngeri ey’otoma okusinziira ku oba ekintu ekiyinza okugwa kigguddwawo oba kiggaddwa oba nedda.

Okugatta ku ekyo, singa ekintu kyo ekifuga kiba kigenderera ekintu kimu ekiyinza okugwa – kwe kugamba data-targetekintu ekiraga ekintu idekisunsuddwa – oyinza okwongerako ekintu ekirala aria-controlsku kintu ekifuga, ekirimu ideky’ekintu ekiyinza okugwa. Ebisoma ku ssirini eby’omulembe ne tekinologiya ow’enjawulo ayambako bakozesa ekintu kino okuwa abakozesa enkola endala ennyimpi okugenda butereevu ku kintu kyennyini ekiyinza okugwa.

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 ekibiina 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="".

Erinnya okuwandiika okukosamu okunnyonnyola
omuzadde omusunsuzi -kyaamu Singa ekisunsula kiweebwa, olwo ebintu byonna ebiyinza okugwa wansi w'omuzadde alagiddwa bijja kuggalwawo ng'ekintu kino ekiyinza okugwa kiragiddwa. (okufaananako n’enneeyisa ya accordion ey’ennono - kino kisinziira ku panelkiraasi)
okukyusakyusa boolean kituufu Ekyusa ekintu ekiyinza okugwa ku kuyita

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.

Ekika ky’Ekibaddewo Okunnyonnyola
show.bs.okugwa Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa.
eragiddwa.bs.okugwa Ekintu kino kikubwa nga ekintu ekigwa kikoleddwa okulabika eri omukozesa (kijja kulinda enkyukakyuka za CSS okuggwa).
okukweka.bs.okugwa Ekintu kino kikubwa amangu ddala hideng’enkola eyitiddwa.
ekikwekebwa.bs.okugwa Ekintu kino kikubwa nga ekintu ekigwa kikwekeddwa okuva eri omukozesa (kijja kulinda enkyukakyuka za CSS okuggwa).
$('#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.

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

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

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 ogutandikira ku 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()

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

Erinnya okuwandiika okukosamu okunnyonnyola
interval omuwendo 5000 Omuwendo gw’obudde okulwawo wakati w’okuvuga ekintu mu ddigi mu ngeri ey’otoma. Bwe kiba kya bulimba, carousel tejja kutambula butereevu.
okuyimirizamu olunyiriri | tekili mu mateeka "okuwuubaala". Singa eteekebwa ku "hover", eyimiriza okuvuga obugaali bwa carousel ku mouseentern'okuddamu okuvuga obugaali bwa carousel ku mouseleave. Singa oteekebwa ku null, okuwuubaala ku carousel tekijja kugiyimiriza.
okuzinga boolean kituufu Oba carousel erina okutambula obutasalako oba okuba n’ebifo ebikaluba.
ekitabo ekikwata ku kibboodi boolean kituufu Oba carousel erina okuddamu ku bibaddewo ku keyboard.

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

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

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

Ayimiriza carousel okuvuga obugaali okuyita mu bintu.

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

Enzirukanya okutuuka ku kintu ekyayita.

Ezingulula okutuuka ku kintu ekiddako.

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

Ekika ky’Ekibaddewo Okunnyonnyola
slide.bs.ekyuma ekiyitibwa carousel Ekintu kino kikuba amangu ddala nga slideenkola y'ekyokulabirako eyitibwa.
ekiseeyeeya.bs.carousel Ekintu kino kikubwa nga carousel emalirizza enkyukakyuka yaayo eya slide.
$('#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 eyongera .affix-topokulaga 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".

Erinnya okuwandiika okukosamu okunnyonnyola
offset ennamba | omulimu | ekintu 10. 10 Pixels oku offset okuva ku screen nga obala ekifo ky'omuzingo. Singa ennamba emu eweebwa, offset ejja kukozesebwa mu ndagiriro zombi eza waggulu ne wansi. Okuwa eky'enjawulo, wansi n'okungulu offset just okuwa ekintu offset: { top: 10 }oba offset: { top: 10, bottom: 5 }. Kozesa omulimu nga weetaaga okubala offset mu ngeri ey’amaanyi.
ssabaawa omusunsuzi | node | jEkitundu ky'okubuuza ekintu windowekyo Laga ekintu ekigendererwa eky'okugattako.

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.

Ekika ky’Ekibaddewo Okunnyonnyola
okussaako.bs.okussaako Ekintu kino kikuba amangu ddala nga elementi tennateekebwako.
ekiteekeddwako.bs.affix Ekintu kino kikubwa oluvannyuma lw'ekintu okuteekebwako.
affix-oku ntikko.bs.affix Ekintu kino kikuba amangu ddala nga elementi tennateekebwako-top.
affixed-oku ntikko.bs.affix Ekintu kino kikubwa oluvannyuma lw'ekintu okuteekebwako-ku ntikko.
affix-wansi.bs.omugatteko Ekintu kino kikuba amangu ddala nga elementi tennaba kuteekebwako-wansi.
ekiteekeddwako-wansi.bs.affix Ekintu kino kikubwa oluvannyuma lw'ekintu okuteekebwako-wansi.