Overview

Indibidwal o gihugpong

Ang mga plugins mahimong iapil sa tagsa-tagsa (gamit ang mga indibidwal nga *.jsfile sa Bootstrap), o tanan sa usa ka higayon (gamit bootstrap.jso ang minified bootstrap.min.js).

Gamit ang gihugpong nga JavaScript

Ang duha bootstrap.jsug bootstrap.min.jsnaglangkob sa tanan nga mga plugins sa usa ka file. Iapil ang usa lamang.

Mga pagsalig sa plugin

Ang ubang mga plugins ug CSS component nagdepende sa ubang mga plugins. Kung gi-apil nimo ang mga plugin nga tagsa-tagsa, siguruha nga susihon kini nga mga dependency sa mga doc. Timan-i usab nga ang tanan nga mga plugins nagdepende sa jQuery (kini nagpasabut nga ang jQuery kinahanglan ilakip sa wala pa ang mga file sa plugin). Konsultaha ang amongbower.json aron makita kung unsang mga bersyon sa jQuery ang gisuportahan.

Mga hiyas sa datos

Mahimo nimong gamiton ang tanan nga mga plugin sa Bootstrap nga puro pinaagi sa markup API nga wala magsulat usa ka linya sa JavaScript. Kini ang una nga klase nga API sa Bootstrap ug kinahanglan nga imong una nga konsiderahon kung mogamit usa ka plugin.

Ingon niana, sa pipila ka mga sitwasyon mahimo’g gusto nga i-off kini nga pagpaandar. Busa, naghatag usab kami og abilidad sa pag-disable sa data attribute API pinaagi sa pag-unbinding sa tanang panghitabo sa dokumento nga namespaced sa data-api. Kini tan-awon sama niini:

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

Sa laing paagi, aron ma-target ang usa ka piho nga plugin, ilakip lang ang ngalan sa plugin ingon usa ka namespace kauban ang data-api namespace sama niini:

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

Usa ra ka plugin matag elemento pinaagi sa mga hiyas sa datos

Ayaw paggamit ug data attributes gikan sa daghang plugins sa samang elemento. Pananglitan, ang usa ka buton dili mahimong adunay tooltip ug i-toggle ang usa ka modal. Aron mahimo kini, gamita ang usa ka elemento sa pagputos.

Programmatic API

Nagtuo usab kami nga kinahanglan nimo nga magamit ang tanan nga mga plugin sa Bootstrap nga puro pinaagi sa JavaScript API. Ang tanang publikong API kay single, chainable nga mga pamaagi, ug ibalik ang koleksyon nga giaksyonan.

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

Ang tanan nga mga pamaagi kinahanglan nga modawat sa usa ka opsyonal nga butang nga kapilian, usa ka hilo nga nagpunting sa usa ka partikular nga pamaagi, o wala (nga nagpasiugda sa usa ka plugin nga adunay default nga pamatasan):

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

Ang matag plugin nagbutyag usab sa iyang hilaw nga tigtukod sa usa ka Constructorkabtangan: $.fn.popover.Constructor. Kung gusto nimo makakuha usa ka partikular nga pananglitan sa plugin, kuhaa kini direkta gikan sa usa ka elemento: $('[rel="popover"]').data('popover').

Default nga mga setting

Mahimo nimong usbon ang default setting para sa usa ka plugin pinaagi sa pag-usab sa Constructor.DEFAULTSbutang sa plugin:

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

Walay panagbangi

Usahay gikinahanglan ang paggamit sa Bootstrap plugins sa ubang mga UI frameworks. Niini nga mga kahimtang, ang panagbangga sa namespace usahay mahitabo. Kung mahitabo kini, mahimo nimong tawagan .noConflictang plugin nga gusto nimo ibalik ang kantidad.

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

Mga panghitabo

Naghatag ang Bootstrap og kostumbre nga mga panghitabo alang sa kadaghanan sa mga talagsaon nga aksyon sa mga plugin. Kasagaran, kini moabut sa usa ka infinitive ug past participle nga porma - diin ang infinitive (ex. show) ma-trigger sa pagsugod sa usa ka panghitabo, ug ang past participle nga porma niini (ex. shown) ma-trigger sa pagkahuman sa usa ka aksyon.

Ingon sa 3.0.0, ang tanan nga mga panghitabo sa Bootstrap gi-namespaced.

Ang tanan nga infinitive nga mga panghitabo naghatag preventDefaultgamit. Naghatag kini og abilidad sa pagpahunong sa pagpatuman sa usa ka aksyon sa dili pa kini magsugod.

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

Numero sa bersyon

Ang bersyon sa matag usa sa Bootstrap's jQuery plugins mahimong ma-access pinaagi sa VERSIONkabtangan sa plugin's constructor. Pananglitan, alang sa tooltip plugin:

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

Walay espesyal nga mga fallbacks kung ang JavaScript gi-disable

Ang mga plugins sa Bootstrap dili mabalik ilabi na nga nindot kung ang JavaScript gi-disable. Kung nagpakabana ka bahin sa kasinatian sa gumagamit sa kini nga kaso, gamita <noscript>aron ipasabut ang sitwasyon (ug kung giunsa pag-usab ang JavaScript) sa imong mga tiggamit, ug / o pagdugang sa imong kaugalingon nga naandan nga mga fallback.

Mga librarya sa ikatulo nga partido

Ang Bootstrap dili opisyal nga nagsuporta sa mga librarya sa JavaScript sa ikatulo nga partido sama sa Prototype o jQuery UI. Bisan pa .noConflictug namespaced nga mga panghitabo, mahimong adunay mga problema sa pagpahiangay nga kinahanglan nimo nga ayohon sa imong kaugalingon.

Transitions transition.js

Mahitungod sa mga transisyon

Alang sa yano nga mga epekto sa transisyon, ilakip transition.jskausa kauban ang ubang mga file sa JS. Kung gigamit nimo ang gi-compile (o gi-minified) bootstrap.js, dili na kinahanglan nga ilakip kini - naa na kini.

Unsay sulod

Ang Transition.js usa ka batakang katabang alang sa transitionEndmga panghitabo ingon man usa ka CSS transition emulator. Gigamit kini sa ubang mga plugins sa pagsusi sa CSS transition support ug sa pagdakop sa nagbitay nga mga transisyon.

Pag-disable sa mga transisyon

Ang mga transisyon mahimong ma-disable sa tibuok kalibutan gamit ang mosunod nga JavaScript snippet, nga kinahanglang mahitabo human ma-load ang transition.js( bootstrap.jso bootstrap.min.js, ingon nga mahitabo):

$.support.transition = false

Modal modal.js

Ang mga modala gipa-streamline, apan flexible, dialog prompt nga adunay minimum nga gikinahanglan nga gamit ug mga smart default.

Dili suportado ang daghang bukas nga modals

Siguruha nga dili magbukas sa usa ka modal samtang ang lain makita pa. Ang pagpakita og labaw sa usa ka modal sa usa ka higayon nagkinahanglan og custom code.

Modal nga pagbutang sa markup

Sulayi kanunay nga ibutang ang HTML code sa modal sa usa ka taas nga lebel nga posisyon sa imong dokumento aron malikayan ang ubang mga sangkap nga makaapekto sa hitsura ug/o gamit sa modal.

Mga pasidaan sa mobile device

Adunay pipila ka mga pasidaan bahin sa paggamit sa mga modal sa mga mobile device. Tan-awa ang among browser support docs para sa mga detalye.

Tungod sa kung giunsa paghubit sa HTML5 ang mga semantiko niini, ang autofocusHTML attribute walay epekto sa Bootstrap modals. Aron makab-ot ang parehas nga epekto, gamita ang pipila ka naandan nga JavaScript:

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

Mga pananglitan

Static nga pananglitan

Usa ka gihubad nga modal nga adunay header, lawas, ug hugpong sa mga aksyon 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 nga demo

I-toggle ang usa ka modal pinaagi sa JavaScript pinaagi sa pag-klik sa buton sa ubos. Kini mag-slide paubos ug mawala gikan sa ibabaw sa panid.

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

Himua nga ma-access ang mga modal

Siguruha nga idugang role="dialog"ug aria-labelledby="...", nga maghisgot sa modal nga titulo, sa .modal, ug role="document"sa .modal-dialogkaugalingon.

Dugang pa, mahimo kang maghatag ug deskripsyon sa imong modal dialog sa aria-describedbyon .modal.

Pag-embed sa mga video sa YouTube

Ang pag-embed sa mga video sa YouTube sa modals nanginahanglan dugang nga JavaScript nga wala sa Bootstrap aron awtomatiko nga ihunong ang playback ug daghan pa. Tan-awa kining makatabang nga post sa Stack Overflow alang sa dugang nga impormasyon.

Opsyonal nga mga gidak-on

Ang mga modala adunay duha ka opsyonal nga gidak-on, nga magamit pinaagi sa mga klase sa modifier nga ibutang sa usa ka .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>

Kuhaa ang animation

Alang sa mga modals nga yano nga makita imbes nga mawala aron makita, kuhaa ang .fadeklase gikan sa imong modal markup.

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

Paggamit sa sistema sa grid

Aron mapahimuslan ang Bootstrap grid system sulod sa usa ka modal, salag lang .rowsulod sa .modal-bodyug unya gamita ang normal nga grid system nga mga klase.

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

Adunay usa ka hugpong sa mga buton nga ang tanan nag-aghat sa parehas nga modal, nga adunay gamay nga lainlaing mga sulud? Paggamit event.relatedTargetug HTML nga mga data-*hiyas (posible pinaagi sa jQuery ) aron lainlain ang mga sulod sa modal depende kung unsang buton ang gi-klik. Tan-awa ang Modal Events docs para sa mga detalye sa relatedTarget,

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

Ang modal plugin nag-toggle sa imong tinago nga sulud kung gikinahanglan, pinaagi sa mga hiyas sa datos o JavaScript. Nagdugang usab .modal-openkini sa <body>pag-override sa default nga pamatasan sa pag-scroll ug nagmugna usa ka .modal-backdroparon mahatagan usa ka lugar sa pag-klik alang sa pagtangtang sa gipakita nga modals kung nag-klik sa gawas sa modal.

Pinaagi sa data attributes

Pag-aktibo sa usa ka modal nga wala nagsulat sa JavaScript. Ibutang data-toggle="modal"sa usa ka elemento sa controller, sama sa usa ka buton, uban sa usa ka data-target="#foo"o href="#foo"sa target sa usa ka piho nga modal sa toggle.

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

Pinaagi sa JavaScript

Pagtawag og modal nga adunay id myModalnga adunay usa ka linya sa JavaScript:

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-backdrop="".

Ngalan matang default paghulagway
backdrop boolean o ang string'static' tinuod Naglakip sa usa ka elemento sa modal-backdrop. Sa laing paagi, ipiho staticang usa ka backdrop nga wala magsira sa modal sa pag-klik.
keyboard boolean tinuod Pagsira sa modal kung ang escape key gipugos
ipakita boolean tinuod Nagpakita sa modal kung gisugdan.
hilit nga dalan bakak

Kini nga opsyon wala na gamita sukad sa v3.3.0 ug gitangtang sa v4. Among girekomenda nga gamiton ang templating sa kilid sa kliyente o usa ka balangkas nga nagbugkos sa datos, o pagtawag sa jQuery.load sa imong kaugalingon.

Kung gihatag ang usa ka hilit nga URL, ang sulud ikarga usa ka higayon pinaagi sa pamaagi sa jQuery loadug i-inject sa .modal-contentdiv. Kung gigamit nimo ang data-api, mahimo nimong gamiton ang kapilian hrefaron itakda ang layo nga gigikanan. Usa ka pananglitan niini gipakita sa ubos:

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

Pamaagi

Gi-aktibo ang imong sulud ingon usa ka modal. Modawat ug opsyonal nga mga kapilian object.

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

Manwal nga mag-toggle sa usa ka modal. Mibalik sa nagtawag sa wala pa ang modala sa tinuud gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.modalo hidden.bs.modalpanghitabo).

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

Manwal nga nagbukas sa usa ka modal. Mibalik sa nagtawag sa wala pa ipakita ang modal (ie sa wala pa shown.bs.modalmahitabo ang panghitabo).

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

Manwal nga nagtago sa usa ka modal. Mibalik sa nagtawag sa wala pa ang modala sa tinuud gitago (ie sa wala pa hidden.bs.modalmahitabo ang panghitabo).

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

I-adjust pag-usab ang pagpoposisyon sa modal aron makontra ang usa ka scrollbar kung adunay makita, nga maghimo sa modal nga molukso sa wala.

Gikinahanglan lamang kung ang gitas-on sa modal mausab samtang kini bukas.

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

Mga panghitabo

Ang modal nga klase sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa modal functionality.

Ang tanan nga modal nga mga panghitabo gipabuto sa modal mismo (ie sa <div class="modal">).

Uri sa Hitabo Deskripsyon
show.bs.modal Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag. Kung tungod sa usa ka pag-klik, ang na-klik nga elemento magamit ingon nga relatedTargetkabtangan sa panghitabo.
gipakita.bs.modal Kini nga panghitabo gipabuto kung ang modal nahimo nga makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). Kung tungod sa usa ka pag-klik, ang na-klik nga elemento magamit ingon nga relatedTargetkabtangan sa panghitabo.
hide.bs.modal Kini nga panghitabo gipabuto dayon kung ang hidepamaagi sa pananglitan gitawag na.
hidden.bs.modal Kini nga panghitabo gipabuto kung ang modal nahuman na nga gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
loaded.bs.modal Kini nga panghitabo gipabuto kung ang modal nagkarga sa sulud gamit ang remotekapilian.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Mga dropdown dropdown.js

Idugang ang mga dropdown menu sa halos bisan unsang butang gamit kining yano nga plugin, lakip ang navbar, mga tab, ug mga pildoras.

Sulod sa usa ka navbar

Sulod sa mga pildoras

Pinaagi sa data attributes o JavaScript, ang dropdown plugin mo-toggle sa tinago nga content (dropdown menus) pinaagi sa pag-toggle sa .openklase sa parent list item.

Sa mga mobile device, ang pag-abli sa usa ka dropdown nagdugang usa .dropdown-backdropka lugar sa pag-tap para sa pagsira sa mga dropdown menu kung nag-tap sa gawas sa menu, usa ka kinahanglanon alang sa tukma nga suporta sa iOS. Kini nagpasabot nga ang pagbalhin gikan sa usa ka bukas nga dropdown menu ngadto sa lain nga dropdown menu nagkinahanglan og dugang nga pag-tap sa mobile.

Pahinumdom: Ang data-toggle="dropdown"hiyas gisaligan alang sa pagsira sa mga dropdown menu sa lebel sa aplikasyon, mao nga maayong ideya nga gamiton kini kanunay.

Pinaagi sa data attributes

Idugang data-toggle="dropdown"sa usa ka link o buton aron i-toggle ang 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>

Aron magpabiling buo ang mga URL gamit ang mga buton sa link, gamita ang data-targetattribute imbes nga 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>

Pinaagi sa JavaScript

Tawga ang mga dropdown pinaagi sa JavaScript:

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

data-toggle="dropdown"gikinahanglan pa

Dili igsapayan kung imong tawagan ang imong dropdown pinaagi sa JavaScript o sa baylo nga gamiton ang data-api, data-toggle="dropdown"kinahanglan kanunay nga naa sa elemento sa pag-trigger sa dropdown.

Wala

I-toggle ang dropdown menu sa gihatag nga navbar o tabbed navigation.

Ang tanan nga dropdown nga mga panghitabo gipabuto sa .dropdown-menuelemento sa ginikanan.

Ang tanan nga dropdown nga mga panghitabo adunay usa ka relatedTargetkabtangan, kansang kantidad mao ang toggling anchor nga elemento.

Uri sa Hitabo Deskripsyon
show.bs.dropdown Kini nga panghitabo modilaab dayon kung ang paagi sa pagpakita nga pananglitan gitawag.
gipakita.bs.dropdown Kini nga panghitabo gipabuto kung ang dropdown nahimo nga makita sa tiggamit (maghulat alang sa mga transisyon sa CSS, aron makompleto).
hide.bs.dropdown Kini nga panghitabo gipabuto dayon kung ang paagi sa pagtago sa pananglitan gitawag na.
hidden.bs.dropdown Kini nga panghitabo gipabuto kung ang dropdown nahuman na nga gitago gikan sa user (maghulat sa mga transisyon sa CSS, aron makompleto).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Pananglitan sa navbar

Ang ScrollSpy plugin kay para sa awtomatikong pag-update sa mga target sa nav base sa scroll position. I-scroll ang dapit ubos sa navbar ug tan-awa ang aktibong kausaban sa klase. Ang dropdown sub nga mga butang i-highlight usab.

@tambok

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi sa wala pa sila nabaligya qui. Tumblr farm-to-table nga mga katungod sa bisikleta bisan unsa. Anim nga keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui basin wala ka pa makadungog niini ug cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugit velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat upat ka loko nisi, ea helvetica nulla carles. Gitattoo nga cosby sweater food truck, quis non freegan vinyl ni mcsweeney. Lo-fi wes anderson +1 sartorial. Si Carles nga dili aesthetic nga ehersisyo quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

sa usa ka

Espesye sa tanom nga bulak ang Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. Taas nga kinabuhi id vinyl, echo park consequat quis aliquip banh mi pitchfork. Ang Vero VHS kay adipisicing. Consectetur uban DIY mini messenger bag. Cred ex in, malungtarong delectus consectetur fanny pack iphone.

duha

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 bisan unsa nga delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats lagmit wala nimo nadungog bahin nila consequat hoodie gluten-free lo-fi fap aliquip. Laboure elit placeat sa wala pa sila mabaligya, 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 mini commodo ullamco thundercats.

Paggamit

Nagkinahanglan Bootstrap nav

Ang Scrollspy sa pagkakaron nagkinahanglan sa paggamit sa usa ka Bootstrap nav component alang sa hustong pag-highlight sa mga aktibong link.

Resolvable ID target gikinahanglan

Ang mga link sa Navbar kinahanglan adunay masulbad nga mga target sa id. Pananglitan, <a href="#home">home</a>kinahanglan nga katumbas sa usa ka butang sa DOM sama sa <div id="home"></div>.

Ang dili target :visiblenga mga elemento gibalewala

Ang mga target nga elemento nga dili :visiblesumala sa jQuery ibaliwala ug ang ilang mga katugbang nga nav nga mga butang dili gyud ma-highlight.

Nagkinahanglan og relatibong posisyon

Bisan unsa pa ang pamaagi sa pagpatuman, ang scrollspy nanginahanglan sa paggamit sa position: relative;elemento nga imong gipaniid. Sa kadaghanan nga mga kaso kini ang <body>. Kung mag-scrollspy sa mga elemento gawas sa <body>, siguroha nga adunay usa ka heightset ug overflow-y: scroll;magamit.

Pinaagi sa data attributes

Aron dali nga makadugang sa scrollspy nga kinaiya sa imong topbar navigation, idugang data-spy="scroll"sa elemento nga gusto nimong espiya (kasagaran kini mao ang <body>). Dayon idugang ang data-targetattribute nga adunay ID o klase sa ginikanan nga elemento sa bisan unsang .navbahin sa 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>

Pinaagi sa JavaScript

Human sa pagdugang position: relative;sa imong CSS, tawga ang scrollspy pinaagi sa JavaScript:

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

Pamaagi

.scrollspy('refresh')

Kung gigamit ang scrollspy kauban ang pagdugang o pagtangtang sa mga elemento gikan sa DOM, kinahanglan nimo nga tawagan ang pamaagi sa pag-refresh sama niini:

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-offset="".

Ngalan matang default paghulagway
offset numero 10 Ang mga pixel aron ma-offset gikan sa taas kung kalkulado ang posisyon sa scroll.

Mga panghitabo

Uri sa Hitabo Deskripsyon
activate.bs.scrollspy Kini nga panghitabo modilaab sa matag higayon nga ang usa ka bag-ong butang ma-activate sa scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Mga togglable nga tab tab.js

Mga pananglitan sa tab

Idugang ang dali, dinamikong pag-andar sa tab sa pagbalhin pinaagi sa mga pane sa lokal nga sulud, bisan pinaagi sa mga dropdown menu. Ang mga nested tab dili suportado.

Hilaw nga denim tingali wala ka nakadungog bahin kanila nga maong nga shorts nga Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex nukos. Ibutang ang 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.

Gipalapad ang tabbed navigation

Kini nga plugin nagpalapad sa tabbed navigation component aron makadugang sa tabbable nga mga lugar.

Paggamit

I-enable ang mga tab nga tab pinaagi sa JavaScript (matag tab kinahanglan nga i-activate sa tagsa-tagsa):

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

Mahimo nimong ma-aktibo ang indibidwal nga mga tab sa daghang mga paagi:

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

Mahimo nimong i-aktibo ang usa ka tab o pildoras nga nabigasyon nga wala’y pagsulat sa bisan unsang JavaScript pinaagi lamang sa pagpiho data-toggle="tab"o data-toggle="pill"sa usa ka elemento. Ang pagdugang sa navug nav-tabsmga klase sa tab ulmagamit ang Bootstrap tab styling , samtang ang pagdugang sa navug nav-pillsmga klase magamit ang 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>

Pagkawala nga epekto

Aron mawala ang mga tab, idugang .fadeang matag usa .tab-pane. Ang una nga tab pane kinahanglan usab .innga maghimo sa una nga sulud nga makita.

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

Pamaagi

$().tab

Nag-aktibo sa usa ka elemento sa tab ug sulud sa sulud. Ang tab kinahanglan adunay usa data-targeto usa ka hreftarget sa usa ka sudlanan nga node sa DOM. Sa mga pananglitan sa ibabaw, ang mga tab mao ang <a>s nga adunay mga data-toggle="tab"hiyas.

.tab('show')

Gipili ang gihatag nga tab ug gipakita ang kauban nga sulud niini. Ang bisan unsang lain nga tab nga gipili kaniadto mahimong dili mapili ug ang kauban nga sulud niini gitago. Mibalik sa nagtawag sa wala pa ipakita ang tab pane (ie sa wala pa shown.bs.tabmahitabo ang panghitabo).

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

Mga panghitabo

Kung nagpakita ug bag-ong tab, ang mga panghitabo mobuto sa mosunod nga han-ay:

  1. hide.bs.tab(sa kasamtangan nga aktibo nga tab)
  2. show.bs.tab(sa tab nga ipakita)
  3. hidden.bs.tab(sa miaging aktibo nga tab, parehas sa alang sa hide.bs.tabpanghitabo)
  4. shown.bs.tab(sa bag-ong-aktibo nga bag-o lang gipakita nga tab, parehas sa alang sa show.bs.tabpanghitabo)

Kung walay tab nga aktibo na, ang hide.bs.tabug ang hidden.bs.tabmga panghitabo dili ipabuto.

Uri sa Hitabo Deskripsyon
show.bs.tab Kini nga panghitabo nagdilaab sa tab show, apan sa wala pa ipakita ang bag-ong tab. Gamita event.targetug event.relatedTargeti-target ang aktibo nga tab ug ang miaging aktibo nga tab (kung naa) matag usa.
gipakita.bs.tab Kini nga panghitabo nagdilaab sa tab show pagkahuman gipakita ang usa ka tab. Gamita event.targetug event.relatedTargeti-target ang aktibo nga tab ug ang miaging aktibo nga tab (kung naa) matag usa.
hide.bs.tab Kini nga panghitabo mobuto kung ang usa ka bag-ong tab ipakita (ug sa ingon ang miaging aktibo nga tab kinahanglan itago). Gamita event.targetug event.relatedTargeti-target ang kasamtangan nga aktibo nga tab ug ang bag-o nga dili madugay nga mahimong aktibo nga tab, matag usa.
tago.bs.tab Kini nga panghitabo nagdilaab human ang usa ka bag-ong tab gipakita (ug sa ingon ang miaging aktibo nga tab gitago). Gamita event.targetug event.relatedTargeti-target ang miaging aktibo nga tab ug ang bag-ong aktibo nga tab, matag usa.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Nadasig sa maayo kaayo nga jQuery.tipsy plugin nga gisulat ni Jason Frame; Ang mga tooltip usa ka updated nga bersyon, nga wala magsalig sa mga hulagway, naggamit sa CSS3 para sa mga animation, ug data-attributes alang sa lokal nga pagtipig sa titulo.

Ang mga tooltip nga adunay zero-length nga mga titulo wala gayud ipakita.

Mga pananglitan

Pag-hover sa mga link sa ubos aron makita ang mga tooltip:

Tight pants next level keffiyeh basin wala pa nimo nadunggan. Photo booth bungot hilaw nga denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, ang fixie ni mcsweeney nga malungtaron nga quinoa 8-bit american nga sapot adunay terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, upat ka loko mcsweeney's cleanse vegan chambray. Usa ka tinuod nga ironic artisan bisan unsa nga keytar , scenester farm-to-table banksy Austin twitter nagdumala sa freegan cred raw denim single-origin coffee viral.

Static nga tooltip

Upat ka mga kapilian ang magamit: taas, tuo, ubos, ug wala nga linya.

Upat ka 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-opt-in nga gamit

Alang sa mga rason sa performance, ang Tooltip ug Popover data-apis kay opt-in, nagpasabot nga ikaw mismo ang mag-initialize niini .

Usa ka paagi sa pagsugod sa tanan nga mga tooltip sa usa ka panid mao ang pagpili niini pinaagi sa ilang mga data-togglehiyas:

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

Paggamit

Ang tooltip plugin nagmugna og sulod ug markup sa panginahanglan, ug sa default nagbutang sa mga tooltip human sa ilang trigger nga elemento.

I-trigger ang tooltip pinaagi sa JavaScript:

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

Markup

Ang gikinahanglan nga markup para sa tooltip kay usa lang ka dataattribute ug titlesa HTML nga elemento gusto nimo nga naay tooltip. Ang nahimo nga markup sa usa ka tooltip kay yano ra, bisan kung kini nanginahanglan usa ka posisyon (sa default, gitakda topsa 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>

Daghang linya nga mga link

Usahay gusto nimong idugang ang tooltip sa usa ka hyperlink nga nagputos sa daghang linya. Ang default nga kinaiya sa tooltip plugin mao ang pagsentro niini nga pinahigda ug patindog. Idugang white-space: nowrap;sa imong mga angkla aron malikayan kini.

Ang mga tooltip sa mga grupo sa butones, mga grupo sa input, ug mga lamesa nanginahanglan espesyal nga setting

Kung mogamit mga tooltip sa mga elemento sa sulod sa usa .btn-groupo usa .input-group, o sa mga elemento nga may kalabotan sa lamesa ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), kinahanglan nimo nga ipiho ang kapilian container: 'body'(gidokumento sa ubos) aron malikayan ang dili gusto nga mga epekto (sama sa elemento nga nagkadako ug/ o mawad-an sa mga lingin nga suok niini kung ang tooltip ma-trigger).

Ayaw pagsulay sa pagpakita sa mga tooltip sa mga tinago nga elemento

Ang pagsangpit $(...).tooltip('show')kung ang target nga elemento mao display: none;ang hinungdan nga ang tooltip mahimong dili husto nga posisyon.

Ma-access nga mga tooltip para sa keyboard ug mga tiggamit sa teknolohiya nga makatabang

Alang sa mga tiggamit nga nag-navigate gamit ang keyboard, ug labi na ang mga tiggamit sa mga teknolohiya nga makatabang, kinahanglan nimo nga idugang ang mga tooltip sa mga elemento nga ma-focus sa keyboard sama sa mga link, kontrol sa porma, o bisan unsang arbitraryong elemento nga adunay usa ka tabindex="0"kinaiya.

Ang mga tooltip sa mga disabled nga elemento nanginahanglan mga elemento sa wrapper

Aron makadugang ug tooltip sa usa disabledo .disabledelemento, ibutang ang elemento sa sulod sa usa <div>ug gamita na <div>hinuon ang tooltip.

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-animation="".

Ngalan Matang Default Deskripsyon
animation boolean tinuod Ibutang ang CSS fade transition sa tooltip
sudlanan hilo | bakak bakak

Gidugang ang tooltip sa usa ka piho nga elemento. Pananglitan: container: 'body'. Kini nga kapilian labi ka mapuslanon tungod kay kini nagtugot kanimo sa pagpahimutang sa tooltip sa dagan sa dokumento duol sa nag-trigger nga elemento - nga makapugong sa tooltip gikan sa paglutaw gikan sa nag-trigger nga elemento sa panahon sa pagbag-o sa bintana.

paglangan numero | butang 0

Paglangan sa pagpakita ug pagtago sa tooltip (ms) - dili magamit sa manual trigger type

Kung adunay gihatag nga numero, ang paglangan magamit sa parehas nga pagtago/pagpakita

Ang istruktura sa butang mao ang:delay: { "show": 500, "hide": 100 }

html boolean bakak Isulod ang HTML sa tooltip. Kung bakak, ang pamaagi sa jQuery textgamiton sa pagsal-ot sa sulud sa DOM. Gamit ug text kung nabalaka ka bahin sa mga pag-atake sa XSS.
pagbutang hilo | function 'ibabaw'

Unsaon pagpahimutang sa tooltip - ibabaw | ubos | wala | husto | awto.
Kung ang "auto" gitakda, kini dinamikong i-reorient ang tooltip. Pananglitan, kung ang pagbutang "awtomatikong wala", ang tooltip magpakita sa wala kung mahimo, kung dili kini ipakita sa tuo.

Kung ang usa ka function gigamit aron mahibal-an ang pagbutang, kini gitawag nga adunay tooltip nga DOM node ingon ang una nga argumento ug ang hinungdan nga elemento nga DOM node ingon ikaduha. Ang thiskonteksto gitakda sa tooltip nga pananglitan.

tigpili hilo bakak Kung gihatag ang usa ka tigpili, ang mga butang sa tooltip itugyan sa gitakda nga mga target. Sa praktis, kini gigamit aron makahimo sa dinamikong HTML nga sulod nga adunay mga tooltip nga idugang. Tan-awa kini ug usa ka pananglitan nga impormatibo .
template hilo '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML nga gamiton sa paghimo sa tooltip.

Ang tooltip's titlei-inject sa .tooltip-inner.

.tooltip-arrowmahimong pana sa tooltip.

Ang labing gawas nga elemento sa wrapper kinahanglan adunay .tooltipklase.

titulo hilo | function ''

Default nga bili sa titulo kung wala ang titleattribute.

Kung gihatag ang usa ka function, tawgon kini kauban ang thisreference set sa elemento nga gilakip sa tooltip.

trigger hilo 'hover focus' Giunsa pag-trigger ang tooltip - pag-klik | hover | focus | manwal. Mahimo nimong ipasa ang daghang mga trigger; ibulag sila sa usa ka luna. manualdili mahimong ikombinar sa bisan unsa nga lain nga trigger.
viewport hilo | butang | function { selector: 'lawas', padding: 0 }

Gitipigan ang tooltip sulod sa mga utlanan niini nga elemento. Pananglitan: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Kung ang usa ka function gihatag, kini gitawag nga adunay hinungdan nga elemento nga DOM node ingon nga bugtong argumento niini. Ang thiskonteksto gitakda sa tooltip nga pananglitan.

Mga hiyas sa datos alang sa indibidwal nga mga tooltip

Ang mga kapilian alang sa indibidwal nga mga tooltip mahimong ipiho pinaagi sa paggamit sa mga hiyas sa datos, ingon sa gipatin-aw sa ibabaw.

Pamaagi

$().tooltip(options)

Naglakip sa tigdumala sa tooltip sa usa ka koleksyon sa elemento.

.tooltip('show')

Nagpadayag sa tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ipakita ang tooltip (ie sa wala pa shown.bs.tooltipmahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip. Ang mga tooltip nga adunay zero-length nga mga titulo wala gayud ipakita.

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

.tooltip('hide')

Nagtago sa tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang tooltip gitago (ie sa wala pa hidden.bs.tooltipmahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip.

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

.tooltip('toggle')

I-toggle ang tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang tooltip gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.tooltipo hidden.bs.tooltippanghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip.

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

.tooltip('destroy')

Nagtago ug nagguba sa tooltip sa usa ka elemento. Ang mga tooltip nga naggamit sa delegasyon (nga gimugna gamit ang selectoropsyon ) dili mahimong tagsa-tagsa nga gub-on sa descendant trigger elements.

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

Mga panghitabo

Uri sa Hitabo Deskripsyon
show.bs.tooltip Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag.
gipakita.bs.tooltip Kini nga panghitabo gipabuto kung ang tooltip nahimo nang makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
hide.bs.tooltip Kini nga panghitabo gipabuto dayon kung ang hidepamaagi sa pananglitan gitawag na.
hidden.bs.tooltip Kini nga panghitabo gipabuto kung ang tooltip nahuman na nga gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
gisulod.bs.tooltip Kini nga panghitabo gipabuto pagkahuman sa show.bs.tooltippanghitabo kung ang template sa tooltip gidugang sa DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Idugang ang gagmay nga mga overlay sa sulud, sama sa naa sa iPad, sa bisan unsang elemento alang sa pagbutang sa sekundaryong impormasyon.

Ang mga Popover kansang titulo ug sulod kay zero-gitas-on wala gayud ipakita.

Pagsalig sa plugin

Ang mga Popover nanginahanglan sa tooltip plugin nga iapil sa imong bersyon sa Bootstrap.

Pag-opt-in nga gamit

Alang sa mga rason sa performance, ang Tooltip ug Popover data-apis kay opt-in, nagpasabot nga ikaw mismo ang mag-initialize niini .

Usa ka paagi sa pagsugod sa tanan nga mga popovers sa usa ka panid mao ang pagpili kanila pinaagi sa ilang mga data-togglehiyas:

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

Ang mga popover sa butones nga mga grupo, input nga grupo, ug mga lamesa nanginahanglan espesyal nga setting

Kung mogamit mga popover sa mga elemento sulod sa usa .btn-groupo usa .input-group, o sa mga elemento nga may kalabotan sa lamesa ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), kinahanglan nimo nga ipiho ang kapilian container: 'body'(gidokumento sa ubos) aron malikayan ang dili gusto nga mga epekto (sama sa elemento nga nagkadako ug/ o mawad-an sa mga lingin nga mga kanto sa dihang ang popover ma-trigger).

Ayaw pagsulay sa pagpakita sa mga popovers sa mga tinago nga elemento

Ang pagtawag $(...).popover('show')kung ang target nga elemento mao display: none;ang hinungdan nga ang popover mahimong dili husto nga posisyon.

Ang mga popover sa mga disabled nga elemento nanginahanglan mga elemento sa wrapper

Aron makadugang ug popover sa usa disabledo .disabledelemento, ibutang ang elemento sa sulod sa a <div>ug i-apply ang popover niana <div>.

Daghang linya nga mga link

Usahay gusto nimong idugang ang usa ka popover sa usa ka hyperlink nga nagputos sa daghang mga linya. Ang default nga pamatasan sa popover plugin mao ang pagsentro niini nga pinahigda ug patindog. Idugang white-space: nowrap;sa imong mga angkla aron malikayan kini.

Mga pananglitan

Static nga popover

Upat ka mga kapilian ang magamit: taas, tuo, ubos, ug wala nga linya.

Popover ibabaw

Sed posuere consectetur est ug lobortis. Aenean eu leo ​​quam. Espesye sa tanom nga bulak ang pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover nga tama

Sed posuere consectetur est ug lobortis. Aenean eu leo ​​quam. Espesye sa tanom nga bulak ang pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ubos

Sed posuere consectetur est ug lobortis. Aenean eu leo ​​quam. Espesye sa tanom nga bulak ang pellentesque ornare sem lacinia quam venenatis vestibulum.

Mibiya si Popover

Sed posuere consectetur est ug lobortis. Aenean eu leo ​​quam. Espesye sa tanom nga bulak ang pellentesque ornare sem lacinia quam venenatis vestibulum.

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

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

Isalikway sa sunod nga pag-klik

Gamita ang focusgatilyo aron isalikway ang mga popovers sa sunod nga pag-klik nga gihimo sa user.

Piho nga markup gikinahanglan para sa dismiss-on-next-click

Alang sa husto nga cross-browser ug cross-platform nga pamatasan, kinahanglan nimo gamiton ang <a>tag, dili ang <button>tag, ug kinahanglan usab nimo nga ilakip ang role="button"ug mga tabindexhiyas.

<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

I-enable ang mga popovers pinaagi sa JavaScript:

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-animation="".

Ngalan Matang Default Deskripsyon
animation boolean tinuod Ibutang ang CSS fade transition sa popover
sudlanan hilo | bakak bakak

Gidugang ang popover sa usa ka piho nga elemento. Pananglitan: container: 'body'. Kini nga opsyon labi ka mapuslanon tungod kay kini nagtugot kanimo sa pagpahimutang sa popover sa dagan sa dokumento duol sa nag-trigger nga elemento - nga makapugong sa popover gikan sa paglutaw gikan sa nag-trigger nga elemento sa panahon sa pag-usab sa gidak-on sa bintana.

sulod hilo | function ''

Default nga kantidad sa sulod kung wala ang data-contentattribute.

Kung ang usa ka function gihatag, kini tawgon uban ang thisreference set sa elemento nga gilakip sa popover.

paglangan numero | butang 0

Paglangan sa pagpakita ug pagtago sa popover (ms) - dili magamit sa manual trigger type

Kung adunay gihatag nga numero, ang paglangan magamit sa parehas nga pagtago/pagpakita

Ang istruktura sa butang mao ang:delay: { "show": 500, "hide": 100 }

html boolean bakak Isulod ang HTML sa popover. Kung bakak, ang pamaagi sa jQuery textgamiton sa pagsal-ot sa sulud sa DOM. Gamit ug text kung nabalaka ka bahin sa mga pag-atake sa XSS.
pagbutang hilo | function 'tama'

Giunsa pagpahimutang ang popover - ibabaw | ubos | wala | husto | awto.
Kung ang "auto" gitakda, kini dinamikong i-reorient ang popover. Pananglitan, kung ang pagbutang "awtomatikong wala", ang popover magpakita sa wala kung mahimo, kung dili kini ipakita sa tuo.

Kung gigamit ang usa ka function aron mahibal-an ang pagbutang, gitawag kini nga ang popover DOM node ingon ang una nga argumento ug ang hinungdan nga elemento nga DOM node ingon ikaduha. Ang thiskonteksto gitakda sa popover nga pananglitan.

tigpili hilo bakak Kung gihatag ang usa ka tigpili, ang mga butang nga popover itugyan sa gitakda nga mga target. Sa praktis, kini gigamit aron makahimo sa dinamikong HTML nga sulod nga adunay mga popovers nga idugang. Tan-awa kini ug usa ka pananglitan nga impormatibo .
template hilo '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML nga gamiton sa paghimo sa popover.

Ang popover's titlei-inject sa .popover-title.

Ang popover's contenti-inject sa .popover-content.

.arrowmahimong pana sa popover.

Ang labing gawas nga elemento sa wrapper kinahanglan adunay .popoverklase.

titulo hilo | function ''

Default nga bili sa titulo kung wala ang titleattribute.

Kung ang usa ka function gihatag, kini tawgon uban ang thisreference set sa elemento nga gilakip sa popover.

trigger hilo 'pag-klik' Giunsa ang pag-trigger sa popover - pag-klik | hover | focus | manwal. Mahimo nimong ipasa ang daghang mga trigger; ibulag sila sa usa ka luna. manualdili mahimong ikombinar sa bisan unsa nga lain nga trigger.
viewport hilo | butang | function { selector: 'lawas', padding: 0 }

Gitipigan ang popover sulod sa mga utlanan niini nga elemento. Pananglitan: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Kung ang usa ka function gihatag, kini gitawag nga adunay hinungdan nga elemento nga DOM node ingon nga bugtong argumento niini. Ang thiskonteksto gitakda sa popover nga pananglitan.

Mga hiyas sa datos alang sa indibidwal nga mga popovers

Ang mga kapilian alang sa indibidwal nga mga popover mahimong ipiho pinaagi sa paggamit sa mga hiyas sa datos, ingon sa gipasabut sa ibabaw.

Pamaagi

$().popover(options)

Nagsugod sa mga popover para sa koleksyon sa elemento.

.popover('show')

Nagpadayag sa popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ipakita ang popover (ie sa wala pa shown.bs.popovermahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa popover. Ang mga popover kansang titulo ug sulod kay zero-gitas-on dili gayud ipakita.

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

.popover('hide')

Nagtago sa popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang popover tinuod nga gitago (ie sa wala pa hidden.bs.popovermahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa popover.

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

.popover('toggle')

I-toggle ang popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang popover gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.popovero hidden.bs.popoverpanghitabo). Giisip kini nga "manwal" nga pag-trigger sa popover.

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

.popover('destroy')

Nagtago ug nagguba sa popover sa usa ka elemento. Ang mga popover nga naggamit sa delegasyon (nga gihimo gamit ang selectoropsyon ) dili mahimong tagsa-tagsa nga gub-on sa mga elemento sa descendant trigger.

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

Mga panghitabo

Uri sa Hitabo Deskripsyon
show.bs.popover Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag.
gipakita.bs.popover Kini nga panghitabo gipabuto kung ang popover nahimo nang makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
hide.bs.popover Kini nga panghitabo gipabuto dayon kung ang hidepamaagi sa pananglitan gitawag na.
tago.bs.popover Kini nga panghitabo gipabuto kung ang popover nahuman na nga gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
gisulod.bs.popover Kini nga panghitabo gipabuto pagkahuman sa show.bs.popoverpanghitabo kung ang template sa popover gidugang sa DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Mga mensahe sa alert alert.js

Pananglitan nga mga alerto

Idugang ang dismiss functionality sa tanang alert messages niini nga plugin.

Kung mogamit usa ka .closebuton, kinahanglan nga kini ang una nga bata sa .alert-dismissibleug wala’y sulud nga teksto nga mahimong moabut sa wala pa kini sa markup.

Paggamit

Idugang lang data-dismiss="alert"sa imong close button aron awtomatik nga makahatag ug alert close functionality. Ang pagsira sa usa ka alerto magtangtang niini gikan sa DOM.

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

Aron magamit ang imong mga alerto sa animation kung magsira, siguroha nga naa nila ang .fadeug .inmga klase nga naaplay na sa kanila.

Pamaagi

$().alert()

Naghimo usa ka alerto sa pagpamati sa mga panghitabo sa pag-klik sa mga elemento sa kaliwat nga adunay data-dismiss="alert"hiyas. (Dili kinahanglan kung gamiton ang auto-initialization sa data-api.)

$().alert('close')

Pagsira sa usa ka alerto pinaagi sa pagtangtang niini gikan sa DOM. Kung ang .fadeug .inmga klase anaa sa elemento, ang alerto mawala sa dili pa kini tangtangon.

Mga panghitabo

Ang alert plugin sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa alert functionality.

Uri sa Hitabo Deskripsyon
close.bs.alerto Kini nga panghitabo nagdilaab dayon kung ang closepamaagi sa pananglitan gitawag.
closed.bs.alerto Kini nga panghitabo gipabuto kung ang alerto gisirado na (maghulat alang sa mga transisyon sa CSS nga makompleto).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Butang nga buton.js

Buhata ang labi pa gamit ang mga buton. Ang control button nag-ingon o paghimo og mga grupo sa mga buton alang sa dugang nga mga sangkap sama sa mga toolbar.

Pagkaangay sa cross-browser

Ang Firefox nagpadayon sa mga estado sa pagkontrol sa porma (pagkabaldado ug pagkasusi) sa tibuok nga mga load sa panid . Ang usa ka solusyon alang niini mao ang paggamit autocomplete="off". Tan-awa ang Mozilla bug #654072 .

Stateful

Idugang data-loading-text="Loading..."aron magamit ang kahimtang sa pagkarga sa usa ka buton.

Kini nga bahin wala na magamit sukad sa v3.3.5 ug gitangtang sa v4.

Gamita ang bisan unsang estado nga gusto nimo!

Alang sa kini nga demonstrasyon, gigamit namon ang data-loading-textug $().button('loading'), apan dili kana ang bugtong estado nga imong magamit. Tan-awa ang dugang bahin niini sa ubos 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>

Usa ka toggle

Idugang data-toggle="button"aron ma-activate ang toggling sa usa ka buton.

Ang mga pre-toggled nga buton kinahanglan .activeugaria-pressed="true"

Para sa pre-toggled nga mga buton, kinahanglan nimong idugang ang .activeklase ug ang aria-pressed="true"attribute sa buttonimong kaugalingon.

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

Checkbox / Radyo

Idugang data-toggle="buttons"sa usa ka .btn-groupadunay sulud nga checkbox o mga input sa radyo aron mahimo ang pag-togg sa ilang mga istilo.

Kinahanglan nga gipili ang mga kapilian.active

Alang sa gipili nga mga kapilian, kinahanglan nimong idugang ang .activeklase sa labelimong kaugalingon nga input.

Ang kahimtang nga gisusi sa biswal gi-update lamang sa pag-klik

Kung ang gisusi nga kahimtang sa usa ka buton sa checkbox gi-update nga wala magpabuto sa usa ka clickpanghitabo sa buton (pananglitan pinaagi sa <input type="reset">o pinaagi sa pag-set sa checkedkabtangan sa input), kinahanglan nimo nga i-toggle ang .activeklase sa labelimong kaugalingon nga input.

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

Pamaagi

$().button('toggle')

I-toggle ang estado sa pagduso. Naghatag sa buton sa hitsura nga kini gi-aktibo.

$().button('reset')

I-reset ang kahimtang sa buton - ibaylo ang teksto sa orihinal nga teksto. Kini nga pamaagi kay asynchronous ug mobalik sa wala pa mahuman ang pag-reset.

$().button(string)

Ibaylo ang teksto sa bisan unsang datos nga gipiho nga kahimtang sa teksto.

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

Nahugno collapse.js

Flexible nga plugin nga naggamit sa pipila ka mga klase alang sa sayon ​​​​nga toggle nga kinaiya.

Pagsalig sa plugin

Ang pag-collapse nagkinahanglan sa mga transition plugin nga iapil sa imong bersyon sa Bootstrap.

Pananglitan

I-klik ang mga buton sa ubos aron ipakita ug itago ang laing elemento pinaagi sa mga kausaban sa klase:

  • .collapsenagtago sa sulod
  • .collapsinggigamit sa panahon sa transisyon
  • .collapse.innagpakita sa sulod

Mahimo nimong gamiton ang usa ka link nga adunay hrefattribute, o usa ka buton nga adunay data-targetattribute. Sa duha ka mga kaso, ang data-toggle="collapse"gikinahanglan.

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>

Pananglitan sa akordyon

I-extend ang default nga pagkahugno nga kinaiya aron makahimo og akordyon nga adunay sangkap sa panel.

Anim pariatur cliche reprehenderit, enim eiusmod taas nga kinabuhi accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck nga quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua nagbutang ug langgam sa ibabaw niini 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. Ang mga leggings occaecat craft nga beer farm-to-table, hilaw nga denim aesthetic synth nesciunt tingali wala ka pa makadungog niini nga accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod taas nga kinabuhi accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck nga quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua nagbutang ug langgam sa ibabaw niini 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. Ang mga leggings occaecat craft nga beer farm-to-table, hilaw nga denim aesthetic synth nesciunt tingali wala ka pa makadungog niini nga accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod taas nga kinabuhi accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck nga quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua nagbutang ug langgam sa ibabaw niini 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. Ang mga leggings occaecat craft nga beer farm-to-table, hilaw nga denim aesthetic synth nesciunt tingali wala ka pa makadungog niini nga 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 usab nga ibaylo ang .panel-bodys sa .list-groups.

  • Bootply
  • Usa ka itmus ac facilin
  • Ikaduha nga eros

Himua nga ma-access ang expand/collapse nga mga kontrol

Siguroha nga idugang aria-expandedsa kontrol nga elemento. Kini nga hiyas tin-aw nga naghubit sa kasamtangan nga kahimtang sa nahugno nga elemento sa pag-screen sa mga magbabasa ug susama nga mga teknolohiya sa pagtabang. Kung ang ma-collapsible nga elemento sirado pinaagi sa default, kini kinahanglan nga adunay kantidad nga aria-expanded="false". Kung imong gi-set ang collapsible nga elemento nga bukas pinaagi sa default gamit ang inklase, itakdaaria-expanded="true" sa kontrol. Awtomatiko nga i-toggle sa plugin ang kini nga hiyas base sa kung giablihan o gisirhan ba o wala ang collapsible nga elemento.

Dugang pa, kung ang imong kontrol nga elemento nagpunting sa usa ka nahugno nga elemento - ie ang data-targetattribute nagpunting sa usa ka idselector - mahimo kang magdugang ug dugang aria-controlsnga attribute sa control element, nga adunay sulod idsa collapsible nga elemento. Ang mga moderno nga screen reader ug susamang assistive nga mga teknolohiya naggamit niini nga attribute aron mahatagan ang mga user og dugang nga mga shortcut aron direkta nga maka-navigate sa collapsible nga elemento mismo.

Paggamit

Ang collapse plugin naggamit sa pipila ka mga klase sa pagdumala sa bug-at nga pag-alsa:

  • .collapsenagtago sa sulod
  • .collapse.innagpakita sa sulod
  • .collapsingidugang kung magsugod na ang transisyon, ug tangtangon kung mahuman na

Kini nga mga klase makita sa component-animations.less.

Pinaagi sa data attributes

Idugang lang data-toggle="collapse"ug a data-targetsa elemento aron awtomatik nga ma-assign ang kontrol sa usa ka collapsible nga elemento. Ang data-targethiyas modawat ug CSS selector aron magamit ang pagkahugno. Siguroha nga idugang ang klase collapsesa collapsible nga elemento. Kung gusto nimo nga kini nga default bukas, idugang ang dugang nga klase in.

Aron idugang ang sama sa akordyon nga pagdumala sa grupo ngadto sa usa ka collapsible nga kontrol, idugang ang data attribute data-parent="#selector". Tan-awa ang demo aron makita kini nga aksyon.

Pinaagi sa JavaScript

I-enable ang mano-mano gamit ang:

$('.collapse').collapse()

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-parent="".

Ngalan matang default paghulagway
ginikanan tigpili bakak Kung gihatag ang usa ka tigpili, nan ang tanan nga mga collapsible nga elemento sa ilawom sa gitakda nga ginikanan pagasirhan kung kini nga collapsible nga butang gipakita. (parehas sa tradisyonal nga pamatasan sa akordyon - kini nagdepende sa panelklase)
toggle boolean tinuod I-toggle ang ma-collapsible nga elemento sa pag-ampo

Pamaagi

.collapse(options)

Gi-aktibo ang imong sulud ingon usa ka ma-collapsible nga elemento. Modawat ug opsyonal nga mga kapilian object.

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

.collapse('toggle')

I-toggle ang usa ka ma-collapsible nga elemento aron ipakita o gitago. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento sa tinuud gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.collapseo hidden.bs.collapsepanghitabo).

.collapse('show')

Nagpakita sa usa ka ma-collapsible nga elemento. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento sa tinuud gipakita (ie sa wala pa shown.bs.collapsemahitabo ang panghitabo).

.collapse('hide')

Nagtago sa usa ka ma-collapsible nga elemento. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento gitago (ie sa wala pa hidden.bs.collapsemahitabo ang panghitabo).

Mga panghitabo

Ang klase sa pagkahugno sa Bootstrap nagpadayag sa pipila ka mga panghitabo alang sa pag-hook sa pag-andar sa pagkahugno.

Uri sa Hitabo Deskripsyon
show.bs.collapse Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag.
gipakita.bs.collapse Kini nga panghitabo gipabuto kung ang usa ka elemento sa pagkahugno nahimo nga makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
hide.bs.collapse Kini nga panghitabo gipabuto dayon kung ang hidepamaagi gitawag na.
hidden.bs.collapse Kini nga panghitabo gipabuto kung ang usa ka elemento sa pagkahugno gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Usa ka bahin sa slideshow alang sa pagbisikleta pinaagi sa mga elemento, sama sa usa ka carousel. Wala gisuportahan 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 nga mga kapsyon

Idugang ang mga kapsyon sa imong mga slide nga dali gamit ang .carousel-captionelemento sa sulod sa bisan unsang .item. Ibutang ang bisan unsang opsyonal nga HTML sa sulod didto ug kini awtomatik nga i-align ug ma-format.

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

Daghang mga carousel

Ang mga carousel nanginahanglan sa paggamit sa usa idsa pinakagawas nga sudlanan (ang .carousel) aron ang mga kontrol sa carousel molihok sa husto. Kung magdugang ug daghang mga carousel, o kung mag-ilis sa usa ka carousel id, siguruha nga i-update ang mga may kalabotan nga kontrol.

Pinaagi sa data attributes

Gamita ang data attributes aron dali makontrol ang posisyon sa carousel. data-slidemidawat sa mga keyword prevo next, nga nag-usab sa posisyon sa slide kalabot sa kasamtangan nga posisyon niini. Sa laing paagi, gamita data-slide-toang pagpasa sa usa ka hilaw nga slide index ngadto sa carousel data-slide-to="2", nga mobalhin sa slide position ngadto sa usa ka partikular nga index nga nagsugod sa 0.

Ang data-ride="carousel"attribute kay gigamit sa pagmarka sa carousel isip animating sugod sa page load. Dili kini magamit sa kombinasyon sa (kadaghanan ug wala kinahanglana) klaro nga pagsugod sa JavaScript sa parehas nga carousel.

Pinaagi sa JavaScript

Tawga ang carousel nga mano-mano gamit ang:

$('.carousel').carousel()

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-interval="".

Ngalan matang default paghulagway
agwat numero 5000 Ang gidugayon sa paglangan tali sa awtomatik nga pagbisikleta sa usa ka butang. Kung bakak, ang carousel dili awtomatik nga mag-cycle.
paghunong hilo | null "lutaw" Kung itakda sa "hover", ihunong ang pagbisikleta sa carousel sa mouseenterug ipadayon ang pagbisikleta sa carousel sa mouseleave. Kung itakda sa null, ang pag-hover sa carousel dili mopahunong niini.
putos boolean tinuod Kung ang carousel kinahanglan nga magpadayon sa pag-ikot o adunay lisud nga paghunong.
keyboard boolean tinuod Kung ang carousel kinahanglan nga mo-react sa mga panghitabo sa keyboard.

Nagsugod sa carousel nga adunay opsyonal nga mga kapilian objectug nagsugod sa pagbisikleta sa mga butang.

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

Naglibot sa mga butang sa carousel gikan sa wala ngadto sa tuo.

Gipahunong ang carousel gikan sa pagbisikleta sa mga butang.

I-cycle ang carousel ngadto sa usa ka partikular nga frame (0 base, susama sa array).

Mga siklo sa miaging aytem.

Siklo ngadto sa sunod nga butang.

Ang klase sa carousel sa Bootstrap nagbutyag sa duha ka mga panghitabo alang sa pag-hook sa pagpaandar sa carousel.

Ang duha ka mga panghitabo adunay mga mosunod nga dugang nga mga kabtangan:

  • direction: Ang direksyon diin ang carousel nag-slide (bisan "left"o "right").
  • relatedTarget: Ang elemento sa DOM nga gi-slide sa lugar isip aktibo nga butang.

Ang tanan nga mga panghitabo sa carousel gipabuto sa carousel mismo (ie sa <div class="carousel">).

Uri sa Hitabo Deskripsyon
slide.bs.carousel Kini nga panghitabo mobuto dayon kung ang slidepamaagi sa instance gigamit.
slid.bs.carousel Kini nga panghitabo gipabuto kung nahuman na sa carousel ang pagbalhin sa slide niini.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Pananglitan

Ang affix plugin position: fixed;nag-on ug off, nga nagsundog sa epekto nga nakit-an sa position: sticky;. Ang subnavigation sa tuo usa ka live demo sa affix plugin.


Paggamit

Gamita ang affix plugin pinaagi sa data attributes o mano-mano gamit ang imong kaugalingong JavaScript. Sa duha nga mga sitwasyon, kinahanglan ka maghatag CSS alang sa pagpahimutang ug gilapdon sa imong gilakip nga sulud.

Pahinumdom: Ayaw gamita ang affix plugin sa usa ka elemento nga anaa sa medyo nakaposisyon nga elemento, sama sa gibira o giduso nga column, tungod sa Safari rendering bug .

Posisyon pinaagi sa CSS

Ang affix nga plugin nag-toggle tali sa tulo ka mga klase, ang matag usa nagrepresentar sa usa ka partikular nga estado: .affix, .affix-top, ug .affix-bottom. Kinahanglan nimo nga ihatag ang mga istilo, gawas sa position: fixed;on .affix, para sa kini nga mga klase sa imong kaugalingon (independente sa kini nga plugin) aron madumala ang aktwal nga mga posisyon.

Ania kung giunsa ang affix plugin nagtrabaho:

  1. Sa pagsugod, ang plugin nagdugang .affix-toparon ipakita nga ang elemento naa sa pinakataas nga posisyon niini. Niini nga punto walay CSS positioning ang gikinahanglan.
  2. Ang pag-scroll sa unahan sa elemento nga gusto nimo itaod kinahanglan mag-trigger sa aktuwal nga affixing. Dinhi diin .affixnagpuli .affix-topug nagtakda position: fixed;(gihatag sa Bootstrap's CSS).
  3. Kung ang usa ka ubos nga offset gihubit, ang pag-scroll sa nangagi kinahanglan nga pulihan .affixkini sa .affix-bottom. Tungod kay ang mga offset opsyonal, ang pag-set sa usa kinahanglan nimo nga itakda ang angay nga CSS. Sa kini nga kaso, dugangi position: absolute;kung gikinahanglan. Gigamit sa plugin ang data attribute o opsyon sa JavaScript aron mahibal-an kung asa ibutang ang elemento gikan didto.

Sunda ang mga lakang sa ibabaw aron itakda ang imong CSS alang sa bisan hain sa mga kapilian sa paggamit sa ubos.

Pinaagi sa data attributes

Aron dali nga makadugang ug affix nga kinaiya sa bisan unsang elemento, idugang data-spy="affix"lang sa elemento nga gusto nimong espiya. Gamita ang mga offset aron mahibal-an kung kanus-a i-toggle ang pag-pin sa usa ka elemento.

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

Pinaagi sa JavaScript

Tawga ang affix plugin pinaagi sa JavaScript:

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-offset-top="200".

Ngalan matang default paghulagway
offset numero | function | butang 10 Ang mga pixel aron ma-offset gikan sa screen kung gikalkula ang posisyon sa scroll. Kung ang usa ka numero gihatag, ang offset magamit sa taas ug ubos nga direksyon. Aron makahatag usa ka talagsaon, ubos ug taas nga offset paghatag lang usa ka butang offset: { top: 10 }o offset: { top: 10, bottom: 5 }. Paggamit usa ka function kung kinahanglan nimo nga dinamikong pagkalkula sa usa ka offset.
target tigpili | node | jQuery nga elemento ang windowbutang Gipiho ang target nga elemento sa affix.

Pamaagi

.affix(options)

Gi-aktibo ang imong sulud ingon gilakip nga sulud. Modawat ug opsyonal nga mga kapilian object.

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

.affix('checkPosition')

Gikalkulo pag-usab ang kahimtang sa affix base sa mga dimensyon, posisyon, ug posisyon sa scroll sa may kalabutan nga mga elemento. Ang .affix, .affix-top, ug .affix-bottommga klase gidugang o gitangtang gikan sa gilakip nga sulod sumala sa bag-ong estado. Kini nga pamaagi kinahanglan nga tawagan kung ang mga sukat sa gilakip nga sulud o ang target nga elemento mabag-o, aron masiguro ang husto nga posisyon sa gilakip nga sulud.

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

Mga panghitabo

Ang plugin sa affix sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa affix functionality.

Uri sa Hitabo Deskripsyon
affix.bs.affix Kini nga panghitabo nagdilaab dayon sa wala pa mabutang ang elemento.
affixed.bs.affix Kini nga panghitabo gipabuto pagkahuman sa elemento nga gilakip.
affix-top.bs.affix Kini nga panghitabo mobuto diha-diha dayon sa wala pa ang elemento nga gibutang-sa ibabaw.
affixed-top.bs.affix Kini nga panghitabo gipabuto human ang elemento nabutang-sa ibabaw.
affix-bottom.bs.affix Kini nga panghitabo mobuto diha-diha dayon sa wala pa ang elemento nga gibutang-sa ubos.
affixed-bottom.bs.affix Kini nga panghitabo gipabuto human ang elemento nabutang sa ubos.