Mengenai modal

Selaras, tetapi fleksibel, menggunakan pemalam modal javascript tradisional dengan hanya fungsi minimum yang diperlukan dan lalai pintar.

Contoh statik

Di bawah ialah modal yang diberikan secara statik.

Demo langsung

Togol modal melalui javascript dengan mengklik butang di bawah. Ia akan meluncur ke bawah dan pudar masuk dari bahagian atas halaman.

Menggunakan bootstrap-modal

Panggil modal melalui javascript:

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

Pilihan

Penanda

Anda boleh mengaktifkan modals pada halaman anda dengan mudah tanpa perlu menulis satu baris javascript. Hanya tetapkan data-toggle="modal"pada elemen pengawal dengan data-target="#foo"atau href="#foo"yang sepadan dengan id elemen modal, dan apabila diklik, ia akan melancarkan modal anda.

Selain itu, untuk menambah pilihan pada contoh modal anda, hanya masukkannya sebagai atribut data tambahan sama ada pada elemen kawalan atau penanda modal itu sendiri.

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

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <button class = "close" data-dismiss = "modal" > × </button>  
    <h3> Pengepala modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Satu badan yang baik... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Tutup </a>  
    <a href = "#" class = "btn btn-primary" > Simpan perubahan </a>  
  </div>
</div>

Kaedah

.modal(options)

Mengaktifkan kandungan anda sebagai modal. Menerima pilihan pilihan object.

$ ( '#myModal' ). modal ({
  papan kekunci : palsu 
})

.modal('togol')

Togol mod secara manual.

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

.modal('show')

Membuka modal secara manual.

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

.modal('sembunyi')

Secara manual menyembunyikan modal.

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

Peristiwa

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

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

Mengenai lungsur turun

Tambahkan menu lungsur turun pada hampir semua perkara dalam Bootstrap dengan pemalam mudah ini. Bootstrap menampilkan sokongan menu lungsur penuh pada bar navigasi, tab dan pil.

Contoh

Klik pada pautan dropdown nav dalam bar navbar dan pil di bawah untuk menguji dropdown.

• Pautan biasa
• Jatuh turun
  • Action
  • Another action
  • Something else here
  • Separated link
• Jatuh turun 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Jatuh turun 3
  • Action
  • Another action
  • Something else here
  • Separated link

Menggunakan bootstrap-dropdown.js

Panggil dropdown melalui javascript:

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

Penanda

Untuk menambah kefungsian lungsur turun dengan cepat pada mana-mana elemen cuma tambah data-toggle="dropdown"dan mana-mana lungsur turun bootstrap yang sah akan diaktifkan secara automatik.

<ul class = "pil nav nav" > 
  <li class = "active" ><a href = "#" > Pautan biasa </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Jatuh turun
      <b class = "karet" ></b> 
    </a>
    <ul class = "menu lungsur" > 
      <li><a href = "#" > Tindakan </a></li> 
      <li><a href = "#" > Satu lagi tindakan </a></li> 
      <li><a href = "#" > Sesuatu yang lain di sini </a></li> 
      <li class = "pembahagi" ></li> 
      <li><a href = "#" > Pautan terpisah </a></li> 
    </ul>
  </li>
  ...
</ul>

Untuk memastikan URL tetap utuh, gunakan data-targetatribut dan bukannya href="#".

<ul class = "pil nav nav" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Jatuh turun
      <b class = "karet" ></b> 
    </a>
    <ul class = "menu lungsur" > 
      ...
    </ul>
  </li>
</ul>

Kaedah

$().dropdown()

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

Pemalam ScrollSpy adalah untuk mengemas kini sasaran navigasi secara automatik berdasarkan kedudukan tatal.

Contoh navbar dengan scrollspy

Tatal kawasan di bawah dan tonton kemas kini navigasi. Subitem lungsur turun akan diserlahkan juga. Cuba ia!

Menggunakan bootstrap-scrollspy.js

Panggil scrollspy melalui javascript:

$ ( '#navbar' ). scrollspy ()

Penanda

Untuk menambahkan gelagat scrollspy dengan mudah pada navigasi bar atas anda, cuma tambahkan data-spy="scroll"pada elemen yang anda ingin mengintip (kebiasaannya ini ialah badan).

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

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"]' ). setiap ( fungsi () {  
  var $spy = $ ( ini ). scrollspy ( 'refresh' )
});

Pilihan

Peristiwa

Pemalam ini menambah fungsi tab dan pil yang cepat dan dinamik untuk peralihan melalui kandungan tempatan.

Contoh tab

Klik tab di bawah untuk menogol antara anak tetingkap tersembunyi, walaupun melalui menu lungsur.

• Rumah
• Profil
• Jatuh turun
  • @fat
  • @mdo

Menggunakan bootstrap-tab.js

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

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

Anda boleh mengaktifkan tab individu dalam beberapa cara:

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

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 ulakan menggunakan penggayaan tab bootstrap.

<ul class = "nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mesej </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Tetapan </a></li>  
</ul>

Kaedah

$().tab

Mengaktifkan elemen tab dan bekas kandungan. Tab harus mempunyai sama ada data-targetatau hrefmenyasarkan nod bekas dalam DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Mesej </a></li> 
  <li><a href = "#settings" > Tetapan </a></li> 
</ul>
 
<div class = "kandungan tab" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "message" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<skrip>
  $ ( fungsi () {  
    $ ( '#myTab a:last' ). tab ( 'tunjukkan' );
  })
</script>

Peristiwa

$ ( 'a[data-toggle="tab"]' ). pada ( 'ditunjukkan' , fungsi ( e ) {   
  e . sasaran // tab diaktifkan
  e . relatedTarget // tab sebelumnya
})

Mengenai Petua Alat

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.

Contoh penggunaan Petua Alat

Tuding pada pautan di bawah untuk melihat petua alat:

Menggunakan bootstrap-tooltip.js

Cetuskan petua alat melalui javascript:

$ ( '#contoh' ). petua alat ( pilihan )

Pilihan

Penanda

Atas sebab prestasi, Tooltip dan Popover data-apis ikut serta. Jika anda ingin menggunakannya hanya tentukan pilihan pemilih.

<a href = "#" rel = "tooltip" title = "first tooltip" > tuding di atas saya </a>   

Kaedah

$().petua alat(pilihan)

Melampirkan pengendali petua alat pada koleksi elemen.

.tooltip('show')

Mendedahkan petua alat elemen.

$ ( '#elemen' ). petua alat ( 'tunjukkan' )

.tooltip('sembunyikan')

Menyembunyikan petua alat elemen.

$ ( '#elemen' ). petua alat ( 'sembunyi' )

.tooltip('togol')

Menogol petua alat elemen.

$ ( '#elemen' ). petua alat ( 'togol' )

Mengenai popovers

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

* Memerlukan Petua Alat untuk disertakan

Contoh hover popover

Tuding pada butang untuk mencetuskan popover.

Menggunakan bootstrap-popover.js

Dayakan popovers melalui javascript:

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

Pilihan

Penanda

Atas sebab prestasi, Tooltip dan Popover data-apis ikut serta. Jika anda ingin menggunakannya hanya tentukan pilihan pemilih.

Kaedah

$().popover(pilihan)

Memulakan popover untuk koleksi elemen.

.popover('show')

Mendedahkan unsur popover.

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

.popover('sembunyi')

Menyembunyikan unsur popover.

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

.popover('togol')

Menogol unsur popover.

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

Mengenai makluman

Pemalam amaran ialah kelas kecil untuk menambah kefungsian rapat pada amaran.

Contoh makluman

Pemalam makluman berfungsi pada mesej makluman biasa dan menyekat mesej.

Menggunakan bootstrap-alert.js

Dayakan penolakan makluman melalui javascript:

$ ( ".alert" ). berjaga- jaga ()

Penanda

Cuma tambah data-dismiss="alert"pada butang tutup anda untuk memberikan fungsi tutup amaran secara automatik.

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

Kaedah

$().alert()

Membungkus semua makluman dengan kefungsian rapat. Untuk membolehkan makluman anda dianimasikan apabila ditutup, pastikan makluman tersebut mempunyai .fadedan .inkelas telah digunakan padanya.

.alert('close')

Menutup makluman.

$ ( ".alert" ). makluman ( 'tutup' )

Peristiwa

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

$ ( '#my-alert' ). ikat ( 'tertutup' , fungsi () {   
  // lakukan sesuatu…
})

Tentang

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

Contoh kegunaan

Gunakan pemalam butang untuk keadaan dan togol.

Menggunakan bootstrap-button.js

Dayakan butang melalui javascript:

$ ( '.nav-tabs' ). butang ()

Penanda

Atribut data adalah penting kepada pemalam butang. Semak contoh kod di bawah untuk pelbagai jenis markup.

<!-- Tambah data-toggle="button" untuk mengaktifkan togol pada satu butang -->
<button class = "btn" data-toggle = "button" > Togol Tunggal </button>  
 
<!-- Tambah data-toggle="buttons-checkbox" untuk togol gaya kotak pilihan pada btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Kiri </button> 
  <button class = "btn" > Tengah </button> 
  <button class = "btn" > Kanan </button> 
</div>
 
<!-- Tambah data-toggle="buttons-radio" untuk togol gaya radio pada 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>

Kaedah

$().button('togol')

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

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

$().button('loading')

Menetapkan keadaan butang kepada memuatkan - melumpuhkan butang dan menukar teks kepada memuatkan teks. Memuatkan teks hendaklah ditakrifkan pada elemen butang menggunakan atribut data data-loading-text.

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

$().button('reset')

Menetapkan semula keadaan butang - menukar teks kepada teks asal.

$().butang(rentetan)

Menetapkan semula keadaan butang - menukar teks kepada mana-mana keadaan teks yang ditentukan data.

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

Tentang

Dapatkan gaya asas dan sokongan fleksibel untuk komponen boleh lipat seperti akordion dan navigasi.

* Memerlukan pemalam Transitions untuk disertakan.

Contoh akordion

Menggunakan pemalam runtuh, kami membina widget gaya akordion ringkas:

Menggunakan bootstrap-collapse.js

Dayakan melalui javascript:

$ ( ".collapse" ). runtuh ()

Pilihan

Penanda

Hanya tambah data-toggle="collapse"dan data-targetkepada 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.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  mudah dilipat
</butang>
 
<div id = "demo" class = "collapse in" > … </div>  

Kaedah

.collapse(options)

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

$ ( '#myCollapsible' ). runtuh ({
  togol : palsu 
})

.collapse('togol')

Menogol elemen boleh lipat kepada ditunjukkan atau disembunyikan.

.collapse('show')

Menunjukkan elemen boleh lipat.

.collapse('hide')

Menyembunyikan elemen yang boleh dilipat.

Peristiwa

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

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

Tentang

Pemalam generik untuk berbasikal melalui elemen. Merry-go-round.

Contoh karusel

Tonton tayangan slaid di bawah.

Label lakaran kecil pertama

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

Label Thumbnail Kedua

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

Label lakaran kecil ketiga

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

‹ ›

Menggunakan bootstrap-carousel.js

Panggilan melalui javascript:

$ ( '.carousel' ). karusel ()

Pilihan

Penanda

Atribut data digunakan untuk kawalan sebelumnya dan seterusnya. Lihat contoh markup di bawah.

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

Kaedah

.carousel(pilihan)

Memulakan karusel dengan pilihan pilihan objectdan mula berbasikal melalui item.

$ ( '.carousel' ). karusel ({
  selang : 2000 
})

.carousel('cycle')

Kitaran melalui item karusel dari kiri ke kanan.

.carousel('jeda')

Menghentikan karusel daripada berbasikal melalui item.

.carousel(nombor)

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.

Tentang

Pemalam asas yang mudah diperluaskan untuk mencipta kepala taip elegan dengan cepat dengan sebarang input teks bentuk.

Contoh

Mula menaip dalam medan di bawah untuk menunjukkan hasil kepala taip.

Menggunakan bootstrap-typeahead.js

Panggil kepala taip melalui javascript:

$ ( '.typeahead' ). kepala taip ()

Pilihan

Penanda

Tambahkan atribut data untuk mendaftarkan elemen dengan fungsi kepala taip.

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

Kaedah

.typeahead(pilihan)

Memulakan input dengan kepala taip.