Isishwankathelo

Umntu ngamnye okanye uqokelelwe

Iiplagi zingabandakanywa ngabanye (usebenzisa iifayile zomntu ngamnye *.jszeBootstrap), okanye zonke ngaxeshanye (usebenzisa bootstrap.jsokanye iminified bootstrap.min.js).

Ukusebenzisa iJavaScript ehlanganisiweyo

Zombini bootstrap.jskwaye bootstrap.min.jsziqulathe zonke iiplagi kwifayile enye. Bandakanya enye kuphela.

Ukuxhomekeka kwi-plugin

Ezinye iiplagi kunye namalungu eCSS axhomekeke kwezinye iiplagi. Ukuba ubandakanya ii-plugins nganye, qiniseka ukuba ukhangele ezi zixhomekeke kumaxwebhu. Kwakhona qaphela ukuba zonke iiplagi zixhomekeke kwijQuery (oku kuthetha ukuba i-jQuery kufuneka ifakwe phambi kweefayile zeplagin). Qhagamshelana nathibower.json ukuze ubone ukuba zeziphi iinguqulelo zejQuery ezixhaswayo.

Iimpawu zedatha

Ungasebenzisa zonke iiplagi ze-Bootstrap ngaphandle kwe-API yokuphawula ngaphandle kokubhala umgca omnye weJavaScript. Le yiBootstrap yodidi lokuqala lwe-API kwaye kufuneka ibe yingqwalasela yakho yokuqala xa usebenzisa iplagi.

Oko kwathiwa, kwezinye iimeko kunokunqweneleka ukucima lo msebenzi. Ngoko ke, sikwabonelela ngokukwazi ukukhubaza uphawu loyelelwano lwedatha ye-API ngokukhulula zonke iziganeko kuxwebhu olunezithuba zamagama data-api. Oku kukhangeleka ngolu hlobo:

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

Kungenjalo, ukujolisa iplagin ethile, faka nje igama leplagin njengendawo yegama kunye ne-data-api namespace efana nale:

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

Inye kuphela iplagi yento nganye ngeempawu zedatha

Musa ukusebenzisa iimpawu zedatha ezivela kwiiplagi ezininzi kwindawo enye. Umzekelo, iqhosha alinakuba nencam yesixhobo kunye nokuguqula imodali. Ukuze wenze oku, sebenzisa i-elementi yokusonga.

Programmatic API

Sikwakholelwa ukuba kufuneka ukwazi ukusebenzisa zonke iiplagi zeBootstrap ngeJavaScript API. Zonke ii-API zikawonke-wonke zinye, iindlela ezibotshelelwayo, kwaye zibuyisela ingqokelela eyenziweyo.

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

Zonke iindlela kufuneka zamkele into ekhethiweyo yeenketho, umtya ojolise kwindlela ethile, okanye akukho nto (eqalisa iplagin ngokuziphatha okungagqibekanga):

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

I-plugin nganye iphinda iveze umakhi wayo ekrwada Constructorkwipropati: $.fn.popover.Constructor. Ukuba ungathanda ukufumana umzekelo othile weplagi, yifumane ngokuthe ngqo kwinto: $('[rel="popover"]').data('popover').

Useto oluhlala lukhona

Ungatshintsha useto olungagqibekanga lweplagi ngokulungisa Constructor.DEFAULTSinto yeplagin:

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

Akukho ngquzulwano

Ngamanye amaxesha kuyimfuneko ukusebenzisa iiplagi ze-Bootstrap kunye nezinye izikhokelo ze-UI. Kwezi meko, ukungqubana kwesithuba segama kunokwenzeka ngamanye amaxesha. Ukuba oku kuyenzeka, .noConflictungafowunela iplagin onqwenela ukubuyisela ixabiso layo.

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

Iziganeko

I-Bootstrap ibonelela ngeziganeko zesiko kwiintshukumo ezininzi ezizodwa zeeplagi. Ngokuqhelekileyo, ezi ziza ngendlela engapheliyo kunye neyexesha elidlulileyo - apho i-infinitive (umz. show) iqaliswa ekuqaleni kwesiganeko, kwaye imo yaso yexesha elidlulileyo ye-participle (umz. shown) ivuselelwe ekugqityweni kwesenzo.

Ukusukela nge-3.0.0, zonke iziganeko ze-Bootstrap zinezithuba zamagama.

Zonke iziganeko ezingapheliyo zibonelela preventDefaultngokusebenza. Oku kubonelela ukukwazi ukumisa ukuphunyezwa kwesenzo phambi kokuba siqale.

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

Amanani enguqulelo

Uguqulelo lweplagi nganye yeBootstrap's jQuery inokufikelelwa VERSIONngepropati yomakhi weplagi. Umzekelo, kwi-plugin yengcebiso yesixhobo:

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

Akukho mpazamo zikhethekileyo xa iJavaScript ivaliwe

Iiplagi zeBootstrap azibuyeli ngasemva ngokukodwa xa iJavaScript ivaliwe. Ukuba unenkathalo ngamava omsebenzisi kule meko, sebenzisa <noscript>ukuchaza imeko (kunye nendlela yokwenza kwakhona iJavaScript) kubasebenzisi bakho, kunye/okanye ukongeza okwakho ukusilela.

Amathala eencwadi eqela lesithathu

I-Bootstrap ayizixhasi ngokusemthethweni iilayibrari zeJavaScript zomntu wesithathu njengePrototype okanye i-jQuery UI. Ngaphandle .noConflictkweziganeko ezinamagama, kusenokubakho iingxaki zokuhambelana ekufuneka uzilungise wedwa.

Iinguqu zenguqu.js

Malunga neenguqu

Ngeziphumo ezilula zotshintsho, bandakanya transition.jskanye ecaleni kwezinye iifayile zeJS. Ukuba usebenzisa i compiled (okanye minified) bootstrap.js, akukho mfuneko yokubandakanya oku-sele kukho.

Yintoni ngaphakathi

I-Transition.js ingumncedi osisiseko wemisitho transitionEndkunye ne-emulator yenguqu ye-CSS. Isetyenziswa zezinye iiplagi ukujonga inkxaso yenguqu yeCSS nokubamba iinguqu ezijingayo.

Ikhubaza utshintsho

Utshintsho lunokuvalwa kwihlabathi jikelele kusetyenziswa le JavaScript ilandelayo ya snippet, emayize emva kokuba transition.js(okanye bootstrap.js, bootstrap.min.jsnjengoko kusenokuba njalo) ilayishiwe:

$.support.transition = false

Iimodeli zemodal.js

Iimodyuli zilungelelanisiwe, kodwa zibhetyebhetye, iingxoxo zencoko yababini ezinobuncinci obufunekayo obufunekayo kunye nokungagqibekanga okuhlakaniphile.

Iimodeli ezininzi ezivulekileyo azixhaswanga

Qinisekisa ukuba ungayivuli imodali ngelixa enye isabonakala. Ukubonisa ngaphezulu kwemodali enye ngexesha kufuna ikhowudi yesiko.

Ukubekwa kwemodal markup

Ngalo lonke ixesha zama ukubeka ikhowudi yeHTML yemodal kwindawo ephezulu kuxwebhu lwakho ukunqanda amanye amalungu achaphazela inkangeleko yemodal kunye/okanye ukusebenza.

Isixhobo esiphathwayo caveats

Kukho ezinye izilumkiso malunga nokusetyenziswa kweemodyuli kwizixhobo eziphathwayo. Jonga amaxwebhu ethu enkxaso kwisikhangeli ukuze ufumane iinkcukacha.

Ngenxa yendlela i-HTML5 eyichaza ngayo i-semantics yayo, autofocusuphawu lwe-HTML alunasiphumo kwiimodyuli zeBootstrap. Ukufezekisa umphumo ofanayo, sebenzisa iJavaScript yesiko:

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

Imizekelo

Umzekelo omileyo

Imodali enikezelweyo enesihloko, umzimba, kunye neseti yezenzo kumbhalo osemazantsi.

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

Idemo ephilayo

Guqula imodal usebenzisa iJavaScript ngokucofa iqhosha elingezantsi. Iza kutyibilika phantsi kwaye iphele ukusuka phezulu ephepheni.

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

Yenza iimodeli zifikeleleke

Qinisekisa ukuba wongeza role="dialog"kunye aria-labelledby="...", ubhekisa kwisihloko semodal, ku .modal, kwaye role="document"kuyo .modal-dialogngokwayo.

Ukongeza, unganika inkcazo yencoko yababini yemodal nge aria-describedbykwi .modal.

Ifakela iividiyo zikaYouTube

Ukufakela iividiyo zikaYouTube kwiimodyuli kufuna iJavaScript eyongezelelweyo engekho kwiBootstrap ukumisa ngokuzenzekelayo ukudlala nokunye. Bona esi sithuba sokuPhuma kweSitaki siluncedo ukuze ufumane ulwazi oluthe kratya.

Iisayizi ozikhethelayo

Iimodyuli zineesayizi ezimbini ozikhethelayo, ezifumaneka ngeeklasi zesilungisi eziza kubekwa kwi .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>

Susa oopopayi

Kwiimodyuli ezibonakala ngokulula kunokuba ziphele ukubonwa, susa .fadeiklasi kuphawu lwakho lwemodal.

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

Ukusebenzisa inkqubo yegridi

Ukuthatha ithuba lendlela yendlela yeBootstrap ngaphakathi kwemodal, indlwane nje .rows ngaphakathi .modal-bodykwaye emva koko usebenzise iiklasi zendlela yegridi eqhelekileyo.

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

Unenqwaba yamaqhosha athi onke avuse indlela enye, enemixholo eyahlukileyo nje kancinane? Sebenzisa event.relatedTargetkunye neempawu zeHTML (data-* ngokunokwenzeka ngejQuery ) ukwahlula imixholo yemodal ngokuxhomekeke ekubeni leliphi iqhosha elicofiweyo. Bona amaxwebhu eMisitho yeModal ngeenkcukacha relatedTarget,

...amaqhosha amaninzi...
<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)
})

Ukusetyenziswa

I-plugin ye-modal iguqula umxholo wakho ofihliweyo kwimfuno, ngeempawu zedatha okanye iJavaScript. Yongeza kwakhona .modal-openkwi- <body>override default scrolling behavior kwaye yenza i- .modal-backdropa ukunika indawo yokucofa ukugxotha iimodyuli ezibonisiweyo xa ucofa ngaphandle kwemodali.

Ngeempawu zedatha

Vula imodali ngaphandle kokubhala iJavaScript. Cwangcisa data-toggle="modal"isiqalelo somlawuli, njengeqhosha, kunye ne data-target="#foo"okanye href="#foo"ukujolisa kwindlela ethile yokuguqula.

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

NgeJavaScript

Fowunela i-modal ene-id myModalngomgca omnye weJavaScript:

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

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-backdrop="".

Igama uhlobo ukungagqibeki inkcazelo
ngasemva boolean okanye umtya'static' yinyani Ibandakanya i-modal-backdrop element. Kungenjalo, khankanya staticimeko yangasemva engayivaliyo imodal ngokucofa.
ikhibhodi boolean yinyani Ivala imodal xa iqhosha lokubaleka licofa
bonisa boolean yinyani Ibonisa imodali xa iqaliswa.
kude indlela bubuxoki

Olu khetho lurhoxisiwe ukusukela kwi-v3.3.0 kwaye lususiwe kwi-v4. Sicebisa endaweni yoko sisebenzise itemplate yecala lomxhasi okanye isakhelo sokubophelela idatha, okanye ufowunele jQuery.layisha ngokwakho.

Ukuba i-URL ekude inikezelwe, umxholo uya kulayishwa ngexesha elinye ngendlela ye-jQuery loadkwaye utofwe kwi- .modal-contentdiv. Ukuba usebenzisa i-data-api, ungasebenzisa hrefuphawu lokunye ukukhankanya umthombo okude. Umzekelo woku uboniswe ngezantsi:

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

Iindlela

Yenza umxholo wakho ube yimodali. Yamkela iinketho ozikhethelayo object.

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

Yenza imodal ngesandla. Ubuyela kumnxeba phambi kokuba imodali iboniswe okanye ifihliwe (okt phambi kokuba isiganeko shown.bs.modalokanye hidden.bs.modalisiganeko senzeke).

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

Ivula imodali ngesandla. Ubuyela kumnxeba phambi kokuba imodali iboniswe (okt phambi kokuba shown.bs.modalisiganeko senzeke).

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

Ufihla imodali ngesandla. Ibuyisela kumnxebi phambi kokuba imodali ifihlwe (okt phambi kokuba hidden.bs.modalisiganeko senzeke).

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

Lungisa ukuma kwemodali ukuchasana nebar yokuskrola ukuba kunokwenzeka umntu avele, nto leyo enokwenza ukuba imodali itsibe ekhohlo.

Ifuneka kuphela xa ukuphakama kwemodal kutshintsha ngelixa ivuliwe.

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

Iziganeko

Iklasi ye-modal ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa ekusebenzeni kwe-modal.

Zonke iziganeko zemodal ziyagxothwa kwimodali ngokwayo (okt kwi <div class="modal">).

Uhlobo loMnyhadala Inkcazo
bonisa.bs.modal Esi siganeko sivutha ngokukhawuleza xa showkubizwa indlela yomzekelo. Ukuba kubangelwa ngonqakrazo, into ecofayo iyafumaneka relatedTargetnjengepropathi yesiganeko.
ebonisiweyo.bs.modal Esi siganeko sigxothwa xa i-modal yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe). Ukuba kubangelwa ngonqakrazo, into ecofayo iyafumaneka relatedTargetnjengepropathi yesiganeko.
fihla.bs.modal Esi siganeko sigxothwa ngokukhawuleza xa hideindlela yomzekelo ibiziwe.
efihliweyo.bs.modal Esi siganeko sigxothwa xa i-modal igqibile ukufihlwa kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe).
loaded.bs.modal Esi siganeko sigxothwa xa i-modal ilayishe umxholo usebenzisa remoteukhetho.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Iidropdowns dropdown.js

Yongeza imenyu eyehlayo phantse kuyo yonke into eneplagi elula, kubandakanya i-navbar, iithebhu, kunye neepilisi.

Ngaphakathi kwenavbar

Ngaphakathi kweepilisi

Ngeempawu zedatha okanye iJavaScript, iplagin eyehlayo iguqula umxholo ofihliweyo (imenyu eyehlayo) ngokuguqula .openiklasi kwizinto zoluhlu lwabazali.

Kwizixhobo eziphathwayo, ukuvula i-dropdown yongeza .dropdown-backdropnjengendawo yempompo yokuvala imenyu eyehlayo xa ucofa ngaphandle kwemenyu, imfuneko yenkxaso efanelekileyo ye-iOS. Oku kuthetha ukuba ukusuka kwimenyu eyehlayo evulekileyo uye kwimenyu eyehlayo eyahlukileyo kufuna itephu eyongezelelweyo kwiselfowuni.

Qaphela: Uphawu data-toggle="dropdown"loyelelwano kuxhomekeke kuyo ukuvala imenyu eyehlayo kwinqanaba lesicelo, ngoko luluvo oluhle ukusoloko uyisebenzisa.

Ngeempawu zedatha

Yongeza data-toggle="dropdown"kwikhonkco okanye iqhosha ukuguqula ukwehla.

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

Ukugcina ii-URL zicocekile ngamaqhosha ekhonkco, sebenzisa data-targetuphawu loyelelwano endaweni ye 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>

NgeJavaScript

Fowunela ukwehla ngeJavaScript:

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

data-toggle="dropdown"isafuneka

Nokuba ufowunela ukwehla kwakho ngeJavaScript okanye endaweni yoko usebenzise i-data-api, data-toggle="dropdown"isoloko ifuneka ukuba ubekhona kwindawo yokuqalisa ukwehla.

Akukho nanye

Qwalasela imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed.

Zonke iziganeko ezihlayo zigxothwa .dropdown-menukumzali we element.

Zonke iziganeko eziya kuhla zinepropati relatedTarget, ezixabiso layo lisisiqalelo seankile eshukumayo.

Uhlobo loMnyhadala Inkcazo
bonisa.bs.ukwehla Esi siganeko sivutha ngokukhawuleza xa indlela yokubonisa umboniso ibizwa.
ibonisiwe.bs.ukwehla Esi siganeko sigxothwa xa ukwehla kwenziwe kwabonakala kumsebenzisi (uya kulinda iinguqu zeCSS, ukugqiba).
fihla.bs.ukwehla Esi siganeko sigxothwa ngokukhawuleza xa indlela yokufihla umzekelo ibizwe.
hide.bs.dropdown Esi siganeko sigxothwa xa i dropdown igqibile ukufihlwa kumsebenzisi (iya kulinda iinguqu zeCSS, igqibe).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

I-ScrollSpy scrollspy.js

Umzekelo kwi-navbar

I-plugin yeScrollSpy yeyokuhlaziya ngokuzenzekelayo iithagethi ze-nav ngokusekelwe kwindawo yokuskrola. Skrolela indawo engezantsi kwe-navbar kwaye ubukele utshintsho lweklasi esebenzayo. Imiba esezantsi eyehlayo nayo iya kuphawulwa.

@fat

Ad leggings keytar, brunch id art party dolor labore. I-pitchfork ngonyaka enim lo-fi ngaphambi kokuba bathengise ngayo. Tumblr ifama-to-itheyibhile amalungelo ibhayisekile nantoni na. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Ijezi kaCosby ilomo yejean ezimfutshane, williamsburg hoodie minim qui mhlawumbi awuzange uve ngazo et cardigan trust fund culpa biodiesel wes anderson aesthetic. UNihil une tattoo accsamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa amadevu ngesityibiliki, adipisicing fugiat velit pitchfork iindevu. Freegan iindevu aliqua cupidatat mcsweeney's vero. Cupidatat ezine loko nisi, ea helvetica nulla carles. I-Tattooed cosby sweater ilori yokutya, i-mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. EBrooklyn adipisicing craft beer vice keytar deserunt.

Nye

Occaecat commodo aliqua deelectus. Fap craft beer deserunt skateboard ea. Amalungelo ebhayisekile eLomo adipisicing banh mi, velit ea sunt kwinqanaba elilandelayo locavore ikofu enemvelaphi eyodwa e magna veniam. Ubomi obuphezulu id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, ezinzileyo deelectus consectetur fanny pack iphone.

Mbini

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 isithunywa bag marfa nantoni na ilori yokutya deelectus. Sapiente synth id guessnda. Locavore sed helvetica cliche irony, thundercats mhlawumbi awuzange uve ngazo consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat phambi kokuba bathengise, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Ukusetyenziswa

Ifuna i-Bootstrap nav

I-Scrollspy okwangoku ifuna ukusetyenziswa kwe- Bootstrap nav inxalenye yophawulo olululo lwamakhonkco asebenzayo.

Kufuneka iithagethi ze-ID ezinokusonjululwa

Unxulumano lwebar yeNavbar kufuneka lube nethagethi ye-id enokusombululeka. Umzekelo, <a href="#home">home</a>kufuneka ihambelane nento ekwiDOM efana <div id="home"></div>.

Izinto ezingajoliswanga :visiblezingahoywa

Izinto ekujoliswe kuzo ezingahambelaniyo :visiblene-jQuery aziyi kuhoywa kwaye izinto zazo ze-nav ezihambelanayo azisayi kuphawulwa.

Ifuna indawo ehambelanayo

Nokuba yeyiphi na indlela yokuphunyezwa, iscrollspy ifuna ukusetyenziswa position: relative;kwento oyihlolayo. Kwiimeko ezininzi le <body>. Xa scrollspying kwizinto ngaphandle <body>, qiniseka ukuba ube heightiseti kwaye overflow-y: scroll;isetyenziswe.

Ngeempawu zedatha

Ukongeza ngokulula isimilo sokuskrola kulawulo lwakho lwebar engaphezulu, yongeza data-spy="scroll"kwinto ofuna ukuyihlola (ubukhulu becala le iya kuba yi <body>). Emva koko yongeza data-targetuphawu kunye ne-ID okanye udidi lwelungu lomzali walo naliphi na ilungu le-Bootstrap .nav.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

NgeJavaScript

Emva kokongeza position: relative;kwiCSS yakho, fowunela iscrollspy ngeJavaScript:

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

Iindlela

.scrollspy('refresh')

Xa usebenzisa i-scrollspy ngokudibanisa okanye ukususa izinto kwi-DOM, kuya kufuneka ufowunele indlela yokuhlaziya ngolu hlobo:

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

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-offset="".

Igama uhlobo ukungagqibeki inkcazelo
i-offset inani 10 Iipikseli zokulinganisa ukusuka phezulu xa ubala indawo yokuskrola.

Iziganeko

Uhlobo loMnyhadala Inkcazo
vula.bs.scrollspy Esi siganeko sivutha nanini na into entsha ivuliwe yi-scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Iithebhu ezitshintshekayo tab.js

Iithebhu zemizekelo

Yongeza ngokukhawuleza, ukusebenza kwethebhu eguquguqukayo kwinguqu kwiipaneli zomxholo wasekhaya, nangeemenyu ezihlayo. Iithebhu ezifakwe kwindlwane azixhaswanga.

Idenim ekrwada mhlawumbi awuzange uve ngabo ibhulukhwe yejean yaseAustin. Nesciunt tofu stumptown aliqua, retro synth master coca. Amadevu cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Ijezi yeCosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american iimpahla, butcher 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.

Yandisa ukhangelo lwe tabbed

Le plugin yandisa icandelo lokukhangela kwi-tabbed ukongeza iindawo ezinokubakho.

Ukusetyenziswa

Yenza iithebhu ezinokubakho ngeJavaScript (ithebhu nganye kufuneka ivulwe ngokwayo):

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

Unokwenza ithebhu nganye isebenze ngeendlela ezininzi:

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

IMarkup

Unokwenza ithebhu okanye ukukhangela iipilisi ngaphandle kokubhala nayiphi na iJavaScript ngokuchaza ngokulula data-toggle="tab"okanye data-toggle="pill"kwinto. Ukongeza i navkunye nav-tabsneeklasi kwisithuba ulkuya kusebenzisa i-Bootstrap yesimbo sesithuba , ngelixa udibanisa navkunye nav-pillsneeklasi ziyakusebenzisa isitayile sepilisi .

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

Ukwenza iithebhu ziphelelwe, yongeza .fadekuyo nganye .tab-pane. Ipheyini yethebhu yokuqala kufuneka kwakhona .inyenze umxholo wokuqala ubonakale.

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

Iindlela

$().tab

Yenza isiqalelo sethebhu kunye nesiqulatho sisebenze. Isithuba kufuneka sibenendawo data-targetokanye indawo hrefyesikhongozeli kwiDOM. Kule mizekelo ingasentla, ii-tab ngu- <a>s kunye data-toggle="tab"neempawu.

.tab('show')

Ikhetha ithebhu enikiweyo kwaye ibonisa umxholo wayo ohambelanayo. Nayiphi na enye ithebhu ebikhe yakhethwa ngaphambili ayikhethwa kwaye umxholo wayo uyafihlwa. Ibuyisela kumnxeba phambi kokuba ipayini yethebhu iboniswe ngokwenene (okt phambi kokuba shown.bs.tabisiganeko senzeke).

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

Iziganeko

Xa ubonisa ithebhu entsha, iziganeko zivutha ngolu hlobo lulandelayo:

  1. hide.bs.tab(kwithebhu esebenzayo yangoku)
  2. show.bs.tab(kwi-eza kuboniswa thebhu)
  3. hidden.bs.tab(kwithebhu esebenzayo yangaphambili, efanayo nale hide.bs.tabyesiganeko)
  4. shown.bs.tab(kwisithuba esandula ukusebenza esivele sibonise ithebhu, efanayo show.bs.tabnesesiganeko)

Ukuba akukho thebhu ibisele iyasebenza, ngoko i hide.bs.tabkunye hidden.bs.tabneziganeko aziyi kugxothwa.

Uhlobo loMnyhadala Inkcazo
bonisa.bs.tab Esi siganeko sivutha kumboniso wethebhu, kodwa ngaphambi kokuba ithebhu entsha iboniswe. Sebenzisa event.targetkunye event.relatedTargetnokujolisa ithebhu esebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo.
ebonisiweyo.bs.tab Esi siganeko sitshisa kwi-tab show emva kokuba ithebhu ibonisiwe. Sebenzisa event.targetkunye event.relatedTargetnokujolisa ithebhu esebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo.
fihla.bs.tab Esi siganeko sitshisa xa isithuba esitsha siza kuboniswa (kwaye ke isithuba sangaphambili esisebenzayo siza kufihlwa). Sebenzisa event.targetkunye event.relatedTargetnokujolisa ithebhu esebenzayo yangoku kunye nethebhu entsha eza kusebenza ngokukhawuleza, ngokulandelelanayo.
efihliweyo.bs.tab Esi siganeko sivutha emva kokuba ithebhu entsha ibonisiwe (kwaye ke isithuba sangaphambili esisebenzayo sifihliwe). Sebenzisa event.targetkunye event.relatedTargetnokujolisa kwithebhu esebenzayo yangaphambili kunye nethebhu entsha esebenzayo, ngokulandelelanayo.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Iingcebiso zezixhobo zesixhobo.js

Iphefumlelwe yi-plugin egqwesileyo ye-jQuery.tipsy ebhalwe nguJason Frame; Iingcebiso zesixhobo luguqulelo oluhlaziyiweyo, olungathembekanga kwimifanekiso, sebenzisa i-CSS3 yoopopayi, kunye neempawu zedatha zogcino lwesihloko sendawo.

Iingcebiso zezixhobo ezinezihloko ezibude buziro aziboniswa.

Imizekelo

Hambisa ngaphezulu kwezi linki zingezantsi ukuze ubone iingcebiso zesixhobo:

Iibhulukhwe eziqinileyo kwinqanaba elilandelayo keffiyeh mhlawumbi awuzange uve ngazo. Photo booth iindevu ekrwada idenim letterpress vegan messenger bag stumptown. Ifama-to-itheyibhile seitan, i-mcsweeney's fixie ezinzileyo iquinoa ye-8-bit yaseMelika isambatho ine- terry richardson vinyl chambray. Iindevu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Igcisa elihlekisayo ngokwenene whatever keytar , i-scenar farm-to-table banksy Austin twitter handle freegan cred krwada idenim enye-origin ikofu viral.

Isixhobo esimileyo

Zine iinketho ezikhoyo: phezulu, ekunene, ezantsi, nasekhohlo zilungelelanisiwe.

Iindlela ezine

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

Umsebenzi wokukhetha ukungena

Ngezizathu zokusebenza, iSixhobo kunye nePopover data-apis zingenile, okuthetha ukuba kufuneka uziqalise ngokwakho .

Enye indlela yokuqalisa zonke iingcebiso zesixhobo kwiphepha inokuba kukukhetha ngophawu lwazo data-toggle:

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

Ukusetyenziswa

Isixhobo se-plugin se-tooltip sivelisa umxholo kunye ne-markup kwimfuno, kwaye ngokungagqibekanga iindawo zeengcebiso zesixhobo emva kwento yazo ye-trigger.

Qalisa ingcebiso yesixhobo ngeJavaScript:

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

IMarkup

Uphawu olufunekayo lwencam yesixhobo luphawu kuphela datakwaye titlekwisiqalelo se-HTML unqwenela ukuba nencam yesixhobo. Uphawu oluveliswayo lwencam yesixhobo lulula, nangona lufuna indawo (ngokungagqibekanga, toplumiselwe yiplagi).

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

Amakhonkco anemigca emininzi

Ngamanye amaxesha ufuna ukongeza ingcebiso yesixhobo kwi-hyperlink esonga imigca emininzi. Ukuziphatha okungagqibekanga kwesixhobo sokufaka iplagi yesixhobo kukuyibeka embindini ngokuthe tye nangokuthe nkqo. Yongeza white-space: nowrap;kwii-ankile zakho ukunqanda oku.

Iingcebiso kumaqela amaqhosha, amaqela egalelo, kunye neetafile zifuna ukusetwa okukhethekileyo

Xa usebenzisa iincam zesixhobo kwizinto ezingaphakathi kwe .btn-groupokanye kwi .input-group, okanye kwizinto ezinxulumene netafile ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), kuya kufuneka ukhankanye ukhetho container: 'body'(olubhaliweyo ngezantsi) ukunqanda iziphumo ebezingalindelekanga ezingafunekiyo (ezifana ne elementi ekhula banzi kunye/ okanye iphulukene neekona zayo ezingqukuva xa incam yesixhobo isenziwa).

Sukuzama ukubonisa iingcebiso kwizinto ezifihlakeleyo

Ukucela $(...).tooltip('show')xa into ekujoliswe kuyo ikukubangela display: none;ukuba isixhobo sibekwe ngendlela engalunganga.

Iingcebiso ezifikelelekayo zekhibhodi kunye nabasebenzisi betekhnoloji abancedisayo

Kubasebenzisi abahamba ngebhodi yezitshixo, kwaye ngakumbi abasebenzisi beetekhnoloji ezincedisayo, kuya kufuneka wongeze kuphela iingcebiso zesixhobo kwizinto ezigxile kwi-keyboard ezinje ngamakhonkco, ulawulo lweefom, okanye nayiphi na into engafanelekanga enophawu tabindex="0".

Iingcebiso zezixhobo kwizinto ezikhubazekileyo zifuna izinto zokusonga

Ukongeza incam yesixhobo kwi-a disabledokanye .disabledisiqalelo, beka into ngaphakathi kwi-a <div>kwaye usebenzise incam yesixhobo kuyo <div>endaweni yoko.

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-animation="".

Igama Uhlobo Ukuhlala kukho Inkcazo
oopopayi boolean yinyani Faka inguqu ye-CSS fade kwi-tooltip
isikhongozeli umtya | bubuxoki bubuxoki

Ihlomela incam yesixhobo kwinto ethile. Umzekelo: container: 'body'. Olu khetho luluncedo kakhulu kuba lukuvumela ukuba ubeke incam yesixhobo sokuhamba koxwebhu kufutshane nesiqalo esixhobisayo - esiza kuthintela incam yesixhobo ekudada kuyo ukusuka kwinto exhokonxayo ngexesha lokutshintsha ubungakanani befestile.

ukulibazisa inombolo | into 0

Ukulibazisa ukubonisa kunye nokufihla isixhobo sesixhobo (ms) - akusebenzi kuhlobo lwesixhobo sokuxhobisa

Ukuba inani linikiwe, ukulibaziseka kufakwa kuzo zombini ezifihla/umboniso

Ulwakhiwo lwento yile:delay: { "show": 500, "hide": 100 }

html boolean bubuxoki Faka i-HTML kwincam yesixhobo. Ukuba ayiyonyani, textindlela yejQuery izakusetyenziswa ukufaka umxholo kwiDOM. Sebenzisa umbhalo ukuba unexhala malunga nohlaselo lwe-XSS.
ukubekwa umtya | umsebenzi 'phezulu'

Indlela yokubeka inqaku lesixhobo - phezulu | emazantsi | ekhohlo | ekunene | ezizenzekelayo.
Xa i-"auto" icacisiwe, iyakuhlengahlengisa kwakhona incam yesixhobo. Umzekelo, ukuba ukubekwa "ku-auto left", incam yesixhobo iya kubonisa ekhohlo xa kunokwenzeka, kungenjalo iya kubonisa ekunene.

Xa umsebenzi usetyenziswa ukumisela ukubekwa, ubizwa ngokuba nencam yesixhobo ye-DOM njengengxoxo yayo yokuqala kunye nesiqalo se-DOM node njengesibini sayo. Umxholo thisumiselwe kumzekelo wencam yesixhobo.

umkhethi umtya bubuxoki Ukuba umkhethi unikiwe, izixhobo zesixhobo ziya kunikezelwa kwiithagethi ezichaziweyo. Ngokwesiqhelo, oku kusetyenziselwa ukwenza umxholo we-HTML oguquguqukayo ube neengcebiso zesixhobo ezongeziweyo. Bona oku kunye nomzekelo ofundisayo .
ithempleyithi umtya '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Isiseko se-HTML esiza kusetyenziswa xa usenza ithiphu yesixhobo.

Isixhobo se-tooltip titlesiyakutofwa kwifayile ye .tooltip-inner.

.tooltip-arrowiya kuba lutolo lwesixhobo.

Isiqalelo sokusonga sangaphandle kufuneka sibe .tooltipneklasi.

isihloko umtya | umsebenzi ''

Ixabiso lesihloko esihlala sihleli ukuba titleuphawu loyelelwano alukho.

Ukuba umsebenzi unikiwe, uya kubizwa kunye thisneseti yawo yereferensi kwinto encanyathiselwe kuyo isixhobo.

ukuxhokonxa umtya 'hover focus' Ivuswa njani ithiphu yesixhobo - cofa | jonga | gxila | incwadi yesandla. Unokudlula izichukumisi ezininzi; bahlule ngesithuba. manualayinakudityaniswa naso nasiphi na esinye isiqhushumbisi.
indawo yokujonga umtya | into | umsebenzi { umkhethi: 'umzimba', ukupakisha: 0}

Igcina incam yesixhobo phakathi kwemida yale elementi. Umzekelo: viewport: '#viewport'okanye{ "selector": "#viewport", "padding": 0 }

Ukuba umsebenzi unikiwe, ubizwa ngokuba nesiqalo se-DOM node njengengxoxo yayo yodwa. Umxholo thisumiselwe kumzekelo wencam yesixhobo.

Iimpawu zedatha kwiingcebiso zesixhobo ngasinye

Iinketho zeengcebiso zesixhobo ngasinye zingachazwa ngokusetyenziswa kweempawu zedatha, njengoko kucacisiwe ngasentla.

Iindlela

$().tooltip(options)

Iqhoboshela isibambi sesixhobo kwingqokelela yesiqalelo.

.tooltip('show')

Ityhila inqaku lesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo iboniswe (okt phambi kokuba shown.bs.tooltipisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-tooltip. Iingcebiso zezixhobo ezinezihloko ezibude buziro aziboniswa.

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

.tooltip('hide')

Ifihla inqaku lesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo ifihlwe (okt phambi kokuba hidden.bs.tooltipisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-tooltip.

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

.tooltip('toggle')

Itshintshela incam yesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo iboniswe okanye ifihlwe (okt phambi kokuba isiganeko shown.bs.tooltipokanye hidden.bs.tooltipisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-tooltip.

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

.tooltip('destroy')

Ifihla kwaye itshabalalise isixhobo sesixhobo. Iingcebiso zesixhobo ezisebenzisa unikezelo (ezenziwe ngokusetyenziswa kokhethoselector ) azinakutshatyalaliswa zizodwa kwiziqalelo zokubangela ukuvela .

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

Iziganeko

Uhlobo loMnyhadala Inkcazo
bonisa.bs.ingcebiso yesixhobo Esi siganeko sivutha ngokukhawuleza xa showkubizwa indlela yomzekelo.
ingcebiso.bs.isixhobo Esi siganeko sigxothwa xa i-tooltip yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe).
fihla.bs.isixhobo sesixhobo Esi siganeko sigxothwa ngokukhawuleza xa hideindlela yomzekelo ibiziwe.
ingcebiso.bs.isixhobo esifihliweyo Esi siganeko siyagxothwa xa isixhobo sigqibile ukufihlwa kumsebenzisi (siya kulinda uguqulo lweCSS lugqibe).
ingcebiso.bs.isixhobo Esi siganeko sigxothwa emva show.bs.tooltipkwesiganeko xa ithemplate ye-tooltip yongezwa kwi-DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

IiPopovers popover.js

Yongeza imixholo emincinci, njengaleyo ikwi-iPad, kuyo nayiphi na into yolwazi lwesibini lwezindlu.

Iipopovers ezinesihloko kunye nomxholo onguziro-ubude azizange ziboniswe.

Ukuxhomekeka kwi-plugin

IiPopovers zifuna iplagi yesixhobo sokufakela isixhobo ukuba ibandakanywe kuguqulelo lwakho lweBootstrap.

Umsebenzi wokukhetha ukungena

Ngezizathu zokusebenza, iSixhobo kunye nePopover data-apis zingenile, okuthetha ukuba kufuneka uziqalise ngokwakho .

Enye indlela yokuqalisa zonke iipopovers kwiphepha inokuba kukukhetha ngophawu lwazo data-toggle:

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

Iipopovers kumaqela amaqhosha, amaqela egalelo, kunye neetafile zifuna ukusetwa okukhethekileyo

Xa usebenzisa i-popovers kwizinto ezingaphakathi kwe- .btn-groupokanye .input-group, okanye kwizinto ezinxulumene netafile ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), kuya kufuneka ukhankanye ukhetho container: 'body'(olubhalwe ngezantsi) ukunqanda iziphumo ebezingalindelekanga ezingafunekiyo (ezifana ne elementi ekhula banzi kunye/ okanye ukuphulukana neekona zayo ezingqukuva xa i-popover iqaliswa).

Sukuzama ukubonisa iipopovers kwizinto ezifihlakeleyo

Ukucela $(...).popover('show')xa into ekujoliswe kuyo display: none;iya kubangela ukuba i-popover ibekwe ngendlela engalunganga.

Iipopovers kwizinto ezikhubazekileyo zifuna izinto zokusonga

Ukongeza i-popover kwi-a disabledokanye i- .disabledelementi, beka into ngaphakathi <div>kwaye usebenzise i-popover kuloo <div>ndawo.

Amakhonkco anemigca emininzi

Ngamanye amaxesha ufuna ukongeza i-popover kwi-hyperlink esonga imigca emininzi. Ukuziphatha okungagqibekanga kweplagi yepopover kukuyibeka embindini ngokuthe tye nangokuthe nkqo. Yongeza white-space: nowrap;kwii-ankile zakho ukunqanda oku.

Imizekelo

Ipopover engatshintshiyo

Zine iinketho ezikhoyo: phezulu, ekunene, ezantsi, nasekhohlo zilungelelanisiwe.

Pover top

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ekunene

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Umzantsi wePover

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

UPopover washiya

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Idemo ephilayo

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

Iindlela ezine

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

Lahla ngokucofa okulandelayo

Sebenzisa i- focustrigger ukugxotha iipopovers kunqakrazo olulandelayo olwenziwa ngumsebenzisi.

Uphawulo oluthile luyafuneka ukuze ugxothe-ngokucofa-okulandelayo

Ngokuziphatha okufanelekileyo kwebrowser kunye neqonga elinqamlezayo, kufuneka usebenzise <a>ithegi, hayi ithegi , <button>kwaye kufuneka uquke role="button"kunye tabindexneempawu.

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

Ukusetyenziswa

Vumela iipopovers ngeJavaScript:

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

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-animation="".

Igama Uhlobo Ukuhlala kukho Inkcazo
oopopayi boolean yinyani Faka inguqu ye-CSS fade kwi-popover
isikhongozeli umtya | bubuxoki bubuxoki

Ifakela ipopover kwinto ethile. Umzekelo: container: 'body'. Olu khetho luluncedo kakhulu kuba lukuvumela ukuba ubeke ipopover ekuhambeni koxwebhu kufutshane nesiqalo - esizakunqanda i popover ekudadandeni kude nesiqalo ngexesha lefestile.

umxholo umtya | umsebenzi ''

Ixabiso lomxholo data-contentelihlala likhona ukuba uphawu loyelelwano alukho.

Ukuba umsebenzi unikiwe, uya kubizwa ngokuba thisnereferensi iseti kwinto edityaniswe nepopover.

ukulibazisa inombolo | into 0

Ukulibazisa ukubonisa kunye nokufihla i-popover (ms) - ayisebenzi kuhlobo lwe-trigger ye-manual

Ukuba inani linikiwe, ukulibaziseka kufakwa kuzo zombini ezifihla/umboniso

Ulwakhiwo lwento yile:delay: { "show": 500, "hide": 100 }

html boolean bubuxoki Faka i-HTML kwi-popover. Ukuba ayiyonyani, textindlela yejQuery izakusetyenziswa ukufaka umxholo kwiDOM. Sebenzisa umbhalo ukuba unexhala malunga nohlaselo lwe-XSS.
ukubekwa umtya | umsebenzi 'kunene'

Indlela yokubeka i-popover - phezulu | emazantsi | ekhohlo | ekunene | ezizenzekelayo.
Xa i-"auto" icacisiwe, iya kuhlengahlengisa i-popover. Umzekelo, ukuba ukubekwa "ku-auto left", i-popover iya kubonisa ekhohlo xa kunokwenzeka, kungenjalo iya kubonisa ekunene.

Xa umsebenzi usetyenziswa ukumisela ukubekwa, ubizwa nge popover node yeDOM njengengxoxo yayo yokuqala kunye nesiqalo sendawo yeDOM njengeyesibini. Umxholo thisumiselwe kumzekelo we popover.

umkhethi umtya bubuxoki Ukuba umkhethi unikiwe, izinto ze popover ziya kunikezelwa kwiithagethi ezichaziweyo. Ngokwesiqhelo, oku kusetyenziselwa ukwenza umxholo weHTML oguquguqukayo ube neepopovers zongezwe. Bona oku kunye nomzekelo ofundisayo .
ithempleyithi umtya '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Isiseko se-HTML esinokusetyenziswa xa usenza ipopover.

I-popover's titleiya kugalelwa kwi- .popover-title.

I-popover's contentiya kugalelwa kwi- .popover-content.

.arrowiya kuba lutolo lwe popover.

Isiqalelo sokusonga sangaphandle kufuneka sibe .popoverneklasi.

isihloko umtya | umsebenzi ''

Ixabiso lesihloko esihlala sihleli ukuba titleuphawu loyelelwano alukho.

Ukuba umsebenzi unikiwe, uya kubizwa ngokuba thisnereferensi iseti kwinto edityaniswe nepopover.

ukuxhokonxa umtya 'cofa' Ivuswa njani ipopover - cofa | jonga | gxila | incwadi yesandla. Unokudlula izichukumisi ezininzi; bahlule ngesithuba. manualayinakudityaniswa naso nasiphi na esinye isiqhushumbisi.
indawo yokujonga umtya | into | umsebenzi { umkhethi: 'umzimba', ukupakisha: 0}

Igcina ipopover ngaphakathi kwemida yale elementi. Umzekelo: viewport: '#viewport'okanye{ "selector": "#viewport", "padding": 0 }

Ukuba umsebenzi unikiwe, ubizwa ngokuba nesiqalo se-DOM node njengengxoxo yayo yodwa. Umxholo thisumiselwe kumzekelo we popover.

Iimpawu zedatha yepopovers nganye

Ukhetho lwepopovers nganye lunokuchazwa ngokusetyenziswa kweempawu zedatha, njengoko kucacisiwe ngasentla.

Iindlela

$().popover(options)

Uqalisa iipopovers zengqokelela yezinto.

.popover('show')

Ityhila ukuvela kwento ethile. Ibuyisela kumnxeba phambi kokuba i-popover iboniswe (okt phambi kokuba shown.bs.popoverisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-popover. Iipopovers ezinesihloko kunye nomxholo onguziro-ubude azizange ziboniswe.

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

.popover('hide')

Ifihla imvelaphi yento. Ibuyisela kumnxeba phambi kokuba i-popover ifihliwe (okt phambi kokuba hidden.bs.popoverisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-popover.

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

.popover('toggle')

Itshintsha ipopover yesiqalelo. Ibuyisela kumnxeba phambi kokuba i-popover iboniswe okanye ifihliwe (okt phambi kokuba isiganeko shown.bs.popoverokanye hidden.bs.popoverisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-popover.

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

.popover('destroy')

Ifihla kwaye itshabalalise i-element's popover. Iipopovers ezisebenzisa unikezelo (okuyilwe kusetyenziswa ukhethoselector ) azinakutshatyalaliswa zizodwa kwinzala yezinto ezibangelayo .

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

Iziganeko

Uhlobo loMnyhadala Inkcazo
bonisa.bs.popover Esi siganeko sivutha ngokukhawuleza xa showkubizwa indlela yomzekelo.
ibonisiwe.bs.popover Esi siganeko sigxothwa xa i-popover yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe).
fihla.bs.popover Esi siganeko sigxothwa ngokukhawuleza xa hideindlela yomzekelo ibiziwe.
efihliweyo.bs.popover Esi siganeko sigxothwa xa i-popover igqibile ukufihlwa kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe).
ifakiwe.bs.popover Esi siganeko sigxothwa emva show.bs.popoverkwesiganeko xa i-template ye-popover yongezwa kwi-DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Imiyalezo yesivuseleli alert.js

Izaziso zemizekelo

Yongeza umsebenzi wokugxotha kuyo yonke imiyalezo yesivuseleli ngale plugin.

Xa usebenzisa .closeiqhosha, kufuneka ibe ngumntwana wokuqala .alert-dismissiblekwaye akukho mxholo wombhalo unokuza phambi kwawo kuphawulo.

Ukusetyenziswa

Yongeza data-dismiss="alert"nje kwiqhosha lakho lokuvala ukunika ngokuzenzekelayo umsebenzi okufutshane wesilumkiso. Ukuvala isilumkiso kuyasisusa kwiDOM.

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

Ukuze izilumkiso zakho zisebenzise oopopayi xa uvala, qiniseka ukuba banazo .fadekunye .inneeklasi esele zisetyenziswe kuzo.

Iindlela

$().alert()

Yenza isivuseleli umamele ukwenzela unqakrazo lweziganeko kwizinto eziphumayo data-dismiss="alert"ezinophawu. (Akuyomfuneko xa usebenzisa idatha-api's auto-initialization.)

$().alert('close')

Ivala isilumkiso ngokusisusa kwiDOM. Ukuba i .fadekunye .inneeklasi zikhona kwinto, isivuseleli siya kuphelelwa phambi kokuba sisuswe.

Iziganeko

Iplagi yesilumkiso ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa kusetyenziso lwesilumkiso.

Uhlobo loMnyhadala Inkcazo
vala.bs.alert Esi siganeko sivutha ngokukhawuleza xa closekubizwa indlela yomzekelo.
ivaliwe.bs.alert Esi siganeko sigxothwa xa isivuseleli sivaliwe (siya kulinda iinguqu zeCSS ukuba zigqitywe).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Amaqhosha amaqhosha.js

Yenza ngakumbi ngamaqhosha. Iqhosha lokulawula lixela okanye wenze amaqela amaqhosha amalungu amaninzi njengebar yesixhobo.

Ukuhambelana kwebrowser

IFirefox iqhubeleka nemeko yolawulo lwefomu (ukukhubazeka nokujongwa) kuyo yonke imithwalo yamaphepha . Isisombululo sale nto kukusetyenziswa autocomplete="off". Jonga i-bug ye-Mozilla #654072 .

Inyanisile

Yongeza data-loading-text="Loading..."ukusebenzisa imeko yokulayisha kwiqhosha.

Olu phawu luyehliswa ukusukela kwi-v3.3.5 kwaye lususiwe kwi-v4.

Sebenzisa nayiphi na imeko oyithandayo!

Ngenxa yolu mboniso, sisebenzisa data-loading-textkwaye $().button('loading'), kodwa ayisiyiyo kuphela imeko onokuyisebenzisa. Bona ngakumbi oku ngezantsi $().button(string)kuxwebhu .

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

Uguqulelo olunye

Yongeza data-toggle="button"ukuze uvule iqhosha elinye.

amaqhosha pre-toggled kufuneka .activekwayearia-pressed="true"

Kumaqhosha aguqulwe ngaphambili, kufuneka wongeze .activeiklasi kunye aria-pressed="true"nophawu buttonkuwe.

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

Ibhokisi yokujonga / irediyo

Yongeza data-toggle="buttons"kwibhokisi .btn-groupyokukhangela equlathe okanye amagalelo erediyo ukwenza uguqulelo lwezimbo ezahlukeneyo.

Kufuneka iinketho ezikhethiweyo.active

Kukhetho olukhethiweyo, kufuneka wongeze .activeiklasi kwigalelo labelngokwakho.

Imeko ejongiwe ngokubonakalayo ihlaziywa kuphela ngokucofa

Ukuba imeko ekhangelweyo yebhokisi yokukhangela ihlaziywe ngaphandle kokudubula clickisiganeko kwiqhosha (umzekelo ngokusebenzisa <input type="reset">okanye ngokucwangcisa checkedimpahla yegalelo), kuya kufuneka uguqule .activeiklasi kwigalelo labelngokwakho.

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

Iindlela

$().button('toggle')

Itshintsha imeko yokutyhala. Inika iqhosha inkangeleko yokuba livuliwe.

$().button('reset')

Seta ngokutsha imo yeqhosha-tshintshanisa okubhaliweyo kumbhalo wokuqala. Le ndlela ayihambelani kwaye ibuyisela phambi kokuba ukusetwa kwakhona kugqitywe.

$().button(string)

Utshintshanisa umbhalo kuyo nayiphi na idatha echaziweyo yokubhaliweyo.

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

Colapse.js _

Iplagi eguquguqukayo esebenzisa iiklasi ezimbalwa zokuziphatha ngokulula.

Ukuxhomekeka kwi-plugin

Ukuwa kufuna ukuba iplagin yotshintsho ifakwe kwinguqulelo yakho yeBootstrap.

Umzekelo

Cofa amaqhosha angezantsi ukuze ubonise kwaye ufihle enye into ngotshintsho lweklasi:

  • .collapseifihla umxholo
  • .collapsingisetyenziswa ngexesha lotshintsho
  • .collapse.inibonisa umxholo

Ungasebenzisa ikhonkco kunye hrefnophawu, okanye iqhosha elinophawu data-targetloyelelwano. Kuzo zombini ezi meko, data-toggle="collapse"kuyafuneka.

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>

Umzekelo weAccordion

Yandisa indlela yokuziphatha yokudilika okumiselweyo ukwenza iaccordion kunye necandelo lendawo yolawulo.

Anim pariatur cliche reprehenderit, enim eiusmod ubomi obuphezulu accamus terry richardson ad squid. 3 ingcuka inyanga officia aute, non cupidatat skateboard dolor brunch. Ilori yokutya iquinoa nesciunt laborum eiusmod. Brunch 3 ingcuka inyanga tempor, sunt aliqua ubeke intaka kuyo iskwidi enye-imvelaphi ikofu nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. I-Leggings occaecat yenza ibhiya yasefama-ukuya-kwitafile, idenim ekrwada i-aesthetic synth nesciunt mhlawumbi awuzange uve ngabo accusamus labour ezinzileyo yeVHS.
Anim pariatur cliche reprehenderit, enim eiusmod ubomi obuphezulu accamus terry richardson ad squid. 3 ingcuka inyanga officia aute, non cupidatat skateboard dolor brunch. Ilori yokutya iquinoa nesciunt laborum eiusmod. Brunch 3 ingcuka inyanga tempor, sunt aliqua ubeke intaka kuyo iskwidi enye-imvelaphi ikofu nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. I-Leggings occaecat yenza ibhiya yasefama-ukuya-kwitafile, idenim ekrwada i-aesthetic synth nesciunt mhlawumbi awuzange uve ngabo accusamus labour ezinzileyo yeVHS.
Anim pariatur cliche reprehenderit, enim eiusmod ubomi obuphezulu accamus terry richardson ad squid. 3 ingcuka inyanga officia aute, non cupidatat skateboard dolor brunch. Ilori yokutya iquinoa nesciunt laborum eiusmod. Brunch 3 ingcuka inyanga tempor, sunt aliqua ubeke intaka kuyo iskwidi enye-imvelaphi ikofu nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. I-Leggings occaecat yenza ibhiya yasefama-ukuya-kwitafile, idenim ekrwada i-aesthetic synth nesciunt mhlawumbi awuzange uve ngabo accusamus labour ezinzileyo yeVHS.
<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>

Kuyenzeka kwakhona ukutshintsha .panel-bodys kunye .list-groups.

  • Ukuqalisa
  • Enye itmus ac facilin
  • I-eros yesibini

Yenza ukwandiswa/ukuwa phantsi kolawulo lufikeleleke

Qinisekisa ukuba wongeza aria-expandedkwinto yolawulo. Olu phawu luchaza ngokucacileyo imeko yangoku yezinto ezigotywayo kwizifundi zesikrini kunye nobuchwephesha obuncedisayo obufanayo. Ukuba into eqengqelekayo ivalwe ngokungagqibekanga, kufuneka ibenexabiso le aria-expanded="false". Ukuba usete into eqengqelekayo ukuba ivuleke ngokungagqibekanga usebenzisa iniklasi, misela aria-expanded="true"kulawulo endaweni yoko. Iplagi iya kuzitshintsha ngokuzenzekela olu phawu ngokusekelwe ekubeni into egotywayo ivuliwe okanye ivaliwe.

Ukongeza, ukuba isiqalelo sakho solawulo sijolise kwinto enye eqengqelekayo - oko kukuthi data-targetuphawu lwalatha idkumkhethi - unokongeza uphawu olongezelelweyo aria-controlskwinto yolawulo, equlathe idinto eqengqelekayo. Izifundi zesikrini zanamhlanje kunye neetekhnoloji ezincedisayo ezifanayo zisebenzisa olu phawu ukunika abasebenzisi iindlela ezimfutshane zokuya ngqo kwinto egobekayo ngokwayo.

Ukusetyenziswa

Iplagin yokudilika isebenzisa iiklasi ezimbalwa ukuphatha ukuphakamisa okunzima:

  • .collapseifihla umxholo
  • .collapse.inibonisa umxholo
  • .collapsingyongezwa xa inguqu iqala, kwaye isuswe xa igqibile

Ezi klasi zinokufumaneka kwi component-animations.less.

Ngeempawu zedatha

Yongeza nje data-toggle="collapse"kwaye a data-targetkwisiqalelo ukwabela ngokuzenzekelayo ulawulo lwento eqengqelekayo. Uphawu data-targetloyelelwano lwamkela umkhethi we-CSS ukuze kufakwe ukutshitshiswa. Qinisekisa ukuba wongeza iklasi collapsekwinto eqengqelekayo. Ukuba ungathanda ukuba ivuleke ngokungagqibekanga, yongeza udidi olongezelelweyo in.

Ukongeza ulawulo lweqela olufana ne-accordion kulawulo oluqengqelekayo, yongeza uphawu loyelelwano lwedatha data-parent="#selector". Jonga kwidemo ukuze ubone oku kusebenza.

NgeJavaScript

Vula ngesandla nge:

$('.collapse').collapse()

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-parent="".

Igama uhlobo ukungagqibeki inkcazelo
umzali umkhethi bubuxoki Ukuba umkhethi unikiwe, ngoko ke zonke izinto eziqengqelekayo phantsi komzali ochaziweyo ziya kuvalwa xa le nto iqengqelekayo iboniswa. (ifana nokuziphatha kwe-accordion yendabuko - oku kuxhomekeke panelkwiklasi)
guqula boolean yinyani Qwalasela into eqengqelekayo kubizo

Iindlela

.collapse(options)

Yenza umxholo wakho ube yinto eqengqelekayo. Yamkela iinketho ozikhethelayo object.

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

.collapse('toggle')

Iguqulela into eqengqelekayo ukuze iboniswe okanye ifihliwe. Ibuyisela kumnxeba phambi kokuba into eqengqelekayo iboniswe okanye ifihliwe (okt phambi kokuba isiganeko shown.bs.collapseokanye hidden.bs.collapseisiganeko senzeke).

.collapse('show')

Ibonisa into eqengqelekayo. Ibuyisela kumnxeba phambi kokuba into eqengqelekayo iboniswe (okt phambi kokuba shown.bs.collapseisiganeko senzeke).

.collapse('hide')

Ifihla into eqengqelekayo. Ibuyisela kumnxebi phambi kokuba into eqengqelekayo ifihlwe (okt phambi kokuba hidden.bs.collapseisiganeko senzeke).

Iziganeko

Iklasi yokuwa yeBootstrap iveza iminyhadala embalwa yokuhuka ekusebenzeni kokuwa.

Uhlobo loMnyhadala Inkcazo
bonisa.bs.collapse Esi siganeko sivutha ngokukhawuleza xa showkubizwa indlela yomzekelo.
ibonisiwe.bs.collapse Esi siganeko sigxothwa xa into yokudilika yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe).
fihla.bs.coqa Esi siganeko sigxothwa ngokukhawuleza xa hideindlela sele ibizwa.
efihliweyo.bs.ukudilika Esi siganeko sigxothwa xa into yokudilika ifihliwe kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Ilungu lomboniso wesilayidi sokuhamba ngebhayisekile kwizinto, njengecarousel. Iicarousels ezifakwe kwindlwane azixhaswanga.

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

Iinkcazelo ozikhethayo

Yongeza ii-captions kwizilayidi zakho ngokulula ngento .carousel-captionengaphakathi kuyo nayiphi na .item. Beka malunga nayo nayiphi na i-HTML ekhethiweyo phakathi apho kwaye iya kulungelelaniswa ngokuzenzekelayo kwaye ifomathwe.

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

Iicarousels ezininzi

Iicarousels zifuna ukusetyenziswa idkwesikhongozeli esingaphandle (the .carousel) ukuze ulawulo lwecarousel lusebenze kakuhle. Xa usongeza iicarousel ezininzi, okanye xa utshintsha iicarousel's id, qiniseka ukuba uhlaziya ulawulo olufanelekileyo.

Ngeempawu zedatha

Sebenzisa iimpawu zedatha ukulawula ngokulula indawo ye-carousel. data-slideyamkela amagama angundoqo prevokanye next, eguqula indawo yesilayidi ngokunxulumene nendawo yaso yangoku. Kungenjalo, sebenzisa data-slide-toukudlulisa isalathiso sesilayidi ekrwada kwicarousel data-slide-to="2", etshintsha indawo yesilayidi kwisalathiso esithile esiqala nge 0.

Uphawu data-ride="carousel"loyelelwano lusetyenziselwa ukuphawula i-carousel njengento ephilayo ukuqala kumthwalo wephepha. Ayinakusetyenziswa ngokudityaniswa ne (ingafunekiyo nengafunekiyo) iJavaScript ecacileyo yokuqaliswa kwecarousel enye.

NgeJavaScript

Fowunela i-carousel ngesandla nge:

$('.carousel').carousel()

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-interval="".

Igama uhlobo ukungagqibeki inkcazelo
isithuba inani 5000 Ubungakanani bexesha lokulibaziseka phakathi kokubhayisela ngokuzenzekelayo into. Ukuba ayiyonyani, i-carousel ayiyi kujikeleza ngokuzenzekelayo.
nqumama umtya | null "bhabha" Ukuba imiselwe "hover", misa ukukhwela ibhayisekile kwicarousel mouseenterkwaye iqalise kwakhona ukukhwela ibhayisekile kwicarousel mouseleave. Ukuba imiselwe ku null, ukundanda phezu kwecarousel akusayi kuyimisa.
usonga boolean yinyani Nokuba i-carousel kufuneka iqhubeke ijikeleza okanye ibe neendawo zokumisa nzima.
ikhibhodi boolean yinyani Nokuba i-carousel kufuneka isabele kwiziganeko ze-keyboard.

Uqalisa i-carousel ngeendlela ozikhethelayo objectkwaye uqalise ukukhwela ibhayisekile kwizinto.

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

Ujikeleza izinto zecarousel ukusuka ekhohlo ukuya ekunene.

Imisa ikhareshi ekukhweleni ibhayisekile kwizinto.

Ukujikelisa i-carousel kwisakhelo esithile (i-0 esekelwe, efana noluhlu).

Imijikelo ukuya kwinto yangaphambili.

Biyela ukuya kwinto elandelayo.

Iklasi ye-carousel ye-Bootstrap iveza iminyhadala emibini yokuhuka ekusebenzeni kwecarousel.

Zombini ezi ziganeko zineempawu ezongezelelweyo zilandelayo:

  • direction: Isalathiso apho i-carousel ishelela khona (okanye "left"okanye "right").
  • relatedTarget: Isiqalelo seDOM esityibilikiswa kwindawo njengomba osebenzayo.

Zonke iziganeko zecarousel zikhutshwa kwicarousel ngokwayo (okt kwi <div class="carousel">).

Uhlobo loMnyhadala Inkcazo
isilayidi.bs.carousel Esi siganeko sitshatyalaliswa ngoko nangoko xa kusenziwa slideindlela yomzekelo.
slid.bs.carousel Esi siganeko sigxothwa xa i-carousel igqibile inguqu yayo yesilayidi.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Faka i- affix.js

Umzekelo

Iplagi ye-affix iguqulela position: fixed;kwaye icime, ilinganisa isiphumo esifunyenwe nge position: sticky;. Ukuhanjiswa ngasekunene yidemo ephilayo ye-affix plugin.


Ukusetyenziswa

Sebenzisa i-affix plugin usebenzisa iimpawu zedatha okanye ngesandla ngeJavaScript yakho. Kuzo zombini ezi meko, kufuneka unikeze iCSS yokuma kunye nobubanzi bomxholo wakho ogxunyekiweyo.

Qaphela: Sukusebenzisa iplagi ye-affix kwinto equlathwe kwindawo ebekwe ngokwentelekiso, njengoluhlu olutsaliweyo okanye olutyhiliweyo, ngenxa yeSafari unikezelo bug .

Ukubekwa ngeCSS

Iplagi ye-affix itshintsha phakathi kweeklasi ezintathu, nganye imele imo ethile: .affix, .affix-top, kunye .affix-bottom. Kufuneka unikeze izimbo, ngaphandle kwe position: fixed;, .affixkwezi klasi ngokwakho (ezizimeleyo kule plugin) ukuphatha ezona zikhundla.

Nantsi indlela esebenza ngayo iplagi ye-affix:

  1. Ukuqala, iplagin yongeza .affix-topukubonisa into ekwindawo yayo ephezulu kakhulu. Kweli nqanaba akukho kubekwa kweCSS kuyadingeka.
  2. Ukuskrola ngaphaya kwento ofuna incamatheliswe kufuneka iqalise olona luncamatheliso. Apha kulapho .affixkungena endaweni .affix-topkunye neseti position: fixed;(ezinikezelwe yiBootstrap's CSS).
  3. Ukuba umgca osezantsi uchaziwe, ukuskrola udlule kufuneka endaweni .affixyawo .affix-bottom. Kuba ii-offsets zinokuzikhethela, ukuseta enye kufuna ukuba usete i-CSS efanelekileyo. Kule meko, yongeza position: absolute;xa kuyimfuneko. Iplagin isebenzisa uphawu lwedatha okanye ukhetho lweJavaScript ukumisela indawo yokubeka into ukusuka apho.

Landela la manyathelo angasentla ukuseta i-CSS yakho nokuba yeyiphi kwezi ndlela zokusebenzisa ezingezantsi.

Ngeempawu zedatha

Ukongeza ngokulula i-affix isimilo kuyo nayiphi na into, yongeza data-spy="affix"nje kwinto ofuna ukuyihlola. Sebenzisa i-offsets ukucacisa ukuba uguqulelwa nini ukuphina into.

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

NgeJavaScript

Fowunela i-affix plugin usebenzisa iJavaScript:

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

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-offset-top="200".

Igama uhlobo ukungagqibeki inkcazelo
i-offset inombolo | umsebenzi | into 10 Iipixels zokulinganisa ukusuka kwiscreen xa ubala indawo yokuskrola. Ukuba inani elinye linikezelwe, i-offset iya kusetyenziswa kumacala omabini aphezulu nasezantsi. Ukubonelela ngeyodwa, ezantsi kunye nephezulu offset ukubonelela nje into offset: { top: 10 }okanye offset: { top: 10, bottom: 5 }. Sebenzisa umsebenzi xa ufuna ukubala ngokuguquguqukayo i-offset.
ekujoliswe kuko umkhethi | indawo | jQuery element windowinto _ Ixela into ekujoliswe kuyo ye-affix.

Iindlela

.affix(options)

Yenza umxholo wakho ube ngumxholo ogxunyekiweyo. Yamkela iinketho ozikhethelayo object.

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

.affix('checkPosition')

Bala kwakhona ubume be-affix ngokusekelwe kwimilinganiselo, indawo, kunye nendawo yokuskrola yezinto ezifanelekileyo. I .affix, .affix-top, kunye .affix-bottomneeklasi zongezwa okanye zisuswe kumxholo oqhotyoshelweyo ngokwemeko entsha. Le ndlela kufuneka ibizwe nanini na xa imilinganiselo yesiqulatho esigxunyekiweyo okanye into ekujoliswe kuyo itshintshiwe, ukuqinisekisa ukubekwa okuchanekileyo komxholo ogxunyekiweyo.

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

Iziganeko

Iplagi ye-affix ye-Bootstrap iveza iziganeko ezimbalwa zokuqhagamshelwa ekusebenzeni kwe-affix.

Uhlobo loMnyhadala Inkcazo
ncamathela.bs.ncamathisela Esi siganeko sivutha ngokukhawuleza phambi kokuba i-elementi incanyathiselwe.
incamathelisa.bs.incamathelisi Esi siganeko sigxothwa emva kokuba isici sincanyathiselwe.
ncamathela-phezulu.bs.ncamathisela Esi siganeko sivutha ngokukhawuleza phambi kokuba into incamatheliswe phezulu.
incamathelisa-phezulu.bs.incamathelisi Esi siganeko sigxothwa emva kokuba i-elementi igxunyekwe phezulu.
ncamathela ezantsi.bs.ncamathisela Esi siganeko sivutha ngokukhawuleza phambi kokuba into incanyathiselwe ezantsi.
incamathele-ezantsi.bs.incamathelisi Esi siganeko sigxothwa emva kokuba icandelo lincanyathiselwe ezantsi.