Uhlolojikelele

Ngamunye noma ihlanganiswe

Ama-plugin angafakwa ngawodwana (kusetshenziswa *.jsamafayela angawodwana e-Bootstrap), noma wonke ngesikhathi esisodwa (usebenzisa bootstrap.jsnoma i-minified bootstrap.min.js).

Ukusebenzisa i-JavaScript ehlanganisiwe

Kokubili bootstrap.jsfuthi bootstrap.min.jsaqukethe wonke ama-plugin efayeleni elilodwa. Faka eyodwa kuphela.

Ukuncika kwe-plugin

Amanye ama-plugin nezingxenye ze-CSS zincike kwamanye ama-plugin. Uma ufaka ama-plugin ngawodwana, qiniseka ukuthi uhlola lokhu kuncika kumadokhumenti. Futhi qaphela ukuthi wonke ama-plugin ancike ku-jQuery (lokhu kusho ukuthi i-jQuery kufanele ifakwe ngaphambi kwamafayela e-plugin). Xhumana nathibower.json ukuze ubone ukuthi yiziphi izinguqulo ze-jQuery ezisekelwayo.

Izibaluli zedatha

Ungasebenzisa wonke ama-plugin e-Bootstrap ngokusebenzisa i-markup API ngaphandle kokubhala umugqa owodwa we-JavaScript. Lena i-API yesigaba sokuqala se-Bootstrap futhi kufanele kube ukucabangela kwakho kokuqala lapho usebenzisa i-plugin.

Sekushiwo lokho, kwezinye izimo kungase kufiseleke ukucisha lokhu kusebenza. Ngakho-ke, sinikeza nekhono lokukhubaza i-API yesibaluli sedatha ngokukhulula yonke imicimbi kudokhumenti enezikhala zamagama data-api. Lokhu kubukeka kanje:

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

Okunye, ukuze uqondise i-plugin ethile, vele ufake igama le-plugin njengendawo yegama kanye nendawo yegama yedatha-api kanje:

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

I-plugin eyodwa kuphela nge-elementi ngayinye ngezibaluli zedatha

Ungasebenzisi izibaluli zedatha ezivela kuma-plugin amaningi kusici esifanayo. Isibonelo, inkinobho ayikwazi ukuba nethiphu yamathuluzi futhi iguqule i-modal. Ukuze wenze lokhu, sebenzisa i-elementi yokugoqa.

I-Programmatic API

Sikholelwa futhi ukuthi kufanele ukwazi ukusebenzisa wonke ama-plugin e-Bootstrap nge-JavaScript API. Wonke ama-API asesidlangalaleni ayindlela eyodwa, esebenzisekayo, futhi abuyisela iqoqo osekwenziwe ngalo.

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

Zonke izindlela kufanele zamukele into ongakhetha kuyo, iyunithi yezinhlamvu eqondise indlela ethile, noma lutho (okuqalisa i-plugin ngokuziphatha okuzenzakalelayo):

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

I-plugin ngayinye iphinde iveze umakhi wayo ongahluziwe esakhiweni Constructor: $.fn.popover.Constructor. Uma ungathanda ukuthola isibonelo esithile se-plugin, sithole ngokuqondile entweni: $('[rel="popover"]').data('popover').

Izilungiselelo ezizenzakalelayo

Ungashintsha izilungiselelo ezizenzakalelayo ze-plugin ngokulungisa Constructor.DEFAULTSinto ye-plugin:

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

Akukho ukungqubuzana

Kwesinye isikhathi kuyadingeka ukusebenzisa ama-plugin e-Bootstrap nezinye izinhlaka ze-UI. Kulezi zimo, ukungqubuzana kwendawo yamagama kungenzeka ngezikhathi ezithile. Uma lokhu kwenzeka, ungashayela .noConflicti-plugin ofisa ukubuyisela inani layo.

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

Imicimbi

I-Bootstrap inikeza imicimbi yangokwezifiso yezenzo ezihlukile zama-plugin. Ngokuvamile, lezi ziza ngendlela engapheli kanye nenkathi edlule - lapho okungapheli (isb. show) kuqalwa ekuqaleni komcimbi, futhi isimo saso sokuhlanganyela esidlule (isib. shown) siqaliswa lapho kuqedwa isenzo.

Kusukela ngo-3.0.0, yonke imicimbi ye-Bootstrap inezikhala zamagama.

Yonke imicimbi engapheli inikeza preventDefaultukusebenza. Lokhu kunikeza ikhono lokumisa ukwenziwa kwesenzo ngaphambi kokuthi siqale.

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

Izinombolo zenguqulo

Inguqulo ye-plugin ngayinye ye-Bootstrap's jQuery ingafinyelelwa ngesakhiwo somakhi VERSIONwe-plugin. Isibonelo, nge-plugin yethiphu yamathuluzi:

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

Akukho okubuyela emuva okukhethekile uma i-JavaScript ivaliwe

Ama-plugin e-Bootstrap awabuyeli kahle ikakhulukazi uma i-JavaScript ivaliwe. Uma unendaba nolwazi lomsebenzisi kulesi simo, sebenzisa <noscript>ukuchaza isimo (nokuthi ungayenza kanjani i-JavaScript isebenze kabusha) kubasebenzisi bakho, kanye/noma wengeze okwakho okubuyela emuva ngokwezifiso.

Imitapo yolwazi yezinkampani zangaphandle

I-Bootstrap ayisekeli ngokusemthethweni amalabhulali e-JavaScript ezinkampani zangaphandle njenge-Prototype noma i-jQuery UI. Ngaphandle .noConflictkwemicimbi enezikhala zamagama, kungase kube nezinkinga zokusebenzisana okudingeka uzilungise uwedwa.

Izinguquko ze -transition.js

Mayelana noshintsho

Ukuze uthole imiphumela elula yoshintsho, faka transition.jskanye eceleni kwamanye amafayela e-JS. Uma usebenzisa i-comiled (noma minified) bootstrap.js, asikho isidingo sokufaka lokhu—sekuvele kukhona.

Yini engaphakathi

I-Transition.js iwumsizi oyisisekelo transitionEndwemicimbi kanye ne-emulator yenguquko ye-CSS. Isetshenziswa amanye ama-plugin ukuhlola ukwesekwa koshintsho lwe-CSS nokubamba izinguquko ezilengayo.

Ikhubaza izinguquko

Izinguquko zingakhutshazwa emhlabeni jikelele kusetshenziswa amazwibela alandelayo e-JavaScript, okumele eze ngemva kokuthi transition.js(noma bootstrap.js, bootstrap.min.jsnjengoba kungaba njalo) isilayishiwe:

$.support.transition = false

Amamodeli modal.js

Ama-modal ayahlelwa, kodwa aguquguqukayo, imiyalo yengxoxo enobuncane bokusebenza obudingekayo kanye nokuzenzakalelayo okuhlakaniphile.

Amamodeli amaningi avuliwe awasekelwe

Qiniseka ukuthi awuvuli i-modal ngenkathi enye isabonakala. Ukubonisa imodeli engaphezu kweyodwa ngesikhathi kudinga ikhodi yangokwezifiso.

Ukubekwa kwe-modal markup

Zama njalo ukubeka ikhodi ye-HTML ye-modal endaweni yezinga eliphezulu kudokhumenti yakho ukuze ugweme ezinye izingxenye ezithinta ukubukeka kanye/noma ukusebenza kwe-modal.

Izixwayiso zedivayisi yeselula

Kukhona izexwayiso mayelana nokusebenzisa ama-modal kumadivayisi eselula. Bona amadokhumenti asekela isiphequluli sethu ukuze uthole imininingwane.

Ngenxa yokuthi i-HTML5 iyichaza kanjani i-semantics yayo, autofocusisibaluli se-HTML asinawo umthelela kumamodeli we-Bootstrap. Ukuze uthole umphumela ofanayo, sebenzisa i-JavaScript yangokwezifiso:

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

Izibonelo

Isibonelo esiqinile

I-modal enikeziwe enesihloko, umzimba, nesethi yezenzo kunyaweni.

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

Guqula i-modal usebenzisa i-JavaScript ngokuchofoza inkinobho engezansi. Izoshelela phansi bese ifiphala kusukela phezulu kwekhasi.

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

Qiniseka ukuthi wengeza role="dialog"futhi aria-labelledby="...", ubhekisela kusihloko se-modal, ku- , .modalnakusona uqobo.role="document".modal-dialog

Ukwengeza, unganikeza incazelo yengxoxo yakho ye-modal nge- aria-describedbyon .modal.

Ishumeka amavidiyo e-YouTube

Ukushumeka amavidiyo e-YouTube kumamodeli kudinga i-JavaScript eyengeziwe engekho ku-Bootstrap ukuze kumiswe ukudlalwa ngokuzenzakalelayo nokunye. Bona lokhu okuthunyelwe okuchichima kwesitaki okuwusizo ukuze uthole ulwazi olwengeziwe.

Osayizi abazikhethela

Amamodeli anosayizi ababili abazikhethela, atholakala ngamakilasi okulungisa azobekwa 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>

Susa ukugqwayiza

Kumamodeli avele avele kunokuba afiphele ukuze abukwe, susa .fadeikilasi kumakhaphu akho e-modal.

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

Ukusebenzisa isistimu yegridi

Ukuze usebenzise isistimu yegridi ye-Bootstrap ngaphakathi kwe-modal, vele usebenzise i-nest .rows ngaphakathi .modal-bodybese usebenzisa amakilasi esistimu yegridi evamile.

<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 yezinkinobho zonke ezicupha i-modal efanayo, enokuqukethwe okuhluke kancane nje? Sebenzisa event.relatedTargetkanye nezibaluli ze- HTMLdata-* (mhlawumbe nge-jQuery ) ukuze uguqule okuqukethwe kwe-modal kuye ngokuthi iyiphi inkinobho echofozwe. Bona amadokhumenti e-Modal Events ukuze uthole imininingwane yokuthi relatedTarget,

...izinkinobho ezengeziwe...
<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)
})

Ukusetshenziswa

I-plugin ye-modal iguqula okuqukethwe kwakho okufihliwe ngokufunwa, ngezibaluli zedatha noma i-JavaScript. Iphinde yengeze .modal-openekubhaleni phezu <body>kokuziphatha kokuskrola okuzenzakalelayo futhi ikhiqize .modal-backdropukuhlinzeka ngendawo yokuchofoza yokucashisa amamodeli abonisiwe lapho uchofozwa ngaphandle kwe-modal.

Ngezibaluli zedatha

Yenza kusebenze i-modal ngaphandle kokubhala i-JavaScript. Misa data-toggle="modal"into yesilawuli, njengenkinobho, kanye ne-a data-target="#foo"noma href="#foo"ukuze uqondise i-modal ethile ukuze uyiguqule.

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

Nge-JavaScript

Shayela i-modal ene-id myModalenomugqa owodwa we-JavaScript:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-backdrop="".

Igama uhlobo okuzenzakalelayo incazelo
okwasemuva i-boolean noma intambo'static' iqiniso Kufaka phakathi i-elementi ye-modal-backdrop. Noma, cacisa staticokwasemuva okungavali i-modal lapho uchofozwa.
ikhibhodi boolean iqiniso Ivala i-modal lapho ukhiye we-escape ucindezelwa
umbukiso boolean iqiniso Ibonisa i-modal lapho iqaliswa.
kude indlela amanga

Le nketho yehlisiwe kusukela ku-v3.3.0 futhi isusiwe ku-v4. Sincoma ukuthi usebenzise isifanekiso sohlangothi lweklayenti noma uhlaka olubophezela idatha, noma ushayele i-jQuery.load ngokwakho.

Uma i-URL ekude inikeziwe, okuqukethwe kuzolayishwa kanye ngendlela ye-jQuery loadfuthi kufakwe ku- .modal-contentdiv. Uma usebenzisa i-data-api, ungase usebenzise hrefisibaluli ukuze ucacise umthombo wesilawuli kude. Isibonelo salokhu sikhonjiswe ngezansi:

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

Izindlela

Yenza okuqukethwe kwakho kusebenze njengemodeli. Yamukela izinketho ozikhethela object.

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

Iguqula ngokwenza i-modal. Ibuyela kofonayo ngaphambi kokuba imodali ikhonjiswe noma ifihlwe (okungukuthi ngaphambi kokuba kwenzeke shown.bs.modalnoma hidden.bs.modalisigameko).

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

Ivula mathupha i-modal. Ibuyela kofonayo ngaphambi kokuthi imodali ikhonjiswe (okungukuthi ngaphambi kokuba shown.bs.modalumcimbi wenzeke).

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

Ifihla i-modal ngokwenza. Ibuyela kofonayo ngaphambi kokuthi i-modal ifihlekile (okungukuthi ngaphambi kokuthi hidden.bs.modalkwenzeke umcimbi).

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

Ilungisa ukuma kwe-modal ukuze imelane nebha yokuskrola uma kwenzeka umuntu evela, okungenza i-modal igxumele kwesokunxele.

Idingeka kuphela lapho ukuphakama kwe-modal kushintsha ngenkathi ivuliwe.

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

Imicimbi

Ikilasi le-modal ye-Bootstrap lidalula imicimbi embalwa ukuze ixhume ekusebenzeni kwe-modal.

Yonke imicimbi ye-modal ixoshwa ku-modal ngokwayo (okungukuthi ku- <div class="modal">).

Uhlobo Lomcimbi Incazelo
show.bs.modal Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa. Uma kubangelwa ukuchofoza, into echofoziwe iyatholakala njengempahla relatedTargetyomcimbi.
okubonisiwe.bs.modali Lo mcimbi uyaxoshwa uma i-modal yenziwe yabonakala kumsebenzisi (izolinda ukuthi ukuguqulwa kwe-CSS kuqedwe). Uma kubangelwa ukuchofoza, into echofoziwe iyatholakala njengempahla relatedTargetyomcimbi.
fihla.bs.modal Lo mcimbi uxoshwa ngokushesha lapho hideindlela yesibonelo ibizwa.
kufihliwe.bs.modal Lo mcimbi uyaxoshwa lapho i-modal isiqedile ukufihlwa kumsebenzisi (izolinda ukuthi ukuguqulwa kwe-CSS kuqedwe).
loaded.bs.modal Lo mcimbi uyaxoshwa uma i-modal ilayishe okuqukethwe isebenzisa remoteinketho.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Okwehliswayo okwehliswayo.js

Engeza amamenyu okwehlayo cishe kunoma yini enale plugin elula, okuhlanganisa i-navbar, amathebhu, namaphilisi.

Ngaphakathi kwe-navbar

Ngaphakathi kwamaphilisi

Ngezibaluli zedatha noma i-JavaScript, i-plugin eyehlayo iguqula okuqukethwe okufihliwe (amamenyu okwehliswayo) ngokuguqula .openikilasi entweni yohlu lwabazali.

Kumadivayisi eselula, ukuvula okwehliswayo kunezela .dropdown-backdropnjengendawo yokuthepha yokuvala amamenyu okwehlayo lapho uthepha ngaphandle kwemenyu, imfuneko yosekelo olufanele lwe-iOS. Lokhu kusho ukuthi ukusuka kumenyu eyehlayo evuliwe uye kwehlukile kumenyu yokudonsela phansi kudinga ukuthepha okwengeziwe kuselula.

Qaphela: data-toggle="dropdown"Isibaluli kuthenjelwe kuso ekuvaleni amamenyu okwehlayo ezingeni lesicelo, ngakho-ke kuwumqondo omuhle ukusisebenzisa njalo.

Ngezibaluli zedatha

Engeza data-toggle="dropdown"kusixhumanisi noma inkinobho ukuze uguqule okwehliswayo.

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

Ukuze ugcine ama-URL eqinile ngezinkinobho zesixhumanisi, sebenzisa data-targetisibaluli esikhundleni se- 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>

Nge-JavaScript

Shayela okwehliswayo nge-JavaScript:

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

data-toggle="dropdown"kusadingeka

Kungakhathaliseki ukuthi ushayela okwehliswayo ucingo nge-JavaScript noma esikhundleni salokho sebenzisa i-data-api, data-toggle="dropdown"kuyadingeka njalo ukuthi ube khona kusici sokuqala sokwehliswayo.

Lutho

Iguqula imenyu eyehlayo ye-navbar enikeziwe noma ukuzulazula okunethebhu.

Yonke imicimbi eyehliswayo ixoshwa engxenyeni .dropdown-menuengumzali.

Yonke imicimbi yokudonsela phansi inendawo relatedTarget, inani layo eliyi-elementi yehange yokuguqula.

Uhlobo Lomcimbi Incazelo
show.bs.okwehlayo Lo mcimbi uvutha ngokushesha lapho indlela yesibonelo sombukiso ibizwa.
okubonisiwe.bs.okwehlayo Lo mcimbi uxoshwa lapho okwehliswayo kwenziwe kwabonakala kumsebenzisi (sizolinda izinguquko ze-CSS, ukuze ziqedele).
fihla.bs.okwehlayo Lo mcimbi uxoshwa ngokushesha lapho indlela yokufihla isibiziwe.
eyehlayo.bs.efihliwe Lo mcimbi uxoshwa lapho okwehliswayo sekuqedile ukufihlwa kumsebenzisi (kuzolinda izinguquko ze-CSS, ukuze ziqedele).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

I-ScrollSpy scrollspy.js

Isibonelo ku-navbar

I-plugin ye-ScrollSpy ingeyokuvuselela ngokuzenzakalelayo okuhlosiwe kwe-nav ngokusekelwe endaweni yokuskrola. Skrola indawo engezansi kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo. Izinto ezincanyana zokwehla zizogqanyiswa nazo.

@amafutha

I-Ad leggings keytar, i-brunch id art party dolor labore. I-Pitchfork ineminyaka engu-nim lo-fi ngaphambi kokuthi bathengise yonke into. Amalungelo ebhayisikili e-Tumblr epulazini ukuya etafuleni noma yini. I-Cardigan ene-anim keffiyeh carles. Indlwana yezithombe ka-Velit seitan mcsweeney 3 wolf moon irure. Ijezi le-Cosby lomo jean shorts, i-williamsburg hoodie minim qui cishe awukaze uzwe ngazo et cardigan trust fund culpa biodiesel wes anderson aesthetic. U-Nihil one-tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa amadevu skateboard, adipisicing fugiat velit pitchfork intshebe. Freegan intshebe aliqua cupidatat mcsweeney's vero. Cupidatat ezine loko nisi, ea helvetica nulla carles. Iloli lokudla lejezi le-cosby eline-tattoo, i-mcsweeney's quis non freegan vinyl. I-Lo-fi wes anderson +1 sartorial. I-Carles non-aesthetic exercitation i-quis gentrify. I-Brooklyn adipisicing craft beer vice keytar deserunt.

eyodwa

I-Occaecat commodo aliqua deelectus. I-Fap craft beer deserunt skateboard ea. Amalungelo ebhayisikili e-Lomo adipisicing banh mi, velit ea sunt next level locavore ikhofi yemvelaphi eyodwa e-magna veniam. I-vinyl id yempilo ephezulu, i-echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. I-Cred ex in, i-iphone eqhubekayo deelectus consectetur fanny pack.

ezimbili

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 messenger bag marfa whatever deelectus food truck. Sapiente synth id imaginenda. I-Locavore sed helvetica cliche irony, ama-thundercats cishe awukaze uzwe ngawo consequat hoodie gluten-free lo-fi fap aliquip. I-Labore elit placeat ngaphambi kokuba ithengiswe, u-terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. I-Cardigan craft beer seitan readymade velit. I-VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Ukusetshenziswa

Idinga i-Bootstrap nav

I-Scrollspy okwamanje idinga ukusetshenziswa kwengxenye ye- Bootstrap nav ukuze kugqanyiswe kahle izixhumanisi ezisebenzayo.

Kudingeka okuqondiwe kwe-ID okungaxazululeka

Izixhumanisi ze-Navbar kufanele zibe neziqondiso ze-id ezingaxazululeka. Isibonelo, <a href="#home">home</a>okumele kuhambisane nento ethize ku-DOM efana ne- <div id="home"></div>.

:visibleIzinto ezingaqondisiwe azinakiwe

Izinto eziqondiwe ezingahambisani :visiblene-jQuery zizozitshwa futhi izinto zazo ze-nav ezihambisanayo azisoze zagqanyiswa.

Idinga ukuma okuhlobene

Kungakhathaliseki ukuthi iyiphi indlela yokuqalisa, i-scrollspy idinga ukusetshenziswa position: relative;kwento oyihlolayo. Ezimweni eziningi lokhu kuyi- <body>. Lapho uskrola ezintweni ngaphandle kwe- <body>, qiniseka ukuthi heightunesethi futhi overflow-y: scroll;uyasebenza.

Ngezibaluli zedatha

Ukwengeza kalula impatho ye-scrollspy ekuzulazuleni kwe data-spy="scroll"-topbar yakho, engeza entweni ofuna ukuyihlola (imvamisa lokhu kuzoba yi- <body>). Bese wengeza data-targetisibaluli nge-ID noma isigaba sesici esingumzali sanoma iyiphi .navingxenye ye-Bootstrap.

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

Nge-JavaScript

Ngemva kokungeza position: relative;ku-CSS yakho, shayela i-scrollspy nge-JavaScript:

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

Izindlela

.scrollspy('refresh')

Uma usebenzisa i-scrollspy ngokuhambisana nokwengeza noma ukususa izakhi ku-DOM, uzodinga ukushayela indlela yokuvuselela kanje:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-offset="".

Igama uhlobo okuzenzakalelayo incazelo
offset inombolo 10 Amaphikseli okufanele uwasuse ukusuka phezulu uma ubala indawo yokuskrola.

Imicimbi

Uhlobo Lomcimbi Incazelo
activate.bs.scrollspy Lo mcimbi uvutha noma nini lapho into entsha yenziwa isebenze i-scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Amathebhu aguqulekayo tab.js

Amathebhu ayisibonelo

Engeza ukusebenza kwethebhu esheshayo, eguqukayo ukuze udlule kumafasitelana wokuqukethwe kwasendaweni, ngisho namamenyu okwehlayo. Amathebhu afakwe isidleke awasekelwe.

I-denim eluhlaza cishe awuzange uzwe ngabo izikhindi ze-jean Austin. I-Nesciunt tofu stumptown aliqua, i-retro synth master cleanse. Amadevu cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Ijezi le-Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, 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.

Inweba ukuzulazula kwamathebhu

Le plugin inweba ingxenye yokuzulazula enamathebhu ukuze kwengeze izindawo ezibambekayo.

Ukusetshenziswa

Nika amandla amathebhu aphathekayo nge-JavaScript (ithebhu ngayinye idinga ukwenziwa isebenze ngayodwa):

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

Ungavula amathebhu ngamanye ngezindlela ezimbalwa:

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

Imakhaphu

Ungakwazi ukuvula ithebhu noma ukuzulazula kwephilisi ngaphandle kokubhala noma iyiphi i-JavaScript ngokucacisa data-toggle="tab"noma ngento data-toggle="pill"ethile. Ukwengeza i- navkanye nav-tabsnamakilasi kuthebhu ulkuzosebenzisa isitayela sethebhu ye-Bootstrap , kuyilapho kwengeza ethi navkanye nav-pillsnamakilasi kuzosebenzisa isitayela sephilisi .

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

Ukuze wenze amathebhu afiphale, .fadeengeza .tab-pane. Ifasitelana lethebhu yokuqala kufanele futhi .inlenze okuqukethwe kokuqala kubonakale.

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

Izindlela

$().tab

Yenza i-elementi yethebhu isebenze nesiqukathi sokuqukethwe. Ithebhu kufanele ibe no-a data-targetnoma i href-container node ku-DOM. Kulezi zibonelo ezingenhla, amathebhu angu- <a>s data-toggle="tab"anezibaluli.

.tab('show')

Ikhetha ithebhu enikeziwe futhi ibonise okuqukethwe kwayo okuhlobene. Noma iyiphi enye ithebhu eyayikhethwe ngaphambilini iyayekwa ukukhethwa futhi okuqukethwe kwayo okuhlobene kuyafihlwa. Ibuyela kofonayo ngaphambi kokuba kuboniswe ifasitelana lethebhu (okungukuthi ngaphambi kokuba shown.bs.tabkwenzeke umcimbi).

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

Imicimbi

Uma ubonisa ithebhu entsha, izehlakalo zivutha ngokulandelana okulandelayo:

  1. hide.bs.tab(kuthebhu esebenzayo yamanje)
  2. show.bs.tab(kuthebhu ezoboniswa)
  3. hidden.bs.tab(kuthebhu esebenzayo yangaphambilini, efanayo hide.bs.tabneyomcimbi)
  4. shown.bs.tab(kuthebhu esanda kuboniswa, efanayo show.bs.tabneyomcimbi)

Uma ingekho ithebhu ebivele iyasebenza, kuzosho ukuthi i- hide.bs.tabnemicimbi hidden.bs.tabngeke kuxoshwe.

Uhlobo Lomcimbi Incazelo
show.bs.tab Lo mcimbi uvutha embukisweni wethebhu, kodwa ngaphambi kokuthi kuboniswe ithebhu entsha. Sebenzisa event.targetfuthi event.relatedTargetuqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini (uma ikhona) ngokulandelanayo.
ithebhu.bs.ebonisiwe Lo mcimbi uvutha embukisweni wethebhu ngemva kokuthi ithebhu isibonisiwe. Sebenzisa event.targetfuthi event.relatedTargetuqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini (uma ikhona) ngokulandelanayo.
fihla.bs.tab Lo mcimbi uvutha lapho ithebhu entsha izoboniswa (futhi ngaleyo ndlela ithebhu yangaphambilini esebenzayo izofihlwa). Sebenzisa event.targetfuthi event.relatedTargetuqondise ithebhu esebenzayo yamanje kanye nethebhu entsha ezosebenza maduze, ngokulandelana.
ithebhu.bs.efihliwe Lo mcimbi uvutha ngemva kokuboniswa kwethebhu entsha (futhi ngaleyo ndlela ithebhu yangaphambilini esebenzayo ifihliwe). Sebenzisa event.targetfuthi event.relatedTargetuqondise ithebhu esebenzayo yangaphambilini kanye nethebhu entsha esebenzayo, ngokulandelanayo.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Ithulithiphu.js _

Igqugquzelwe i-plugin enhle kakhulu ye-jQuery.tipsy ebhalwe ngu-Jason Frame; Amathuluzi ayinguqulo ebuyekeziwe, engancikile ezithombeni, sebenzisa i-CSS3 ukuze uthole ukugqwayiza, kanye nezibaluli zedatha zokulondoloza isihloko sendawo.

Amathuluzi anezihloko zobude obunguziro awaboniswa.

Izibonelo

Hambisa phezulu kwezixhumanisi ezingezansi ukuze ubone amathuluzi:

Amabhulukwe aqinile ezingeni elilandelayo keffiyeh cishe awuzwanga ngawo. Photo booth intshebe eluhlaza yedenim letterpress vegan messenger bag stumptown. Isambatho se-farm-to-table seitan, i-mcsweeney's fixie sustainable quinoa 8-bit american apparel ine- terry richardson vinyl chambray. Izintshebe stumptown, cardigans banh mi lomo thundercats. I-Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Ingcweti ehlekisayo ngempela whatever keytar , i-movie-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Ithulithiphu emile

Kunezinketho ezine ezitholakalayo: kuqondaniswe phezulu, kwesokudla, phansi, nesobunxele.

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

Ukusebenza kokungena

Ngezizathu zokusebenza, i-Tooltip ne-Popover data-apis ziyangena, okusho ukuthi kufanele uziqalise ngokwakho .

Enye indlela yokuqalisa wonke amathiphu ekhasini kuzoba ukuwakhetha ngesibaluli sawo data-toggle:

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

Ukusetshenziswa

I-plugin yethulithiphu ikhiqiza okuqukethwe kanye nemakhaphu ngokufunwayo, futhi ngokuzenzakalelayo beka izeluleko zamathuluzi ngemva kwesici sokucupha.

Qalisa ithiphu yamathuluzi nge-JavaScript:

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

Imakhaphu

Imakhaphu edingekayo yethiphu yamathuluzi iyisibaluli kuphela datafuthi titleengxenyeni ye-HTML ofisa ukuba nayo ithiphu. Imakhaphu ekhiqiziwe yethiphu yamathuluzi ilula, nakuba idinga indawo (ngokuzenzakalelayo, isethwe topyi-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>

Izixhumanisi zemigqa eminingi

Kwesinye isikhathi ufuna ukwengeza ithiphu kusixhumanisi esigoqa imigqa eminingi. Ukuziphatha okuzenzakalelayo kwe-plugin ye-tooltip ukuyibeka phakathi nendawo ngokuvundlile nangokuqondile. Engeza white-space: nowrap;kumahange akho ukuze ugweme lokhu.

Amathuluzi emaqenjini ezinkinobho, amaqembu okokufaka, namathebula adinga ukulungiselelwa okukhethekile

Uma usebenzisa amathiphu ezintweni ezingaphakathi kwe-a .btn-groupnoma .input-group, noma ezintweni ezihlobene nethebula ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), kuzodingeka ucacise inketho container: 'body'(ebhalwe ngezansi) ukuze ugweme imiphumela emibi engadingeki (njengento ekhula iba banzi kanye/ noma ilahlekelwe amakhona ayindilinga uma ithiphu yamathuluzi icushwa).

Ungazami ukukhombisa amathiphu ezintweni ezifihliwe

Ukucela $(...).tooltip('show')lapho i-elementi eqondiwe ikhona display: none;kuzobangela ithiphu yamathuluzi ukuthi imiswe ngendlela engalungile.

Amathiphu wamathuluzi afinyelelekayo wabasebenzisi bekhibhodi nobuchwepheshe bokusiza

Kubasebenzisi abazulazula ngekhibhodi, futhi ikakhulukazi abasebenzisi bobuchwepheshe obusizayo, kufanele wengeze kuphela izeluleko zamathuluzi ezintweni ezigxile kukhibhodi ezifana nezixhumanisi, izilawuli zefomu, nanoma iyiphi into engaqondakali enesibaluli tabindex="0".

Amathuluzi ezinto ezikhubazekile adinga izinto zokugoqa

Ukwengeza ithiphu entweni disablednoma ku- .disabledelementi, faka i-elementi ngaphakathi kwe-a <div>futhi usebenzise ithiphu yamathuluzi kulokho <div>esikhundleni salokho.

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-animation="".

Igama Uhlobo Okuzenzakalelayo Incazelo
izithombe boolean iqiniso Faka inguquko ye-CSS fade ethiphu yamathuluzi
isitsha umucu | amanga amanga

Yengeza ithiphu entweni ethile. Isibonelo: container: 'body'. Le nketho iwusizo kakhulu ngoba ikuvumela ukuthi ubeke ithiphu yamathuluzi ekugelezeni kwedokhumenti eduze kwento ecuphayo - okuzovimbela ithiphu yamathuluzi ekuntanteni isuke ku-elementi ecuphayo ngesikhathi sokushintsha usayizi wewindi.

ukubambezela inombolo | into 0

Ukubambezeleka ukubonisa nokufihla ithiphu yamathuluzi (ms) - akusebenzi ohlotsheni lwesicupho okwenziwa ngesandla

Uma inombolo inikezwa, ukubambezeleka kusetshenziswa kukho kokubili ukufihla/umbukiso

Isakhiwo sento sithi:delay: { "show": 500, "hide": 100 }

html boolean amanga Faka i-HTML ethiphu yamathuluzi. Uma kungamanga, indlela ye-jQuery textizosetshenziswa ukufaka okuqukethwe ku-DOM. Sebenzisa umbhalo uma ukhathazekile ngokuhlaselwa kwe-XSS.
ukubekwa umucu | umsebenzi 'phezulu'

Indlela yokubeka ithiphu yamathuluzi - phezulu | phansi | kwesokunxele | kulungile | okuzenzakalelayo.
Uma "okuzenzakalelayo" kucacisiwe, izoqondisa kabusha ithiphu lamathuluzi. Isibonelo, uma ukubekwa "kukwesokunxele ngokuzenzakalelayo", ithiphu lamathuluzi lizovela kwesokunxele uma kungenzeka, ngaphandle kwalokho lizovela kwesokudla.

Uma umsebenzi usetshenziselwa ukunquma ukubekwa, ubizwa ngenodi yethulithiphu ye-DOM njenge-agumenti yayo yokuqala kanye nenodi yento ecuphayo ethi DOM njengesibili. Umongo thisusethelwe kusibonelo sethiphu yamathuluzi.

isikhethi umucu amanga Uma kunikezwa isikhethi, izinto zethiphu yamathuluzi zizodluliselwa kulokho okuhlosiwe okucacisiwe. Empeleni, lokhu kusetshenziselwa ukunika amandla okuqukethwe kwe-HTML okuguquguqukayo ukuthi kwengezwe amathiphu. Bheka lokhu kanye nesibonelo esifundisayo .
isifanekiso umucu '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Isisekelo se-HTML ongasisebenzisa lapho udala ithiphu yamathuluzi.

I-tooltip titleizojovwa ku- .tooltip-inner.

.tooltip-arrowizoba umcibisholo wethiphu yamathuluzi.

I-elementi yokugoqa engaphandle kufanele ibe .tooltipnekilasi.

isihloko umucu | umsebenzi ''

Inani lesihloko elizenzakalelayo uma titleisibaluli singekho.

Uma umsebenzi unikiwe, uzobizwa thisnereferensi yawo isethwe ku-elementi ithiphu yamathuluzi enamathiselwe kuyo.

inhlamvu umucu 'hover focus' Ithiphu yamathuluzi icushwa kanjani - chofoza | hamba | gxila | imanuwali. Ungadlula izibangeli eziningi; abahlukanise ngesikhala. manualayikwazi ukuhlanganiswa nanoma yisiphi esinye isiqhumiso.
indawo yokubuka umucu | into | umsebenzi { isikhethi: 'body', padding: 0}

Igcina ithiphu yamathuluzi ngaphakathi kwemingcele yale elementi. Isibonelo: viewport: '#viewport'noma{ "selector": "#viewport", "padding": 0 }

Uma umsebenzi unikiwe, ubizwa ngenodi yento ecuphayo ethi DOM njengokuwukuphela kwempikiswano yayo. Umongo thisusethelwe kusibonelo sethiphu yamathuluzi.

Izibaluli zedatha zamathiphu wamathuluzi angawodwana

Izinketho zamathiphu wamathuluzi ngamanye zingacaciswa ngokusebenzisa izibaluli zedatha, njengoba kuchazwe ngenhla.

Izindlela

$().tooltip(options)

Inamathisela isibambi sethulithiphu eqoqweni lesici.

.tooltip('show')

Iveza ithulithiphu yento ethile. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi iboniswe (okungukuthi ngaphambi kokuthi shown.bs.tooltipkwenzeke umcimbi). Lokhu kuthathwa njengokucupha "okuzenzela" kwethiphu yamathuluzi. Amathuluzi anezihloko zobude obunguziro awaboniswa.

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

.tooltip('hide')

Ifihla ithiphu yento ethile. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi ifihlekile (okungukuthi ngaphambi kokuthi hidden.bs.tooltipkwenzeke umcimbi). Lokhu kuthathwa njengokucupha "okuzenzela" kwethiphu yamathuluzi.

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

.tooltip('toggle')

Iguqula ithiphu lethuluzi le-elementi. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi iboniswe noma ifihlwe (okungukuthi ngaphambi kokuthi kwenzeke shown.bs.tooltipnoma hidden.bs.tooltipkwenzeke). Lokhu kuthathwa njengokucupha "okuzenzela" kwethiphu yamathuluzi.

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

.tooltip('destroy')

Ifihla futhi ibhubhise ithiphu yento ethile. Amathuluzi asebenzisa ukuthunyelwa (okudalwe kusetshenziswa inkethoselector ) awakwazi ukucekelwa phansi ngamanye ezintweni ezibangela inzalo .

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

Imicimbi

Uhlobo Lomcimbi Incazelo
show.bs.tooltip Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa.
ikhonjisiwe.bs.ithulithiphu Lo mcimbi uyaxoshwa uma ithiphu yethuluzi yenziwe yabonakala kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele).
fihla.bs.ithulithiphu Lo mcimbi uxoshwa ngokushesha lapho hideindlela yesibonelo ibizwa.
ifihlwe.bs.ithulithiphu Lo mcimbi uyaxoshwa uma ithiphu yamathuluzi isiqedile ukufihlwa kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele).
inserted.bs.tooltip Lo mcimbi uxoshwa ngemva show.bs.tooltipkomcimbi lapho ithempulethi yethulithiphu yengezwe ku-DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

I-Popovers popover.js

Engeza izimbondela ezincane zokuqukethwe, njengalezo eziku-iPad, kunoma iyiphi into ukuze uthole ulwazi lwesibili lwezindlu.

Ama-Popovers kokubili isihloko nokuqukethwe kwawo kunguziro-ubude akukaze kuboniswe.

Ukuncika kwe-plugin

Ama-Popovers adinga i- plugin yethiphu yamathuluzi ukuthi ifakwe enguqulweni yakho ye-Bootstrap.

Ukusebenza kokungena

Ngezizathu zokusebenza, i-Tooltip ne-Popover data-apis ziyangena, okusho ukuthi kufanele uziqalise ngokwakho .

Enye indlela yokuqalisa wonke ama-popover ekhasini kungaba ukuwakhetha ngesibaluli sawo data-toggle:

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

Ama-Popovers emaqenjini ezinkinobho, amaqembu okokufaka, namathebula adinga ukulungiselelwa okukhethekile

Uma usebenzisa ama-popovers ezintweni ezingaphakathi kwe-a .btn-groupnoma .input-group, noma ezintweni ezihlobene nethebula ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), kuzodingeka ucacise inketho container: 'body'(ebhalwe ngezansi) ukuze ugweme imiphumela emibi engadingeki (njengento ekhula iba banzi kanye/ noma ukulahlekelwa amakhona ayo ayindilinga lapho i-popover iqaliswa).

Ungazami ukukhombisa ama-popovers ezintweni ezifihliwe

Ukucela $(...).popover('show')lapho i-elementi eqondiwe ikhona display: none;kuzobangela ukuthi i-popover imiswe ngendlela engalungile.

Ama-Popovers kuma-elementi akhubazekile adinga izinto zokugoqa

Ukuze ungeze i-popover kokuthile disablednoma i- .disabledelementi, faka i-elementi ngaphakathi kwe-a <div>futhi usebenzise i-popover kulokho <div>esikhundleni salokho.

Izixhumanisi zemigqa eminingi

Kwesinye isikhathi ufuna ukwengeza i-popover kusixhumanisi esigoqa imigqa eminingi. Ukuziphatha okuzenzakalelayo kwe-plugin ye-popover ukuyibeka phakathi nendawo ngokuvundlile nangokuqondile. Engeza white-space: nowrap;kumahange akho ukuze ugweme lokhu.

Izibonelo

I-popover emile

Kunezinketho ezine ezitholakalayo: kuqondaniswe phezulu, kwesokudla, phansi, nesobunxele.

I-Popover top

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

I-Popover kwesokudla

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

I-Popover bottom

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

U-Popover uhambile

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

Idemo ebukhoma

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

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

Cashisa ngokuchofoza okulandelayo

Sebenzisa i- focustrigger ukuze ucashise ama-popover ngokuchofoza okulandelayo okwenziwa umsebenzisi.

Imakhaphu eqondile iyadingeka ukuze kuchithwe ngokuchofoza okulandelayo

Ngokuziphatha okufanele kwesiphequluli esiphambene nenkundla, kufanele usebenzise <a>umaka, hhayi umaka <button>, futhi kufanele ufake role="button"kanye tabindexnezibaluli.

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

Ukusetshenziswa

Nika amandla ama-popovers nge-JavaScript:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-animation="".

Igama Uhlobo Okuzenzakalelayo Incazelo
izithombe boolean iqiniso Faka inguquko ye-CSS fade ku-popover
isitsha umucu | amanga amanga

Yengeza i-popover kusici esithile. Isibonelo: container: 'body'. Le nketho iwusizo kakhulu ngoba ikuvumela ukuthi ubeke i-popover ekuhambeni kwedokhumenti eduze kwesici esicuphayo - okuzovimbela i-popover ekuntanteni isuke kusici esicuphayo ngesikhathi sokushintsha usayizi wewindi.

okuqukethwe umucu | umsebenzi ''

Inani lokuqukethwe elizenzakalelayo uma data-contentisibaluli singekho.

Uma umsebenzi unikiwe, uzobizwa thisnereferensi yawo esethwe ku-elementi i-popover enamathiselwe kuyo.

ukubambezela inombolo | into 0

Ukubambezeleka ukubonisa nokufihla i-popover (ms) - akusebenzi ohlotsheni lwe-trigger okwenziwa ngesandla

Uma inombolo inikezwa, ukubambezeleka kusetshenziswa kukho kokubili ukufihla/umbukiso

Isakhiwo sento sithi:delay: { "show": 500, "hide": 100 }

html boolean amanga Faka i-HTML ku-popover. Uma kungamanga, indlela ye-jQuery textizosetshenziswa ukufaka okuqukethwe ku-DOM. Sebenzisa umbhalo uma ukhathazekile ngokuhlaselwa kwe-XSS.
ukubekwa umucu | umsebenzi 'kwesokudla'

Indlela yokubeka i-popover - phezulu | phansi | kwesokunxele | kulungile | okuzenzakalelayo.
Uma "okuzenzakalelayo" kucacisiwe, izoqondisa kabusha i-popover. Isibonelo, uma ukubekwa "kungokuzenzakalelayo kwesokunxele", i-popover izovela kwesokunxele uma kungenzeka, ngaphandle kwalokho izovela kwesokudla.

Uma umsebenzi usetshenziswa ukunquma ukubekwa, ubizwa nge-popover node ye-DOM njenge-agumenti yayo yokuqala kanye nenodi yesici esicuphayo esithi DOM njengesibili. Umongo thisusethelwe kusibonelo se-popover.

isikhethi umucu amanga Uma kunikezwa isikhethi, izinto ze-popover zizothunyelwa kokuhlosiwe okucacisiwe. Empeleni, lokhu kusetshenziselwa ukunika amandla okuqukethwe kwe-HTML okuguquguqukayo ukuze kwengezwe ama-popover. Bheka lokhu kanye nesibonelo esifundisayo .
isifanekiso umucu '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Isisekelo se-HTML ongasisebenzisa lapho udala i-popover.

Ama-popover titleazofakwa ku- .popover-title.

Ama-popover contentazofakwa ku- .popover-content.

.arrowizoba umcibisholo we-popover.

I-elementi yokugoqa engaphandle kufanele ibe .popovernekilasi.

isihloko umucu | umsebenzi ''

Inani lesihloko elizenzakalelayo uma titleisibaluli singekho.

Uma umsebenzi unikiwe, uzobizwa thisnereferensi yawo esethwe ku-elementi i-popover enamathiselwe kuyo.

inhlamvu umucu 'chofoza' I-popover iqalwa kanjani - chofoza | hamba | gxila | imanuwali. Ungadlula izibangeli eziningi; abahlukanise ngesikhala. manualayikwazi ukuhlanganiswa nanoma yisiphi esinye isiqhumiso.
indawo yokubuka umucu | into | umsebenzi { isikhethi: 'body', padding: 0}

Igcina i-popover ngaphakathi kwemingcele yale elementi. Isibonelo: viewport: '#viewport'noma{ "selector": "#viewport", "padding": 0 }

Uma umsebenzi unikiwe, ubizwa ngenodi yento ecuphayo ethi DOM njengokuwukuphela kwempikiswano yayo. Umongo thisusethelwe kusibonelo se-popover.

Izibaluli zedatha ze-popover ngayinye

Izinketho ze-popover ngayinye zingacaciswa ngokusebenzisa izibaluli zedatha, njengoba kuchazwe ngenhla.

Izindlela

$().popover(options)

Iqalisa ama-popover eqoqo le-elementi.

.popover('show')

Iveza i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover iboniswe (okungukuthi ngaphambi kokuba shown.bs.popoverumcimbi wenzeke). Lokhu kuthathwa "njengokwenza ngesandla" ukucupha kwe-popover. Ama-Popovers kokubili isihloko nokuqukethwe kwawo kunguziro-ubude akukaze kuboniswe.

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

.popover('hide')

Ifihla i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover ifihlekile (okungukuthi ngaphambi kokuba hidden.bs.popoverumcimbi wenzeke). Lokhu kuthathwa "njengokwenza ngesandla" ukucupha kwe-popover.

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

.popover('toggle')

Iguqula i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover iboniswe noma ifihlwe (okungukuthi ngaphambi kokuthi kwenzeke shown.bs.popovernoma hidden.bs.popoverkwenzeke). Lokhu kuthathwa "njengokwenza ngesandla" ukucupha kwe-popover.

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

.popover('destroy')

Ifihla futhi icekele phansi i-popover yento. Ama-Popovers asebenzisa ukuthunyelwa (okudalwe kusetshenziswa inkethoselector ) awakwazi ukucekelwa phansi ngamanye ezintweni ezibangela inzalo .

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

Imicimbi

Uhlobo Lomcimbi Incazelo
show.bs.popover Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa.
kubonisiwe.bs.popover Lo mcimbi uxoshwa lapho i-popover yenziwe yabonakala kumsebenzisi (izolinda ukuthi izinguquko ze-CSS ziqedele).
fihla.bs.popover Lo mcimbi uxoshwa ngokushesha lapho hideindlela yesibonelo ibizwa.
kufihliwe.bs.popover Lo mcimbi uyaxoshwa uma i-popover isiqedile ukufihlwa kumsebenzisi (izolinda ukuthi izinguquko ze-CSS ziqedele).
kufakiwe.bs.popover Lo mcimbi uxoshwa ngemva show.bs.popoverkomcimbi lapho isifanekiso se-popover sengeziwe ku-DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Imiyalezo yokuxwayisa alert.js

Izexwayiso eziyisibonelo

Engeza umsebenzi wokucashisa kuyo yonke imilayezo yesixwayiso enale plugin.

Uma usebenzisa .closeinkinobho, kufanele kube ingane yokuqala .alert-dismissiblefuthi akukho okuqukethwe kombhalo okungafika ngaphambi kwayo kumakhaphu.

Ukusetshenziswa

Vele ungeze data-dismiss="alert"enkinobheni yakho yokuvala ukuze unikeze ngokuzenzakalelayo ukusebenza kwesexwayiso sokuvala. Ukuvala isexwayiso kusisusa ku-DOM.

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

Ukuze izexwayiso zakho zisebenzise ukugqwayiza lapho uvala, qiniseka ukuthi zinayo .fadekanye .innamakilasi asesetshenzisiwe kuzo.

Izindlela

$().alert()

Yenza isixwayiso silalele imicimbi yokuchofoza ezintweni eziphumayo data-dismiss="alert"ezinesibaluli. (Akudingekile uma usebenzisa i-auto-initialization ye-data-api.)

$().alert('close')

Ivala isexwayiso ngokusisusa ku-DOM. Uma i- .fadekanye .innamakilasi ekhona engxenyeni, isexwayiso sizofiphala ngaphambi kokuthi sisuswe.

Imicimbi

I-plugin yesixwayiso ye-Bootstrap iveza imicimbi embalwa ukuze ixhumeke ekusebenzeni kwesixwayiso.

Uhlobo Lomcimbi Incazelo
vala.bs.sexwayiso Lo mcimbi uvutha ngokushesha lapho closeindlela yesibonelo ibizwa.
ivaliwe.bs.sexwayiso Lo mcimbi uyaxoshwa uma isaziso sivaliwe (sizolinda ukuthi izinguquko ze-CSS ziqedele).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Izinkinobho.js _

Yenza okwengeziwe ngezinkinobho. Inkinobho yokulawula ithi noma dala amaqembu ezinkinobho zezingxenye ezengeziwe njengamabha wamathuluzi.

Ukuhambisana kwesiphequluli esiphambanayo

IFirefox iphikelela nezimo zokulawula amafomu (ukukhubazeka kanye nokuhlolwa) kuwo wonke ukulayisha kwamakhasi . Isixazululo salokhu ukusetshenziswa autocomplete="off". Bona iphutha le-Mozilla #654072 .

Okushoyo

Engeza data-loading-text="Loading..."ukuze usebenzise isimo sokulayisha enkinobho.

Lesi sici sihoxisiwe kusukela ku-v3.3.5 futhi sikhishiwe ku-v4.

Sebenzisa noma yisiphi isimo osithandayo!

Ngenxa yalo mboniso, sisebenzisa data-loading-textfuthi $().button('loading'), kodwa akusona isimo kuphela ongasisebenzisa. Bona okwengeziwe ngalokhu ngezansi $().button(string)emibhalweni .

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

Ukuguqula okukodwa

Engeza data-toggle="button"ukuze wenze kusebenze ukuguqula inkinobho eyodwa.

Izinkinobho eziguqulwe ngaphambilini zidinga .activefuthiaria-pressed="true"

Ezinkinobho eziguqulwe ngaphambilini, kufanele wengeze .activeikilasi aria-pressed="true"nesibaluli buttonkuwena.

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

Ibhokisi lokuhlola / Umsakazo

Engeza data-toggle="buttons"ebhokisini .btn-grouplokuhlola eliqukethe noma okokufaka kwerediyo ukuze unike amandla ukuguqula izitayela ezilandelanayo.

Izinketho ezikhethiwe ngaphambilini zidinga.active

Ngezinketho ezikhethiwe ngaphambili, kufanele wengeze .activeikilasi kokokufaka labelngokwakho.

Isimo esihloliwe esibonakalayo sibuyekezwa kuphela ngokuchofoza

Uma isimo esithikhiwe senkinobho yebhokisi lokuhlola sibuyekezwa ngaphandle kokudubula clickumcimbi enkinobho (isb ngokusebenzisa <input type="reset">noma ngokusetha checkedindawo yokokufaka), uzodinga ukuguqula .activeikilasi kokokufaka 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>

Izindlela

$().button('toggle')

Iguqula isimo sohlelo. Inikeza inkinobho ukubonakala sengathi yenziwe yasebenza.

$().button('reset')

Isetha kabusha isimo senkinobho - ishintsha umbhalo ube umbhalo wokuqala. Le ndlela ayivumelanisi futhi ibuyela ngaphambi kokuthi ukusetha kabusha kuqedwe ngempela.

$().button(string)

Ishintsha umbhalo ube nanoma yisiphi isimo sombhalo esichazwe yidatha.

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

Goqa i- collapse.js

I-plugin eguquguqukayo esebenzisa idlanzana lamakilasi ukuze kube lula ukuguqula ukuziphatha.

Ukuncika kwe-plugin

Ukugoqa kudinga i- plugin yoshintsho ukuthi ifakwe enguqulweni yakho ye-Bootstrap.

Isibonelo

Chofoza izinkinobho ezingezansi ukuze ubonise futhi ufihle enye into ngezinguquko zekilasi:

  • .collapseifihla okuqukethwe
  • .collapsingisetshenziswa ngesikhathi soshintsho
  • .collapse.inikhombisa okuqukethwe

Ungasebenzisa isixhumanisi hrefesinesibaluli, noma inkinobho data-targetenesibaluli. Kuzo zombili izimo, data-toggle="collapse"kuyadingeka.

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>

Isibonelo se-accordion

Nweba ukuziphatha kokugoqa okuzenzakalelayo ukuze udale i-accordion nengxenye yephaneli.

Anim pariatur cliche reprehenderit, enim eiusmod high life accamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Iloli lokudla i-quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua beka inyoni kuso i-squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. I-Ad vegan Exeur butcher vice lomo. I-Leggings occaecat yenza ubhiya wepulazi ukuya etafuleni, i-denim eluhlaza yobuhle be-synth nesciunt cishe awukaze uzwe ngabo i-accusamus labore i-VHS eqhubekayo.
Anim pariatur cliche reprehenderit, enim eiusmod high life accamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Iloli lokudla i-quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua beka inyoni kuso i-squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. I-Ad vegan Exeur butcher vice lomo. I-Leggings occaecat yenza ubhiya wepulazi ukuya etafuleni, i-denim eluhlaza yobuhle be-synth nesciunt cishe awukaze uzwe ngabo i-accusamus labore i-VHS eqhubekayo.
Anim pariatur cliche reprehenderit, enim eiusmod high life accamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Iloli lokudla i-quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua beka inyoni kuso i-squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. I-Ad vegan Exeur butcher vice lomo. I-Leggings occaecat yenza ubhiya wepulazi ukuya etafuleni, i-denim eluhlaza yobuhle be-synth nesciunt cishe awukaze uzwe ngabo i-accusamus labore i-VHS eqhubekayo.
<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>

Kungenzeka futhi ukushintshanisa u- .panel-bodys no- .list-groups.

  • I-bootply
  • One itmus ac facilin
  • I-eros yesibili

Yenza izilawuli zokunweba/goqa zifinyeleleke

Qiniseka ukuthi ungeza aria-expandedkusici sokulawula. Lesi sibaluli sichaza ngokusobala isimo samanje se-elementi egoqekayo ezifundweni zesikrini nobuchwepheshe bokusiza obufanayo. Uma i-elementi egoqekayo ivalwa ngokuzenzakalelayo, kufanele ibe nenani elingu- aria-expanded="false". Uma usethe i-elementi egoqekayo ukuthi ivuleke ngokuzenzakalelayo usebenzisa iniklasi, setha aria-expanded="true"kusilawuli esikhundleni salokho. I-plugin izoguqula ngokuzenzakalelayo lesi sibaluli ngokusekelwe ekutheni i-elementi egoqekayo ivuliwe noma ivaliwe yini.

Ukwengeza, uma i-elementi yakho yokulawula iqondise kwinto eyodwa egoqekayo - okungukuthi data-targetisibaluli sikhomba idkusikhethi - ungase wengeze aria-controlsisici sokulawula, esiqukethe idinto egoqekayo. Izifundi zesikrini zesimanje nobuchwepheshe bokusiza obufanayo busebenzisa lesi sici ukuze kunikeze abasebenzisi izinqamuleli ezengeziwe ukuze bazulazule ngokuqondile ku-elementi egoqekayo ngokwayo.

Ukusetshenziswa

I-plugin yokugoqa isebenzisa amakilasi ambalwa ukuphatha ukuphakamisa okusindayo:

  • .collapseifihla okuqukethwe
  • .collapse.inikhombisa okuqukethwe
  • .collapsingyengezwa lapho inguquko iqala, futhi ikhishwe lapho iqeda

Lawa makilasi angatholakala ku component-animations.less.

Ngezibaluli zedatha

Vele ungeze data-toggle="collapse"futhi u-a entweni data-targetukuze unikeze ngokuzenzakalelayo ukulawula kwento egoqekayo. Isibaluli data-targetsamukela isikhethi se-CSS ongafaka kuso ukugoqa. Qiniseka ukuthi ungeza ikilasi collapseku-elementi egoqekayo. Uma ungathanda ukuthi ivuleke ngokuzenzakalelayo, engeza iklasi elengeziwe in.

Ukuze ungeze ukuphathwa kweqembu okufana ne-accordion kusilawuli esigoqekayo, engeza isibaluli sedatha data-parent="#selector". Bheka idemo ukuze ubone lokhu kusebenza.

Nge-JavaScript

Nika amandla ngokwenza nge:

$('.collapse').collapse()

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-parent="".

Igama uhlobo okuzenzakalelayo incazelo
umzali isikhethi amanga Uma kunikezwa isikhethi, khona-ke zonke izici ezigoqekayo ngaphansi komzali othile zizovalwa lapho le nto egoqekayo iboniswa. (okufana nokuziphatha kwe-accordion yendabuko - lokhu kuncike panelekilasini)
guqula boolean iqiniso Iguqula into egoqekayo ekunxuseni

Izindlela

.collapse(options)

Yenza okuqukethwe kwakho kusebenze njengento egoqekayo. Yamukela izinketho ozikhethela object.

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

.collapse('toggle')

Iguqula into egoqekayo ukuze iboniswe noma ifihlwe. Ibuyela kofonayo ngaphambi kokuba into egoqekayo iboniswe noma ifihlwe (okungukuthi ngaphambi kokuba kwenzeke shown.bs.collapsenoma hidden.bs.collapseisigameko).

.collapse('show')

Ibonisa into egoqekayo. Ibuyela kofonayo ngaphambi kokuba into egoqekayo iboniswe (okungukuthi ngaphambi kokuba shown.bs.collapsekwenzeke umcimbi).

.collapse('hide')

Ifihla into egoqekayo. Ibuyela kofonayo ngaphambi kokuba into egoqekayo ifihleke (okungukuthi ngaphambi kokuthi hidden.bs.collapsekwenzeke umcimbi).

Imicimbi

Ikilasi lokugoqa le-Bootstrap lidalula imicimbi embalwa ukuze ixhumeke ekusebenzeni kokugoqa.

Uhlobo Lomcimbi Incazelo
show.bs.goqa Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa.
ikhonjisiwe.bs.goqa Lo mcimbi uxoshwa lapho isici sokugoqa senziwe sabonakala kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele).
fihla.bs.goqa Lo mcimbi uxoshwa ngokushesha lapho hideindlela isibiziwe.
kufihlwe.bs.goqa Lo mcimbi uxoshwa lapho isici sokugoqa sifihliwe kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

I-carousel carousel.js

Ingxenye yombukiso wesilayidi yokuhamba ngebhayisikili ngokusebenzisa izici, njenge-carousel. Ama-carousel anesidleke awasekelwe.

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

Amazwibela okuzikhethela

Engeza amagama-ncazo kumaslayidi akho kalula nge- .carousel-captionelementi ngaphakathi kwanoma iyiphi .item. Beka cishe noma iyiphi i-HTML ongayikhetha phakathi lapho futhi izoqondaniswa ngokuzenzakalelayo futhi ifomethwe.

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

Ama-carousels amaningi

Ama-carousel adinga ukusetshenziswa idkwesiqukathi esingaphandle kakhulu (the .carousel) ukuze izilawuli ze-carousel zisebenze kahle. Uma wengeza ama-carousel amaningi, noma uma ushintsha i-carousel's id, qiniseka ukuthi ubuyekeza izilawuli ezifanele.

Ngezibaluli zedatha

Sebenzisa izibaluli zedatha ukuze ulawule kalula ukuma kwe-carousel. data-slideyamukela amagama angukhiye prevnomanext , eshintsha indawo yesilayidi ngokuhlobene nendawo yaso yamanje. Kungenjalo, sebenzisa data-slide-toukudlulisa inkomba yesilayidi eluhlaza ku-carousel data-slide-to="2", eshintsha indawo yesilayidi ibe inkomba ethile eqala ngo- 0.

Idata-ride="carousel" sisetshenziselwa ukumaka i-carousel njengokugqwayiza kusukela ekulayishweni kwekhasi. Ngeke isetshenziswe kuhlanganiswe (nokungadingeki nokungadingeki) ukuqaliswa okucacile kwe-JavaScript kwe-carousel efanayo.

Nge-JavaScript

Shayela i-carousel ngokwenza:

$('.carousel').carousel()

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-interval="".

Igama uhlobo okuzenzakalelayo incazelo
isikhawu inombolo 5000 Inani lesikhathi sokubambezeleka phakathi kokuhamba ngebhayisikili ngokuzenzakalela into. Uma kungamanga, i-carousel ngeke ijikeleze ngokuzenzakalelayo.
ima kancane umucu | null "hambahamba" Uma kusethelwe ku- "hover", imisa isikhashana ukuhamba ngebhayisikili kwe-carousel mouseenterbese iqalisa kabusha ukugijima kwe-carousel kuvuliwe mouseleave. Uma kusethelwe ku- null, ukuhambisa phezulu kwe-carousel ngeke kuyimise isikhashana.
ukugoqa boolean iqiniso Ukuthi i-carousel kufanele ijikeleze ngokuqhubekayo noma ibe nokuma kanzima.
ikhibhodi boolean iqiniso Ukuthi i-carousel kufanele sisabele emicimbini yekhibhodi.

Iqalisa i-carousel ngezinketho zokuzithandela objectfuthi iqala ukuhamba ngebhayisikili ezintweni.

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

Izungeza izinto ze-carousel ukusuka kwesokunxele kuye kwesokudla.

Imisa i-carousel ekuhambeni ngebhayisikili ezintweni.

Ibiyela i-carousel kuhlaka oluthile (okusekelwe ngo-0, okufana namalungu afanayo).

Imijikelezo eya entweni edlule.

Imijikelezo eya entweni elandelayo.

Ikilasi le-carousel le-Bootstrap lidalula imicimbi emibili yokuxhunywa ekusebenzeni kwe-carousel.

Yomibili imicimbi inezimpawu ezengeziwe ezilandelayo:

  • direction: Isiqondiso lapho i-carousel ishelela khona ( "left"noma "right").
  • relatedTarget: I-elementi ye-DOM eslayishwa endaweni njengento esebenzayo.

Yonke imicimbi ye-carousel idutshulwa ku-carousel ngokwayo (okungukuthi ku- <div class="carousel">).

Uhlobo Lomcimbi Incazelo
slide.bs.carousel Lo mcimbi uvutha ngokushesha lapho slideindlela yesibonelo isetshenziswa.
slid.bs.carousel Lo mcimbi uxoshwa lapho i-carousel isiqedile ukuguqulwa kwama-slide.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Faka i-affix.js

Isibonelo

I-plugin ye-affix ishintsha ivule position: fixed;futhi ivale, ilingise umphumela otholakala nge- position: sticky;. Ukuzulazula okungaphansi kwesokudla kuyidemo ebukhoma ye-plugin ye-affix.


Ukusetshenziswa

Sebenzisa i-plugin yokunamathisela usebenzisa izibaluli zedatha noma ngokwenza nge-JavaScript yakho. Kuzo zombili izimo, kufanele unikeze i-CSS yokuma nobubanzi bokuqukethwe kwakho okunamathiselwe.

Qaphela: Ungasebenzisi i-plugin yokunamathisela entweni equkethwe endaweni ebekwe ngokuqhathaniswa, njengekholomu edonsiwe noma ephushiwe, ngenxa yesiphazamisi sokunikezwa kwe-Safari .

Ukuma nge-CSS

I-plugin yokunamathisela ishintsha phakathi kwamakilasi amathathu, ngalinye limele isimo esithile: .affix, .affix-top, kanye .affix-bottom. Kufanele unikeze izitayela, ngaphandle kwe- position: fixed;on .affix, kulawa makilasi ngokwakho (ozimele kule plugin) ukuze uphathe izikhundla zangempela.

Nansi indlela i-plugin ye-affix esebenza ngayo:

  1. Ukuze uqale, i-plugin iyengeza.affix-top ukukhombisa ukuthi i-elementi isendaweni yayo ephezulu kakhulu. Kuleli qophelo akukho ukuma kwe-CSS okudingekayo.
  2. Ukuskrola udlule i-elementi ofuna inamathiselwe kufanele kuqalise ukunamathisela kwangempela. Lapha yilapho .affixkungena esikhundleni .affix-topbese kumiswa position: fixed;(kuhlinzekwe yi-Bootstrap's CSS).
  3. Uma i-bottom offset ichazwa, ukuskrola udlule kufanele kuthathelwe .affixindawo .affix-bottom. Njengoba ama-offset engokuzithandela, ukusetha okukodwa kudinga ukuthi usethe i-CSS efanele. Kulokhu, engeza position: absolute;uma kunesidingo. I-plugin isebenzisa isibaluli sedatha noma inketho ye-JavaScript ukuze inqume ukuthi ibekwe kuphi i-elementi ukusuka lapho.

Landela lezi zinyathelo ezingenhla ukuze usethe i-CSS yakho kunoma iyiphi yezinketho zokusetshenziswa ezingezansi.

Ngezibaluli zedatha

Ukwengeza kalula ukuziphatha kokunamathisela kunoma iyiphi i-elementi, vele ungeze data-spy="affix"ku-elementi ofuna ukuyihlola. Sebenzisa ama-offsets ukuchaza ukuthi uguqula nini ukuphina kwento.

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

Nge-JavaScript

Shayela i-plugin ye-affix nge-JavaScript:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-offset-top="200".

Igama uhlobo okuzenzakalelayo incazelo
offset inombolo | umsebenzi | into 10 Amaphikseli okufanele uwasuse esikrinini uma ubala indawo yokuskrola. Uma inombolo eyodwa inikezwa, i-offset izosetshenziswa kuzo zombili izikhombisi-ndlela ezingaphezulu neziphansi. Ukuze unikeze i-offset eyingqayizivele, engezansi nephezulu vele unikeze into offset: { top: 10 }noma offset: { top: 10, bottom: 5 }. Sebenzisa umsebenzi uma udinga ukubala ngokuguqukayo i-offset.
okuhlosiwe isikhethi | node | jQuery element windowinto _ Icacisa ingxenye eqondiwe ye-affix.

Izindlela

.affix(options)

Yenza okuqukethwe kwakho kusebenze njengokuqukethwe okunamathiselwe. Yamukela izinketho ozikhethela object.

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

.affix('checkPosition')

Ibala kabusha isimo se-affix ngokusekelwe kubukhulu, indawo, kanye nendawo yokuskrola yezinto ezifanele. I- .affix, .affix-top, kanye .affix-bottomnamakilasi engezwa noma asuswa kokuqukethwe okunamathiselwe kuye ngokwesimo esisha. Le ndlela idinga ukubizwa noma nini lapho ubukhulu bokuqukethwe okunamathiselwe noma into eqondiwe ishintshwa, ukuze kuqinisekiswe ukuma okulungile kokuqukethwe okunamathiselwe.

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

Imicimbi

I-plugin yokunamathisela ye-Bootstrap iveza imicimbi embalwa ukuze ixhumeke ekusebenzeni kwe-affix.

Uhlobo Lomcimbi Incazelo
namathisela.bs.namathisela Lo mcimbi uvutha ngokushesha ngaphambi kokuthi isici sinamathiselwe.
okunamathiselwe.bs.okunamathiselwe Lo mcimbi uxoshwa ngemuva kokuthi isici sinamathiselwe.
namathisela-phezulu.bs.namathisela Lo mcimbi uvutha ngokushesha ngaphambi kokuba i-elementi inanyathiselwe phezulu.
okunamathiselwe-phezulu.bs.namathisela Lo mcimbi uxoshwa ngemuva kokuthi isici sinamathiselwe phezulu.
namathisela-phansi.bs.namathisela Lo mcimbi uvutha ngokushesha ngaphambi kokuba isici sinamathiselwe ngezansi.
okunamathiselwe-ngezansi.bs.okunamathiselwe Lo mcimbi uxoshwa ngemuva kokuthi isici sinamathiselwe ngezansi.