Tentang modal

Sebuah ramping, tetapi fleksibel, mengambil plugin modal javascript tradisional dengan hanya fungsi yang diperlukan minimum dan default cerdas.

Contoh statis

Di bawah ini adalah modal yang diberikan secara statis.

Demo langsung

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

Menggunakan bootstrap-modal

Panggil modal melalui javascript:

$ ( '#Modalku' ). modal ( opsi )

Pilihan

Markup

Anda dapat mengaktifkan modals di halaman Anda dengan mudah tanpa harus menulis satu baris javascript. Cukup atur data-toggle="modal"pada elemen pengontrol dengan a data-target="#foo"atau href="#foo"yang sesuai dengan id elemen modal, dan ketika diklik, itu akan meluncurkan modal Anda.

Selain itu, untuk menambahkan opsi ke instans modal Anda, cukup sertakan sebagai atribut data tambahan pada elemen kontrol atau markup modal itu sendiri.

<a class = "btn" data-toggle = "modal" href = "#myModal"> Luncurkan Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Judul modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Satu tubuh yang bagus… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Tutup </a>   
    <a href = "#" class = "btn btn-primary"> Simpan perubahan </a>  
  </div>
</div>

Metode

.modal(opsi)

Mengaktifkan konten Anda sebagai modal. Menerima opsi opsional object.

$ ( '#Modalku' ). modal ({
  keyboard : salah 
})

.modal('beralih')

Mengalihkan modal secara manual.

$ ( '#Modalku' ). modal ( 'beralih' )

.modal('tampilkan')

Secara manual membuka modal.

$ ( '#Modalku' ). modal ( 'tampilkan' )

.modal('sembunyikan')

Secara manual menyembunyikan modal.

$ ( '#Modalku' ). modal ( 'sembunyikan' )

Acara

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

$ ( '#Modalku' ). pada ( 'tersembunyi' , fungsi () {   
  // lakukan sesuatu…
})

Tentang dropdown

Tambahkan menu dropdown ke hampir semua hal di Bootstrap dengan plugin sederhana ini. Bootstrap menampilkan dukungan menu dropdown lengkap di navbar, tab, dan pills.

Contoh

Klik tautan nav dropdown di navbar dan pil di bawah ini untuk menguji dropdown.

• Tautan biasa
• tarik-turun
  • Action
  • Another action
  • Something else here
  • Separated link
• tarik-turun 2
  • Action
  • Another action
  • Something else here
  • Separated link
• tarik-turun 3
  • Action
  • Another action
  • Something else here
  • Separated link

Menggunakan bootstrap-dropdown.js

Panggil dropdown melalui javascript:

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

Markup

Untuk menambahkan fungsionalitas dropdown dengan cepat ke elemen apa pun, cukup tambahkan data-toggle="dropdown"dan dropdown bootstrap yang valid akan diaktifkan secara otomatis.

<ul class = "nav nav-pills" > 
  <li class = "aktif" ><a href = "#" > Tautan reguler </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      tarik-turun
      <b class = "tanda sisipan" ></b> 
    </a>
    <ul class = "menu tarik-turun" > 
      <li><a href = "#" > Tindakan </a></li> 
      <li><a href = "#" > Tindakan lain </a></li> 
      <li><a href = "#" > Ada yang lain di sini </a></li> 
      <li class = "pembagi" ></li> 
      <li><a href = "#" > Tautan terpisah </a></li> 
    </ul>
  </li>
  ...
</ul>

Agar URL tetap utuh, gunakan data-targetatribut alih-alih href="#".

<ul class = "nav nav-pills" > 
  <li kelas = "turun-bawah" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html"> _    
      tarik-turun
      <b class = "tanda sisipan" ></b> 
    </a>
    <ul class = "menu tarik-turun" > 
      ...
    </ul>
  </li>
</ul>

Metode

$().dropdown()

Api terprogram untuk mengaktifkan menu untuk navbar atau navigasi tab tertentu.

Plugin ScrollSpy adalah untuk memperbarui target navigasi secara otomatis berdasarkan posisi gulir.

Contoh navbar dengan scrollspy

Gulir area di bawah ini dan lihat pembaruan navigasi. Sub item dropdown akan disorot juga. Cobalah!

Menggunakan bootstrap-scrollspy.js

Panggil scrollspy melalui javascript:

$ ( '#bar' ). mata -mata ()

Markup

Untuk dengan mudah menambahkan perilaku scrollspy ke navigasi bilah atas Anda, cukup tambahkan data-spy="scroll"ke elemen yang ingin Anda mata-matai (biasanya ini adalah badan).

<body data-spy = "scroll" > ... </body>  

Metode

.scrollspy('segarkan')

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

$ ( '[data-spy="gulir"]' ). masing-masing ( fungsi () {  
  var $spy = $ ( ini ). scrollspy ( 'segarkan' )
});

Pilihan

Acara

Plugin ini menambahkan fungsionalitas tab dan pil yang cepat dan dinamis untuk transisi melalui konten lokal.

Contoh tab

Klik tab di bawah untuk beralih di antara panel tersembunyi, bahkan melalui menu tarik-turun.

• Rumah
• Profil
• tarik-turun
  • @fat
  • @mdo

Menggunakan bootstrap-tab.js

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

$ ( '#myTab a' ). klik ( fungsi ( e ) {  
  e . preventDefault ();
  $ ( ini ). tab ( 'tampilkan' );
})

Anda dapat mengaktifkan tab individual dengan beberapa cara:

$ ( '#myTab a[href="#profile"]' ). tab ( 'tampilkan' ); // Pilih tab berdasarkan nama 
$ ( '#myTab a:first' ). tab ( 'tampilkan' ); // Pilih tab pertama 
$ ( '#myTab a:last' ). tab ( 'tampilkan' ); // Pilih tab terakhir 
$ ( '#myTab li:eq(2) a' ). tab ( 'tampilkan' ); // Pilih tab ketiga (0-diindeks) 

Markup

Anda dapat mengaktifkan navigasi tab atau pil tanpa menulis javascript apa pun hanya dengan menentukan data-toggle="tab"atau data-toggle="pill"pada suatu elemen. Menambahkan navdan nav-tabskelas ke tab ulakan menerapkan gaya tab bootstrap.

<ul class = "nav nav-tab" > 
  <li><a href = "#home" data-toggle = "tab" > Beranda </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Pesan </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Setelan </a></li>  
</ul>

Metode

$().tab

Mengaktifkan elemen tab dan wadah konten. Tab harus memiliki a data-targetatau hrefpenargetan simpul penampung di DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "aktif" ><a href = "#home" > Beranda </a></li>  
  <li><a href = "#profile"> Profil </a> </li> 
  <li><a href = "#messages"> Pesan </a> </li> 
  <li><a href = "#settings"> Setelan </a> </li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane aktif" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<skrip>
  $ ( fungsi () {  
    $ ( '#myTab a:last' ). tab ( 'tampilkan' );
  })
</skrip>

Acara

$ ( 'a[data-toggle="tab"]' ). pada ( 'ditampilkan' , fungsi ( e ) {   
  e . target // tab yang diaktifkan
  e . target terkait // tab sebelumnya
})

Tentang Tooltips

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

Contoh penggunaan Tooltips

Arahkan kursor ke tautan di bawah untuk melihat tooltips:

Menggunakan bootstrap-tooltip.js

Memicu tooltip melalui javascript:

$ ( '#contoh' ). tooltip ( pilihan )

Pilihan

Markup

Untuk alasan kinerja, Tooltip dan Popover data-apis diikutsertakan. Jika Anda ingin menggunakannya cukup tentukan opsi pemilih.

<a href = "#" rel = "tooltip" title = "first tooltip" > arahkan kursor ke atas saya </a>   

Metode

$().tooltip(opsi)

Melampirkan penangan tooltip ke koleksi elemen.

.tooltip('tampilkan')

Mengungkapkan tooltip elemen.

$ ( '#elemen' ). keterangan alat ( 'tampilkan' )

.tooltip('sembunyikan')

Menyembunyikan tooltip elemen.

$ ( '#elemen' ). keterangan alat ( 'sembunyikan' )

.tooltip('beralih')

Mengalihkan tooltip elemen.

$ ( '#elemen' ). tooltip ( 'beralih' )

Tentang popover

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

* Membutuhkan Tooltip untuk disertakan

Contoh hover popover

Arahkan kursor ke tombol untuk memicu popover.

Menggunakan bootstrap-popover.js

Aktifkan popover melalui javascript:

$ ( '#contoh' ). popover ( opsi )

Pilihan

Markup

Untuk alasan kinerja, Tooltip dan Popover data-apis diikutsertakan. Jika Anda ingin menggunakannya cukup tentukan opsi pemilih.

Metode

$().popover(opsi)

Menginisialisasi popover untuk koleksi elemen.

.popover('tampilkan')

Mengungkapkan popover elemen.

$ ( '#elemen' ). popover ( 'tampilkan' )

.popover('sembunyikan')

Menyembunyikan popover elemen.

$ ( '#elemen' ). popover ( 'sembunyikan' )

.popover('beralih')

Mengalihkan popover elemen.

$ ( '#elemen' ). popover ( 'beralih' )

Tentang peringatan

Plugin alert adalah kelas kecil untuk menambahkan fungsionalitas dekat ke alert.

Contoh peringatan

Plugin peringatan berfungsi pada pesan peringatan biasa, dan memblokir pesan.

Menggunakan bootstrap-alert.js

Aktifkan penghentian peringatan melalui javascript:

$ ( ".peringatan" ). waspada ()

Markup

Cukup tambahkan data-dismiss="alert"ke tombol tutup Anda untuk secara otomatis memberikan fungsi tutup peringatan.

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

Metode

$().peringatan()

Membungkus semua peringatan dengan fungsionalitas yang dekat. Agar lansiran Anda bernyawa saat ditutup, pastikan lansiran .fadedan .inkelas sudah diterapkan padanya.

.alert('tutup')

Menutup peringatan.

$ ( ".peringatan" ). waspada ( 'tutup' )

Acara

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

$ ( '#peringatan-saya' ). mengikat ( 'tertutup' , fungsi () {   
  // lakukan sesuatu…
})

Tentang

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

Contoh penggunaan

Gunakan plugin tombol untuk status dan matikan.

Menggunakan bootstrap-button.js

Aktifkan tombol melalui javascript:

$ ( '.nav-tab' ). tombol ()

Markup

Atribut data merupakan bagian integral dari plugin tombol. Lihat contoh kode di bawah ini untuk berbagai jenis markup.

<!-- Tambahkan data-toggle="button" untuk mengaktifkan toggling pada satu tombol -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Tambahkan data-toggle="buttons-checkbox" untuk beralih gaya kotak centang pada btn-group -->
<div class = "btn-group" data-toggle = "tombol-kotak centang" >  
  <button class = "btn" > Kiri </button> 
  <button class = "btn" > Tengah </button> 
  <button class = "btn" > Kanan </button> 
</div>
 
<!-- Tambahkan data-toggle="buttons-radio" untuk beralih gaya radio di btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Kiri </button> 
  <button class = "btn" > Tengah </button> 
  <button class = "btn" > Kanan </button> 
</div>

Metode

$().button('beralih')

Mengalihkan status push. Memberikan tampilan tombol yang telah diaktifkan.

<button class = "btn" data-toggle = "button" > … </button>   

$().button('memuat')

Mengatur status tombol untuk memuat - menonaktifkan tombol dan menukar teks untuk memuat teks. Memuat teks harus ditentukan pada elemen tombol menggunakan atribut data data-loading-text.

<button class = "btn" data-loading-text = "memuat barang..." > ... </button>   

$().button('setel ulang')

Mengatur ulang status tombol - menukar teks ke teks asli.

$().button(string)

Mereset status tombol - menukar teks ke status teks yang ditentukan data.

<button class = "btn" data-complete-text = "selesai!" > ... </tombol>   
<skrip>
  $ ( '.btn' ). tombol ( 'selesai' )
</skrip>

Tentang

Dapatkan gaya dasar dan dukungan fleksibel untuk komponen yang dapat dilipat seperti akordeon dan navigasi.

* Membutuhkan plugin Transitions untuk disertakan.

Contoh akordeon

Menggunakan plugin collapse, kami membuat widget gaya akordeon sederhana:

Menggunakan bootstrap-collapse.js

Aktifkan melalui javascript:

$ ( ".runtuh" ​​). runtuh ()

Pilihan

Markup

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

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  sederhana yang bisa dilipat
</tombol>
 
<div id = "demo" class = "collapse in" > … </div>  

Metode

.collapse(opsi)

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

$ ( '#myCollapsible' ). runtuh ({
  beralih : salah 
})

.collapse('beralih')

Mengalihkan elemen yang dapat diciutkan ke ditampilkan atau disembunyikan.

.collapse('tampilkan')

Menampilkan elemen yang dapat dilipat.

.collapse('sembunyikan')

Menyembunyikan elemen yang dapat dilipat.

Acara

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

$ ( '#myCollapsible' ). pada ( 'tersembunyi' , fungsi () {   
  // lakukan sesuatu…
})

Tentang

Plugin generik untuk bersepeda melalui elemen. Sebuah komidi putar.

Contoh korsel

Tonton tayangan slide di bawah ini.

Label gambar mini pertama

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida di eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Label gambar mini kedua

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida di eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Label Gambar Mini Ketiga

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida di eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

kan kan

Menggunakan bootstrap-carousel.js

Panggilan melalui javascript:

$ ( '.korsel' ). korsel ()

Pilihan

Markup

Atribut data digunakan untuk kontrol sebelumnya dan berikutnya. Lihat contoh markup di bawah ini.

<div id = "myCarousel" class = "slide carousel" >  
  <!-- Item korsel -->
  <div class = "carousel-inner" > 
    <div class = "item aktif" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Navigasi korsel -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Metode

.carousel(opsi)

Menginisialisasi korsel dengan opsi opsional objectdan mulai menelusuri item.

$ ( '.korsel' ). korsel ({
  selang waktu : 2000 
})

.carousel('siklus')

Siklus melalui item korsel dari kiri ke kanan.

.carousel('jeda')

Menghentikan korsel dari bersepeda melalui item.

.carousel(angka)

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

.carousel('sebelumnya')

Siklus ke item sebelumnya.

.carousel('berikutnya')

Siklus ke item berikutnya.

Acara

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

Tentang

Plugin dasar yang mudah diperluas untuk membuat tipografi elegan dengan cepat dengan input teks formulir apa pun.

Contoh

Mulailah mengetik di bidang di bawah ini untuk menampilkan hasil typeahead.

Menggunakan bootstrap-typeahead.js

Panggil typeahead melalui javascript:

$ ( '.typeahead' ). jenis huruf ()

Pilihan

Markup

Tambahkan atribut data untuk mendaftarkan elemen dengan fungsionalitas typeahead.

<input type = "text" data-provide = "typeahead" >  

Metode

.typeahead(opsi)

Menginisialisasi input dengan typeahead.