Ringkesan

Individu utawa kompilasi

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

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

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.

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.

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>

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

Maneka warna isi modal adhedhasar tombol pemicu

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,

<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="".

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

Metode

.modal(options)

Ngaktifake konten sampeyan minangka modal. Nampa opsi opsional object.

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

.modal('toggle')

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

.modal('show')

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

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

.modal('hide')

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

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

.modal('handleUpdate')

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">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Tuladha

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

Ing navbar

Ing pil

Panganggone

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

Pilihan

ora ana

Metode

$().dropdown('toggle')

Ngalih menu gulung mudhun saka navbar utawa pandhu arah tab.

Acara

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

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

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

Panganggone

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="".

Acara

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

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.

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

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>

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

Pilihan

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

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

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

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

Tuladha

Pandhuan statis

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

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.

<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="".

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

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

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

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.

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

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

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

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.

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

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

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="".

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.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

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

Tuladha

Sadurunge Sabanjure

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

Label geser pisanan

Nulla vitae elit libero, a pharetra augue mollis interdum.

Label geser kapindho

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Label geser katelu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Sadurunge Sabanjure

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

Panganggone

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

Pilihan

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

Metode

.carousel(options)

Miwiti carousel kanthi opsi opsional objectlan miwiti muter item.

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

.carousel('cycle')

Siklus liwat item carousel saka kiwa menyang tengen.

.carousel('pause')

Mungkasi carousel saka muter liwat item.

.carousel(number)

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

.carousel('prev')

Siklus menyang item sadurunge.

.carousel('next')

Siklus menyang item sabanjure.

Acara

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">).

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

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.