Ringkesan

Individu utawa kompilasi

Plugin bisa dilebokake kanthi individu (nggunakake *.jsfile individu Bootstrap), utawa kabeh bebarengan (nggunakake bootstrap.jsutawa minified bootstrap.min.js).

Nggunakake JavaScript sing dikompilasi

Loro -lorone bootstrap.jslan bootstrap.min.jsngemot kabeh plugin ing file siji. Kalebu mung siji.

Ketergantungan plugin

Sawetara plugin lan komponen CSS gumantung ing plugin liyane. Yen sampeyan nyakup plugin kanthi individu, priksa manawa sampeyan mriksa dependensi kasebut ing dokumen kasebut. Uga elinga yen kabeh plugin gumantung ing jQuery (iki tegese jQuery kudu dilebokake sadurunge file plugin). Hubungi kitabower.json kanggo ndeleng versi jQuery sing didhukung.

Atribut data

Sampeyan bisa nggunakake kabeh plugin Bootstrap murni liwat API markup tanpa nulis siji baris JavaScript. Iki minangka API kelas kapisan Bootstrap lan kudu dadi pertimbangan pisanan nalika nggunakake plugin.

Sing jarene, ing sawetara kahanan bisa uga dikarepake kanggo mateni fungsi iki. Mula, kita uga menehi kemampuan kanggo mateni API atribut data kanthi mbatalake kabeh acara ing spasi jeneng dokumen karo data-api. Iki katon kaya iki:

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

Utawa, kanggo ngarahake plugin tartamtu, mung lebokake jeneng plugin kasebut minangka ruang jeneng bebarengan karo ruang jeneng data-api kaya iki:

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

Mung siji plugin saben unsur liwat atribut data

Aja nggunakake atribut data saka pirang-pirang plugin ing unsur sing padha. Contone, tombol ora bisa duwe tooltip lan ngalih modal. Kanggo nindakake iki, gunakake unsur pembungkus.

Programmatic API

Kita uga pracaya sampeyan kudu bisa nggunakake kabeh plugin Bootstrap murni liwat JavaScript API. Kabeh API umum iku siji, cara chainable, lan bali koleksi tumindak marang.

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

Kabeh cara kudu nampa obyek opsional, senar sing ngarahake metode tartamtu, utawa ora ana apa-apa (sing miwiti plugin kanthi prilaku standar):

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

Saben plugin uga mbukak konstruktor mentah ing Constructorproperti: $.fn.popover.Constructor. Yen sampeyan pengin njaluk conto plugin tartamtu, njupuk langsung saka unsur: $('[rel="popover"]').data('popover').

Setelan gawan

Sampeyan bisa ngganti setelan gawan kanggo plugin kanthi ngowahi Constructor.DEFAULTSobyek plugin:

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

Ora ana konflik

Kadhangkala perlu nggunakake plugin Bootstrap karo kerangka UI liyane. Ing kahanan kasebut, tabrakan spasi jeneng kadhangkala bisa kedadeyan. Yen kedadeyan kasebut, sampeyan bisa nelpon .noConflictplugin sing pengin dibalekake regane.

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

Acara

Bootstrap nyedhiyakake acara khusus kanggo umume tumindak unik plugin. Umumé, iki teka ing wangun infinitive lan past participle - ngendi infinitive (ex. show) dipicu ing wiwitan acara, lan past participle wangun (ex. shown) dipicu nalika completion saka tumindak.

Ing 3.0.0, kabeh acara Bootstrap diwenehi spasi jeneng.

Kabeh acara infinitive nyedhiyakake preventDefaultfungsi. Iki menehi kemampuan kanggo mungkasi eksekusi tumindak sadurunge diwiwiti.

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

Nomer versi

Versi saben plugin jQuery Bootstrap bisa diakses liwat VERSIONproperti konstruktor plugin kasebut. Contone, kanggo plugin tooltip:

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

Ora ana fallbacks khusus nalika JavaScript dipateni

Plugin Bootstrap ora mundur kanthi apik nalika JavaScript dipateni. Yen sampeyan peduli karo pengalaman pangguna ing kasus iki, gunakake <noscript>kanggo nerangake kahanan kasebut (lan carane ngaktifake JavaScript maneh) menyang pangguna, lan / utawa nambah fallbacks khusus sampeyan dhewe.

Pustaka pihak katelu

Bootstrap ora resmi ndhukung perpustakaan JavaScript pihak katelu kaya Prototype utawa jQuery UI. Senadyan .noConflictacara lan namespaced, bisa uga ana masalah kompatibilitas sing kudu didandani dhewe.

Transisi transisi.js

Babagan transisi

Kanggo efek transisi prasaja, kalebu transition.jssapisan bebarengan karo file JS liyane. Yen sampeyan nggunakake compiled (utawa minified) bootstrap.js, ora perlu kanggo kalebu iki-wis ana.

Apa sing ana ing njero

Transition.js minangka pembantu dhasar kanggo transitionEndacara uga minangka emulator transisi CSS. Iki digunakake dening plugin liyane kanggo mriksa dhukungan transisi CSS lan kanggo nyekel transisi gantung.

Mateni transisi

Transisi bisa dipateni sacara global nggunakake cuplikan JavaScript ing ngisor iki, sing kudu ditindakake sawise transition.js(utawa bootstrap.js, bootstrap.min.jskaya ngono) wis dimuat:

$.support.transition = false

Modal modal.js

Modals sing streamlined, nanging fleksibel, dialog pituduh karo fungsi minimal dibutuhake lan standar pinter.

Multiple mbukak modal ora didhukung

Priksa manawa ora mbukak modal nalika liyane isih katon. Nuduhake luwih saka siji modal sekaligus mbutuhake kode khusus.

Penempatan markup modal

Tansah nyoba nyelehake kode HTML modal ing posisi paling dhuwur ing dokumen sampeyan supaya ora ana komponen liyane sing mengaruhi tampilan lan/utawa fungsi modal.

Caveats piranti seluler

Ana sawetara caveats babagan nggunakake modal ing piranti seluler. Deleng dokumen dhukungan browser kanggo rincian.

Amarga carane HTML5 nemtokake semantik, autofocusatribut HTML ora ana pengaruh ing modals Bootstrap. Kanggo entuk efek sing padha, gunakake sawetara JavaScript khusus:

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

Tuladha

Tuladha statis

A modal render karo header, awak, lan set tumindak ing 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 -->

demo langsung

Ganti modal liwat JavaScript kanthi ngeklik tombol ing ngisor iki. Bakal geser mudhun lan luntur saka ndhuwur kaca.

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

Nggawe modal bisa diakses

Dadi manawa kanggo nambah role="dialog"lan aria-labelledby="...", referensi judhul modal, kanggo .modal, lan role="document"kanggo .modal-dialogdhewe.

Kajaba iku, sampeyan bisa menehi katrangan babagan dialog modal karo aria-describedbyon .modal.

Semat video YouTube

Semat video YouTube ing modals mbutuhake JavaScript tambahan ora ing Bootstrap kanggo otomatis mungkasi muter maneh lan liyane. Deleng kiriman Stack Overflow sing migunani iki kanggo informasi luwih lengkap.

Ukuran opsional

Modals duwe rong ukuran opsional, kasedhiya liwat kelas modifier kanggo diselehake ing a .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>

Mbusak animasi

Kanggo modals sing mung katon tinimbang fade kanggo ndeleng, mbusak .fadekelas saka markup modal.

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

Nggunakake sistem grid

Kanggo njupuk kauntungan saka sistem kothak Bootstrap ing modal, mung nest .rowing .modal-bodylan banjur nggunakake kelas sistem kothak normal.

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

Duwe akeh tombol sing kabeh micu modal sing padha, mung kanthi isi sing rada beda? Gunakake event.relatedTargetlan atribut HTMLdata-* ( bisa liwat jQuery ) kanggo macem-macem isi modal gumantung tombol sing diklik. Deleng dokumen Modal Events kanggo rincian babagan relatedTarget,

...tombol liyane ...
<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)
})

Panganggone

Plugin modal ngganti konten sing didhelikake yen dikarepake, liwat atribut data utawa JavaScript. Iku uga nambah .modal-openkanggo <body>ngatasi standar nggulung prilaku lan ngasilaken a .modal-backdropkanggo nyedhiyani area klik kanggo ngilangi modals ditampilake nalika ngeklik njaba modal.

Liwat atribut data

Aktifake modal tanpa nulis JavaScript. Setel data-toggle="modal"ing unsur controller, kaya tombol, bebarengan karo data-target="#foo"utawa href="#foo"kanggo target modal tartamtu kanggo ngalih.

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

Liwat JavaScript

Nelpon modal karo id myModalkaro siji baris JavaScript:

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

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-backdrop="".

jeneng jinis gawan katrangan
latar mburi boolean utawa string'static' bener Kalebu unsur modal-backdrop. Utawa, nemtokake staticlatar mburi sing ora nutup modal nalika diklik.
papan ketik boolean bener Nutup modal nalika tombol uwal ditekan
nuduhake boolean bener Nuduhake modal nalika diwiwiti.
remot dalan palsu

Opsi iki ora digunakake wiwit v3.3.0 lan wis dibusak ing v4. Disaranake tinimbang nggunakake templating sisih klien utawa framework naleni data, utawa nelpon jQuery.load dhewe.

Yen URL remot diwenehake, isi bakal dimuat sapisan liwat metode jQuery loadlan disuntikake menyang .modal-contentdiv. Yen sampeyan nggunakake data-api, sampeyan bisa uga nggunakake hrefatribut kanggo nemtokake sumber remot. Conto iki kapacak ing ngisor iki:

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

Metode

Ngaktifake konten sampeyan minangka modal. Nampa opsi opsional object.

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

Ngalih modal kanthi manual. Bali menyang panelpon sadurunge modal wis bener ditampilake utawa didhelikake (yaiku sadurunge acara shown.bs.modalutawa hidden.bs.modalkedadeyan).

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

Mbukak modal kanthi manual. Bali menyang panelpon sadurunge modal wis bener wis ditampilake (ie sadurunge shown.bs.modalacara occurs).

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

Kanthi manual ndhelikake modal. Bali menyang panelpon sadurunge modal bener-bener didhelikake (yaiku sadurunge hidden.bs.modalkedadeyan kasebut).

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

Ngatur maneh posisi modal kanggo nglawan scrollbar yen ana sing katon, sing bakal nggawe modal mlumpat ing sisih kiwa.

Mung perlu nalika dhuwur saka owah-owahan modal nalika mbukak.

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

Acara

Kelas modal Bootstrap nyedhiyakake sawetara acara kanggo nyambung menyang fungsionalitas modal.

Kabeh acara modal dipecat ing modal dhewe (ie ing <div class="modal">).

Jinis Acara Katrangan
show.bs.modal Acara iki langsung murub nalika showmetode conto diarani. Yen disebabake klik, unsur sing diklik kasedhiya minangka relatedTargetproperti acara kasebut.
ditampilake.bs.modal Acara iki dipecat nalika modal wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung). Yen disebabake klik, unsur sing diklik kasedhiya minangka relatedTargetproperti acara kasebut.
hide.bs.modal Acara iki langsung dipecat nalika hidemetode conto wis diarani.
hidden.bs.modal Acara iki dipecat nalika modal wis rampung didhelikake saka pangguna (bakal ngenteni transisi CSS rampung).
loaded.bs.modal Acara iki dipecat nalika modal wis dimuat isi nggunakake remotepilihan.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Tambah menu gulung mudhun kanggo meh kabeh karo plugin prasaja iki, kalebu navbar, tab, lan pil.

Ing navbar

Ing pil

Liwat atribut data utawa JavaScript, plugin gulung mudhun ngowahi konten sing didhelikake (menu gulung mudhun) kanthi ngowahi .openkelas ing item dhaptar wong tuwa.

Ing piranti seluler, mbukak dropdown nambah .dropdown-backdropminangka area tunyuk kanggo nutup menu gulung mudhun nalika nunyuk njaba menu, requirement kanggo support iOS tepat. Iki tegese ngalih saka menu gulung mudhun menyang menu gulung mudhun sing beda mbutuhake tutul ekstra ing seluler.

Cathetan: data-toggle="dropdown"Atribut kasebut diandelake kanggo nutup menu gulung mudhun ing tingkat aplikasi, mula luwih becik nggunakake aplikasi kasebut.

Liwat atribut data

Tambah data-toggle="dropdown"menyang link utawa tombol kanggo ngalih gulung mudhun.

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

Supaya URL tetep utuh karo tombol link, gunakake data-targetatribut tinimbang 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>

Liwat JavaScript

Telpon dropdown liwat JavaScript:

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

data-toggle="dropdown"isih dibutuhake

Ora preduli apa sampeyan nelpon dropdown liwat JavaScript utawa nggunakake data-api, mesthine data-toggle="dropdown"kudu ana ing unsur pemicu dropdown.

ora ana

Ngalih menu gulung mudhun saka navbar utawa pandhu arah tab.

Kabeh acara gulung mudhun dipecat ing .dropdown-menuunsur induk 's.

Kabeh acara gulung mudhun duwe relatedTargetproperti, sing regane minangka unsur anchor sing bisa diganti.

Jinis Acara Katrangan
show.bs.dropdown Acara iki langsung murub nalika metode conto acara diarani.
ditampilake.bs.mudhun Acara iki dipecat nalika dropdown wis katon kanggo pangguna (bakal ngenteni transisi CSS, rampung).
hide.bs.dropdown Acara iki langsung dipecat nalika metode conto ndhelikake wis diarani.
hidden.bs.dropdown Acara iki dipecat nalika dropdown wis rampung didhelikake saka pangguna (bakal ngenteni transisi CSS, rampung).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Conto ing navbar

Plugin ScrollSpy kanggo nganyari target nav kanthi otomatis adhedhasar posisi gulung. Gulung area ing ngisor navbar lan nonton owah-owahan kelas aktif. Sub item gulung mudhun uga bakal disorot.

@lemak

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi sadurunge padha adol metu qui. Tumblr farm-to-table hak sepeda apa wae. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minimal qui sampeyan mbokmenawa durung krungu saka wong-wong mau lan cardigan trust fund culpa biodiesel wes anderson estetika. Nihil tato accusamus, cred ironi biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork jenggot. Freegan janggut aliqua cupidatat mcsweeney kang vero. Cupidatat papat loko nisi, ea helvetica nulla carles. Truk pangan sweter cosby tato, vinyl quis non freegan mcsweeney. Lo-fi wes anderson +1 sartorial. Carles ngleksanani non estetis quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

siji

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Hak sepeda Lomo 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. Vero VHS minangka adipisicing. Consectetur nisi DIY mini utusan tas. Cred ex in, sustainable delectus consectetur fanny pack iphone.

kalih

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 apa wae delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats sampeyan mbokmenawa durung krungu saka wong-wong mau consequat hoodie gluten-free lo-fi fap aliquip. Laboure elit placeat sadurunge padha adol, 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 minimal commodo ullamco thundercats.

Panganggone

Mbutuhake Bootstrap nav

Scrollspy saiki mbutuhake nggunakake komponèn Bootstrap nav kanggo nyorot tepat pranala aktif.

Target ID sing bisa ditanggulangi dibutuhake

Tautan Navbar kudu duwe target id sing bisa ditanggulangi. Contone, <a href="#home">home</a>kudu cocog karo soko ing DOM kaya <div id="home"></div>.

Unsur non :visible-target diabaikan

unsur Doel sing ora :visiblemiturut jQuery bakal digatèkaké lan item nav sing cocog ora bakal disorot.

Mbutuhake posisi relatif

Ora ketompo cara implementasine, mbutuhake scrollspy nggunakake position: relative;unsur sing sampeyan spying. Ing sawetara kasus, iki minangka <body>. Nalika scrollspying ing unsur liyane saka <body>, dadi manawa duwe pesawat heightlan overflow-y: scroll;Applied.

Liwat atribut data

Kanggo gampang nambah prilaku scrollspy menyang pandhu arah topbar, nambah data-spy="scroll"menyang unsur sing pengin Spy (paling biasane iki bakal <body>). Banjur tambahake data-targetatribut karo ID utawa kelas unsur induk saka .navkomponen 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>

Liwat JavaScript

Sawise nambahake position: relative;CSS sampeyan, nelpon scrollspy liwat JavaScript:

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

Metode

.scrollspy('refresh')

Nalika nggunakake scrollspy bebarengan karo nambah utawa mbusak unsur saka DOM, sampeyan kudu nelpon cara refresh kaya mangkene:

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

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-offset="".

jeneng jinis gawan katrangan
ngimbangi nomer 10 Piksel kanggo ngimbangi saka ndhuwur nalika ngetung posisi gulung.

Acara

Jinis Acara Katrangan
activate.bs.scrollspy Acara iki murub nalika item anyar diaktifake dening scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Tab sing bisa diganti tab.js

Tuladha tab

Tambah cepet, fungsi tab dinamis kanggo transisi liwat panel isi lokal, malah liwat menu gulung mudhun. Tab nested ora didhukung.

Denim mentahan sampeyan mbokmenawa durung krungu babagan celana jeans Austin. Nesciunt tahu stumptown aliqua, retro synth master ngresiki. Kumis cliche tempor, williamsburg carles vegan helvetica. Reprehenderit tukang daging retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex cumi. Pilih panggonan ing 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.

Ngluwihi pandhu arah tab

Plugin iki ngluwihi komponen navigasi tab kanggo nambah area tabable.

Panganggone

Aktifake tab sing bisa tab liwat JavaScript (saben tab kudu diaktifake kanthi individu):

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

Sampeyan bisa ngaktifake tab individu kanthi sawetara cara:

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

Sampeyan bisa ngaktifake navigasi tab utawa pil tanpa nulis JavaScript kanthi mung nemtokake data-toggle="tab"utawa data-toggle="pill"ing unsur. Nambahake kelas navlan nav-tabsing tab bakal ngetrapake gaya tabul Bootstrap , nalika nambahake kelas lan bakal ngetrapake gaya pil .navnav-pills

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

Efek luntur

Kanggo nggawe tab luntur, tambahake .fadesaben .tab-pane. Panel tab pisanan uga kudu .innggawe konten awal katon.

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

Metode

$().tab

Ngaktifake unsur tab lan wadhah konten. Tab kudu duwe data-targetutawa hrefnargetake simpul wadhah ing DOM. Ing conto ing ndhuwur, tab kasebut minangka <a>s kanthi data-toggle="tab"atribut.

.tab('show')

Milih tab sing diwenehake lan nuduhake isi sing gegandhengan. Tab liyane sing sadurunge dipilih dadi ora dipilih lan isi sing gegandhengan didhelikake. Bali menyang panelpon sadurunge panel tab bener-bener ditampilake (yaiku sadurunge shown.bs.tabkedadeyan kasebut).

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

Acara

Nalika nuduhake tab anyar, acara kasebut murub kanthi urutan ing ngisor iki:

  1. hide.bs.tab(ing tab aktif saiki)
  2. show.bs.tab(ing tab sing bakal ditampilake)
  3. hidden.bs.tab(ing tab aktif sadurunge, padha karo hide.bs.tabacara kasebut)
  4. shown.bs.tab(ing tab sing mentas aktif ditampilake, padha karo show.bs.tabacara kasebut)

Yen ora ana tab sing wis aktif, banjur acara hide.bs.tablan hidden.bs.tabora bakal dipecat.

Jinis Acara Katrangan
show.bs.tab Acara iki murub ing tab show, nanging sadurunge tab anyar wis ditampilake. Gunakake event.targetlan event.relatedTargetkanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).
ditampilake.bs.tab Acara iki murub ing tab show sawise tab ditampilake. Gunakake event.targetlan event.relatedTargetkanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).
hide.bs.tab Acara iki murub nalika tab anyar bakal ditampilake (lan kanthi mangkono tab aktif sadurunge kudu didhelikake). Gunakake event.targetlan event.relatedTargetkanggo target tab aktif saiki lan tab anyar sing bakal aktif.
hidden.bs.tab Acara iki murub sawise tab anyar ditampilake (lan kanthi mangkono tab aktif sadurunge didhelikake). Gunakake event.targetlan event.relatedTargetkanggo target tab aktif sadurunge lan tab aktif anyar, mungguh.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Inspirasi dening plugin jQuery.tipsy banget sing ditulis dening Jason Frame; Tooltips minangka versi dianyari, sing ora gumantung ing gambar, nggunakake CSS3 kanggo animasi, lan data-atribut kanggo panyimpenan judhul lokal.

Tooltips karo judhul nol-dawa ora tau ditampilake.

Tuladha

Tutul ing pranala ing ngisor iki kanggo ndeleng tooltips:

Celana ketat tingkat sabanjuré keffiyeh sampeyan mbokmenawa wis ora krungu saka wong-wong mau. Photo booth jenggot denim mentah letterpress vegan messenger bag stumptown. Seitan farm-to-table, mcsweeney's fixie sustainable quinoa 8-bit american apparel duwe terry richardson vinyl chambray. Jenggot stumptown, cardigan banh mi lomo thundercats. Tahu biodiesel williamsburg marfa, papat loko mcsweeney kang ngresiki vegan chambray. A artis tenan ironic apa keytar , scenester farm-to-table banksy Austin twitter nangani freegan cred denim mentah single-origin kopi viral.

Tooltip statis

Papat opsi kasedhiya: ndhuwur, tengen, ngisor, lan kiwa didadekake siji.

Papat arah

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

Fungsi opt-in

Kanggo alasan kinerja, Tooltip lan Popover data-apis milih, tegese sampeyan kudu miwiti dhewe .

Salah siji cara kanggo miwiti kabeh tooltip ing kaca yaiku milih kanthi data-toggleatribut:

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

Panganggone

Plugin tooltip ngasilake konten lan markup sing dikarepake, lan kanthi gawan nyelehake tooltip sawise unsur pemicu.

Micu tooltip liwat JavaScript:

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

Markup

Markup sing dibutuhake kanggo tooltip mung dataatribut lan titleing unsur HTML sampeyan pengin duwe tooltip. Markup sing digawe saka tooltip cukup prasaja, sanajan mbutuhake posisi (kanthi standar, disetel topdening 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>

pranala multi-line

Kadhangkala sampeyan pengin nambah tooltip menyang hyperlink sing mbungkus pirang-pirang baris. Prilaku standar plugin tooltip yaiku kanggo pusatake kanthi horisontal lan vertikal. Tambah white-space: nowrap;menyang jangkar kanggo ngindhari iki.

Tooltips ing kelompok tombol, kelompok input, lan tabel mbutuhake setelan khusus

Nalika nggunakake tooltips ing unsur ing .btn-grouputawa .input-grouping, utawa ing tabel-related unsur ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), sampeyan kudu nemtokake pilihan container: 'body'(didokumentasikan ing ngisor iki) kanggo ngindhari efek sisih sing ora dikarepake (kayata unsur sing luwih akeh lan / utawa ilang sudhut sing dibunderaké nalika tooltip dipicu).

Aja nyoba nuduhake tooltip ing unsur sing didhelikake

Njaluk $(...).tooltip('show')nalika unsur target display: none;bakal nyebabake tooltip salah dipanggonke.

Tip alat sing bisa diakses kanggo pangguna keyboard lan teknologi pitulung

Kanggo pangguna sing navigasi nganggo keyboard, lan khususe pangguna teknologi asisten, sampeyan mung kudu nambah tooltip menyang unsur sing bisa fokus keyboard kayata link, kontrol formulir, utawa unsur sembarang sing duwe tabindex="0"atribut.

Tooltips ing unsur dipatèni mbutuhake unsur wrapper

Kanggo nambah tooltip menyang disabledutawa .disabledunsur, sijine unsur ing a <div>lan aplikasi tooltip kanggo <div>tinimbang.

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-animation="".

jeneng Jinis Default Katrangan
animasi boolean bener Gunakake transisi fade CSS menyang tooltip
wadhah senar | palsu palsu

Nambah tooltip menyang unsur tartamtu. Tuladha: container: 'body'. Opsi iki migunani banget amarga ngidini sampeyan nyetel tooltip ing aliran dokumen ing cedhak unsur pemicu - sing bakal nyegah tooltip ngambang adoh saka unsur pemicu nalika ngowahi ukuran jendhela.

tundha nomer | obyek 0

Tundha nuduhake lan ndhelikake tooltip (ms) - ora ditrapake kanggo jinis pemicu manual

Yen nomer diwenehake, wektu tundha ditrapake kanggo ndhelikake / nuduhake

Struktur obyek yaiku:delay: { "show": 500, "hide": 100 }

html boolean palsu Lebokake HTML menyang tooltip. Yen palsu, textcara jQuery bakal digunakake kanggo nglebokake isi menyang DOM. Gunakake teks yen sampeyan kuwatir babagan serangan XSS.
panggonan panggonan senar | fungsi 'ndhuwur'

Carane posisi tooltip - ndhuwur | ngisor | kiwa | tengen | otomatis.
Nalika "otomatis" ditemtokake, bakal ngowahi tooltip kanthi dinamis. Contone, yen panggonan seko "ngiwa otomatis", tooltip bakal ditampilake ing sisih kiwa yen bisa, yen ora bakal ditampilake tengen.

Nalika fungsi digunakake kanggo nemtokake panggonan, diarani simpul DOM tooltip minangka argumen pisanan lan unsur pemicu DOM node minangka kaloro. Konteks thisdisetel menyang conto tooltip.

pamilih senar palsu Yen pamilih diwenehake, obyek tooltip bakal didelegasikan menyang target sing ditemtokake. Ing laku, iki digunakake kanggo ngaktifake isi HTML dinamis kanggo nambah tooltips. Waca iki lan conto informatif .
cithakan senar '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML dhasar kanggo digunakake nalika nggawe tooltip.

Tooltip titlebakal disuntikake menyang .tooltip-inner.

.tooltip-arrowbakal dadi panah tooltip.

Unsur pambungkus paling njaba kudu duwe .tooltipkelas.

judhul senar | fungsi ''

Nilai judhul standar yen titleatribut ora ana.

Yen fungsi diwenehi, bakal disebut karo thisreferensi disetel kanggo unsur sing tooltip ditempelake.

pemicu senar 'fokus fokus' Carane tooltip dipicu - klik | nglayang | fokus | manual. Sampeyan bisa ngliwati sawetara pemicu; misahake karo spasi. manualora bisa digabungake karo pemicu liyane.
viewport senar | obyek | fungsi { pemilih: 'awak', padding: 0 }

Njaga tooltip ing wates unsur iki. Tuladha: viewport: '#viewport'utawa{ "selector": "#viewport", "padding": 0 }

Yen fungsi diwenehi, diarani karo unsur pemicu DOM node minangka argumen mung. Konteks thisdisetel menyang conto tooltip.

Atribut data kanggo tooltip individu

Pilihan kanggo tooltip individu bisa uga ditemtokake liwat nggunakake atribut data, kaya sing diterangake ing ndhuwur.

Metode

$().tooltip(options)

Nempelake panangan tooltip menyang koleksi unsur.

.tooltip('show')

Nuduhake tooltip unsur. Bali menyang panelpon sadurunge tooltip wis bener ditampilake (yaiku sadurunge shown.bs.tooltipacara kedaden). Iki dianggep minangka "manual" pemicu tooltip. Tooltips karo judhul nol-dawa ora tau ditampilake.

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

.tooltip('hide')

Ndhelikake tooltip unsur. Bali menyang panelpon sadurunge tooltip bener-bener didhelikake (yaiku sadurunge hidden.bs.tooltipkedadeyan kasebut). Iki dianggep minangka "manual" pemicu tooltip.

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

.tooltip('toggle')

Ngalih tooltip unsur. Bali menyang panelpon sadurunge tooltip wis bener ditampilake utawa didhelikake (yaiku sadurunge acara shown.bs.tooltiputawa hidden.bs.tooltipkedadeyan). Iki dianggep minangka "manual" pemicu tooltip.

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

.tooltip('destroy')

Ndhelikake lan ngrusak tooltip unsur. Tooltips sing nggunakake delegasi (sing digawe nggunakake pilihanselector ) ora bisa dirusak individu ing unsur pemicu turunan.

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

Acara

Jinis Acara Katrangan
show.bs.tooltip Acara iki langsung murub nalika showmetode conto diarani.
ditampilake.bs.tooltip Acara iki dipecat nalika tooltip wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung).
hide.bs.tooltip Acara iki langsung dipecat nalika hidemetode conto wis diarani.
hidden.bs.tooltip Acara iki dipecat nalika tooltip wis rampung didhelikake saka pangguna (bakal ngenteni transisi CSS rampung).
inserted.bs.tooltip Acara iki dipecat sawise show.bs.tooltipacara nalika cithakan tooltip wis ditambahake menyang DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Tambah isi overlay cilik, kaya sing ana ing iPad, menyang unsur apa wae kanggo ngemot informasi sekunder.

Popover sing judhul lan isine nol-dawa ora bakal ditampilake.

Ketergantungan plugin

Popovers mbutuhake plugin tooltip dilebokake ing versi Bootstrap sampeyan.

Fungsi opt-in

Kanggo alasan kinerja, Tooltip lan Popover data-apis milih, tegese sampeyan kudu miwiti dhewe .

Salah siji cara kanggo miwiti kabeh popovers ing kaca yaiku milih kanthi data-toggleatribut:

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

Popovers ing kelompok tombol, kelompok input, lan tabel mbutuhake setelan khusus

Nalika nggunakake popovers ing unsur ing a .btn-grouputawa .input-group, utawa ing unsur sing gegandhengan karo tabel ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), sampeyan kudu nemtokake pilihan kasebut container: 'body'(didokumentasikan ing ngisor iki) kanggo ngindhari efek samping sing ora dikarepake (kayata unsur sing luwih akeh lan / utawa ilang sudhut sing dibunderaké nalika popover dipicu).

Aja nyoba nuduhake popovers ing unsur sing didhelikake

Njaluk $(...).popover('show')nalika unsur target display: none;bakal nyebabake popover salah dipanggonke.

Popovers ing unsur dipatèni mbutuhake unsur wrapper

Kanggo nambah popover menyang disabledutawa .disabledunsur, sijine unsur ing a <div>lan aplikasi popover kanggo <div>tinimbang.

pranala multi-line

Kadhangkala sampeyan pengin nambah popover menyang hyperlink sing mbungkus pirang-pirang baris. Prilaku standar saka plugin popover yaiku pusate kanthi horisontal lan vertikal. Tambah white-space: nowrap;menyang jangkar kanggo ngindhari iki.

Tuladha

Pandhuan statis

Papat opsi kasedhiya: ndhuwur, tengen, ngisor, lan kiwa didadekake siji.

Puncak Popover

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

Popover tengen

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

Popover ngisor

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

Popover ninggalake

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

demo langsung

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

Papat arah

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

Mbusak ing klik sabanjuré

Gunakake focuspemicu kanggo ngilangi popovers ing klik sabanjure sing digawe pangguna.

Markup khusus dibutuhake kanggo ngilangi-on-next-click

Kanggo prilaku lintas-browser lan lintas-platform sing tepat, sampeyan kudu nggunakake <a>tag, dudu tag <button>, lan sampeyan uga kudu nyakup atribut role="button"lan .tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Panganggone

Aktifake popovers liwat JavaScript:

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

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-animation="".

jeneng Jinis Default Katrangan
animasi boolean bener Aplikasi transisi fade CSS menyang popover
wadhah senar | palsu palsu

Nambahake popover menyang unsur tartamtu. Tuladha: container: 'body'. Opsi iki migunani banget amarga ngidini sampeyan nyetel popover ing aliran dokumen ing cedhak unsur pemicu - sing bakal nyegah popover saka ngambang saka unsur pemicu nalika ngowahi ukuran jendhela.

isi senar | fungsi ''

Nilai isi standar yen data-contentatribut ora ana.

Yen fungsi diwenehi, iku bakal disebut karo thisreferensi disetel kanggo unsur sing popover ditempelake.

tundha nomer | obyek 0

Tundha nuduhake lan ndhelikake popover (ms) - ora ditrapake kanggo jinis pemicu manual

Yen nomer diwenehake, wektu tundha ditrapake kanggo ndhelikake / nuduhake

Struktur obyek yaiku:delay: { "show": 500, "hide": 100 }

html boolean palsu Lebokake HTML menyang popover. Yen salah, cara jQuery textbakal digunakake kanggo nglebokake isi menyang DOM. Gunakake teks yen sampeyan kuwatir babagan serangan XSS.
panggonan panggonan senar | fungsi 'bener'

Carane posisi popover - ndhuwur | ngisor | kiwa | tengen | otomatis.
Nalika "otomatis" kasebut, bakal mbosenke reorient popover. Contone, yen panggonan seko "otomatis ngiwa", popover bakal ditampilake ing sisih kiwa yen bisa, yen ora bakal ditampilake tengen.

Nalika fungsi digunakake kanggo nemtokake panggonan seko, diarani simpul DOM popover minangka argumen pisanan lan unsur pemicu DOM node minangka kaloro. Konteks thisdisetel menyang conto popover.

pamilih senar palsu Yen pamilih diwenehake, obyek popover bakal didelegasikan menyang target sing ditemtokake. Ing laku, iki digunakake kanggo ngaktifake isi HTML dinamis kanggo nambah popovers. Waca iki lan conto informatif .
cithakan senar '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

HTML dhasar kanggo digunakake nalika nggawe popover.

Popover titlebakal disuntikake menyang .popover-title.

Popover contentbakal disuntikake menyang .popover-content.

.arrowbakal dadi panah popover.

Unsur pambungkus paling njaba kudu duwe .popoverkelas.

judhul senar | fungsi ''

Nilai judhul standar yen titleatribut ora ana.

Yen fungsi diwenehi, iku bakal disebut karo thisreferensi disetel kanggo unsur sing popover ditempelake.

pemicu senar 'klik' Carane popover dipicu - klik | nglayang | fokus | manual. Sampeyan bisa ngliwati sawetara pemicu; misahake karo spasi. manualora bisa digabungake karo pemicu liyane.
viewport senar | obyek | fungsi { pemilih: 'awak', padding: 0 }

Njaga popover ing wates unsur iki. Tuladha: viewport: '#viewport'utawa{ "selector": "#viewport", "padding": 0 }

Yen fungsi diwenehi, diarani karo unsur pemicu DOM node minangka argumen mung. Konteks thisdisetel menyang conto popover.

Atribut data kanggo popovers individu

Pilihan kanggo popovers individu bisa uga ditemtokake liwat nggunakake atribut data, kaya sing diterangake ing ndhuwur.

Metode

$().popover(options)

Inisialisasi popovers kanggo koleksi unsur.

.popover('show')

Nuduhake popover unsur. Bali menyang panelpon sadurunge popover wis bener ditampilake (yaiku sadurunge shown.bs.popoveracara kedaden). Iki dianggep minangka pemicu "manual" saka popover. Popover sing judhul lan isine nol-dawa ora bakal ditampilake.

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

.popover('hide')

Ndhelikake popover unsur. Bali menyang panelpon sadurunge popover bener-bener didhelikake (yaiku sadurunge hidden.bs.popoverkedadeyan kasebut). Iki dianggep minangka pemicu "manual" saka popover.

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

.popover('toggle')

Ngalih popover unsur. Bali menyang panelpon sadurunge popover wis bener ditampilake utawa didhelikake (yaiku sadurunge acara shown.bs.popoverutawa hidden.bs.popoverkedadeyan). Iki dianggep minangka pemicu "manual" saka popover.

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

.popover('destroy')

Ndhelikake lan ngrusak popover unsur. Popovers sing nggunakake delegasi (sing digawe nggunakake pilihanselector ) ora bisa dirusak individu ing unsur pemicu turunan.

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

Acara

Jinis Acara Katrangan
show.bs.popover Acara iki langsung murub nalika showmetode conto diarani.
ditampilake.bs.popover Acara iki dipecat nalika popover wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung).
hide.bs.popover Acara iki langsung dipecat nalika hidemetode conto wis diarani.
hidden.bs.popover Acara iki dipecat nalika popover wis rampung didhelikake saka pangguna (bakal ngenteni transisi CSS rampung).
inserted.bs.popover Acara iki dipecat sawise show.bs.popoveracara nalika cithakan popover wis ditambahake menyang DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Pesen tandha alert.js

Tuladha tandha

Tambah fungsi ngilangi kabeh pesen tandha karo plugin iki.

Nalika nggunakake .closetombol, iku kudu anak pisanan .alert-dismissiblelan ora ana isi teks bisa teka sadurunge ing markup.

Panganggone

Cukup tambahake data-dismiss="alert"tombol cedhak sampeyan kanthi otomatis menehi fungsi cedhak tandha. Nutup tandha mbusak saka DOM.

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

Supaya tandha nggunakake animasi nalika nutup, priksa manawa padha duwe .fadelan.in kelas kasebut wis ditrapake.

Metode

$().alert()

Ndadekake tandha ngrungokake acara klik ing unsur turunan sing nduweni data-dismiss="alert"atribut. (Ora perlu nalika nggunakake inisialisasi otomatis data-api.)

$().alert('close')

Nutup tandha kanthi nyopot saka DOM. Yen kelas .fadelan .inana ing unsur kasebut, tandha bakal ilang sadurunge dibusak.

Acara

Plugin tandha Bootstrap nyedhiyakake sawetara acara kanggo nyambungake fungsi tandha.

Jinis Acara Katrangan
close.bs.waspada Acara iki langsung murub nalika closemetode conto diarani.
closed.bs.waspada Acara iki dipecat nalika tandha wis ditutup (bakal ngenteni transisi CSS rampung).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Tombol tombol.js

Apa liyane karo tombol. Tombol kontrol nyatakake utawa nggawe klompok tombol kanggo komponen liyane kaya toolbar.

Kompatibilitas lintas-browser

Firefox tetep status kontrol formulir (cacat lan checkedness) liwat kaca mbukak . Solusi kanggo iki yaiku nggunakake autocomplete="off". Waca bug Mozilla #654072 .

Stateful

Tambah data-loading-text="Loading..."kanggo nggunakake negara loading ing tombol.

Fitur iki ora digunakake wiwit v3.3.5 lan wis dibusak ing v4.

Gunakake negara sing sampeyan seneng!

Kanggo demonstrasi iki, kita nggunakake data-loading-textlan $().button('loading'), nanging ora mung negara sing bisa digunakake. Waca liyane babagan iki ing ngisor iki ing $().button(string)dokumentasi .

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

Ngalih tunggal

Tambah data-toggle="button"kanggo ngaktifake toggling ing tombol siji.

Butuh tombol sing wis diowahi.active lanaria-pressed="true"

Kanggo tombol sing wis diowahi, sampeyan kudu nambah .activekelas lan aria-pressed="true"atribut menyang buttondhewe.

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

kothak centhang / Radio

Tambah data-toggle="buttons"menyang .btn-groupkothak centhang utawa input radio sing ngemot kanggo ngaktifake pilihan ing gaya masing-masing.

Opsi preselected perlu.active

Kanggo pilihan sing wis dipilih, sampeyan kudu nambah .activekelas menyang input labeldhewe.

Status sing dicenthang visual mung dianyari ing klik

Yen negara dicenthang saka tombol kothak dianyari tanpa murub clickacara ing tombol (contone liwat <input type="reset">utawa liwat nyetel checkedproperti saka input), sampeyan kudu ngalih .activekelas ing input labeldhewe.

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

Metode

$().button('toggle')

Ngalih status push. Menehi tombol katon sing wis diaktifake.

$().button('reset')

Reset status tombol - ngganti teks menyang teks asli. Cara iki ora sinkron lan bali sadurunge ngreset wis rampung.

$().button(string)

Ganti teks menyang status teks sing ditemtokake data.

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

Ambruk ambruk.js

Plugin fleksibel sing nggunakake sawetara kelas kanggo prilaku sing gampang.

Ketergantungan plugin

Runtuh mbutuhake plugin transisi kanggo kalebu ing versi Bootstrap sampeyan.

Tuladha

Klik tombol ing ngisor iki kanggo nuduhake lan ndhelikake unsur liyane liwat owah-owahan kelas:

  • .collapsendhelikake isi
  • .collapsingditrapake sajrone transisi
  • .collapse.innuduhake isi

Sampeyan bisa nggunakake link karo hrefatribut, utawa tombol karo data-targetatribut. Ing kasus loro, data-toggle="collapse"iku perlu.

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>

Tuladha akordion

Ngluwihi prilaku ambruk standar kanggo nggawe akordion karo komponen panel.

Anim pariatur cliche reprehenderit, enim eiusmod dhuwur urip accusamus terry richardson ad cumi. 3 wolf rembulan officia aute, non cupidatat skateboard dolor brunch. Truk pangan quinoa nesciunt laborum eiusmod. Brunch 3 wolf rembulan temporer, sunt aliqua sijine manuk ing iku cumi siji-asal kopi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan kajaba tukang daging vice lomo. Legging occaecat kerajinan bir farm-to-table, denim mentahan estetika synth nesciunt sampeyan mbokmenawa durung krungu saka wong accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod dhuwur urip accusamus terry richardson ad cumi. 3 wolf rembulan officia aute, non cupidatat skateboard dolor brunch. Truk pangan quinoa nesciunt laborum eiusmod. Brunch 3 wolf rembulan temporer, sunt aliqua sijine manuk ing iku cumi siji-asal kopi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan kajaba tukang daging vice lomo. Legging occaecat kerajinan bir farm-to-table, denim mentahan estetika synth nesciunt sampeyan mbokmenawa durung krungu saka wong accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod dhuwur urip accusamus terry richardson ad cumi. 3 wolf rembulan officia aute, non cupidatat skateboard dolor brunch. Truk pangan quinoa nesciunt laborum eiusmod. Brunch 3 wolf rembulan temporer, sunt aliqua sijine manuk ing iku cumi siji-asal kopi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan kajaba tukang daging vice lomo. Legging occaecat kerajinan bir farm-to-table, denim mentahan estetika synth nesciunt sampeyan mbokmenawa durung krungu saka wong 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>

Sampeyan uga bisa ngganti .panel-bodys karo .list-groups.

  • Bootply
  • Siji itmus ac facilin
  • Eros kapindho

Nggawe kontrol expand/collapse bisa diakses

Dadi manawa kanggo nambah aria-expandedmenyang unsur kontrol. Atribut iki kanthi jelas nemtokake kahanan saiki unsur sing bisa dilipat kanggo maca layar lan teknologi bantuan sing padha. Yen unsur collapsible ditutup minangka standar, iku kudu duwe nilai aria-expanded="false". Yen sampeyan wis nyetel unsur collapsible mbukak minangka standar nggunakake inkelas, nyetel aria-expanded="true"ing kontrol tinimbang. Plugin bakal kanthi otomatis ngalih atribut iki adhedhasar apa unsur sing bisa dilipat wis dibukak utawa ditutup.

Kajaba iku, yen unsur kontrol sampeyan nargetake unsur sing bisa dilipat - yaiku data-targetatribut kasebut ngarah menyang idpamilih - sampeyan bisa nambah atribut tambahan aria-controlsmenyang unsur kontrol, sing ngemot idunsur sing bisa dilipat. Pembaca layar modern lan teknologi bantu sing padha nggunakake atribut iki kanggo nyedhiyakake trabasan tambahan kanggo pangguna kanggo navigasi langsung menyang unsur sing bisa dilipat.

Panganggone

Plugin ambruk nggunakake sawetara kelas kanggo nangani ngangkat abot:

  • .collapsendhelikake isi
  • .collapse.innuduhake isi
  • .collapsingditambahake nalika transisi diwiwiti, lan dibusak nalika rampung

Kelas kasebut bisa ditemokake ing component-animations.less.

Liwat atribut data

Mung nambah data-toggle="collapse"lan data-targetmenyang unsur kanggo otomatis nemtokake kontrol saka unsur collapsible. Atribut data-targetnampa pamilih CSS kanggo aplikasi ambruk kanggo. Dadi manawa kanggo nambah kelas collapsemenyang unsur collapsible. Yen sampeyan pengin mbukak standar, tambahake kelas tambahan in.

Kanggo nambah manajemen grup kaya akordion menyang kontrol sing bisa dilipat, tambahake atribut data data-parent="#selector". Deleng demo kanggo ndeleng iki ing tumindak.

Liwat JavaScript

Aktifake kanthi manual kanthi:

$('.collapse').collapse()

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-parent="".

jeneng jinis gawan katrangan
wong tuwa pamilih palsu Yen pamilih diwenehake, kabeh unsur sing bisa dilipat ing sangisore wong tuwa sing ditemtokake bakal ditutup nalika item sing bisa dilipat iki ditampilake. (padha karo prilaku akordion tradisional - iki gumantung ing panelkelas)
ngalih boolean bener Ngalih unsur collapsible ing invocation

Metode

.collapse(options)

Ngaktifake konten sampeyan minangka unsur sing bisa dilipat. Nampa opsi opsional object.

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

.collapse('toggle')

Ngalih unsur sing bisa dilipat dadi ditampilake utawa didhelikake. Bali menyang panelpon sadurunge unsur collapsible wis bener ditampilake utawa didhelikake (yaiku sadurunge shown.bs.collapseutawa hidden.bs.collapseacara dumadi).

.collapse('show')

Nuduhake unsur collapsible. Bali menyang panelpon sadurunge unsur collapsible wis bener ditampilake (ie sadurunge shown.bs.collapseacara kedaden).

.collapse('hide')

Ndhelikake unsur collapsible. Bali menyang panelpon sadurunge unsur collapsible wis bener didhelikake (yaiku sadurunge hidden.bs.collapseacara kedaden).

Acara

Kelas ambruk Bootstrap nyedhiyakake sawetara acara kanggo nyambungake fungsi ambruk.

Jinis Acara Katrangan
show.bs.ambruk Acara iki langsung murub nalika showmetode conto diarani.
ditampilake.bs.ambruk Acara iki dipecat nalika unsur ambruk wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung).
hide.bs.ambruk Acara iki langsung dipecat nalika hidemetode kasebut diarani.
didhelikake.bs.ambruk Acara iki dipecat nalika unsur ambruk wis didhelikake saka pangguna (bakal ngenteni transisi CSS rampung).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Komponen slideshow kanggo muter liwat unsur, kaya carousel. Carousel nested ora didhukung.

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

Caption opsional

Tambah katrangan menyang slide kanthi gampang karo .carousel-captionunsur ing sembarang .item. Selehake meh wae HTML opsional ing kana lan bakal didadekake siji lan diformat kanthi otomatis.

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

Multiple carousels

Carousel mbutuhake panggunaan idwadhah paling njaba (ing .carousel) supaya kontrol carousel bisa digunakake kanthi bener. Nalika nambahake pirang-pirang carousel, utawa nalika ngganti carousel id, manawa kanggo nganyari kontrol sing cocog.

Liwat atribut data

Gunakake atribut data kanggo gampang ngontrol posisi carousel. data-slidenampa tembung kunci prevutawa next, sing ngowahi posisi geser relatif marang posisi saiki. Utawa, gunakake data-slide-tokanggo ngirim indeks geser mentah menyang carousel data-slide-to="2", sing ngganti posisi geser menyang indeks tartamtu sing diwiwiti karo 0.

Atribut data-ride="carousel"digunakake kanggo menehi tandha carousel minangka animasi wiwit mbukak kaca. Ora bisa digunakake kanthi kombinasi karo (keluwih lan ora perlu) inisialisasi JavaScript eksplisit saka carousel sing padha.

Liwat JavaScript

Telpon carousel kanthi manual nganggo:

$('.carousel').carousel()

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-interval="".

jeneng jinis gawan katrangan
interval nomer 5000 Jumlah wektu tundha antarane muter kanthi otomatis item. Yen palsu, carousel ora bakal otomatis siklus.
ngaso senar | null "ngalih" Yen disetel menyang "hover", ngaso muter carousel mouseenterlan nerusake muter carousel ing mouseleave. Yen disetel menyang null, nglayang ing carousel ora bakal ngaso.
mbungkus boolean bener Apa carousel kudu muter terus-terusan utawa kudu mandheg.
papan ketik boolean bener Apa carousel kudu nanggepi acara keyboard.

Miwiti carousel kanthi opsi opsional objectlan miwiti muter item.

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

Siklus liwat item carousel saka kiwa menyang tengen.

Mungkasi carousel saka muter liwat item.

Siklus carousel menyang pigura tartamtu (basis 0, padha karo array).

Siklus menyang item sadurunge.

Siklus menyang item sabanjure.

Kelas carousel Bootstrap nyedhiyakake rong acara kanggo nyambungake karo fungsi carousel.

Kaloro acara kasebut duwe properti tambahan ing ngisor iki:

  • direction: Arah ing ngendi carousel ngusapake (salah siji "left"utawa "right").
  • relatedTarget: Unsur DOM sing lagi diluncurake minangka item aktif.

Kabeh acara carousel dipecat ing carousel dhewe (yaiku ing <div class="carousel">).

Jinis Acara Katrangan
slide.bs.carousel Acara iki langsung murub nalika slidemetode conto dijaluk.
slid.bs.carousel Acara iki dipecat nalika carousel wis rampung transisi geser.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Afiks.js _

Tuladha

Plugin afiks position: fixed;mateni lan mateni, niru efek sing ditemokake karo position: sticky;. Subnavigasi ing sisih tengen minangka demo langsung saka plugin affix.


Panganggone

Gunakake plugin affix liwat atribut data utawa kanthi manual nganggo JavaScript sampeyan dhewe. Ing loro kahanan, sampeyan kudu nyedhiyani CSS kanggo posisi lan jembaré isi ditempelake.

Cathetan: Aja nggunakake plugin afiks ing unsur sing ana ing unsur sing posisine relatif, kayata kolom sing ditarik utawa didorong, amarga ana bug rendering Safari .

Positioning liwat CSS

Plugin afiks malih antarane telung kelas, saben makili negara tartamtu: .affix, .affix-top, lan .affix-bottom. Sampeyan kudu menehi gaya, kajaba position: fixed;on .affix, kanggo kelas kasebut dhewe (mandiri saka plugin iki) kanggo nangani posisi sing nyata.

Mangkene cara kerjane plugin affix:

  1. Kanggo miwiti, plugin nambah .affix-topkanggo nunjukake unsur kasebut ing posisi paling dhuwur. Ing titik iki ora perlu posisi CSS.
  2. Nggulung liwat unsur sing pengin ditempelake kudu micu affixing nyata. Iki ngendi .affixngganti .affix-toplan nyetel position: fixed;(disedhiyakake dening Bootstrap kang CSS).
  3. Yen offset ngisor ditetepake, nggulung kudu diganti .affixkaro .affix-bottom. Wiwit offset opsional, nyetel siji mbutuhake sampeyan nyetel CSS sing cocog. Ing kasus iki, nambah position: absolute;yen perlu. Plugin kasebut nggunakake atribut data utawa pilihan JavaScript kanggo nemtokake lokasi unsur kasebut saka kana.

Tindakake langkah ing ndhuwur kanggo nyetel CSS kanggo salah siji opsi panggunaan ing ngisor iki.

Liwat atribut data

Kanggo gampang nambah prilaku afiks kanggo unsur sembarang, mung nambah data-spy="affix"menyang unsur sing pengin Spy. Gunakake offset kanggo nemtokake kapan kanggo milih pinning unsur.

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

Liwat JavaScript

Nelpon plugin affix liwat JavaScript:

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

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-offset-top="200".

jeneng jinis gawan katrangan
ngimbangi nomer | fungsi | obyek 10 Piksel kanggo ngimbangi saka layar nalika ngitung posisi gulung. Yen nomer siji diwenehake, offset bakal ditrapake ing arah ndhuwur lan ngisor. Kanggo nyedhiyani unik, ngisor lan ndhuwur offset mung nyedhiyani obyek offset: { top: 10 }utawa offset: { top: 10, bottom: 5 }. Gunakake fungsi nalika sampeyan kudu ngetung offset kanthi dinamis.
target pamilih | simpul | unsur jQuery obyek windowkasebut Nemtokake unsur target afiks.

Metode

.affix(options)

Ngaktifake konten sampeyan minangka konten sing ditempelake. Nampa opsi opsional object.

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

.affix('checkPosition')

Ngetung maneh kahanan afiks adhedhasar dimensi, posisi, lan posisi gulung saka unsur sing cocog. Kelas .affix, .affix-top, lan .affix-bottomkelas ditambahake utawa dibusak saka isi sing ditempelake miturut negara anyar. Cara iki kudu diarani kapan wae dimensi isi sing ditempelake utawa unsur target diganti, kanggo mesthekake posisi sing bener saka isi sing ditempelake.

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

Acara

Plugin afiks Bootstrap nyedhiyakake sawetara acara kanggo nyambungake fungsi afiks.

Jinis Acara Katrangan
afiks.bs.afiks Acara iki langsung murub sadurunge unsur ditempelake.
affixed.bs.afiks Acara iki dipecat sawise unsur wis ditempelake.
afiks-top.bs.afiks Acara iki langsung murub sadurunge unsur ditempelake ing ndhuwur.
affixed-top.bs.affix Acara iki dipecat sawise unsur wis ditempelake-top.
affix-bottom.bs.affix Acara iki langsung murub sadurunge unsur ditempelake-ngisor.
affixed-bottom.bs.affix Acara iki dipecat sawise unsur wis ditempelake-ngisor.