Gambaran keseluruhan

Individu atau disusun

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

Menggunakan JavaScript yang disusun

Kedua -duanya bootstrap.jsdan bootstrap.min.jsmengandungi semua pemalam dalam satu fail. Sertakan satu sahaja.

Kebergantungan pemalam

Sesetengah pemalam dan komponen CSS bergantung pada pemalam lain. Jika anda memasukkan pemalam secara individu, pastikan anda menyemak kebergantungan ini dalam dokumen. Juga ambil perhatian bahawa semua pemalam bergantung pada jQuery (ini bermakna jQuery mesti disertakan sebelum fail pemalam). Rujuk kamibower.json untuk melihat versi jQuery yang disokong.

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

Hanya satu pemalam bagi setiap elemen melalui atribut data

Jangan gunakan atribut data daripada berbilang pemalam pada elemen yang sama. Contohnya, butang tidak boleh mempunyai petua alat dan togol modal. Untuk mencapai ini, gunakan elemen pembalut.

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

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

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.

Perpustakaan pihak ketiga

Bootstrap tidak secara rasmi menyokong perpustakaan JavaScript pihak ketiga seperti Prototaip atau UI jQuery. Walaupun .noConflictacara dan ruang nama, mungkin terdapat masalah keserasian yang perlu anda selesaikan sendiri.

Peralihan peralihan.js

Mengenai peralihan

Untuk kesan peralihan yang mudah, sertakan 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 keadaan) dimuatkan:

$.support.transition = false

Modals modal.js

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

Berbilang modal terbuka tidak disokong

Pastikan anda tidak membuka modal semasa yang lain masih kelihatan. Menunjukkan lebih daripada satu modal pada satu masa memerlukan kod tersuai.

Penempatan markup modal

Sentiasa cuba letakkan kod HTML modal pada kedudukan peringkat atas dalam dokumen anda untuk mengelakkan komponen lain menjejaskan penampilan dan/atau fungsi modal.

Kaveat peranti mudah alih

Terdapat beberapa kaveat mengenai penggunaan modal pada peranti mudah alih. Lihat dokumen sokongan penyemak imbas kami untuk mendapatkan butiran.

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>

Jadikan modals boleh diakses

Pastikan anda menambah role="dialog"dan aria-labelledby="...", merujuk tajuk modal, kepada .modal, dan role="document"kepada .modal-dialogdirinya sendiri.

Selain itu, anda boleh memberikan penerangan tentang dialog modal anda dengan aria-describedbypada .modal.

Membenamkan video YouTube

Membenamkan video YouTube dalam modal memerlukan JavaScript tambahan yang tiada dalam Bootstrap untuk menghentikan main balik secara automatik dan banyak lagi. Lihat siaran Stack Overflow yang berguna ini untuk mendapatkan maklumat lanjut.

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

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

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,

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

Nama taip lalai penerangan
latar belakang boolean atau rentetan'static' benar Termasuk unsur tirai latar modal. Sebagai alternatif, tentukan statictirai latar yang tidak menutup modal pada klik.
papan kekunci boolean benar Menutup modal apabila kekunci escape ditekan
tunjuk boolean benar Menunjukkan modal apabila dimulakan.
jauh laluan salah

Pilihan ini ditamatkan sejak v3.3.0 dan telah dialih keluar dalam v4. Sebaliknya kami mengesyorkan menggunakan templat sisi klien atau rangka kerja mengikat data, atau memanggil sendiri jQuery.load .

Jika URL jauh disediakan, kandungan akan dimuatkan sekali melalui kaedah jQuery loaddan disuntik ke dalam .modal-contentdiv. Jika anda menggunakan data-api, anda boleh menggunakan hrefatribut untuk menentukan sumber jauh. Contoh ini ditunjukkan di bawah:

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

Kaedah

Mengaktifkan kandungan anda sebagai modal. Menerima pilihan pilihan object.

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

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

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

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

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

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

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

Jenis acara Penerangan
show.bs.modal Peristiwa ini menyala serta-merta apabila showkaedah contoh dipanggil. Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai relatedTargetharta acara.
ditunjukkan.bs.modal Peristiwa ini dicetuskan apabila modal telah ditunjukkan kepada pengguna (akan menunggu peralihan CSS selesai). Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai relatedTargetharta acara.
hide.bs.modal Peristiwa ini dicetuskan serta-merta apabila hidekaedah contoh telah dipanggil.
hidden.bs.modal Acara ini dicetuskan apabila modal telah selesai disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai).
loaded.bs.modal Peristiwa ini dicetuskan apabila modal telah memuatkan kandungan menggunakan remotepilihan.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdown dropdown.js

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

Dalam navbar

Dalam pil

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

data-toggle="dropdown"masih diperlukan

Tidak kira sama ada anda memanggil lungsur turun melalui JavaScript atau sebaliknya menggunakan data-api, data-toggle="dropdown"sentiasa diperlukan untuk hadir pada elemen pencetus lungsur turun.

tiada

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

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

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

Jenis acara Penerangan
show.bs.dropdown Peristiwa ini berlaku serta-merta apabila kaedah contoh tunjukkan dipanggil.
ditunjukkan.bs.turun turun Peristiwa ini dicetuskan apabila lungsur turun telah ditunjukkan kepada pengguna (akan menunggu peralihan CSS, untuk diselesaikan).
hide.bs.dropdown Peristiwa ini dicetuskan serta-merta apabila kaedah hide instance telah dipanggil.
hidden.bs.dropdown Acara ini dicetuskan apabila lungsur turun telah selesai disembunyikan daripada pengguna (akan menunggu peralihan CSS, untuk diselesaikan).
$('#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.

@gemuk

Ad legging keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi sebelum mereka habis dijual. Hak basikal ladang ke meja Tumblr apa pun. Anim keffiyeh carles cardigan. Gerai foto Velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui anda mungkin tidak pernah mendengar tentangnya dan cardigan trust fund culpa biodiesel wes anderson estetika. Nihil tatu accusamus, cred ironi biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa misai papan selaju, adipisicing fugiat velit janggut pitchfork. Freegan janggut aliqua cupidatat mcsweeney's vero. Cupidatat empat loko nisi, ea helvetica nulla carles. Trak makanan baju sejuk cosby bertatu, vinil quis non freegan mcsweeney. Lo-fi wes anderson +1 sartorial. Carles senaman bukan estetik quis gentrify. Brooklyn adipisicing kraf bir naib keytar deserunt.

satu

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Hak basikal Lomo adipisicing banh mi, velit ea sunt next level locavore kopi asal tunggal di magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS adalah adipisicing. Consectetur nisi DIY beg messenger minima. Cred ex in, delectus consectetur fanny pack mampan iphone.

dua

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats anda mungkin tidak pernah mendengar tentang mereka consequat hoodie tanpa gluten lo-fi fap aliquip. Laboure elit placeat sebelum habis dijual, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Penggunaan

Memerlukan nav Bootstrap

Scrollspy pada masa ini memerlukan penggunaan komponen nav Bootstrap untuk menyerlahkan pautan aktif yang betul.

Sasaran ID boleh diselesaikan diperlukan

Pautan Navbar mesti mempunyai sasaran id yang boleh diselesaikan. Sebagai contoh, <a href="#home">home</a>mesti sepadan dengan sesuatu dalam DOM seperti <div id="home"></div>.

Elemen :visiblebukan sasaran diabaikan

Elemen sasaran yang tidak :visiblemengikut jQuery akan diabaikan dan item nav yang sepadan tidak akan diserlahkan.

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

Nama taip lalai penerangan
mengimbangi nombor 10 Piksel untuk mengimbangi dari atas apabila mengira kedudukan tatal.

Peristiwa

Jenis acara Penerangan
activate.bs.scrollspy Peristiwa ini berlaku apabila item baharu diaktifkan oleh scrollspy.
$('#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.

Denim mentah anda mungkin tidak pernah mendengarnya seluar pendek jean Austin. Nesciunt tauhu stumptown aliqua, pembersihan master synth retro. Misai cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex sotong. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan pakaian Amerika, tukang daging voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Memanjangkan navigasi tab

Pemalam ini memanjangkan komponen navigasi tab untuk menambah kawasan boleh tab.

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.

Jenis acara Penerangan
show.bs.tab Peristiwa ini berlaku pada rancangan tab, tetapi sebelum tab baharu dipaparkan. Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.
ditunjukkan.bs.tab Peristiwa ini berlaku pada rancangan tab selepas tab ditunjukkan. Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.
hide.bs.tab Peristiwa ini berlaku apabila tab baharu hendak ditunjukkan (dan oleh itu tab aktif sebelumnya akan disembunyikan). Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif semasa dan tab baru yang akan aktif, masing-masing.
hidden.bs.tab Peristiwa ini berlaku selepas tab baharu ditunjukkan (dan dengan itu tab aktif sebelumnya disembunyikan). Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif sebelumnya dan tab aktif baharu, masing-masing.
$('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:

Seluar ketat tahap seterusnya keffiyeh anda mungkin tidak pernah mendengarnya. Gerai foto janggut denim mentah letterpress vegan messenger bag stumptown. Seitan dari ladang ke meja, pakaian amerika quinoa 8-bit lestari fixie mcsweeney mempunyai terry richardson vinyl chambray. Beard stumptown, cardigan banh mi lomo thundercats. Tauhu biodiesel williamsburg marfa, empat chambray vegan pembersih loko mcsweeney. Seorang tukang yang sangat ironik apa pun keytar , scenester farm-to-table banksy Austin twitter mengendalikan freegan cred denim mentah kopi asal tunggal yang viral.

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>

Fungsi ikut serta

Atas sebab prestasi, Tooltip dan Popover data-apis adalah ikut serta, bermakna anda mesti memulakannya sendiri .

Satu cara untuk memulakan semua petua alat pada halaman ialah memilihnya mengikut data-toggleatributnya:

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

Pautan berbilang talian

Kadangkala anda ingin menambah petua alat pada hiperpautan yang membungkus berbilang baris. Tingkah laku lalai pemalam petua alat adalah untuk memusatkannya secara mendatar dan menegak. Tambahkan white-space: nowrap;pada sauh anda untuk mengelakkan ini.

Petua alat dalam kumpulan butang, kumpulan input dan jadual memerlukan tetapan khas

Apabila menggunakan petua alat pada elemen dalam .btn-groupatau .input-group, atau pada elemen berkaitan jadual ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), anda perlu menentukan pilihan container: 'body'(didokumentasikan di bawah) untuk mengelakkan kesan sampingan yang tidak diingini (seperti elemen berkembang lebih luas dan/ atau kehilangan sudut bulatnya apabila petua alat dicetuskan).

Jangan cuba tunjukkan petua alat pada elemen tersembunyi

Menyebut $(...).tooltip('show')apabila elemen sasaran adalah display: none;akan menyebabkan petua alat diletakkan dengan tidak betul.

Petua alat yang boleh diakses untuk papan kekunci dan pengguna teknologi bantuan

Bagi pengguna yang menavigasi dengan papan kekunci, dan khususnya pengguna teknologi bantuan, anda hanya perlu menambah petua alat pada elemen boleh fokus papan kekunci seperti pautan, kawalan borang atau mana-mana elemen sewenang-wenangnya dengan tabindex="0"atribut.

Petua alat pada elemen yang dilumpuhkan memerlukan elemen pembalut

Untuk menambah petua alat pada disabledatau .disabledelemen, letakkan elemen di dalam a <div>dan gunakan petua alat itu <div>sebaliknya.

Pilihan

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

Nama taip Lalai Penerangan
animasi boolean benar Gunakan peralihan pudar CSS pada petua alat
bekas rentetan | salah salah

Menambahkan petua alat pada elemen tertentu. Contoh: container: 'body'. Pilihan ini amat berguna kerana ia membolehkan anda meletakkan petua alat dalam aliran dokumen berhampiran elemen pencetus - yang akan menghalang petua alat daripada terapung dari elemen pencetus semasa mengubah saiz tetingkap.

kelewatan nombor | objek 0

Kelewatan menunjukkan dan menyembunyikan petua alat (ms) - tidak digunakan untuk jenis pencetus manual

Jika nombor dibekalkan, kelewatan dikenakan pada kedua-dua sembunyi/tunjukkan

Struktur objek ialah:delay: { "show": 500, "hide": 100 }

html boolean salah Masukkan HTML ke dalam petua alat. Jika palsu, textkaedah jQuery akan digunakan untuk memasukkan kandungan ke dalam DOM. Gunakan teks jika anda bimbang tentang serangan XSS.
penempatan rentetan | fungsi 'atas'

Cara meletakkan petua alat - atas | bawah | kiri | betul | auto.
Apabila "auto" ditentukan, ia akan mengorientasikan semula petua alat secara dinamik. Contohnya, jika peletakan adalah "auto left", petua alat akan dipaparkan ke kiri apabila boleh, jika tidak, ia akan dipaparkan ke kanan.

Apabila fungsi digunakan untuk menentukan peletakan, ia dipanggil dengan nod DOM petua alat sebagai hujah pertamanya dan nod DOM elemen pencetus sebagai yang kedua. Konteks ditetapkan thiskepada contoh petua alat.

pemilih tali salah Jika pemilih disediakan, objek petua alat akan diwakilkan kepada sasaran yang ditentukan. Dalam amalan, ini digunakan untuk membolehkan kandungan HTML dinamik mempunyai petua alat ditambah. Lihat ini dan contoh bermaklumat .
templat tali '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML asas untuk digunakan semasa membuat petua alat.

Petua alat titleakan disuntik ke dalam .tooltip-inner.

.tooltip-arrowakan menjadi anak panah petua alat.

Elemen pembungkus paling luar harus mempunyai .tooltipkelas.

tajuk rentetan | fungsi ''

Nilai tajuk lalai jika titleatribut tidak ada.

Jika fungsi diberikan, ia akan dipanggil dengan thisset rujukannya kepada elemen yang dilampirkan petua alat.

pencetus tali 'legar fokus' Cara petua alat dicetuskan - klik | tuding | tumpuan | manual. Anda boleh melepasi pelbagai pencetus; pisahkan mereka dengan ruang. manualtidak boleh digabungkan dengan mana-mana pencetus lain.
tempat pandang rentetan | objek | fungsi { pemilih: 'badan', padding: 0 }

Mengekalkan petua alat dalam sempadan elemen ini. Contoh: viewport: '#viewport'atau{ "selector": "#viewport", "padding": 0 }

Jika fungsi diberikan, ia dipanggil dengan nod DOM elemen pencetus sebagai satu-satunya hujahnya. Konteks ditetapkan thiskepada contoh petua alat.

Atribut data untuk petua alat individu

Pilihan untuk petua alat individu boleh ditentukan secara alternatif melalui penggunaan atribut data, seperti yang dijelaskan di atas.

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

Jenis acara Penerangan
show.bs.tooltip Peristiwa ini menyala serta-merta apabila showkaedah contoh dipanggil.
ditunjukkan.bs.petua alat Peristiwa ini dicetuskan apabila petua alat telah dilihat kepada pengguna (akan menunggu peralihan CSS selesai).
hide.bs.tooltip Peristiwa ini dicetuskan serta-merta apabila hidekaedah contoh telah dipanggil.
hidden.bs.tooltip Peristiwa ini dicetuskan apabila petua alat telah selesai disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai).
inserted.bs.tooltip Acara ini dicetuskan selepas show.bs.tooltipacara apabila templat petua alat telah ditambahkan pada DOM.
$('#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.

Kebergantungan pemalam

Popovers memerlukan pemalam tooltip untuk disertakan dalam versi Bootstrap anda.

Fungsi ikut serta

Atas sebab prestasi, Tooltip dan Popover data-apis adalah ikut serta, bermakna anda mesti memulakannya sendiri .

Satu cara untuk memulakan semua popover pada halaman ialah memilihnya mengikut data-toggleatributnya:

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

Popover dalam kumpulan butang, kumpulan input dan jadual memerlukan tetapan khas

Apabila menggunakan popover pada elemen dalam .btn-groupatau .input-group, atau pada elemen berkaitan jadual ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), anda perlu menentukan pilihan container: 'body'(didokumentasikan di bawah) untuk mengelakkan kesan sampingan yang tidak diingini (seperti elemen berkembang lebih luas dan/ atau kehilangan sudut bulatnya apabila popover dicetuskan).

Jangan cuba tunjukkan popover pada elemen tersembunyi

Menyebut $(...).popover('show')apabila elemen sasaran adalah display: none;akan menyebabkan popover diletakkan secara tidak betul.

Popover pada elemen yang dilumpuhkan memerlukan elemen pembalut

Untuk menambah popover pada disabledatau .disabledelemen, letakkan elemen di dalam a <div>dan gunakan popover itu <div>sebaliknya.

Pautan berbilang talian

Kadangkala anda ingin menambah popover pada hiperpautan yang membalut berbilang baris. Tingkah laku lalai pemalam popover adalah untuk memusatkannya secara mendatar dan menegak. Tambahkan white-space: nowrap;pada sauh anda untuk mengelakkan ini.

Contoh

popover statik

Empat pilihan tersedia: dijajar atas, kanan, bawah dan kiri.

Atas popover

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Hiasan pellentesque sem lacinia quam venenatis vestibulum.

Popover betul

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Hiasan pellentesque sem lacinia quam venenatis vestibulum.

Bawah popover

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Hiasan pellentesque sem lacinia quam venenatis vestibulum.

Popover kiri

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Hiasan pellentesque sem lacinia quam venenatis vestibulum.

Demo langsung

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

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.

Penanda khusus diperlukan untuk dismiss-on-next-click

Untuk kelakuan merentas penyemak imbas dan merentas platform yang betul, anda mesti menggunakan <a>teg, bukan teg<button> , dan anda juga mesti memasukkan atribut role="button"dan .tabindex

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

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

Nama taip Lalai Penerangan
animasi boolean benar Gunakan peralihan pudar CSS ke popover
bekas rentetan | salah salah

Menambah popover pada elemen tertentu. Contoh: container: 'body'. Pilihan ini amat berguna kerana ia membolehkan anda meletakkan popover dalam aliran dokumen berhampiran elemen pencetus - yang akan menghalang popover daripada terapung daripada elemen pencetus semasa saiz semula tetingkap.

kandungan rentetan | fungsi ''

Nilai kandungan lalai jika data-contentatribut tidak ada.

Jika fungsi diberikan, ia akan dipanggil dengan thisset rujukannya kepada elemen yang dilampirkan popover.

kelewatan nombor | objek 0

Kelewatan menunjukkan dan menyembunyikan popover (ms) - tidak digunakan untuk jenis pencetus manual

Jika nombor dibekalkan, kelewatan dikenakan pada kedua-dua sembunyi/tunjukkan

Struktur objek ialah:delay: { "show": 500, "hide": 100 }

html boolean salah Masukkan HTML ke dalam popover. Jika palsu, textkaedah jQuery akan digunakan untuk memasukkan kandungan ke dalam DOM. Gunakan teks jika anda bimbang tentang serangan XSS.
penempatan rentetan | fungsi 'betul'

Bagaimana untuk meletakkan popover - atas | bawah | kiri | betul | auto.
Apabila "auto" ditentukan, ia akan mengorientasikan semula popover secara dinamik. Contohnya, jika peletakan adalah "auto left", popover akan dipaparkan ke kiri apabila boleh, jika tidak, ia akan dipaparkan ke kanan.

Apabila fungsi digunakan untuk menentukan peletakan, ia dipanggil dengan nod DOM popover sebagai hujah pertamanya dan nod DOM elemen pencetus sebagai yang kedua. Konteks ditetapkan thiskepada contoh popover.

pemilih tali salah Jika pemilih disediakan, objek popover akan diwakilkan kepada sasaran yang ditentukan. Dalam amalan, ini digunakan untuk membolehkan kandungan HTML dinamik mempunyai popover ditambah. Lihat ini dan contoh bermaklumat .
templat tali '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

HTML asas untuk digunakan semasa membuat popover.

Popover titleakan disuntik ke dalam .popover-title.

Popover contentakan disuntik ke dalam .popover-content.

.arrowakan menjadi anak panah popover.

Elemen pembungkus paling luar harus mempunyai .popoverkelas.

tajuk rentetan | fungsi ''

Nilai tajuk lalai jika titleatribut tidak ada.

Jika fungsi diberikan, ia akan dipanggil dengan thisset rujukannya kepada elemen yang dilampirkan popover.

pencetus tali 'klik' Cara popover dicetuskan - klik | tuding | tumpuan | manual. Anda boleh melepasi pelbagai pencetus; pisahkan mereka dengan ruang. manualtidak boleh digabungkan dengan mana-mana pencetus lain.
tempat pandang rentetan | objek | fungsi { pemilih: 'badan', padding: 0 }

Mengekalkan popover dalam sempadan elemen ini. Contoh: viewport: '#viewport'atau{ "selector": "#viewport", "padding": 0 }

Jika fungsi diberikan, ia dipanggil dengan nod DOM elemen pencetus sebagai satu-satunya hujahnya. Konteks ditetapkan thiskepada contoh popover.

Atribut data untuk popover individu

Pilihan untuk popover individu boleh ditentukan secara alternatif melalui penggunaan atribut data, seperti yang dijelaskan di atas.

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 sebelum hidden.bs.popoverperistiwa 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

Jenis acara Penerangan
show.bs.popover Peristiwa ini menyala serta-merta apabila showkaedah contoh dipanggil.
ditunjukkan.bs.popover Acara ini dicetuskan apabila popover telah dilihat kepada pengguna (akan menunggu peralihan CSS selesai).
hide.bs.popover Peristiwa ini dicetuskan serta-merta apabila hidekaedah contoh telah dipanggil.
hidden.bs.popover Acara ini dicetuskan apabila popover telah selesai disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai).
disisipkan.bs.popover Acara ini dicetuskan selepas show.bs.popoveracara apabila templat popover telah ditambahkan pada DOM.
$('#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 .fadedan.in telah 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 kelas .fadedan .inhadir pada elemen, amaran akan pudar sebelum ia dialih keluar.

Peristiwa

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

Jenis acara Penerangan
close.bs.alert Peristiwa ini menyala serta-merta apabila closekaedah contoh dipanggil.
amaran ditutup.bs Acara ini dicetuskan apabila amaran telah ditutup (akan menunggu peralihan CSS selesai).
$('#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.

Keserasian merentas pelayar

Firefox mengekalkan keadaan kawalan borang (kecacatan dan penyemakan) merentas pemuatan halaman . Penyelesaian untuk ini ialah menggunakan autocomplete="off". Lihat pepijat Mozilla #654072 .

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.

Gunakan mana-mana negeri yang anda suka!

Demi demonstrasi ini, kami menggunakan data-loading-textdan $().button('loading'), tetapi itu bukan satu-satunya negeri yang boleh anda gunakan. Lihat lebih lanjut mengenai perkara ini di bawah dalam $().button(string)dokumentasi .

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

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

Togol tunggal

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

Butang pra-togol diperlukan.active danaria-pressed="true"

Untuk butang pra-togol, anda mesti menambah .activekelas dan aria-pressed="true"atribut kepada buttondiri anda sendiri.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  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.

Pilihan prapilihan perlu.active

Untuk pilihan yang telah dipilih, anda mesti menambah .activekelas pada input labelanda sendiri.

Keadaan disemak visual hanya dikemas kini pada klik

Jika keadaan butang kotak semak yang ditanda dikemas kini tanpa mencetuskan clickperistiwa pada butang (cth melalui <input type="reset">atau melalui menetapkan checkedsifat input), anda perlu menogol .activekelas pada input itu labelsendiri.

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

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" autocomplete="off">
  ...
</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.

Kebergantungan pemalam

Runtuh memerlukan pemalam peralihan untuk disertakan dalam versi Bootstrap anda.

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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Contoh akordion

Lanjutkan kelakuan runtuh lalai untuk mencipta akordion dengan komponen panel.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, bukan cupidatat skateboard dolor brunch. Trak makanan quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua meletakkan seekor burung di atasnya sotong kopi asal tunggal nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Bingkap kaki occaecat craft beer farm-to-table, raw denim estetic synth synth nesciunt anda mungkin tidak pernah mendengarnya accusamus labore mampan VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, bukan cupidatat skateboard dolor brunch. Trak makanan quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua meletakkan seekor burung di atasnya sotong kopi asal tunggal nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Bingkap kaki occaecat craft beer farm-to-table, raw denim estetic synth synth nesciunt anda mungkin tidak pernah mendengarnya accusamus labore mampan VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, bukan cupidatat skateboard dolor brunch. Trak makanan quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua meletakkan seekor burung di atasnya sotong kopi asal tunggal nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Bingkap kaki occaecat craft beer farm-to-table, raw denim estetic synth synth nesciunt anda mungkin tidak pernah mendengarnya accusamus labore mampan VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

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

  • Bootply
  • Satu itmus ac facilin
  • Eros kedua

Jadikan kawalan kembangkan/runtuhkan boleh diakses

Pastikan anda menambah aria-expandedpada elemen kawalan. Atribut ini secara eksplisit mentakrifkan keadaan semasa elemen boleh lipat kepada pembaca skrin dan teknologi bantuan yang serupa. Jika elemen boleh lipat ditutup secara lalai, ia sepatutnya mempunyai nilai aria-expanded="false". Jika anda telah menetapkan elemen boleh lipat dibuka secara lalai menggunakanin kelas, tetapkan aria-expanded="true"pada kawalan. Pemalam akan menogol atribut ini secara automatik berdasarkan sama ada elemen boleh lipat telah dibuka atau ditutup atau tidak.

Selain itu, jika elemen kawalan anda menyasarkan satu elemen boleh lipat – iaitu data-targetatribut menunjuk kepada idpemilih – anda boleh menambah aria-controlsatribut tambahan pada elemen kawalan, yang mengandungi idelemen boleh lipat. Pembaca skrin moden dan teknologi bantuan serupa menggunakan atribut ini untuk menyediakan pengguna dengan pintasan tambahan untuk menavigasi terus ke elemen boleh lipat itu sendiri.

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

Nama taip lalai penerangan
ibu bapa pemilih salah Jika pemilih disediakan, maka semua elemen boleh lipat di bawah induk yang ditentukan akan ditutup apabila item boleh lipat ini ditunjukkan. (serupa dengan tingkah laku akordion tradisional - ini bergantung pada panelkelas)
togol boolean benar Menogol elemen boleh lipat pada seruan

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

Jenis acara Penerangan
tunjukkan.bs.runtuh Peristiwa ini menyala serta-merta apabila showkaedah contoh dipanggil.
ditunjukkan.bs.runtuh Peristiwa ini dicetuskan apabila elemen runtuh telah dilihat kepada pengguna (akan menunggu peralihan CSS selesai).
hide.bs.runtuh Acara ini dipecat serta-merta apabila hidekaedah telah dipanggil.
tersembunyi.bs.runtuh Peristiwa ini dicetuskan apabila elemen runtuh telah disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Karusel karusel.js

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

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

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

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 boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-interval="".

Nama taip lalai penerangan
selang waktu nombor 5000 Jumlah masa untuk menangguhkan antara mengayuh item secara automatik. Jika palsu, karusel tidak akan berkitar secara automatik.
jeda rentetan | null "legar" Jika ditetapkan kepada "hover", jeda kitaran karusel dihidupkan mouseenterdan sambung semula kitaran karusel dihidupkan mouseleave. Jika ditetapkan kepada null, melayang di atas karusel tidak akan menjedanya.
bungkus boolean benar Sama ada karusel perlu berkitar secara berterusan atau mempunyai hentian keras.
papan kekunci boolean benar Sama ada karusel harus bertindak balas terhadap peristiwa papan kekunci.

Memulakan karusel dengan pilihan pilihan objectdan mula berbasikal melalui item.

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

Kitaran melalui item karusel dari kiri ke kanan.

Menghentikan karusel daripada berbasikal melalui item.

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

Kitaran ke item sebelumnya.

Kitaran ke item seterusnya.

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

Jenis acara Penerangan
slaid.bs.karusel Peristiwa ini berlaku serta-merta apabila slidekaedah contoh digunakan.
slid.bs.carousel Peristiwa ini dicetuskan apabila karusel telah menyelesaikan peralihan slaidnya.
$('#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-top untuk 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".

Nama taip lalai penerangan
mengimbangi nombor | fungsi | objek 10 Piksel untuk mengimbangi daripada skrin apabila mengira kedudukan tatal. Jika satu nombor disediakan, offset akan digunakan dalam kedua-dua arah atas dan bawah. Untuk memberikan offset yang unik, bawah dan atas hanya sediakan objek offset: { top: 10 }atau offset: { top: 10, bottom: 5 }. Gunakan fungsi apabila anda perlu mengira offset secara dinamik.
sasaran pemilih | nod | elemen jQuery windowobjek itu Menentukan unsur sasaran imbuhan.

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

Jenis acara Penerangan
imbuhan.bs.imbuhan Peristiwa ini berlaku serta-merta sebelum elemen dilekatkan.
imbuhan.bs.imbuhan Peristiwa ini dicetuskan selepas elemen telah dilekatkan.
imbuhan-atas.bs.imbuhan Peristiwa ini berlaku serta-merta sebelum elemen dilekatkan di atas.
imbuhan-atas.bs.imbuhan Peristiwa ini dicetuskan selepas elemen dilekatkan di atas.
imbuhan-bawah.bs.imbuhan Peristiwa ini berlaku serta-merta sebelum elemen dilekatkan di bawah.
imbuhan-bawah.bs.imbuhan Peristiwa ini dicetuskan selepas elemen telah dilekatkan-bawah.