Gambaran keseluruhan

Individu atau disusun

Pemalam boleh disertakan secara individu (menggunakan *.jsfail individu Bootstrap), atau sekaligus (menggunakan bootstrap.jsatau minified bootstrap.min.js).

Atribut data

Anda boleh menggunakan semua pemalam Bootstrap semata-mata melalui API markup tanpa menulis satu baris JavaScript. Ini ialah API kelas pertama Bootstrap dan harus menjadi pertimbangan pertama anda apabila menggunakan pemalam.

Walau bagaimanapun, dalam beberapa situasi mungkin wajar untuk mematikan fungsi ini. Oleh itu, kami juga menyediakan keupayaan untuk melumpuhkan API atribut data dengan menyahjilid semua peristiwa pada ruang nama dokumen dengan data-api. Ini kelihatan seperti ini:

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

Sebagai alternatif, untuk menyasarkan pemalam tertentu, hanya masukkan nama pemalam sebagai ruang nama bersama-sama ruang nama data-api seperti ini:

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

API Programmatik

Kami juga percaya anda sepatutnya boleh menggunakan semua pemalam Bootstrap semata-mata melalui API JavaScript. Semua API awam adalah kaedah tunggal, boleh rantai dan mengembalikan koleksi yang telah diambil tindakan.

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

Semua kaedah harus menerima objek pilihan pilihan, rentetan yang menyasarkan kaedah tertentu, atau tiada apa-apa (yang memulakan pemalam dengan tingkah laku lalai):

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

Setiap pemalam juga mendedahkan pembina mentahnya pada Constructorharta: $.fn.popover.Constructor. Jika anda ingin mendapatkan contoh pemalam tertentu, dapatkannya terus daripada elemen: $('[rel="popover"]').data('popover').

Tetapan lalai

Anda boleh menukar tetapan lalai untuk pemalam dengan mengubah suai Constructor.DEFAULTSobjek pemalam:

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

Tiada konflik

Kadangkala perlu menggunakan pemalam Bootstrap dengan rangka kerja UI yang lain. Dalam keadaan ini, perlanggaran ruang nama kadangkala boleh berlaku. Jika ini berlaku, anda boleh menghubungi .noConflictpemalam 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

Peristiwa

Bootstrap menyediakan acara tersuai untuk kebanyakan tindakan unik pemalam. Secara amnya, ini datang dalam bentuk infinitif dan participle lepas - di mana infinitif (cth. show) dicetuskan pada permulaan acara, dan bentuk participle past (cth. shown) dicetuskan apabila selesai tindakan.

Mulai 3.0.0, semua acara Bootstrap diberi ruang nama.

Semua peristiwa infinitif menyediakan preventDefaultfungsi. Ini memberikan keupayaan untuk menghentikan pelaksanaan tindakan sebelum ia bermula.

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

Sanitizer

Petua alat dan Popovers menggunakan sanitizer terbina dalam kami untuk membersihkan pilihan yang menerima HTML.

Nilai lalai whiteListadalah seperti berikut:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Jika anda ingin menambah nilai baharu pada lalai ini whiteList, anda boleh melakukan perkara berikut:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Jika anda ingin memintas sanitizer kami kerana anda lebih suka menggunakan perpustakaan khusus, contohnya DOMPuify , anda harus melakukan perkara berikut:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

Nombor versi

Versi setiap pemalam jQuery Bootstrap boleh diakses melalui hak VERSIONmilik pembina pemalam. Sebagai contoh, untuk pemalam petua alat:

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

Tiada sandaran khas apabila JavaScript dilumpuhkan

Pemalam Bootstrap tidak akan kembali dengan sangat anggun apabila JavaScript dilumpuhkan. Jika anda mengambil berat tentang pengalaman pengguna dalam kes ini, gunakan <noscript>untuk menerangkan situasi (dan cara mendayakan semula JavaScript) kepada pengguna anda dan/atau menambah sandaran tersuai anda sendiri.

Peralihan peralihan.js

Mengenai peralihan

Untuk kesan peralihan yang mudah, masukkan transition.jssekali bersama fail JS yang lain. Jika anda menggunakan compiled (atau miniified) bootstrap.js, tidak perlu memasukkan ini—ia sudah ada.

Apakah di dalamnya

Transition.js ialah pembantu asas untuk transitionEndacara serta emulator peralihan CSS. Ia digunakan oleh pemalam lain untuk menyemak sokongan peralihan CSS dan untuk menangkap peralihan tergantung.

Melumpuhkan peralihan

Peralihan boleh dilumpuhkan secara global menggunakan coretan JavaScript berikut, yang mesti datang selepas transition.js(atau bootstrap.jsatau bootstrap.min.js, mengikut mana-mana yang berkenaan) dimuatkan:

$.support.transition = false

Modals modal.js

Modal diperkemas, tetapi fleksibel, gesaan dialog dengan fungsi minimum yang diperlukan dan lalai pintar.

Disebabkan cara HTML5 mentakrifkan semantiknya, autofocusatribut HTML tidak mempunyai kesan dalam modals Bootstrap. Untuk mencapai kesan yang sama, gunakan beberapa JavaScript tersuai:

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

Contoh

Contoh statik

Modal yang diberikan dengan pengepala, badan dan set tindakan dalam pengaki.

<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

Togol modal melalui JavaScript dengan mengklik butang di bawah. Ia akan meluncur ke bawah dan pudar masuk dari bahagian 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>

Saiz pilihan

Modal mempunyai dua saiz pilihan, tersedia melalui kelas pengubah suai untuk diletakkan pada .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" 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" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Alih keluar animasi

Untuk modal yang hanya muncul dan bukannya pudar untuk dilihat, alih keluar .fadekelas daripada penanda modal anda.

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

Menggunakan sistem grid

Untuk memanfaatkan sistem grid Bootstrap dalam modal, hanya sarang .rows dalam .modal-bodydan kemudian gunakan kelas sistem grid biasa.

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

Mengubah kandungan modal berdasarkan butang pencetus

Mempunyai sekumpulan butang yang semuanya mencetuskan modal yang sama, hanya dengan kandungan yang sedikit berbeza? Gunakan event.relatedTargetdan atribut HTMLdata-* (mungkin melalui jQuery ) untuk mengubah kandungan modal bergantung pada butang yang diklik. Lihat dokumen Modal Events untuk mendapatkan butiran 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

Pemalam modal menogol kandungan tersembunyi anda atas permintaan, melalui atribut data atau JavaScript. Ia juga menambah .modal-openkepada <body>untuk mengatasi tingkah laku menatal lalai dan menjana .modal-backdropuntuk menyediakan kawasan klik untuk mengetepikan modal yang ditunjukkan apabila mengklik di luar modal.

Melalui atribut data

Aktifkan modal tanpa menulis JavaScript. Tetapkan data-toggle="modal"pada elemen pengawal, seperti butang, bersama-sama dengan data-target="#foo"atau href="#foo"untuk menyasarkan mod tertentu untuk menogol.

<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

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-backdrop="".

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

Kaedah

.modal(options)

Mengaktifkan kandungan anda sebagai modal. Menerima pilihan pilihan object.

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

.modal('toggle')

Togol mod secara manual. Kembali kepada pemanggil sebelum modal sebenarnya telah ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.modalatau hidden.bs.modalperistiwa berlaku).

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

.modal('show')

Membuka modal secara manual. Kembali kepada pemanggil sebelum modal sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.modalperistiwa berlaku).

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

.modal('hide')

Secara manual menyembunyikan modal. Kembali kepada pemanggil sebelum modal sebenarnya telah disembunyikan (iaitu sebelum hidden.bs.modalperistiwa berlaku).

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

.modal('handleUpdate')

Melaraskan semula kedudukan modal untuk menentang bar skrol sekiranya ia muncul, yang akan membuat mod melompat ke kiri.

Hanya diperlukan apabila ketinggian mod berubah semasa ia dibuka.

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

Peristiwa

Kelas modal Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi modal.

Semua peristiwa modal dicetuskan pada modal itu sendiri (iaitu pada <div class="modal">).

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

Dropdown dropdown.js

Contoh

Tambahkan menu lungsur turun pada hampir semua perkara dengan pemalam mudah ini, termasuk bar navigasi, tab dan pil.

Dalam navbar

Dalam pil

Penggunaan

Melalui atribut data atau JavaScript, pemalam lungsur turun menogol kandungan tersembunyi (menu lungsur) dengan menogol .openkelas pada item senarai induk.

Pada peranti mudah alih, membuka menu lungsur menambah .dropdown-backdropsebagai kawasan ketik untuk menutup menu lungsur turun apabila mengetik di luar menu, keperluan untuk sokongan iOS yang betul. Ini bermakna menukar daripada menu lungsur terbuka kepada menu lungsur yang berbeza memerlukan ketik tambahan pada mudah alih.

Nota: data-toggle="dropdown"Atribut ini bergantung kepada untuk menutup menu lungsur turun pada peringkat aplikasi, jadi adalah idea yang baik untuk sentiasa menggunakannya.

Melalui atribut data

Tambahkan data-toggle="dropdown"pada pautan atau butang untuk menogol lungsur 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 memastikan URL kekal dengan butang pautan, gunakan data-targetatribut dan bukannya 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 lungsur turun melalui JavaScript:

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

Pilihan

tiada

Kaedah

$().dropdown('toggle')

Togol menu lungsur turun bar navigasi yang diberikan atau navigasi tab.

Peristiwa

Semua acara lungsur turun dicetuskan pada .dropdown-menuelemen induk '.

Semua acara lungsur turun mempunyai relatedTargetsifat, yang nilainya ialah elemen sauh togol.

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

ScrollSpy scrollspy.js

Contoh dalam navbar

Pemalam ScrollSpy adalah untuk mengemas kini sasaran navigasi secara automatik berdasarkan kedudukan tatal. Tatal kawasan di bawah bar navigasi dan lihat perubahan kelas aktif. Subitem lungsur turun akan diserlahkan juga.

Penggunaan

Memerlukan kedudukan relatif

Tidak kira kaedah pelaksanaan, scrollspy memerlukan penggunaan position: relative;pada elemen yang anda intip. Dalam kebanyakan kes ini adalah <body>. Semasa mengintip elemen selain daripada <body>, pastikan anda mempunyai heightset dan overflow-y: scroll;digunakan.

Melalui atribut data

Untuk menambahkan gelagat scrollspy dengan mudah pada navigasi bar atas anda, tambahkan data-spy="scroll"pada elemen yang anda ingin mengintip (kebiasaannya ini ialah <body>). Kemudian tambahkan data-targetatribut dengan ID atau kelas elemen induk bagi mana-mana .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

Selepas menambah position: relative;dalam CSS anda, hubungi scrollspy melalui JavaScript:

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

Kaedah

.scrollspy('refresh')

Apabila menggunakan scrollspy bersama-sama dengan menambah atau mengalih keluar elemen daripada DOM, anda perlu memanggil kaedah muat semula seperti:

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

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-offset="".

Peristiwa

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

Tab boleh togol tab.js

Contoh tab

Tambahkan kefungsian tab yang pantas dan dinamik untuk beralih melalui anak tetingkap kandungan tempatan, walaupun melalui menu lungsur. Tab bersarang tidak disokong.

Penggunaan

Dayakan tab boleh tab melalui JavaScript (setiap tab perlu diaktifkan secara individu):

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

Anda boleh mengaktifkan tab individu dalam 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)

Penanda

Anda boleh mengaktifkan navigasi tab atau pil tanpa menulis sebarang JavaScript dengan hanya menyatakan data-toggle="tab"atau data-toggle="pill"pada elemen. Menambah kelas navdan nav-tabspada tab akan menggunakan penggayaan tabul Bootstrap , manakala menambah kelas dan akan menggunakan penggayaan 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>

Kesan pudar

Untuk membuat tab pudar, tambahkan .fadepada setiap .tab-pane. Anak tetingkap tab pertama juga mesti perlu .inmembuat kandungan awal kelihatan.

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

Kaedah

$().tab

Mengaktifkan elemen tab dan bekas kandungan. Tab harus mempunyai sama ada data-targetatau hrefmenyasarkan nod bekas dalam DOM. Dalam contoh di atas, tab ialah <a>s dengan data-toggle="tab"atribut.

.tab('show')

Memilih tab yang diberikan dan menunjukkan kandungan yang berkaitan. Mana-mana tab lain yang sebelum ini dipilih menjadi tidak dipilih dan kandungannya yang berkaitan disembunyikan. Kembali kepada pemanggil sebelum anak tetingkap tab sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.tabperistiwa berlaku).

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

Peristiwa

Apabila menunjukkan tab baharu, peristiwa berlaku dalam susunan berikut:

1. hide.bs.tab(pada tab aktif semasa)
2. show.bs.tab(pada tab yang akan ditunjukkan)
3. hidden.bs.tab(pada tab aktif sebelumnya, sama seperti untuk hide.bs.tabacara)
4. shown.bs.tab(pada tab yang baru aktif ditunjukkan, sama seperti untuk show.bs.tabacara itu)

Jika tiada tab sudah aktif, maka acara hide.bs.tabdan hidden.bs.tabtidak akan dicetuskan.

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

Petua alatan tooltip.js

Diilhamkan oleh plugin jQuery.tipsy yang sangat baik yang ditulis oleh Jason Frame; Petua alat ialah versi yang dikemas kini, yang tidak bergantung pada imej, menggunakan CSS3 untuk animasi dan atribut data untuk storan tajuk tempatan.

Petua alat dengan tajuk panjang sifar tidak pernah dipaparkan.

Contoh

Tuding pada pautan di bawah untuk melihat petua alat:

Petua alat statik

Empat pilihan tersedia: dijajar 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

Pemalam petua alat menjana kandungan dan penanda atas permintaan, dan secara lalai meletakkan petua alat selepas elemen pencetusnya.

Cetuskan petua alat melalui JavaScript:

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

Penanda

Penanda yang diperlukan untuk petua alat hanyalah dataatribut dan titlepada elemen HTML anda ingin mempunyai petua alat. Penanda yang dijana bagi petua alat agak mudah, walaupun ia memerlukan kedudukan (secara lalai, ditetapkan topoleh pemalam).

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

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-animation="".

Kaedah

$().tooltip(options)

Melampirkan pengendali petua alat pada koleksi elemen.

.tooltip('show')

Mendedahkan petua alat elemen. Kembali kepada pemanggil sebelum petua alat sebenarnya ditunjukkan (iaitu sebelum shown.bs.tooltipperistiwa berlaku). Ini dianggap sebagai pencetus "manual" petua alat. Petua alat dengan tajuk panjang sifar tidak pernah dipaparkan.

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

.tooltip('hide')

Menyembunyikan petua alat elemen. Kembali kepada pemanggil sebelum petua alat sebenarnya disembunyikan (iaitu sebelum hidden.bs.tooltipperistiwa berlaku). Ini dianggap sebagai pencetus "manual" petua alat.

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

.tooltip('toggle')

Menogol petua alat elemen. Kembali kepada pemanggil sebelum petua alat benar-benar ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.tooltipatau hidden.bs.tooltipperistiwa berlaku). Ini dianggap sebagai pencetus "manual" petua alat.

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

.tooltip('destroy')

Menyembunyikan dan memusnahkan petua alat elemen. Petua alat yang menggunakan perwakilan (yang dibuat menggunakan pilihan ) tidak selectorboleh dimusnahkan secara individu pada elemen pencetus keturunan.

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

Peristiwa

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

Popovers popover.js

Tambahkan tindanan kecil kandungan, seperti yang terdapat pada iPad, pada mana-mana elemen untuk menempatkan maklumat sekunder.

Popover yang kedua-dua tajuk dan kandungannya adalah sifar panjang tidak pernah dipaparkan.

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

Contoh

popover statik

Empat pilihan tersedia: dijajar 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>

Tolak pada klik seterusnya

Gunakan focuspencetus untuk mengetepikan popover pada klik seterusnya yang dibuat 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

Dayakan popovers melalui JavaScript:

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

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-animation="".

Kaedah

$().popover(options)

Memulakan popover untuk koleksi elemen.

.popover('show')

Mendedahkan popover elemen. Kembali kepada pemanggil sebelum popover sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.popoverperistiwa berlaku). Ini dianggap sebagai "manual" pencetus popover. Popover yang kedua-dua tajuk dan kandungannya adalah sifar panjang tidak pernah dipaparkan.

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

.popover('hide')

Menyembunyikan popover elemen. Kembali kepada pemanggil sebelum popover sebenarnya telah disembunyikan (iaitu sebelumhidden.bs.popover peristiwa berlaku). Ini dianggap sebagai "manual" pencetus popover.

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

.popover('toggle')

Menogol popover elemen. Kembali kepada pemanggil sebelum popover sebenarnya telah ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.popoveratau hidden.bs.popoverperistiwa berlaku). Ini dianggap sebagai "manual" pencetus popover.

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

.popover('destroy')

Menyembunyikan dan memusnahkan popover elemen. Popover yang menggunakan perwakilan (yang dibuat menggunakan pilihan ) tidak selectorboleh dimusnahkan secara individu pada elemen pencetus keturunan.

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

Peristiwa

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

Mesej amaran alert.js

Contoh makluman

Tambahkan fungsi tolak pada semua mesej makluman dengan pemalam ini.

Apabila menggunakan .closebutang, ia mestilah anak pertama .alert-dismissibledan tiada kandungan teks boleh datang sebelumnya dalam penanda.

Penggunaan

Cuma tambah data-dismiss="alert"pada butang tutup anda untuk memberikan fungsi tutup amaran secara automatik. Menutup makluman mengalih keluarnya daripada DOM.

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

Untuk membolehkan makluman anda menggunakan animasi semasa menutup, pastikan ia mempunyai kelas .fadedan .intelah digunakan padanya.

Kaedah

$().alert()

Membuat amaran mendengar peristiwa klik pada unsur keturunan yang mempunyai data-dismiss="alert"atribut. (Tidak perlu apabila menggunakan auto-inisialisasi data-api.)

$().alert('close')

Menutup makluman dengan mengalih keluarnya daripada DOM. Jika .fadedan.in hadir pada elemen, amaran akan pudar sebelum ia dialih keluar.

Peristiwa

Pemalam amaran Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi amaran.

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

Butang butang.js

Lakukan lebih banyak dengan butang. Butang kawalan menyatakan atau buat kumpulan butang untuk lebih banyak komponen seperti bar alat.

Stateful

Tambah data-loading-text="Loading..."untuk menggunakan keadaan pemuatan pada butang.

Ciri ini ditamatkan sejak v3.3.5 dan telah dialih keluar dalam v4.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Togol tunggal

Tambah data-toggle="button"untuk mengaktifkan togol pada satu butang.

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

Kotak semak / Radio

Tambahkan data-toggle="buttons"pada .btn-groupkotak pilihan yang mengandungi atau input radio untuk mendayakan togol dalam gaya masing-masing.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Radio 3
  </label>
</div>

Kaedah

$().button('toggle')

Togol keadaan tolak. Memberi butang rupa bahawa ia telah diaktifkan.

$().button('reset')

Menetapkan semula keadaan butang - menukar teks kepada teks asal. Kaedah ini tidak segerak dan kembali sebelum penetapan semula sebenarnya telah selesai.

$().button(string)

Menukar teks kepada mana-mana keadaan teks yang ditentukan data.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Runtuh collapse.js

Pemalam fleksibel yang menggunakan segelintir kelas untuk tingkah laku togol mudah.

Contoh

Klik butang di bawah untuk menunjukkan dan menyembunyikan elemen lain melalui perubahan kelas:

• .collapsemenyembunyikan kandungan
• .collapsingdigunakan semasa peralihan
• .collapse.inmenunjukkan kandungan

Anda boleh menggunakan pautan dengan hrefatribut, atau butang dengan data-targetatribut. Dalam kedua-dua kes, data-toggle="collapse"ia 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 akordion

Lanjutkan kelakuan runtuh lalai untuk mencipta akordion 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>

Anda juga boleh menukar .panel-bodys dengan .list-groups.

Penggunaan

Pemalam runtuh menggunakan beberapa kelas untuk mengendalikan pengangkatan berat:

• .collapsemenyembunyikan kandungan
• .collapse.inmenunjukkan kandungan
• .collapsingditambah apabila peralihan bermula, dan dikeluarkan apabila ia selesai

Kelas-kelas ini boleh didapati dalam component-animations.less.

Melalui atribut data

Cuma tambah data-toggle="collapse"dan a data-targetpada elemen untuk memberikan kawalan secara automatik bagi elemen boleh lipat. Atribut data-targetmenerima pemilih CSS untuk menggunakan keruntuhan. Pastikan anda menambah kelas collapsepada elemen boleh lipat. Jika anda mahu ia dibuka secara lalai, tambahkan kelas tambahan in.

Untuk menambah pengurusan kumpulan seperti akordion pada kawalan boleh lipat, tambahkan atribut data data-parent="#selector". Rujuk demo untuk melihat tindakan ini.

Melalui JavaScript

Dayakan secara manual dengan:

$('.collapse').collapse()

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-parent="".

Kaedah

.collapse(options)

Mengaktifkan kandungan anda sebagai elemen boleh lipat. Menerima pilihan pilihan object.

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

.collapse('toggle')

Menogol elemen boleh lipat kepada ditunjukkan atau disembunyikan. Kembali kepada pemanggil sebelum elemen boleh lipat sebenarnya telah ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.collapseatau hidden.bs.collapseperistiwa berlaku).

.collapse('show')

Menunjukkan elemen boleh lipat. Kembali kepada pemanggil sebelum elemen boleh lipat sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.collapseperistiwa berlaku).

.collapse('hide')

Menyembunyikan elemen yang boleh dilipat. Kembali kepada pemanggil sebelum elemen boleh lipat sebenarnya telah disembunyikan (iaitu sebelum hidden.bs.collapseperistiwa berlaku).

Peristiwa

Kelas runtuh Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi runtuh.

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

Karusel karusel.js

Komponen tayangan slaid untuk berbasikal melalui elemen, seperti karusel. Karusel bersarang tidak disokong.

Contoh

Sebelumnya Seterusnya

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

Kapsyen pilihan

Tambahkan kapsyen pada slaid anda dengan mudah dengan .carousel-captionelemen dalam mana-mana .item. Letakkan hampir mana-mana HTML pilihan di dalamnya dan ia akan diselaraskan dan diformatkan secara automatik.

Label slaid pertama

Nulla vitae elit libero, a pharetra augue mollis interdum.

Label slaid kedua

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Label slaid ketiga

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Sebelumnya Seterusnya

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

Penggunaan

Berbilang karusel

Karusel memerlukan penggunaan idbekas paling luar (the .carousel) untuk kawalan karusel berfungsi dengan baik. Apabila menambah berbilang karusel, atau apabila menukar karusel id, pastikan anda mengemas kini kawalan yang berkaitan.

Melalui atribut data

Gunakan atribut data untuk mengawal kedudukan karusel dengan mudah. data-slidemenerima kata kunci prevatau next, yang mengubah kedudukan slaid berbanding kedudukan semasanya. Sebagai alternatif, gunakan data-slide-tountuk menghantar indeks slaid mentah ke karusel data-slide-to="2", yang mengalihkan kedudukan slaid kepada indeks tertentu bermula dengan 0.

Atribut data-ride="carousel"digunakan untuk menandakan karusel sebagai animasi bermula pada pemuatan halaman. Ia tidak boleh digunakan dalam kombinasi dengan (berlebihan dan tidak perlu) pemula JavaScript eksplisit bagi karusel yang sama.

Melalui JavaScript

Panggil karusel secara manual dengan:

$('.carousel').carousel()

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-interval="".

Kaedah

.carousel(options)

Memulakan karusel dengan pilihan pilihan objectdan mula berbasikal melalui item.

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

.carousel('cycle')

Kitaran melalui item karusel dari kiri ke kanan.

.carousel('pause')

Menghentikan karusel daripada berbasikal melalui item.

.carousel(number)

Mengitar karusel ke bingkai tertentu (berasaskan 0, serupa dengan tatasusunan).

.carousel('prev')

Kitaran ke item sebelumnya.

.carousel('next')

Kitaran ke item seterusnya.

Peristiwa

Kelas karusel Bootstrap mendedahkan dua acara untuk menyambung ke fungsi karusel.

Kedua-dua acara mempunyai sifat tambahan berikut:

• direction: Arah di mana karusel sedang meluncur (sama ada "left"atau "right").
• relatedTarget: Elemen DOM yang sedang meluncur ke tempatnya sebagai item aktif.

Semua acara karusel dilepaskan pada karusel itu sendiri (iaitu pada <div class="carousel">).

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

Imbuhan imbuhan.js

Contoh

Pemalam imbuhan bertukar-tukar position: fixed;hidup dan mati, meniru kesan yang ditemui dengan position: sticky;. Subnavigasi di sebelah kanan ialah demo langsung bagi pemalam imbuhan.

Penggunaan

Gunakan pemalam imbuhan melalui atribut data atau secara manual dengan JavaScript anda sendiri. Dalam kedua-dua situasi, anda mesti menyediakan CSS untuk kedudukan dan lebar kandungan yang dilekatkan anda.

Nota: Jangan gunakan pemalam imbuhan pada elemen yang terkandung dalam elemen yang agak kedudukannya, seperti lajur yang ditarik atau ditolak, disebabkan oleh pepijat pemaparan Safari .

Kedudukan melalui CSS

Pemalam imbuhan bertukar-tukar antara tiga kelas, setiap satu mewakili keadaan tertentu: .affix, .affix-top, dan .affix-bottom. Anda mesti menyediakan gaya, kecuali position: fixed;pada .affix, untuk kelas ini sendiri (bebas daripada pemalam ini) untuk mengendalikan kedudukan sebenar.

Begini cara pemalam afiks berfungsi:

1. Untuk memulakan, pemalam menambah .affix-topuntuk menunjukkan elemen berada di kedudukan paling atasnya. Pada ketika ini tiada kedudukan CSS diperlukan.
2. Menatal melepasi elemen yang anda mahu dilekatkan seharusnya mencetuskan imbuhan sebenar. Di sinilah .affixmenggantikan .affix-topdan menetapkan position: fixed;(disediakan oleh CSS Bootstrap).
3. Jika offset bawah ditakrifkan, menatal melepasinya hendaklah menggantikan .affixdengan .affix-bottom. Memandangkan offset adalah pilihan, menetapkan satu memerlukan anda menetapkan CSS yang sesuai. Dalam kes ini, tambah position: absolute;apabila perlu. Pemalam menggunakan atribut data atau pilihan JavaScript untuk menentukan tempat meletakkan elemen dari sana.

Ikuti langkah di atas untuk menetapkan CSS anda untuk salah satu daripada pilihan penggunaan di bawah.

Melalui atribut data

Untuk menambahkan gelagat imbuhan dengan mudah pada mana-mana elemen, cuma tambahkan data-spy="affix"pada elemen yang ingin anda intip. Gunakan offset untuk menentukan masa untuk menogol penyematan elemen.

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

Melalui JavaScript

Panggil pemalam afiks melalui JavaScript:

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

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-offset-top="200".

Kaedah

.affix(options)

Mengaktifkan kandungan anda sebagai kandungan yang dilekatkan. Menerima pilihan pilihan object.

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

.affix('checkPosition')

Mengira semula keadaan imbuhan berdasarkan dimensi, kedudukan dan kedudukan tatal bagi elemen yang berkaitan. Kelas .affix, .affix-top, dan .affix-bottomditambah atau dialih keluar daripada kandungan yang dilekatkan mengikut keadaan baharu. Kaedah ini perlu dipanggil apabila dimensi kandungan yang dilekatkan atau elemen sasaran diubah, untuk memastikan kedudukan kandungan yang dilekatkan yang betul.

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

Peristiwa

Pemalam imbuhan Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi imbuhan.