Pangkalahatang-ideya

Indibidwal o pinagsama-sama

Maaaring isama ang mga plugin nang isa-isa (gamit ang mga indibidwal na *.jsfile ng Bootstrap), o sabay-sabay (gamit bootstrap.jso ang minified bootstrap.min.js).

Gamit ang pinagsama-samang JavaScript

Pareho bootstrap.jsat bootstrap.min.jsnaglalaman ng lahat ng mga plugin sa isang file. Isa lang ang isama.

Mga dependency ng plugin

Ang ilang mga plugin at mga bahagi ng CSS ay nakadepende sa iba pang mga plugin. Kung isa-isa kang magsasama ng mga plugin, tiyaking suriin ang mga dependency na ito sa mga doc. Tandaan din na ang lahat ng mga plugin ay nakasalalay sa jQuery (ito ay nangangahulugan na ang jQuery ay dapat isama bago ang mga plugin na file). Kumonsulta sa aminbower.json upang makita kung aling mga bersyon ng jQuery ang sinusuportahan.

Mga katangian ng data

Maaari mong gamitin ang lahat ng plugin ng Bootstrap sa pamamagitan lamang ng markup API nang hindi nagsusulat ng isang linya ng JavaScript. Ito ang unang-class na API ng Bootstrap at dapat ang iyong unang pagsasaalang-alang kapag gumagamit ng isang plugin.

Iyon ay sinabi, sa ilang mga sitwasyon ay maaaring kanais-nais na i-off ang functionality na ito. Samakatuwid, nagbibigay din kami ng kakayahang i-disable ang data attribute API sa pamamagitan ng pag-unbinding sa lahat ng kaganapan sa dokumento na may namespace na data-api. Ganito ang hitsura nito:

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

Bilang kahalili, upang i-target ang isang partikular na plugin, isama lamang ang pangalan ng plugin bilang isang namespace kasama ang data-api namespace tulad nito:

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

Isang plugin lamang bawat elemento sa pamamagitan ng mga katangian ng data

Huwag gumamit ng mga katangian ng data mula sa maraming plugin sa parehong elemento. Halimbawa, ang isang button ay hindi maaaring magkaroon ng tooltip at mag-toggle ng modal. Upang magawa ito, gumamit ng isang elemento ng pambalot.

Programmatic API

Naniniwala rin kami na dapat mong magamit ang lahat ng Bootstrap plugins sa pamamagitan lamang ng JavaScript API. Ang lahat ng mga pampublikong API ay iisa, nakaka-chainable na mga pamamaraan, at ibinabalik ang koleksyon na naaksyunan.

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

Ang lahat ng mga pamamaraan ay dapat tumanggap ng isang opsyonal na object na opsyon, isang string na nagta-target sa isang partikular na paraan, o wala (na nagpasimula ng isang plugin na may default na gawi):

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

Inilalantad din ng bawat plugin ang raw constructor nito sa isang Constructorproperty: $.fn.popover.Constructor. Kung gusto mong makakuha ng partikular na instance ng plugin, direktang kunin ito mula sa isang elemento: $('[rel="popover"]').data('popover').

Mga default na setting

Maaari mong baguhin ang mga default na setting para sa isang plugin sa pamamagitan ng pagbabago sa Constructor.DEFAULTSobject ng plugin:

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

Walang conflict

Minsan kinakailangan na gumamit ng mga plugin ng Bootstrap kasama ng iba pang mga framework ng UI. Sa mga sitwasyong ito, maaaring mangyari paminsan-minsan ang mga banggaan ng namespace. Kung mangyari ito, maaari kang tumawag .noConflictsa plugin na nais mong ibalik ang halaga.

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

Mga kaganapan

Nagbibigay ang Bootstrap ng mga custom na kaganapan para sa mga natatanging pagkilos ng karamihan sa mga plugin. Sa pangkalahatan, ang mga ito ay dumating sa isang infinitive at past participle form - kung saan ang infinitive (hal. show) ay na-trigger sa simula ng isang kaganapan, at ang past participle form nito (hal. shown) ay na-trigger sa pagkumpleto ng isang aksyon.

Sa 3.0.0, lahat ng mga kaganapan sa Bootstrap ay namespaced.

Ang lahat ng infinitive na kaganapan ay nagbibigay ng preventDefaultfunctionality. Nagbibigay ito ng kakayahang ihinto ang pagpapatupad ng isang aksyon bago ito magsimula.

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

Mga numero ng bersyon

Ang bersyon ng bawat isa sa mga plugin ng jQuery ng Bootstrap ay maaaring ma-access sa pamamagitan ng pag- VERSIONaari ng constructor ng plugin. Halimbawa, para sa tooltip plugin:

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

Walang mga espesyal na fallback kapag hindi pinagana ang JavaScript

Ang mga plugin ng Bootstrap ay hindi bumabalik lalo na nang maganda kapag ang JavaScript ay hindi pinagana. Kung nagmamalasakit ka sa karanasan ng user sa kasong ito, gamitin <noscript>upang ipaliwanag ang sitwasyon (at kung paano muling paganahin ang JavaScript) sa iyong mga user, at/o magdagdag ng sarili mong mga custom na fallback.

Mga aklatan ng third-party

Hindi opisyal na sinusuportahan ng Bootstrap ang mga third-party na JavaScript library tulad ng Prototype o jQuery UI. Sa kabila .noConflictat namespaced na mga kaganapan, maaaring may mga problema sa compatibility na kailangan mong ayusin nang mag-isa.

Transitions transition.js

Tungkol sa mga transition

Para sa mga simpleng transition effect, isama ang transition.jsisang beses sa tabi ng iba pang mga JS file. Kung ginagamit mo ang compiled (o minified) bootstrap.js, hindi na kailangang isama ito—nandiyan na ito.

Anong nasa loob

Ang Transition.js ay isang pangunahing katulong para sa transitionEndmga kaganapan pati na rin ang isang CSS transition emulator. Ito ay ginagamit ng iba pang mga plugin upang tingnan ang CSS transition support at para mahuli ang hanging transition.

Hindi pagpapagana ng mga transition

Maaaring ma-disable sa buong mundo ang mga transition gamit ang sumusunod na snippet ng JavaScript, na dapat na dumating pagkatapos transition.js(o bootstrap.js, bootstrap.min.jsayon sa sitwasyon) ay na-load:

$.support.transition = false

Modals modal.js

Ang mga modal ay streamline, ngunit nababaluktot, ang mga dialog na prompt na may pinakamababang kinakailangang functionality at mga smart default.

Hindi sinusuportahan ang maraming bukas na modal

Tiyaking huwag magbukas ng modal habang nakikita pa ang isa pa. Ang pagpapakita ng higit sa isang modal sa isang pagkakataon ay nangangailangan ng custom na code.

Modal markup placement

Palaging subukang ilagay ang HTML code ng modal sa isang nangungunang antas na posisyon sa iyong dokumento upang maiwasan ang iba pang mga bahagi na nakakaapekto sa hitsura at/o functionality ng modal.

Mga babala sa mobile device

Mayroong ilang mga caveat tungkol sa paggamit ng mga modal sa mga mobile device. Tingnan ang aming browser support docs para sa mga detalye.

Dahil sa kung paano tinukoy ng HTML5 ang mga semantika nito, ang autofocusHTML attribute ay walang epekto sa Bootstrap modals. Upang makamit ang parehong epekto, gumamit ng ilang custom na JavaScript:

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

Mga halimbawa

Static na halimbawa

Isang nai-render na modal na may header, katawan, at hanay ng mga pagkilos sa footer.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Live na demo

I-toggle ang isang modal sa pamamagitan ng JavaScript sa pamamagitan ng pag-click sa button sa ibaba. Magda-slide ito pababa at maglalaho mula sa itaas ng page.

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

Gawing naa-access ang mga modal

Siguraduhing magdagdag role="dialog"at aria-labelledby="...", na tumutukoy sa modal na pamagat, sa .modal, at role="document"sa .modal-dialogmismong.

Bukod pa rito, maaari kang magbigay ng paglalarawan ng iyong modal dialog na may aria-describedbysa .modal.

Pag-embed ng mga video sa YouTube

Ang pag-embed ng mga video sa YouTube sa mga modal ay nangangailangan ng karagdagang JavaScript na wala sa Bootstrap upang awtomatikong ihinto ang pag-playback at higit pa. Tingnan ang kapaki-pakinabang na post na ito ng Stack Overflow para sa higit pang impormasyon.

Mga opsyonal na laki

Ang mga modal ay may dalawang opsyonal na laki, na magagamit sa pamamagitan ng mga klase ng modifier na ilalagay sa isang .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>

Alisin ang animation

Para sa mga modal na lilitaw lamang sa halip na mawala upang tingnan, alisin ang .fadeklase sa iyong modal markup.

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

Gamit ang grid system

Upang samantalahin ang Bootstrap grid system sa loob ng isang modal, mag-nest lang .rowsa loob ng .modal-bodyat pagkatapos ay gamitin ang mga normal na klase ng grid system.

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

May isang grupo ng mga button na lahat ay nagti-trigger ng parehong modal, na may bahagyang magkaibang mga nilalaman? Gamitin event.relatedTargetat HTML na mga data-*katangian (maaaring sa pamamagitan ng jQuery ) upang pag-iba-ibahin ang mga nilalaman ng modal depende sa kung aling button ang na-click. Tingnan ang mga doc ng Modal Events para sa mga detalye sa relatedTarget,

...higit pang mga pindutan...
<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)
})

Paggamit

I-toggle ng modal plugin ang iyong nakatagong content on demand, sa pamamagitan ng mga attribute ng data o JavaScript. Nagdaragdag din ito .modal-opensa <body>to override default na pag-scroll na gawi at bumubuo ng .modal-backdroppara magbigay ng lugar ng pag-click para sa pag-dismiss ng mga ipinapakitang modal kapag nag-click sa labas ng modal.

Sa pamamagitan ng mga katangian ng data

Mag-activate ng modal nang hindi nagsusulat ng JavaScript. Itakda data-toggle="modal"sa isang elemento ng controller, tulad ng isang button, kasama ng isang data-target="#foo"o href="#foo"upang i-target ang isang partikular na modal upang i-toggle.

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

Sa pamamagitan ng JavaScript

Tumawag ng modal na may id myModalna may isang linya ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-backdrop="".

Pangalan uri default paglalarawan
backdrop boolean o ang string'static' totoo May kasamang modal-backdrop na elemento. Bilang kahalili, tumukoy staticpara sa isang backdrop na hindi nagsasara ng modal sa pag-click.
keyboard boolean totoo Isinasara ang modal kapag pinindot ang escape key
palabas boolean totoo Ipinapakita ang modal kapag nasimulan.
remote landas mali

Hindi na ginagamit ang opsyong ito mula noong v3.3.0 at inalis na sa v4. Inirerekomenda namin sa halip ang paggamit ng client-side templating o isang data binding framework, o pagtawag sa jQuery.load sa iyong sarili.

Kung ang isang malayuang URL ay ibinigay, ang nilalaman ay ilo-load nang isang beses sa pamamagitan ng paraan ng jQuery loadat ini-inject sa .modal-contentdiv. Kung gumagamit ka ng data-api, maaari mong alternatibong gamitin ang hrefattribute para tukuyin ang remote source. Ang isang halimbawa nito ay ipinapakita sa ibaba:

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

Paraan

Ina-activate ang iyong content bilang modal. Tumatanggap ng opsyonal na opsyon object.

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

Manu-manong i-toggle ang isang modal. Bumabalik sa tumatawag bago ang modal ay aktwal na naipakita o naitago (ibig sabihin, bago mangyari ang shown.bs.modalo hidden.bs.modalkaganapan).

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

Manu-manong nagbubukas ng modal. Bumabalik sa tumatawag bago aktwal na naipakita ang modal (ibig sabihin, bago shown.bs.modalmangyari ang kaganapan).

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

Manu-manong nagtatago ng modal. Bumabalik sa tumatawag bago pa talaga naitago ang modal (ibig sabihin, bago hidden.bs.modalmangyari ang kaganapan).

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

Isinasaayos muli ang pagpoposisyon ng modal upang kontrahin ang isang scrollbar kung sakaling may lumitaw, na gagawing tumalon ang modal sa kaliwa.

Kailangan lamang kapag ang taas ng modal ay nagbabago habang ito ay bukas.

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

Mga kaganapan

Ang modal class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa modal functionality.

Ang lahat ng modal na kaganapan ay pinapagana sa modal mismo (ibig sabihin, sa <div class="modal">).

Uri ng kaganapan Paglalarawan
show.bs.modal Agad na gagana ang kaganapang ito kapag showtinawag ang paraan ng instance. Kung sanhi ng isang pag-click, ang na-click na elemento ay magagamit bilang pag- relatedTargetaari ng kaganapan.
ipinapakita.bs.modal Ang kaganapang ito ay pinapagana kapag ang modal ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS). Kung sanhi ng isang pag-click, ang na-click na elemento ay magagamit bilang pag- relatedTargetaari ng kaganapan.
hide.bs.modal Agad na pinapagana ang kaganapang ito kapag hidetinawag na ang paraan ng instance.
hidden.bs.modal Ang kaganapang ito ay papaganahin kapag ang modal ay tapos nang itago mula sa user (maghihintay na makumpleto ang mga transition ng CSS).
loaded.bs.modal Ang kaganapang ito ay pinapagana kapag ang modal ay nag-load ng nilalaman gamit ang remoteopsyon.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Mga dropdown na dropdown.js

Magdagdag ng mga dropdown na menu sa halos anumang bagay gamit ang simpleng plugin na ito, kabilang ang navbar, mga tab, at mga tabletas.

Sa loob ng isang navbar

Sa loob ng mga tabletas

Sa pamamagitan ng mga attribute ng data o JavaScript, i-toggle ng dropdown na plugin ang nakatagong content (mga dropdown na menu) sa pamamagitan ng pag-toggle sa .openklase sa item sa listahan ng magulang.

Sa mga mobile device, ang pagbubukas ng dropdown ay nagdaragdag ng .dropdown-backdropbilang isang tap area para sa pagsasara ng mga dropdown na menu kapag nag-tap sa labas ng menu, isang kinakailangan para sa wastong suporta sa iOS. Nangangahulugan ito na ang paglipat mula sa isang bukas na dropdown na menu patungo sa ibang dropdown na menu ay nangangailangan ng karagdagang pag-tap sa mobile.

Tandaan: Ang data-toggle="dropdown"katangian ay umaasa sa pagsasara ng mga dropdown na menu sa antas ng application, kaya magandang ideya na palaging gamitin ito.

Sa pamamagitan ng mga katangian ng data

Idagdag data-toggle="dropdown"sa isang link o button upang i-toggle ang isang dropdown.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Upang panatilihing buo ang mga URL gamit ang mga button ng link, gamitin ang data-targetattribute sa halip na 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>

Sa pamamagitan ng JavaScript

Tawagan ang mga dropdown sa pamamagitan ng JavaScript:

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

data-toggle="dropdown"kailangan pa rin

Hindi alintana kung tawagan mo ang iyong dropdown sa pamamagitan ng JavaScript o sa halip ay gumamit ng data-api, data-toggle="dropdown"palaging kinakailangang naroroon sa elemento ng trigger ng dropdown.

wala

I-toggle ang dropdown na menu ng isang naibigay na navbar o naka-tab na navigation.

Ang lahat ng mga dropdown na kaganapan ay pinapagana sa pangunahing .dropdown-menuelemento ng 's.

May property ang lahat ng dropdown na event relatedTarget, na ang value ay ang toggling anchor element.

Uri ng kaganapan Paglalarawan
show.bs.dropdown Agad na gagana ang kaganapang ito kapag tinawag ang paraan ng show instance.
ipinapakita.bs.dropdown Ang kaganapang ito ay pinapagana kapag ang dropdown ay ginawang nakikita ng user (maghihintay para sa mga transition ng CSS, upang makumpleto).
hide.bs.dropdown Ang kaganapang ito ay agad na pinapagana kapag ang paraan ng pagtatago ng halimbawa ay tinawag.
hidden.bs.dropdown Ang kaganapang ito ay gagana kapag ang dropdown ay tapos nang itago mula sa user (maghihintay para sa mga transition ng CSS, upang makumpleto).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Halimbawa sa navbar

Ang ScrollSpy plugin ay para sa awtomatikong pag-update ng nav target batay sa scroll position. Mag-scroll sa lugar sa ibaba ng navbar at panoorin ang aktibong pagbabago ng klase. Ang mga dropdown na sub item ay iha-highlight din.

@mataba

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi bago sila naubos qui. Tumblr farm-to-table na mga karapatan sa bisikleta kahit ano. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui malamang na hindi mo pa naririnig ang mga ito at ang cardigan trust fund ay culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa bigote skateboard, adipisicing fugiat velit pitchfork balbas. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat apat na loko nisi, ea helvetica nulla carles. Naka-tattoo na cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

isa

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Ang Vero VHS ay adipisicing. Consectetur ilang DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

dalawa

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 kahit anong delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats malamang na hindi mo pa narinig ang tungkol sa kanila consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat bago sila maubos, 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.

Paggamit

Nangangailangan ng Bootstrap nav

Ang Scrollspy ay kasalukuyang nangangailangan ng paggamit ng isang Bootstrap nav component para sa wastong pag-highlight ng mga aktibong link.

Kinakailangan ang mga nareresolbang ID na target

Ang mga link sa Navbar ay dapat may mga nareresolbang id target. Halimbawa, ang isang ay <a href="#home">home</a>dapat na tumutugma sa isang bagay sa DOM tulad ng <div id="home"></div>.

Binalewala :visibleang mga hindi target na elemento

Ang mga target na elemento na hindi :visibleayon sa jQuery ay hindi papansinin at ang kanilang mga kaukulang nav item ay hindi kailanman mai-highlight.

Nangangailangan ng kamag-anak na pagpoposisyon

Anuman ang paraan ng pagpapatupad, ang scrollspy ay nangangailangan ng paggamit ng position: relative;sa elemento na iyong tinitiktikan. Sa karamihan ng mga kaso ito ang <body>. Kapag nag-i-scroll sa mga elemento maliban sa <body>, siguraduhing magkaroon ng isang heightset at overflow-y: scroll;inilapat.

Sa pamamagitan ng mga katangian ng data

Upang madaling magdagdag ng scrollspy na gawi sa iyong topbar navigation, idagdag data-spy="scroll"sa elementong gusto mong tiktikan (kadalasan ay ito ang <body>). Pagkatapos ay idagdag ang data-targetattribute na may ID o klase ng parent element ng anumang .navbahagi ng 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>

Sa pamamagitan ng JavaScript

Pagkatapos idagdag position: relative;sa iyong CSS, tawagan ang scrollspy sa pamamagitan ng JavaScript:

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

Paraan

.scrollspy('refresh')

Kapag gumagamit ng scrollspy kasabay ng pagdaragdag o pag-alis ng mga elemento mula sa DOM, kakailanganin mong tawagan ang paraan ng pag-refresh tulad nito:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-offset="".

Pangalan uri default paglalarawan
offset numero 10 Mga pixel na i-offset mula sa itaas kapag kinakalkula ang posisyon ng scroll.

Mga kaganapan

Uri ng kaganapan Paglalarawan
activate.bs.scrollspy Ang kaganapang ito ay gumagana sa tuwing may bagong item na na-activate ng scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Mga togglable tab na tab.js

Mga halimbawang tab

Magdagdag ng mabilis, dynamic na paggana ng tab upang lumipat sa mga pane ng lokal na nilalaman, kahit na sa pamamagitan ng mga dropdown na menu. Hindi sinusuportahan ang mga nested tab.

Malamang na hilaw na maong ay hindi mo pa narinig ang mga ito na jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Bigote cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex pusit. 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.

Pinapalawak ang naka-tab na nabigasyon

Pinapalawak ng plugin na ito ang bahagi ng nabigasyon na naka-tab upang magdagdag ng mga lugar na nata-tab.

Paggamit

Paganahin ang mga tab na tab sa pamamagitan ng JavaScript (kailangang isaaktibo ang bawat tab):

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

Maaari mong i-activate ang mga indibidwal na tab sa maraming paraan:

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

Markup

Maaari mong i-activate ang isang tab o pill navigation nang hindi sumusulat ng anumang JavaScript sa pamamagitan lamang ng pagtukoy data-toggle="tab"o data-toggle="pill"sa isang elemento. Ang pagdagdag ng navat mga nav-tabsklase sa tab ulay maglalapat ng Bootstrap tab styling , habang ang pagdaragdag ng navat mga nav-pillsklase ay maglalapat ng pill styling .

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Fade effect

Upang mag-fade in ang mga tab, idagdag .fadesa bawat isa .tab-pane. Ang unang tab pane ay dapat ding .ingawin ang unang nilalaman na nakikita.

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

Paraan

$().tab

Ina-activate ang isang elemento ng tab at lalagyan ng nilalaman. Ang tab ay dapat may alinman sa isang data-targeto isang pag- hreftarget ng isang container node sa DOM. Sa mga halimbawa sa itaas, ang mga tab ay ang mga <a>s na may mga data-toggle="tab"katangian.

.tab('show')

Pinipili ang ibinigay na tab at ipinapakita ang nauugnay na nilalaman nito. Ang anumang iba pang tab na dati nang napili ay hindi mapipili at ang nauugnay na nilalaman nito ay nakatago. Bumabalik sa tumatawag bago aktwal na naipakita ang tab pane (ibig sabihin bago shown.bs.tabmangyari ang kaganapan).

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

Mga kaganapan

Kapag nagpapakita ng bagong tab, gagana ang mga kaganapan sa sumusunod na pagkakasunud-sunod:

  1. hide.bs.tab(sa kasalukuyang aktibong tab)
  2. show.bs.tab(sa ipapakitang tab)
  3. hidden.bs.tab(sa nakaraang aktibong tab, kapareho ng para sa hide.bs.tabkaganapan)
  4. shown.bs.tab(sa bagong-aktibong kakapakitang tab, kapareho ng para sa show.bs.tabkaganapan)

Kung wala pang tab na aktibo, hindi papaganahin ang hide.bs.tabat mga hidden.bs.tabkaganapan.

Uri ng kaganapan Paglalarawan
show.bs.tab Ang kaganapang ito ay gagana sa palabas sa tab, ngunit bago ipakita ang bagong tab. Gamitin event.targetat event.relatedTargeti-target ang aktibong tab at ang nakaraang aktibong tab (kung magagamit) ayon sa pagkakabanggit.
ipinapakita.bs.tab Ang kaganapang ito ay gagana sa palabas sa tab pagkatapos maipakita ang isang tab. Gamitin event.targetat event.relatedTargeti-target ang aktibong tab at ang nakaraang aktibong tab (kung magagamit) ayon sa pagkakabanggit.
hide.bs.tab Ang kaganapang ito ay gagana kapag ang isang bagong tab ay ipapakita (at sa gayon ang nakaraang aktibong tab ay itatago). Gamitin event.targetat event.relatedTargeti-target ang kasalukuyang aktibong tab at ang bagong tab na malapit nang maging aktibo, ayon sa pagkakabanggit.
hidden.bs.tab Ang kaganapang ito ay gagana pagkatapos ipakita ang isang bagong tab (at sa gayon ang nakaraang aktibong tab ay nakatago). Gamitin event.targetat event.relatedTargeti-target ang nakaraang aktibong tab at ang bagong aktibong tab, ayon sa pagkakabanggit.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

May inspirasyon ng mahusay na jQuery.tipsy plugin na isinulat ni Jason Frame; Ang mga tooltip ay isang na-update na bersyon, na hindi umaasa sa mga larawan, gumagamit ng CSS3 para sa mga animation, at data-attribute para sa lokal na imbakan ng pamagat.

Ang mga tooltip na may zero-length na mga pamagat ay hindi kailanman ipinapakita.

Mga halimbawa

Mag-hover sa mga link sa ibaba upang makita ang mga tooltip:

Tight pants next level keffiyeh malamang hindi mo pa narinig. Photo booth balbas raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, ang mcsweeney's fixie sustainable quinoa 8-bit american apparel ay may terry richardson vinyl chambray. Balbas stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, apat na loko mcsweeney's cleanse vegan chambray. Isang talagang ironic artisan kahit anong keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Static na tooltip

Apat na opsyon ang available: naka-align sa itaas, kanan, ibaba, at kaliwa.

Apat na direksyon

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

Pag-andar ng pag-opt-in

Para sa mga dahilan ng pagganap, ang Tooltip at Popover data-apis ay opt-in, ibig sabihin , dapat mong simulan ang mga ito sa iyong sarili .

Ang isang paraan upang simulan ang lahat ng mga tooltip sa isang pahina ay ang piliin ang mga ito ayon sa kanilang data-togglekatangian:

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

Paggamit

Ang tooltip plugin ay bumubuo ng content at markup on demand, at bilang default ay naglalagay ng mga tooltip pagkatapos ng kanilang trigger element.

I-trigger ang tooltip sa pamamagitan ng JavaScript:

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

Markup

Ang kinakailangang markup para sa isang tooltip ay isang datakatangian lamang at titlesa HTML element na nais mong magkaroon ng isang tooltip. Ang nabuong markup ng isang tooltip ay medyo simple, bagama't nangangailangan ito ng isang posisyon (bilang default, nakatakda sa toppamamagitan ng 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>

Mga link na maramihang linya

Minsan gusto mong magdagdag ng tooltip sa isang hyperlink na bumabalot ng maraming linya. Ang default na gawi ng tooltip plugin ay igitna ito nang pahalang at patayo. Idagdag white-space: nowrap;sa iyong mga anchor upang maiwasan ito.

Nangangailangan ng espesyal na setting ang mga tooltip sa mga button group, input group, at table

Kapag gumagamit ng mga tooltip sa mga elemento sa loob ng isang .btn-groupo isang .input-group, o sa mga elementong nauugnay sa talahanayan ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), kailangan mong tukuyin ang opsyon container: 'body'(nakadokumento sa ibaba) upang maiwasan ang mga hindi gustong epekto (tulad ng lumalawak na elemento at/ o nawawala ang mga bilugan nitong sulok kapag na-trigger ang tooltip).

Huwag subukang magpakita ng mga tooltip sa mga nakatagong elemento

Ang pag- invoke $(...).tooltip('show')kung kailan ang target na elemento ay display: none;magiging sanhi ng maling pagkakaposisyon ng tooltip.

Mga naa-access na tooltip para sa mga gumagamit ng keyboard at pantulong na teknolohiya

Para sa mga user na nagna-navigate gamit ang isang keyboard, at sa partikular na mga user ng mga pantulong na teknolohiya, dapat ka lang magdagdag ng mga tooltip sa mga elementong natuon sa keyboard gaya ng mga link, mga kontrol sa form, o anumang arbitrary na elemento na may tabindex="0"katangian.

Ang mga tooltip sa mga hindi pinaganang elemento ay nangangailangan ng mga elemento ng wrapper

Upang magdagdag ng tooltip sa isang disabledo .disabledelemento, ilagay ang elemento sa loob ng isang <div>at ilapat ang tooltip doon sa <div>halip.

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-animation="".

Pangalan Uri Default Paglalarawan
animation boolean totoo Maglapat ng CSS fade transition sa tooltip
lalagyan string | mali mali

Idinaragdag ang tooltip sa isang partikular na elemento. Halimbawa: container: 'body'. Ang pagpipiliang ito ay partikular na kapaki-pakinabang dahil pinapayagan ka nitong iposisyon ang tooltip sa daloy ng dokumento malapit sa nagti-trigger na elemento - na pipigil sa tooltip na lumutang palayo sa nagti-trigger na elemento sa panahon ng pagbabago ng laki ng window.

pagkaantala numero | bagay 0

Pagkaantala sa pagpapakita at pagtatago ng tooltip (ms) - hindi nalalapat sa manu-manong uri ng pag-trigger

Kung may ibinigay na numero, ilalapat ang pagkaantala sa parehong itago/ipakita

Ang istraktura ng bagay ay:delay: { "show": 500, "hide": 100 }

html boolean mali Ipasok ang HTML sa tooltip. Kung mali, ang textpamamaraan ng jQuery ay gagamitin upang magpasok ng nilalaman sa DOM. Gumamit ng text kung nag-aalala ka tungkol sa mga pag-atake ng XSS.
pagkakalagay string | function 'itaas'

Paano iposisyon ang tooltip - itaas | ibaba | kaliwa | tama | sasakyan.
Kapag tinukoy ang "auto", dynamic nitong i-reorient ang tooltip. Halimbawa, kung ang placement ay "auto left", ang tooltip ay ipapakita sa kaliwa kapag posible, kung hindi, ito ay ipapakita sa kanan.

Kapag ginamit ang isang function upang matukoy ang placement, tinatawag itong tooltip DOM node bilang unang argumento nito at ang triggering element na DOM node bilang pangalawa nito. Nakatakda ang thiskonteksto sa instance ng tooltip.

tagapili string mali Kung may ibibigay na tagapili, ang mga bagay sa tooltip ay idelegado sa mga tinukoy na target. Sa pagsasagawa, ito ay ginagamit upang paganahin ang dynamic na HTML na nilalaman na magkaroon ng mga tooltip na idinagdag. Tingnan ito at isang halimbawang nagbibigay-kaalaman .
template string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML na gagamitin kapag gumagawa ng tooltip.

Ang mga tooltip titleay ilalagay sa .tooltip-inner.

.tooltip-arroway magiging arrow ng tooltip.

Ang pinakamalawak na elemento ng wrapper ay dapat magkaroon ng .tooltipklase.

pamagat string | function ''

Default na halaga ng pamagat kung titlewalang katangian.

Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang thisreference na nakatakda sa elemento kung saan ang tooltip ay naka-attach sa.

gatilyo string 'hover focus' Paano na-trigger ang tooltip - i-click ang | mag-hover | focus | manwal. Maaari kang magpasa ng maraming trigger; paghiwalayin sila ng isang puwang. manualhindi maaaring isama sa anumang iba pang trigger.
viewport string | bagay | function { selector: 'body', padding: 0 }

Pinapanatili ang tooltip sa loob ng mga hangganan ng elementong ito. Halimbawa: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Kung may ibinigay na function, ito ay tinatawag na may triggering element na DOM node bilang ang tanging argumento nito. Nakatakda ang thiskonteksto sa instance ng tooltip.

Mga katangian ng data para sa mga indibidwal na tooltip

Ang mga opsyon para sa mga indibidwal na tooltip ay maaaring tukuyin sa pamamagitan ng paggamit ng mga katangian ng data, gaya ng ipinaliwanag sa itaas.

Paraan

$().tooltip(options)

Nag-a-attach ng tooltip handler sa isang koleksyon ng elemento.

.tooltip('show')

Nagpapakita ng tooltip ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang tooltip (ibig sabihin, bago shown.bs.tooltipmangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip. Ang mga tooltip na may zero-length na mga pamagat ay hindi kailanman ipinapakita.

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

.tooltip('hide')

Itinatago ang tooltip ng isang elemento. Bumabalik sa tumatawag bago pa talaga naitago ang tooltip (ibig sabihin, bago hidden.bs.tooltipmangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip.

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

.tooltip('toggle')

I-toggle ang tooltip ng isang elemento. Bumabalik sa tumatawag bago ang tooltip ay aktwal na naipakita o naitago (ibig sabihin, bago mangyari ang shown.bs.tooltipo hidden.bs.tooltipkaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip.

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

.tooltip('destroy')

Itinatago at sinisira ang tooltip ng isang elemento. Ang mga tooltip na gumagamit ng delegasyon (na ginawa gamit ang selectoropsyon ) ay hindi maaaring isa-isang sirain sa mga elemento ng descendant na trigger.

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

Mga kaganapan

Uri ng kaganapan Paglalarawan
show.bs.tooltip Agad na gagana ang kaganapang ito kapag showtinawag ang paraan ng instance.
ipinapakita.bs.tooltip Ang kaganapang ito ay pinapagana kapag ang tooltip ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS).
hide.bs.tooltip Agad na pinapagana ang kaganapang ito kapag hidetinawag na ang paraan ng instance.
hidden.bs.tooltip Ang kaganapang ito ay pinapagana kapag ang tooltip ay tapos nang itago mula sa user (maghihintay para sa mga transition ng CSS na makumpleto).
ipinasok.bs.tooltip Ang kaganapang ito ay pinapagana pagkatapos ng show.bs.tooltipkaganapan kapag ang template ng tooltip ay naidagdag sa DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Magdagdag ng maliliit na overlay ng content, tulad ng nasa iPad, sa anumang elemento para sa pabahay ng pangalawang impormasyon.

Ang mga popover na ang parehong pamagat at nilalaman ay zero-length ay hindi kailanman ipinapakita.

Dependency ng plugin

Ang mga Popover ay nangangailangan ng tooltip plugin na maisama sa iyong bersyon ng Bootstrap.

Pag-andar ng pag-opt-in

Para sa mga dahilan ng pagganap, ang Tooltip at Popover data-apis ay opt-in, ibig sabihin , dapat mong simulan ang mga ito sa iyong sarili .

Ang isang paraan upang simulan ang lahat ng mga popover sa isang pahina ay ang piliin ang mga ito ayon sa kanilang data-togglekatangian:

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

Nangangailangan ng espesyal na setting ang mga popover sa mga pangkat ng button, pangkat ng input, at talahanayan

Kapag gumagamit ng mga popover sa mga elemento sa loob ng isang .btn-groupo isang .input-group, o sa mga elementong nauugnay sa talahanayan ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), kailangan mong tukuyin ang opsyon container: 'body'(nakadokumento sa ibaba) upang maiwasan ang mga hindi gustong epekto (tulad ng lumalawak na elemento at/ o nawawala ang mga bilugan nitong sulok kapag na-trigger ang popover).

Huwag subukang magpakita ng mga popover sa mga nakatagong elemento

Ang pag- invoke $(...).popover('show')kung kailan ang target na elemento ay display: none;magiging sanhi ng maling pagkakaposisyon ng popover.

Ang mga popover sa mga hindi pinaganang elemento ay nangangailangan ng mga elemento ng wrapper

Upang magdagdag ng popover sa isang disabledo .disabledelemento, ilagay ang elemento sa loob ng isang <div>at ilapat ang popover doon sa <div>halip.

Mga link na maramihang linya

Minsan gusto mong magdagdag ng popover sa isang hyperlink na bumabalot ng maraming linya. Ang default na gawi ng popover plugin ay igitna ito nang pahalang at patayo. Idagdag white-space: nowrap;sa iyong mga anchor upang maiwasan ito.

Mga halimbawa

Static popover

Apat na opsyon ang available: naka-align sa itaas, kanan, ibaba, at kaliwa.

Popover tuktok

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

Tama si Popover

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

Popover ibaba

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

Umalis si Popover

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

Live na demo

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

Apat na direksyon

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

I-dismiss sa susunod na pag-click

Gamitin ang focustrigger upang i-dismiss ang mga popover sa susunod na pag-click na gagawin ng user.

Kinakailangan ang partikular na markup para sa dismiss-on-next-click

Para sa wastong cross-browser at cross-platform na pag-uugali, dapat mong gamitin ang <a>tag, hindi ang <button>tag, at dapat mo ring isama ang mga role="button"at tabindexattribute.

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

Paggamit

Paganahin ang mga popover sa pamamagitan ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-animation="".

Pangalan Uri Default Paglalarawan
animation boolean totoo Maglapat ng CSS fade transition sa popover
lalagyan string | mali mali

Idinaragdag ang popover sa isang partikular na elemento. Halimbawa: container: 'body'. Ang pagpipiliang ito ay partikular na kapaki-pakinabang dahil pinapayagan ka nitong iposisyon ang popover sa daloy ng dokumento malapit sa nagti-trigger na elemento - na pipigil sa popover na lumutang palayo sa nag-trigger na elemento sa panahon ng pagbabago ng laki ng window.

nilalaman string | function ''

Default na halaga ng nilalaman kung data-contentwalang katangian.

Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang thisreference na nakatakda sa elemento kung saan ang popover ay naka-attach sa.

pagkaantala numero | bagay 0

Pagkaantala sa pagpapakita at pagtatago ng popover (ms) - hindi nalalapat sa manu-manong uri ng pag-trigger

Kung may ibinigay na numero, ilalapat ang pagkaantala sa parehong itago/ipakita

Ang istraktura ng bagay ay:delay: { "show": 500, "hide": 100 }

html boolean mali Ipasok ang HTML sa popover. Kung mali, ang textpamamaraan ng jQuery ay gagamitin upang magpasok ng nilalaman sa DOM. Gumamit ng text kung nag-aalala ka tungkol sa mga pag-atake ng XSS.
pagkakalagay string | function 'tama'

Paano iposisyon ang popover - tuktok | ibaba | kaliwa | tama | sasakyan.
Kapag tinukoy ang "auto", dynamic nitong i-reorient ang popover. Halimbawa, kung "auto left" ang placement, ipapakita ang popover sa kaliwa kapag posible, kung hindi, ipapakita ito sa kanan.

Kapag ginamit ang isang function upang matukoy ang placement, tinatawag itong popover DOM node bilang unang argumento nito at ang triggering element na DOM node bilang pangalawa nito. Ang thiskonteksto ay nakatakda sa halimbawa ng popover.

tagapili string mali Kung may ibibigay na selector, ang mga popover object ay idelegado sa mga tinukoy na target. Sa pagsasagawa, ito ay ginagamit upang paganahin ang dynamic na HTML na nilalaman na magkaroon ng mga popover na idinagdag. Tingnan ito at isang halimbawang nagbibigay-kaalaman .
template string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML na gagamitin kapag gumagawa ng popover.

Ang popover's titleay iturok sa .popover-title.

Ang popover's contentay iturok sa .popover-content.

.arroway magiging arrow ng popover.

Ang pinakamalawak na elemento ng wrapper ay dapat magkaroon ng .popoverklase.

pamagat string | function ''

Default na halaga ng pamagat kung titlewalang katangian.

Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang thisreference na nakatakda sa elemento kung saan ang popover ay naka-attach sa.

gatilyo string 'click' Paano na-trigger ang popover - i-click ang | mag-hover | focus | manwal. Maaari kang magpasa ng maraming trigger; paghiwalayin sila ng isang puwang. manualhindi maaaring isama sa anumang iba pang trigger.
viewport string | bagay | function { selector: 'body', padding: 0 }

Pinapanatili ang popover sa loob ng mga hangganan ng elementong ito. Halimbawa: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Kung may ibinigay na function, ito ay tinatawag na may triggering element na DOM node bilang ang tanging argumento nito. Ang thiskonteksto ay nakatakda sa halimbawa ng popover.

Mga katangian ng data para sa mga indibidwal na popover

Ang mga opsyon para sa mga indibidwal na popover ay maaaring tukuyin sa pamamagitan ng paggamit ng mga katangian ng data, gaya ng ipinaliwanag sa itaas.

Paraan

$().popover(options)

Sinisimulan ang mga popover para sa isang koleksyon ng elemento.

.popover('show')

Nagpapakita ng popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang popover (ibig sabihin, bago shown.bs.popovermangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover. Ang mga popover na ang parehong pamagat at nilalaman ay zero-length ay hindi kailanman ipinapakita.

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

.popover('hide')

Itinatago ang popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naitago ang popover (ibig sabihin, bago hidden.bs.popovermangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover.

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

.popover('toggle')

I-toggle ang popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita o naitago ang popover (ibig sabihin, bago mangyari ang shown.bs.popovero hidden.bs.popoverkaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover.

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

.popover('destroy')

Itinatago at sinisira ang popover ng isang elemento. Ang mga popover na gumagamit ng delegasyon (na ginawa gamit ang selectoropsyon ) ay hindi maaaring isa-isang sirain sa mga elemento ng descendant na trigger.

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

Mga kaganapan

Uri ng kaganapan Paglalarawan
show.bs.popover Agad na gagana ang kaganapang ito kapag showtinawag ang paraan ng instance.
ipinapakita.bs.popover Ang kaganapang ito ay pinapagana kapag ang popover ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS).
hide.bs.popover Agad na pinapagana ang kaganapang ito kapag hidetinawag na ang paraan ng instance.
hidden.bs.popover Ang kaganapang ito ay pinapagana kapag ang popover ay tapos nang itago mula sa user (maghihintay para sa mga transition ng CSS upang makumpleto).
ipinasok.bs.popover Ang kaganapang ito ay pinapagana pagkatapos ng show.bs.popoverkaganapan kapag ang template ng popover ay naidagdag sa DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Mga mensahe ng alerto alert.js

Mga halimbawang alerto

Magdagdag ng dismiss functionality sa lahat ng alertong mensahe gamit ang plugin na ito.

Kapag gumagamit ng isang .closebutton, ito dapat ang unang anak ng .alert-dismissibleat walang text na nilalaman ang maaaring mauna dito sa markup.

Paggamit

Idagdag lang data-dismiss="alert"sa iyong close button para awtomatikong magbigay ng alertong close functionality. Ang pagsasara ng alerto ay nag-aalis nito sa DOM.

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

Upang magamit ng iyong mga alerto ang animation kapag nagsasara, tiyaking mayroon na ang mga ito sa .fadeat mga .inklase na nakalapat na sa kanila.

Paraan

$().alert()

Gumagawa ng alerto sa pakikinig para sa mga kaganapan sa pag-click sa mga descendant na elemento na may data-dismiss="alert"katangian. (Hindi kinakailangan kapag ginagamit ang auto-initialization ng data-api.)

$().alert('close')

Nagsasara ng alerto sa pamamagitan ng pag-alis nito sa DOM. Kung ang .fadeat mga .inklase ay naroroon sa elemento, ang alerto ay maglalaho bago ito alisin.

Mga kaganapan

Ang plugin ng alerto ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa pag-hook sa pagpapaandar ng alerto.

Uri ng kaganapan Paglalarawan
malapit.bs.alerto Agad na gagana ang kaganapang ito kapag closetinawag ang paraan ng instance.
sarado.bs.alerto Ang kaganapang ito ay gagana kapag ang alerto ay sarado na (maghihintay para sa CSS transitions upang makumpleto).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Buttons button.js

Gumawa ng higit pa gamit ang mga pindutan. Ang control button ay nagsasaad o lumikha ng mga pangkat ng mga button para sa higit pang mga bahagi tulad ng mga toolbar.

Cross-browser compatibility

Ang Firefox ay nagpapatuloy sa mga estado ng kontrol ng form (kabawasan at pagsuri) sa mga pag-load ng pahina . Ang isang solusyon para dito ay ang paggamit autocomplete="off". Tingnan ang Mozilla bug #654072 .

Stateful

Idagdag data-loading-text="Loading..."upang gumamit ng estado ng paglo-load sa isang button.

Hindi na ginagamit ang feature na ito mula noong v3.3.5 at inalis na sa v4.

Gamitin ang alinmang estado na gusto mo!

Para sa kapakanan ng demonstrasyon na ito, ginagamit namin ang data-loading-textat $().button('loading'), ngunit hindi lang iyon ang estado na magagamit mo. Tingnan ang higit pa tungkol dito sa ibaba sa $().button(string)dokumentasyon .

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

Single toggle

Idagdag data-toggle="button"para i-activate ang toggling sa iisang button.

Kailangan ng mga pre-toggled na button .activeataria-pressed="true"

Para sa mga pre-toggled na button, dapat mong idagdag ang .activeklase at ang aria-pressed="true"attribute sa iyong buttonsarili.

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

Checkbox / Radyo

Idagdag data-toggle="buttons"sa isang .btn-groupnaglalaman ng checkbox o mga radio input upang paganahin ang toggling sa kani-kanilang mga istilo.

Kailangan ang mga napiling opsyon.active

Para sa mga paunang napiling opsyon, dapat mong idagdag ang .activeklase sa input ng iyong labelsarili.

Na-update lamang ang estado ng visual checked sa pag-click

Kung ang naka-check na estado ng isang checkbox button ay ina-update nang hindi nagpapagana ng isang clickkaganapan sa button (hal. sa pamamagitan <input type="reset">ng o sa pamamagitan ng pagtatakda ng checkedproperty ng input), kakailanganin mong i-toggle ang .activeklase sa input ng iyong labelsarili.

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

Paraan

$().button('toggle')

I-toggle ang estado ng push. Binibigyan ang pindutan ng hitsura na ito ay na-activate.

$().button('reset')

Nire-reset ang estado ng button - pinapalitan ang text sa orihinal na text. Ang pamamaraang ito ay asynchronous at bumabalik bago ang pag-reset ay aktwal na nakumpleto.

$().button(string)

Pinapalitan ang text sa anumang tinukoy na data na estado ng text.

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

I- collapse collapse.js

Flexible na plugin na gumagamit ng ilang klase para sa madaling pag-uugali ng toggle.

Dependency ng plugin

Kinakailangan ng Collapse na maisama ang plugin ng mga transition sa iyong bersyon ng Bootstrap.

Halimbawa

I-click ang mga button sa ibaba upang ipakita at itago ang isa pang elemento sa pamamagitan ng mga pagbabago sa klase:

  • .collapsenagtatago ng nilalaman
  • .collapsingay inilapat sa panahon ng mga transition
  • .collapse.innagpapakita ng nilalaman

Maaari kang gumamit ng isang link na may hrefkatangian, o isang pindutan na may data-targetkatangian. Sa parehong mga kaso, ang data-toggle="collapse"ay kinakailangan.

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>

Halimbawa ng akurdyon

Palawakin ang default na pag-collapse na pag-uugali upang lumikha ng isang akurdyon na may bahagi ng panel.

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 maglagay ng ibon dito pusit single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan maliban sa butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt malamang na hindi mo pa narinig ang mga ito accusamus labore sustainable VHS.
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 maglagay ng ibon dito pusit single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan maliban sa butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt malamang na hindi mo pa narinig ang mga ito accusamus labore sustainable VHS.
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 maglagay ng ibon dito pusit single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan maliban sa butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt malamang na hindi mo pa narinig ang mga ito accusamus labore sustainable VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Posible ring ipagpalit ang .panel-bodys sa .list-groups.

  • Bootply
  • Isang itmus ac facilin
  • Pangalawang eros

Gawing naa-access ang mga kontrol sa pagpapalawak/pag-collapse

Tiyaking idagdag aria-expandedsa control element. Ang attribute na ito ay tahasang tumutukoy sa kasalukuyang estado ng collapsible na elemento sa mga screen reader at katulad na mga teknolohiyang pantulong. Kung ang collapsible na elemento ay sarado bilang default, dapat itong may halaga na aria-expanded="false". Kung itinakda mo na ang collapsible na elemento ay bukas bilang default gamit ang inklase, itakdaaria-expanded="true" na lang sa control. Awtomatikong i-toggle ng plugin ang attribute na ito batay sa kung nabuksan o isinara o hindi ang collapsible na elemento.

Bukod pa rito, kung ang iyong control element ay nagta-target ng iisang collapsible na elemento – ibig sabihin, ang data-targetattribute ay tumuturo sa isang idselector – maaari kang magdagdag ng karagdagang aria-controlsattribute sa control element, na naglalaman ng idng collapsible na elemento. Ginagamit ng mga makabagong screen reader at katulad na mga teknolohiyang pantulong ang katangiang ito upang bigyan ang mga user ng karagdagang mga shortcut upang direktang mag-navigate sa mismong nako-collaps na elemento.

Paggamit

Gumagamit ang collapse plugin ng ilang klase upang mahawakan ang mabigat na pag-aangat:

  • .collapsenagtatago ng nilalaman
  • .collapse.innagpapakita ng nilalaman
  • .collapsingay idinaragdag kapag nagsimula ang paglipat, at inalis kapag natapos na ito

Ang mga klase na ito ay matatagpuan sa component-animations.less.

Sa pamamagitan ng mga katangian ng data

Idagdag lang data-toggle="collapse"at a data-targetsa elemento para awtomatikong magtalaga ng kontrol ng isang collapsible na elemento. Tumatanggap ang data-targetattribute ng isang CSS selector para ilapat ang pag-collapse. Tiyaking idagdag ang klase collapsesa collapsible na elemento. Kung gusto mo itong maging default na bukas, idagdag ang karagdagang klase in.

Upang magdagdag ng tulad-accordion na pamamahala ng pangkat sa isang collapsible na kontrol, idagdag ang attribute ng data data-parent="#selector". Sumangguni sa demo upang makita ito sa pagkilos.

Sa pamamagitan ng JavaScript

Paganahin nang manu-mano gamit ang:

$('.collapse').collapse()

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-parent="".

Pangalan uri default paglalarawan
magulang tagapili mali Kung may ibinigay na selector, isasara ang lahat ng collapsible na elemento sa ilalim ng tinukoy na parent kapag ipinakita ang collapsible na item na ito. (katulad ng tradisyonal na pag-uugali ng akurdyon - ito ay nakasalalay sa panelklase)
magpalipat-lipat boolean totoo I-toggle ang collapsible na elemento sa invocation

Paraan

.collapse(options)

Ina-activate ang iyong content bilang isang collapsible na elemento. Tumatanggap ng opsyonal na opsyon object.

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

.collapse('toggle')

I-toggle ang isang nako-collaps na elemento sa ipinapakita o nakatago. Bumabalik sa tumatawag bago aktwal na naipakita o naitago ang nati-collaps na elemento (ibig sabihin, bago mangyari ang shown.bs.collapseo hidden.bs.collapsekaganapan).

.collapse('show')

Nagpapakita ng nati-collapse na elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang collapsible na elemento (ibig sabihin, bago shown.bs.collapsemangyari ang kaganapan).

.collapse('hide')

Itinatago ang isang collapsible na elemento. Bumabalik sa tumatawag bago pa talaga naitago ang collapsible na elemento (ibig sabihin, bago hidden.bs.collapsemangyari ang kaganapan).

Mga kaganapan

Ang collapse class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa collapse functionality.

Uri ng kaganapan Paglalarawan
show.bs.collapse Agad na gagana ang kaganapang ito kapag showtinawag ang paraan ng instance.
ipinapakita.bs.collapse Ang kaganapang ito ay pinapagana kapag ang isang elemento ng pag-collapse ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS).
hide.bs.collapse Ang kaganapang ito ay agad na pinapagana kapag ang hidepamamaraan ay tinawag na.
hidden.bs.collapse Ang kaganapang ito ay pinapagana kapag ang isang elemento ng pag-collapse ay naitago mula sa user (maghihintay na makumpleto ang mga transition ng CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Isang bahagi ng slideshow para sa pagbibisikleta sa mga elemento, tulad ng isang carousel. Hindi sinusuportahan ang mga nested carousel.

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

Opsyonal na mga caption

Magdagdag ng mga caption sa iyong mga slide nang madali gamit ang .carousel-captionelemento sa loob ng anumang .item. Ilagay ang halos anumang opsyonal na HTML sa loob doon at awtomatiko itong ihahanay at ipo-format.

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

Maramihang carousels

Ang mga carousel ay nangangailangan ng paggamit ng isang idnasa pinakalabas na lalagyan (ang .carousel) para gumana nang maayos ang mga kontrol ng carousel. Kapag nagdaragdag ng maraming carousel, o kapag nagpapalit ng carousel id, tiyaking i-update ang mga nauugnay na kontrol.

Sa pamamagitan ng mga katangian ng data

Gumamit ng mga attribute ng data para madaling makontrol ang posisyon ng carousel. data-slidetumatanggap ng mga keyword prevo next, na nagbabago sa posisyon ng slide na nauugnay sa kasalukuyang posisyon nito. Bilang kahalili, gamitin data-slide-toupang ipasa ang isang raw slide index sa carousel data-slide-to="2", na naglilipat sa posisyon ng slide sa isang partikular na index na nagsisimula sa 0.

Ginagamit ang data-ride="carousel"attribute para markahan ang isang carousel bilang animating simula sa pag-load ng page. Hindi ito maaaring gamitin sa kumbinasyon ng (kalabisan at hindi kailangan) tahasang pagsisimula ng JavaScript ng parehong carousel.

Sa pamamagitan ng JavaScript

Manu-manong tumawag sa carousel gamit ang:

$('.carousel').carousel()

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-interval="".

Pangalan uri default paglalarawan
pagitan numero 5000 Ang tagal ng oras upang maantala sa pagitan ng awtomatikong pagbibisikleta ng isang item. Kung mali, hindi awtomatikong iikot ang carousel.
huminto string | wala "hover" Kung nakatakda sa "hover", ipo-pause ang pagbibisikleta ng carousel sa mouseenterat ipagpatuloy ang pagbibisikleta ng carousel sa mouseleave. Kung nakatakda sa null, hindi ito mapo-pause ng pag-hover sa carousel.
balutin boolean totoo Kung ang carousel ay dapat na tuluy-tuloy na umiikot o may matitigas na paghinto.
keyboard boolean totoo Kung dapat tumugon ang carousel sa mga kaganapan sa keyboard.

Sinisimulan ang carousel gamit ang isang opsyonal na opsyon objectat magsisimulang umikot sa mga item.

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

Umiikot sa mga carousel item mula kaliwa hanggang kanan.

Pinipigilan ang carousel mula sa pagbibisikleta sa mga item.

Iniikot ang carousel sa isang partikular na frame (batay sa 0, katulad ng isang array).

Ikot sa nakaraang item.

Ikot sa susunod na item.

Ang klase ng carousel ng Bootstrap ay naglalantad ng dalawang kaganapan para sa pag-hook sa pagpapagana ng carousel.

Ang parehong mga kaganapan ay may mga sumusunod na karagdagang katangian:

  • direction: Ang direksyon kung saan dumudulas ang carousel (alinman "left"o "right").
  • relatedTarget: Ang elemento ng DOM na ini-slide sa lugar bilang aktibong item.

Ang lahat ng mga kaganapan sa carousel ay pinaputok sa mismong carousel (ibig sabihin, sa <div class="carousel">).

Uri ng kaganapan Paglalarawan
slide.bs.carousel Agad na gagana ang kaganapang ito kapag slideginamit ang paraan ng instance.
slid.bs.carousel Ang kaganapang ito ay gagana kapag natapos na ng carousel ang paglipat ng slide nito.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Halimbawa

Ang affix plugin ay nag-toggle position: fixed;sa on at off, na ginagaya ang epekto na natagpuan sa position: sticky;. Ang subnavigation sa kanan ay isang live na demo ng affix plugin.


Paggamit

Gamitin ang affix plugin sa pamamagitan ng mga attribute ng data o mano-mano gamit ang sarili mong JavaScript. Sa parehong mga sitwasyon, dapat kang magbigay ng CSS para sa pagpoposisyon at lapad ng iyong nakadikit na nilalaman.

Tandaan: Huwag gamitin ang affix plugin sa isang elementong nasa isang medyo nakaposisyon na elemento, gaya ng hinila o itinulak na column, dahil sa isang Safari rendering bug .

Pagpoposisyon sa pamamagitan ng CSS

Ang affix plugin ay nagpapalipat-lipat sa pagitan ng tatlong klase, bawat isa ay kumakatawan sa isang partikular na estado: .affix, .affix-top, at .affix-bottom. Dapat mong ibigay ang mga istilo, maliban sa position: fixed;on .affix, para sa mga klaseng ito mismo (independiyente sa plugin na ito) upang mahawakan ang mga aktwal na posisyon.

Narito kung paano gumagana ang affix plugin:

  1. Upang magsimula, ang plugin ay nagdaragdag .affix-topupang ipahiwatig na ang elemento ay nasa pinakamataas na posisyon nito. Sa puntong ito walang pagpoposisyon ng CSS ang kinakailangan.
  2. Ang pag-scroll lampas sa elementong gusto mong idikit ay dapat mag-trigger ng aktwal na pag-affix. Ito ay kung saan .affixpumapalit .affix-topat nagtatakda position: fixed;(ibinigay ng Bootstrap's CSS).
  3. Kung tinukoy ang isang pang-ibaba na offset, ang pag-scroll lampas nito ay dapat palitan .affixng .affix-bottom. Dahil ang mga offset ay opsyonal, ang pagtatakda ng isa ay nangangailangan sa iyo na itakda ang naaangkop na CSS. Sa kasong ito, magdagdag position: absolute;kung kinakailangan. Ang plugin ay gumagamit ng data attribute o JavaScript na opsyon upang matukoy kung saan ipoposisyon ang elemento mula doon.

Sundin ang mga hakbang sa itaas upang itakda ang iyong CSS para sa alinman sa mga opsyon sa paggamit sa ibaba.

Sa pamamagitan ng mga katangian ng data

Para madaling magdagdag ng gawi ng affix sa anumang elemento, idagdag lang data-spy="affix"sa elementong gusto mong tiktikan. Gumamit ng mga offset upang tukuyin kung kailan i-toggle ang pag-pin ng isang elemento.

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

Sa pamamagitan ng JavaScript

Tawagan ang affix plugin sa pamamagitan ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-offset-top="200".

Pangalan uri default paglalarawan
offset numero | function | bagay 10 Mga pixel na i-offset mula sa screen kapag kinakalkula ang posisyon ng scroll. Kung ang isang numero ay ibinigay, ang offset ay ilalapat sa parehong itaas at ibabang direksyon. Upang magbigay ng natatangi, ibaba at itaas na offset, magbigay lang ng object offset: { top: 10 }o offset: { top: 10, bottom: 5 }. Gumamit ng isang function kapag kailangan mong dynamic na kalkulahin ang isang offset.
target tagapili | node | elemento ng jQuery ang windowbagay Tinutukoy ang target na elemento ng affix.

Paraan

.affix(options)

Ina-activate ang iyong nilalaman bilang nakadikit na nilalaman. Tumatanggap ng opsyonal na opsyon object.

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

.affix('checkPosition')

Muling kinakalkula ang estado ng affix batay sa mga sukat, posisyon, at posisyon ng pag-scroll ng mga nauugnay na elemento. Ang .affix, .affix-top, at .affix-bottommga klase ay idinaragdag o inalis mula sa nakadikit na nilalaman ayon sa bagong estado. Ang pamamaraang ito ay kailangang tawagan sa tuwing babaguhin ang mga sukat ng nakadikit na nilalaman o ang target na elemento, upang matiyak ang tamang pagpoposisyon ng nakadikit na nilalaman.

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

Mga kaganapan

Ang affix plugin ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa affix functionality.

Uri ng kaganapan Paglalarawan
affix.bs.affix Ang kaganapang ito ay gumagana kaagad bago ang elemento ay nakakabit.
nilagyan.bs.affix Ang kaganapang ito ay pinapagana pagkatapos na mailagay ang elemento.
affix-top.bs.affix Ang kaganapang ito ay gumagana kaagad bago ang elemento ay nakakabit sa itaas.
nilagyan-top.bs.affix Ang kaganapang ito ay pinapagana pagkatapos na ang elemento ay nakakabit sa itaas.
affix-bottom.bs.affix Ang kaganapang ito ay gumagana kaagad bago ang elemento ay nakakabit sa ibaba.
nakakabit-ibaba.bs.affix Ang kaganapang ito ay pinapagana pagkatapos na ang elemento ay nakakabit sa ibaba.