Ringkasan

Individu atau dikompilasi

Plugin dapat dimasukkan satu per satu (menggunakan *.jsfile individual Bootstrap), atau sekaligus (menggunakan bootstrap.jsatau minified bootstrap.min.js).

Atribut data

Anda dapat menggunakan semua plugin Bootstrap murni melalui API markup tanpa menulis satu baris JavaScript. Ini adalah API kelas satu Bootstrap dan harus menjadi pertimbangan pertama Anda saat menggunakan plugin.

Meskipun demikian, dalam beberapa situasi mungkin diinginkan untuk menonaktifkan fungsi ini. Oleh karena itu, kami juga menyediakan kemampuan untuk menonaktifkan API atribut data dengan melepaskan semua peristiwa pada dokumen yang diberi spasi nama data-api. Ini terlihat seperti ini:

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

Atau, untuk menargetkan plugin tertentu, cukup sertakan nama plugin sebagai namespace bersama dengan namespace data-api seperti ini:

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

API terprogram

Kami juga percaya Anda harus dapat menggunakan semua plugin Bootstrap murni melalui JavaScript API. Semua API publik adalah metode tunggal yang dapat dirantai, dan mengembalikan koleksi yang ditindaklanjuti.

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

Semua metode harus menerima objek opsi opsional, string yang menargetkan metode tertentu, atau tidak sama sekali (yang memulai plugin dengan perilaku default):

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

Setiap plugin juga mengekspos konstruktor mentahnya pada Constructorproperti: $.fn.popover.Constructor. Jika Anda ingin mendapatkan instance plugin tertentu, ambil langsung dari elemen: $('[rel="popover"]').data('popover').

Pengaturan default

Anda dapat mengubah pengaturan default untuk plugin dengan memodifikasi Constructor.DEFAULTSobjek plugin:

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

Tidak ada konflik

Terkadang perlu menggunakan plugin Bootstrap dengan kerangka kerja UI lainnya. Dalam keadaan ini, tabrakan namespace kadang-kadang dapat terjadi. Jika ini terjadi, Anda dapat memanggil .noConflictplugin yang ingin Anda kembalikan nilainya.

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

Acara

Bootstrap menyediakan acara khusus untuk sebagian besar tindakan unik plugin. Umumnya, ini datang dalam bentuk infinitive dan past participle - di mana infinitive (ex. show) dipicu pada awal suatu peristiwa, dan bentuk past participle-nya (ex. shown) dipicu pada penyelesaian suatu tindakan.

Pada 3.0.0, semua acara Bootstrap diberi namespace.

Semua peristiwa infinitif menyediakan preventDefaultfungsionalitas. Ini memberikan kemampuan untuk menghentikan eksekusi suatu tindakan sebelum dimulai.

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

Nomor versi

Versi masing-masing plugin jQuery Bootstrap dapat diakses melalui VERSIONproperti konstruktor plugin. Misalnya, untuk plugin tooltip:

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

Tidak ada fallback khusus saat JavaScript dinonaktifkan

Plugin Bootstrap tidak mundur dengan anggun saat JavaScript dinonaktifkan. Jika Anda peduli dengan pengalaman pengguna dalam kasus ini, gunakan <noscript>untuk menjelaskan situasinya (dan cara mengaktifkan kembali JavaScript) kepada pengguna Anda, dan/atau menambahkan fallback khusus Anda sendiri.

Transisi transisi.js

Tentang transisi

Untuk efek transisi sederhana, sertakan transition.jssekali di samping file JS lainnya. Jika Anda menggunakan yang dikompilasi (atau diperkecil) bootstrap.js, tidak perlu menyertakan ini—ini sudah ada di sana.

Apa yang ada di dalam?

Transition.js adalah pembantu dasar untuk transitionEndacara serta emulator transisi CSS. Ini digunakan oleh plugin lain untuk memeriksa dukungan transisi CSS dan untuk menangkap transisi yang menggantung.

Menonaktifkan transisi

Transisi dapat dinonaktifkan secara global menggunakan cuplikan JavaScript berikut, yang harus muncul setelah transition.js(atau bootstrap.jsatau bootstrap.min.js, sesuai kasusnya) dimuat:

$.support.transition = false

Modals modal.js

Modals disederhanakan, tetapi fleksibel, permintaan dialog dengan fungsionalitas minimum yang diperlukan dan default cerdas.

Karena bagaimana HTML5 mendefinisikan semantiknya, autofocusatribut HTML tidak berpengaruh pada modals Bootstrap. Untuk mencapai efek yang sama, gunakan beberapa JavaScript khusus:

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

Contoh

Contoh statis

Modal yang dirender dengan header, body, dan set tindakan di 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

Alihkan modal melalui JavaScript dengan mengklik tombol di bawah ini. Ini akan meluncur ke bawah dan memudar dari bagian atas halaman.

<!-- 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 memiliki dua ukuran opsional, tersedia melalui kelas pengubah untuk ditempatkan pada file .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>

Hapus animasi

Untuk modals yang hanya muncul daripada menghilang untuk dilihat, hapus .fadekelas dari markup modal Anda.

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

Menggunakan sistem grid

Untuk memanfaatkan sistem grid Bootstrap dalam modal, cukup bersarang .rows di dalam .modal-bodydan kemudian gunakan kelas sistem grid 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 -->

Memvariasikan konten modal berdasarkan tombol pemicu

Punya banyak tombol yang semuanya memicu modal yang sama, hanya dengan konten yang sedikit berbeda? Gunakan event.relatedTargetdan atribut HTMLdata-* (mungkin melalui jQuery ) untuk memvariasikan konten modal tergantung pada tombol mana yang diklik. Lihat dokumen Modal Events untuk detail tentang 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)
})

Penggunaan

Plugin modal mengaktifkan konten tersembunyi Anda sesuai permintaan, melalui atribut data atau JavaScript. Itu juga menambah .modal-openuntuk <body>menimpa perilaku pengguliran default dan menghasilkan a .modal-backdropuntuk menyediakan area klik untuk mengabaikan modal yang ditampilkan saat mengklik di luar modal.

Melalui atribut data

Aktifkan modal tanpa menulis JavaScript. Setel data-toggle="modal"pada elemen pengontrol, seperti tombol, bersama dengan a data-target="#foo"atau href="#foo"untuk menargetkan modal tertentu untuk beralih.

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

Melalui JavaScript

Panggil modal dengan id myModaldengan satu baris JavaScript:

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

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-backdrop="".

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

Metode

.modal(options)

Mengaktifkan konten Anda sebagai modal. Menerima opsi opsional object.

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

.modal('toggle')

Mengalihkan modal secara manual. Kembali ke pemanggil sebelum modal benar-benar ditampilkan atau disembunyikan (yaitu sebelum shown.bs.modalatau hidden.bs.modalperistiwa terjadi).

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

.modal('show')

Secara manual membuka modal. Kembali ke pemanggil sebelum modal benar-benar ditampilkan (yaitu sebelum shown.bs.modalperistiwa terjadi).

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

.modal('hide')

Secara manual menyembunyikan modal. Kembali ke pemanggil sebelum modal benar-benar disembunyikan (yaitu sebelum hidden.bs.modalperistiwa terjadi).

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

.modal('handleUpdate')

Menyesuaikan kembali posisi modal untuk melawan bilah gulir jika muncul, yang akan membuat modal melompat ke kiri.

Hanya diperlukan ketika ketinggian modal berubah saat terbuka.

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

Acara

Kelas modal Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsionalitas modal.

Semua peristiwa modal dipecat pada modal itu sendiri (yaitu di <div class="modal">).

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

Dropdown dropdown.js

Contoh

Tambahkan menu dropdown ke hampir semua hal dengan plugin sederhana ini, termasuk navbar, tab, dan pills.

Dalam navbar

Dalam pil

Penggunaan

Melalui atribut data atau JavaScript, plugin dropdown mengaktifkan konten tersembunyi (menu dropdown) dengan mengaktifkan .openkelas pada item daftar induk.

Pada perangkat seluler, membuka dropdown menambahkan a .dropdown-backdropsebagai area tap untuk menutup menu dropdown saat mengetuk di luar menu, persyaratan untuk dukungan iOS yang tepat. Ini berarti bahwa beralih dari menu tarik-turun terbuka ke menu tarik-turun yang berbeda memerlukan ketukan ekstra di perangkat seluler.

Catatan: data-toggle="dropdown"Atribut ini diandalkan untuk menutup menu dropdown di level aplikasi, jadi sebaiknya selalu gunakan itu.

Melalui atribut data

Tambahkan data-toggle="dropdown"ke tautan atau tombol untuk mengaktifkan tarik-turun.

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

Untuk menjaga agar URL tetap utuh dengan tombol tautan, gunakan data-targetatribut alih-alih 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>

Melalui JavaScript

Panggil dropdown melalui JavaScript:

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

Pilihan

Tidak ada

Metode

$().dropdown('toggle')

Mengalihkan menu tarik-turun dari bilah navigasi atau navigasi tab tertentu.

Acara

Semua peristiwa dropdown dipicu pada .dropdown-menuelemen induk '.

Semua acara dropdown memiliki relatedTargetproperti, yang nilainya adalah elemen jangkar toggling.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Contoh di navbar

Plugin ScrollSpy adalah untuk memperbarui target navigasi secara otomatis berdasarkan posisi gulir. Gulir area di bawah bilah navigasi dan perhatikan perubahan kelas yang aktif. Sub item dropdown akan disorot juga.

Penggunaan

Membutuhkan posisi relatif

Apa pun metode implementasinya, scrollspy memerlukan penggunaan position: relative;elemen yang Anda mata-matai. Dalam kebanyakan kasus ini adalah <body>. Saat menggulir pada elemen selain <body>, pastikan untuk memiliki satu heightset dan overflow-y: scroll;diterapkan.

Melalui atribut data

Untuk dengan mudah menambahkan perilaku scrollspy ke navigasi bilah atas Anda, tambahkan data-spy="scroll"ke elemen yang ingin Anda mata-matai (biasanya ini adalah <body>). Kemudian tambahkan data-targetatribut dengan ID atau kelas elemen induk dari setiap .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>

Melalui JavaScript

Setelah menambahkan position: relative;CSS Anda, panggil scrollspy melalui JavaScript:

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

Metode

.scrollspy('refresh')

Saat menggunakan scrollspy bersamaan dengan menambahkan atau menghapus elemen dari DOM, Anda harus memanggil metode penyegaran seperti:

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

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-offset="".

Acara

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

tab yang dapat dialihkan tab.js

Contoh tab

Tambahkan fungsionalitas tab yang cepat dan dinamis untuk transisi melalui panel konten lokal, bahkan melalui menu tarik-turun. Tab bersarang tidak didukung.

Penggunaan

Aktifkan tab yang dapat ditabulasi melalui JavaScript (setiap tab harus diaktifkan satu per satu):

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

Anda dapat mengaktifkan tab individual dengan beberapa 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

Anda dapat mengaktifkan navigasi tab atau pil tanpa menulis JavaScript apa pun hanya dengan menentukan data-toggle="tab"atau data-toggle="pill"pada suatu elemen. Menambahkan navdan nav-tabskelas ke tab akan menerapkan gaya tabul Bootstrap , sementara menambahkan kelas dan akan menerapkan 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 memudar

Untuk membuat tab memudar, tambahkan .fadeke masing-masing .tab-pane. Panel tab pertama juga harus .inmembuat konten awal terlihat.

<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

Mengaktifkan elemen tab dan wadah konten. Tab harus memiliki a data-targetatau hrefpenargetan simpul penampung di DOM. Dalam contoh di atas, tab adalah <a>s dengan data-toggle="tab"atribut.

.tab('show')

Memilih tab yang diberikan dan menampilkan konten yang terkait. Tab lain yang sebelumnya dipilih menjadi tidak dipilih dan konten terkaitnya disembunyikan. Kembali ke pemanggil sebelum panel tab benar-benar ditampilkan (yaitu sebelum shown.bs.tabperistiwa terjadi).

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

Acara

Saat menampilkan tab baru, peristiwa diaktifkan dalam urutan berikut:

1. hide.bs.tab(pada tab aktif saat ini)
2. show.bs.tab(pada tab yang akan ditampilkan)
3. hidden.bs.tab(pada tab aktif sebelumnya, sama dengan tab hide.bs.tabacara)
4. shown.bs.tab(pada tab yang baru saja ditampilkan yang baru aktif, yang sama dengan untuk show.bs.tabacara tersebut)

Jika tidak ada tab yang sudah aktif, maka peristiwa hide.bs.taband hidden.bs.tabtidak akan diaktifkan.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Terinspirasi oleh plugin jQuery.tipsy yang luar biasa yang ditulis oleh Jason Frame; Tooltips adalah versi terbaru, yang tidak bergantung pada gambar, menggunakan CSS3 untuk animasi, dan atribut data untuk penyimpanan judul lokal.

Tooltips dengan judul tanpa panjang tidak pernah ditampilkan.

Contoh

Arahkan kursor ke tautan di bawah untuk melihat tooltips:

Keterangan alat statis

Tersedia empat opsi: rata atas, kanan, bawah, dan kiri.

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

Penggunaan

Plugin tooltip menghasilkan konten dan markup sesuai permintaan, dan secara default menempatkan tooltips setelah elemen pemicunya.

Picu tooltip melalui JavaScript:

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

Markup

Markup yang diperlukan untuk tooltip hanyalah dataatribut dan titlepada elemen HTML Anda ingin memiliki tooltip. Markup tooltip yang dihasilkan agak sederhana, meskipun memerlukan posisi (secara default, disetel topoleh 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 dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-animation="".

Metode

$().tooltip(options)

Melampirkan penangan tooltip ke koleksi elemen.

.tooltip('show')

Mengungkapkan tooltip elemen. Kembali ke pemanggil sebelum tooltip benar-benar ditampilkan (yaitu sebelum shown.bs.tooltipevent terjadi). Ini dianggap sebagai pemicu "manual" dari tooltip. Tooltips dengan judul tanpa panjang tidak pernah ditampilkan.

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

.tooltip('hide')

Menyembunyikan tooltip elemen. Kembali ke pemanggil sebelum tooltip benar-benar disembunyikan (yaitu sebelum hidden.bs.tooltipevent terjadi). Ini dianggap sebagai pemicu "manual" dari tooltip.

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

.tooltip('toggle')

Mengalihkan tooltip elemen. Kembali ke pemanggil sebelum tooltip benar-benar ditampilkan atau disembunyikan (yaitu sebelum shown.bs.tooltipatau hidden.bs.tooltipperistiwa terjadi). Ini dianggap sebagai pemicu "manual" dari tooltip.

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

.tooltip('destroy')

Menyembunyikan dan menghancurkan tooltip elemen. Tooltips yang menggunakan delegasi (yang dibuat menggunakan opsi selector) tidak dapat dimusnahkan satu per satu pada elemen pemicu turunan.

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

Acara

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

Popover popover.js

Tambahkan lapisan konten kecil, seperti yang ada di iPad, ke elemen apa pun untuk menampung informasi sekunder.

Popover yang judul dan kontennya nol-panjang tidak pernah ditampilkan.

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

Contoh

Popover statis

Tersedia empat opsi: rata atas, kanan, bawah, dan kiri.

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>

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

Singkirkan pada klik berikutnya

Gunakan focuspemicu untuk menghilangkan popover pada klik berikutnya yang dilakukan pengguna.

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

Penggunaan

Aktifkan popover melalui JavaScript:

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

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-animation="".

Metode

$().popover(options)

Menginisialisasi popover untuk koleksi elemen.

.popover('show')

Mengungkapkan popover elemen. Kembali ke pemanggil sebelum popover benar-benar ditampilkan (yaitu sebelum shown.bs.popoveracara terjadi). Ini dianggap sebagai pemicu "manual" dari popover. Popover yang judul dan kontennya nol-panjang tidak pernah ditampilkan.

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

.popover('hide')

Menyembunyikan popover elemen. Kembali ke pemanggil sebelum popover sebenarnya disembunyikan (yaitu sebelum hidden.bs.popoveracara terjadi). Ini dianggap sebagai pemicu "manual" dari popover.

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

.popover('toggle')

Mengalihkan popover elemen. Kembali ke pemanggil sebelum popover benar-benar ditampilkan atau disembunyikan (yaitu sebelum shown.bs.popoveratau hidden.bs.popoverperistiwa terjadi). Ini dianggap sebagai pemicu "manual" dari popover.

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

.popover('destroy')

Menyembunyikan dan menghancurkan popover elemen. Popover yang menggunakan delegasi (yang dibuat menggunakan opsi selector) tidak dapat dimusnahkan satu per satu pada elemen pemicu turunan.

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

Acara

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

Pesan peringatan alert.js

Contoh peringatan

Tambahkan fungsionalitas abaikan ke semua pesan peringatan dengan plugin ini.

Saat menggunakan .closetombol, itu harus menjadi anak pertama dari .alert-dismissibledan tidak boleh ada konten teks sebelumnya di markup.

Penggunaan

Cukup tambahkan data-dismiss="alert"ke tombol tutup Anda untuk secara otomatis memberikan fungsi tutup peringatan. Menutup lansiran akan menghapusnya dari DOM.

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

Agar lansiran Anda menggunakan animasi saat menutup, pastikan lansiran tersebut memiliki .fadedan.in kelas yang telah diterapkan padanya.

Metode

$().alert()

Membuat peringatan mendengarkan peristiwa klik pada elemen turunan yang memiliki data-dismiss="alert"atribut. (Tidak diperlukan saat menggunakan inisialisasi otomatis data-api.)

$().alert('close')

Menutup lansiran dengan menghapusnya dari DOM. Jika .fadedan .inkelas ada pada elemen, peringatan akan menghilang sebelum dihapus.

Acara

Plugin peringatan Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsi peringatan.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Tombol button.js

Lakukan lebih banyak dengan tombol. Kontrol status tombol atau buat grup tombol untuk lebih banyak komponen seperti bilah alat.

Stateful

Tambahkan data-loading-text="Loading..."untuk menggunakan status pemuatan pada tombol.

Fitur ini tidak digunakan lagi sejak v3.3.5 dan telah dihapus di 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>

Beralih tunggal

Tambahkan data-toggle="button"untuk mengaktifkan toggling pada satu tombol.

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

Kotak centang / Radio

Tambahkan data-toggle="buttons"ke .btn-groupkotak centang yang berisi atau input radio untuk mengaktifkan toggling dalam 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')

Mengalihkan status push. Memberikan tampilan tombol yang telah diaktifkan.

$().button('reset')

Mengatur ulang status tombol - menukar teks ke teks asli. Metode ini tidak sinkron dan kembali sebelum pengaturan ulang benar-benar selesai.

$().button(string)

Menukar teks ke status teks yang ditentukan 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>

Ciutkan runtuh.js

Plugin fleksibel yang menggunakan beberapa kelas untuk perilaku beralih yang mudah.

Contoh

Klik tombol di bawah ini untuk menampilkan dan menyembunyikan elemen lain melalui perubahan kelas:

• .collapsemenyembunyikan konten
• .collapsingditerapkan selama transisi
• .collapse.inmenunjukkan konten

Anda dapat menggunakan tautan dengan hrefatribut, atau tombol dengan data-targetatribut. Dalam kedua kasus, data-toggle="collapse"diperlukan.

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

Contoh akordeon

Perluas perilaku penciutan default untuk membuat akordeon dengan 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>

Dimungkinkan juga untuk menukar .panel-bodys dengan .list-groups.

Penggunaan

Plugin keruntuhan menggunakan beberapa kelas untuk menangani pekerjaan berat:

• .collapsemenyembunyikan isinya
• .collapse.inmenunjukkan isinya
• .collapsingditambahkan saat transisi dimulai, dan dihapus saat transisi selesai

Kelas-kelas ini dapat ditemukan di component-animations.less.

Melalui atribut data

Cukup tambahkan data-toggle="collapse"dan a data-targetke elemen untuk secara otomatis menetapkan kontrol elemen yang dapat dilipat. Atribut data-targetmenerima pemilih CSS untuk menerapkan penciutan. Pastikan untuk menambahkan kelas collapseke elemen yang dapat diciutkan. Jika Anda ingin default terbuka, tambahkan kelas tambahan in.

Untuk menambahkan manajemen grup seperti akordeon ke kontrol yang dapat diciutkan, tambahkan atribut data data-parent="#selector". Lihat demo untuk melihat ini beraksi.

Melalui JavaScript

Aktifkan secara manual dengan:

$('.collapse').collapse()

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-parent="".

Metode

.collapse(options)

Mengaktifkan konten Anda sebagai elemen yang dapat diciutkan. Menerima opsi opsional object.

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

.collapse('toggle')

Mengalihkan elemen yang dapat diciutkan ke ditampilkan atau disembunyikan. Kembali ke pemanggil sebelum elemen yang dapat dilipat benar-benar ditampilkan atau disembunyikan (yaitu sebelum shown.bs.collapseatau hidden.bs.collapseperistiwa terjadi).

.collapse('show')

Menampilkan elemen yang dapat dilipat. Kembali ke pemanggil sebelum elemen yang dapat dilipat benar-benar ditampilkan (yaitu sebelum shown.bs.collapseperistiwa terjadi).

.collapse('hide')

Menyembunyikan elemen yang dapat dilipat. Kembali ke pemanggil sebelum elemen yang dapat diciutkan sebenarnya disembunyikan (yaitu sebelum hidden.bs.collapseperistiwa terjadi).

Acara

Kelas keruntuhan Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsionalitas keruntuhan.

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

Korsel korsel.js

Komponen tayangan slide untuk bersepeda melalui elemen, seperti korsel. Korsel bersarang tidak didukung.

Contoh

Sebelumnya Lanjut

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

Teks opsional

Tambahkan teks ke slide Anda dengan mudah dengan .carousel-captionelemen di dalam file .item. Tempatkan hampir semua HTML opsional di dalamnya dan itu akan secara otomatis disejajarkan dan diformat.

Label slide pertama

Nulla vitae elit libero, sebuah pharetra augue mollis interdum.

Label slide kedua

Lorem ipsum dolor sit amet, conectetur adipiscing elit.

Label slide ketiga

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Sebelumnya Lanjut

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

Penggunaan

Beberapa komidi putar

Carousel memerlukan penggunaan idpada wadah terluar ( .carousel) agar kontrol carousel berfungsi dengan baik. Saat menambahkan beberapa korsel, atau saat mengubah korsel id, pastikan untuk memperbarui kontrol yang relevan.

Melalui atribut data

Gunakan atribut data untuk mengontrol posisi carousel dengan mudah. data-slidemenerima kata kunci prevatau next, yang mengubah posisi slide relatif terhadap posisinya saat ini. Atau, gunakan data-slide-tountuk meneruskan indeks slide mentah ke carousel data-slide-to="2", yang menggeser posisi slide ke indeks tertentu yang diawali dengan 0.

Atribut data-ride="carousel"ini digunakan untuk menandai carousel sebagai animasi mulai dari pemuatan halaman. Itu tidak dapat digunakan dalam kombinasi dengan inisialisasi JavaScript eksplisit (berlebihan dan tidak perlu) dari korsel yang sama.

Melalui JavaScript

Panggil carousel secara manual dengan:

$('.carousel').carousel()

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-interval="".

Metode

.carousel(options)

Menginisialisasi korsel dengan opsi opsional objectdan mulai menelusuri item.

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

.carousel('cycle')

Siklus melalui item korsel dari kiri ke kanan.

.carousel('pause')

Menghentikan korsel dari bersepeda melalui item.

.carousel(number)

Menggerakkan korsel ke bingkai tertentu (berbasis 0, mirip dengan larik).

.carousel('prev')

Siklus ke item sebelumnya.

.carousel('next')

Siklus ke item berikutnya.

Acara

Kelas carousel Bootstrap memperlihatkan dua peristiwa untuk menghubungkan ke fungsionalitas carousel.

Kedua acara memiliki properti tambahan berikut:

• direction: Arah korsel meluncur (salah satu "left"atau "right").
• relatedTarget: Elemen DOM yang sedang digeser ke tempatnya sebagai item aktif.

Semua event carousel dipicu pada carousel itu sendiri (yaitu pada <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Afiks afiks.js

Contoh

Plugin affix position: fixed;mengaktifkan dan menonaktifkan, meniru efek yang ditemukan dengan position: sticky;. Subnavigasi di sebelah kanan adalah demo langsung dari plugin affix.

Penggunaan

Gunakan plugin affix melalui atribut data atau secara manual dengan JavaScript Anda sendiri. Dalam kedua situasi tersebut, Anda harus menyediakan CSS untuk penentuan posisi dan lebar konten yang Anda tempel.

Catatan: Jangan gunakan plugin affix pada elemen yang terdapat dalam elemen yang posisinya relatif, seperti kolom yang ditarik atau didorong, karena bug rendering Safari .

Pemosisian melalui CSS

Plugin affix beralih di antara tiga kelas, masing-masing mewakili status tertentu: .affix, .affix-top, dan .affix-bottom. Anda harus menyediakan gaya, dengan pengecualian position: fixed;on .affix, untuk kelas-kelas ini sendiri (terlepas dari plugin ini) untuk menangani posisi sebenarnya.

Berikut cara kerja plugin affix:

1. Untuk memulai, plugin menambahkan .affix-topuntuk menunjukkan bahwa elemen berada di posisi paling atas. Pada titik ini tidak diperlukan pemosisian CSS.
2. Menggulir melewati elemen yang ingin Anda tempel akan memicu pembubuhan yang sebenarnya. Di sinilah .affixmenggantikan .affix-topdan mengatur position: fixed;(disediakan oleh CSS Bootstrap).
3. Jika offset bawah ditentukan, menggulir melewatinya harus diganti .affixdengan .affix-bottom. Karena offset bersifat opsional, pengaturan satu mengharuskan Anda untuk mengatur CSS yang sesuai. Dalam hal ini, tambahkan position: absolute;bila perlu. Plugin menggunakan atribut data atau opsi JavaScript untuk menentukan di mana memposisikan elemen dari sana.

Ikuti langkah-langkah di atas untuk menyetel CSS Anda untuk salah satu opsi penggunaan di bawah ini.

Melalui atribut data

Untuk menambahkan perilaku afiks dengan mudah ke elemen apa pun, cukup tambahkan data-spy="affix"ke elemen yang ingin Anda intai. Gunakan offset untuk menentukan kapan harus mengaktifkan penyematan elemen.

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

Melalui JavaScript

Panggil plugin affix melalui JavaScript:

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

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-offset-top="200".

Metode

.affix(options)

Mengaktifkan konten Anda sebagai konten yang ditempelkan. Menerima opsi opsional object.

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

.affix('checkPosition')

Menghitung ulang status afiks berdasarkan dimensi, posisi, dan posisi gulir elemen yang relevan. , .affix, .affix-topdan .affix-bottomkelas ditambahkan atau dihapus dari konten yang ditempelkan sesuai dengan status baru. Metode ini perlu dipanggil setiap kali dimensi konten yang ditempelkan atau elemen target diubah, untuk memastikan posisi yang benar dari konten yang ditempelkan.

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

Acara

Plugin affix Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsionalitas affix.