Javascript pikeun Bootstrap

Bawa komponén Bootstrap pikeun hirup-ayeuna sareng 12 plugins jQuery khusus.

Modal

A streamlined, tapi fléksibel, nyandak kana javascript modal plugin tradisional kalayan ngan pungsionalitas diperlukeun minimum jeung standar pinter.

Dropdowns

Tambihkeun ménu lungsur ka ampir naon waé di Bootstrap nganggo plugin saderhana ieu. Bootstrap nampilkeun dukungan menu lungsur pinuh dina navbar, tab, sareng pil.

Scrollspy

Anggo scrollspy pikeun otomatis ngapdet tautan dina navbar anjeun pikeun nunjukkeun tautan aktip ayeuna dumasar kana posisi ngagulung.

Tab togglable

Anggo plugin ieu pikeun ngajantenkeun tab sareng pil langkung mangpaat ku ngamungkinkeun aranjeunna togél dina panel tabable tina eusi lokal.

Tooltips

A nyokot anyar dina plugin jQuery Tipsy, Tooltips teu ngandelkeun gambar-aranjeunna ngagunakeun CSS3 pikeun animasi jeung data-atribut pikeun neundeun judul lokal.

Popovers *

Tambahkeun overlays leutik eusi, kawas nu aya dina iPad, kana elemen naon wae pikeun perumahan informasi sekundér.

* Merlukeun Tooltips pikeun kaasup

Pesen waspada

Plugin ngageter mangrupikeun kelas leutik pikeun nambihan fungsionalitas anu caket kana panggeuing.

Kancing

Ngalakukeun leuwih ku tombol. Tombol kontrol nyatakeun atanapi jieun grup tombol pikeun langkung seueur komponén sapertos tulbar.

Rubuh

Kéngingkeun gaya dasar sareng dukungan anu fleksibel pikeun komponén anu tiasa dilipat sapertos akordion sareng navigasi.

Carousel

Jieun merry-go-round tina sagala eusi nu Anjeun hoyong nyadiakeun hiji pintonan slaid interaktif eusi.

Tulisan payun

Dasar, gampang diperpanjang plugin pikeun gancang nyieun typeaheads elegan jeung sagala formulir input téks.

Transisi *

Pikeun épék transisi basajan, kaasup bootstrap-transition.js sakali ngageser dina modals atawa diudar kaluar ngabejaan.

* Diperlukeun pikeun animasi dina plugins

Mastaka tegak! Sadaya plugins JavaScript merlukeun versi panganyarna tina jQuery.

Ngeunaan modals

A streamlined, tapi fléksibel, nyandak kana javascript modal plugin tradisional kalayan ngan pungsionalitas diperlukeun minimum jeung standar pinter.

Unduh file

Contona statik

Di handap ieu mangrupakeun modal statically rendered.

Live demo

Toggle a modal via javascript ku ngaklik tombol di handap. Bakal ngageser ka handap sareng luntur ti luhur halaman.

Ngajalankeun demo modal

Ngagunakeun bootstrap-modal

Nelepon modal via javascript:

  1. $ ( '#MyModal' ). modal ( pilihan )

Pilihan

Ngaran ngetik standar katerangan
latar boolean leres Ngawengku unsur modal-backdrop. Alternatipna, tangtukeun staticpikeun backdrop nu teu nutup modal dina klik.
kibor boolean leres Nutup modal nalika konci kabur dipencet
nempokeun boolean leres Némbongkeun modal nalika dimimitian.

Markup

Anjeun tiasa ngaktipkeun modals dina halaman anjeun kalayan gampang tanpa kedah nyerat hiji baris javascript. Ngan disetel data-toggle="modal"dina unsur controller jeung data-target="#foo"atawa href="#foo"nu pakait jeung unsur modal id, sarta lamun diklik, éta bakal ngajalankeun modal Anjeun.

Ogé, pikeun nambahkeun pilihan kana conto modal anjeun, ngan kaasup aranjeunna salaku atribut data tambahan dina boh unsur kontrol atawa markup modal sorangan.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Jalankeun Modal </a>
  1. <div class = "modal sumputkeun" id = "myModal" >
  2. <div class = "modal-header" >
  3. <tombol type = "tombol" class = "tutup" data-dismiss = "modal" > × </tombol>
  4. <h3> Modal lulugu </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Hiji awak alus... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Tutup </a>
  11. <a href = "#" class = "btn btn-primary" > Simpen parobahan </a>
  12. </div>
  13. </div>
Mastaka tegak! Upami anjeun hoyong modal anjeun ngahirupkeun asup jeung kaluar, ngan nambahan .fadekelas hiji .modalunsur (tingali demo pikeun katingal ieu dina aksi) jeung kaasup bootstrap-transition.js.

Métode

.modal(pilihan)

Aktipkeun eusi anjeun salaku modal. Narima hiji pilihan pilihan object.

  1. $ ( '#MyModal' ). modal ({
  2. keyboard : palsu
  3. })

.modal('toggle')

Sacara manual toggles modal.

  1. $ ( '#MyModal' ). modal ( 'toggle' )

.modal('show')

Sacara manual muka modal.

  1. $ ( '#MyModal' ). modal ( 'tunjukkeun' )

.modal('sumputkeun')

Sacara manual nyumputkeun modal.

  1. $ ( '#MyModal' ). modal ( 'sumputkeun' )

Kajadian

Kelas modal Bootstrap ngungkabkeun sababaraha acara pikeun nyambungkeun kana fungsionalitas modal.

Acara Katerangan
nempokeun Kajadian ieu langsung hurung nalika showmetode conto disebut.
ditémbongkeun Kajadian ieu dipecat nalika modal parantos katingali ku pangguna (bakal ngantosan transisi css réngsé).
nyumput Kajadian ieu langsung dipecat nalika hidemetode conto parantos disebut.
disumputkeun Kajadian ieu dipecat nalika modal parantos disumputkeun tina pangguna (bakal ngantosan transisi css réngsé).
  1. $ ( '#MyModal' ). on ( 'disumputkeun' , fungsi () {
  2. // ngalakukeun hiji hal ...
  3. })

ScrollSpy plugin pikeun otomatis ngamutahirkeun target nav dumasar kana posisi ngagugulung.

Unduh file

Conto navbar kalawan scrollspy

Gulung wewengkon di handap tur lalajo apdet navigasi. Sub item dropdown bakal disorot ogé. Cobian!

@gajih

Ad leggings keytar, brunch id seni pihak dolor kuli. Pitchfork yr enim lo-fi saméméh maranéhna dijual kaluar qui. Tumblr ladang-ka-méja hak sapedah naon. Anim keffiyeh carles cardigan. stan poto Velit seitan mcsweeney 3 serigala bulan irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui Anjeun meureun geus teu ngadéngé éta et cardigan trust fund culpa biodiesel wes anderson estetika. Nihil tato accusamus, cred ironi biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa kumis skateboard, adipisicing fugiat velit pitchfork janggot. Freegan janggot aliqua cupidatat mcsweeney urang vero. Cupidatat opat loko nisi, ea helvetica nulla carles. treuk dahareun baju haneut cosby tato, mcsweeney urang quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non estetika exercitation quis gentrify. Brooklyn adipisicing karajinan bir wakil keytar deserunt.

hiji

Occaecat commodo aliqua delectus. Fap karajinan bir deserunt skateboard ea. Hak sapedah Lomo adipisicing banh mi, velit ea sunt tingkat salajengna locavore kopi asal tunggal di magna veniam. Kahirupan tinggi id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS nyaéta adipisicing. Consectetur nisi DIY mini kantong utusan. Cred ex di, sustainable delectus consectetur fanny pak 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 naon delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats Anjeun meureun geus teu ngadéngé éta consequat hoodie gluten bébas lo-fi fap aliquip. Labore elit placeat saméméh maranéhna dijual kaluar, terry richardson proident brunch nesciunt quis cosby baju haneut pariatur keffiyeh ut helvetica artisan. Cardigan karajinan bir seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Ngagunakeun bootstrap-scrollspy.js

Nelepon scrollspy via javascript:

  1. $ ( '#navbar' ). scrollspy ()

Markup

Pikeun gampang nambahkeun kabiasaan scrollspy kana navigasi topbar Anjeun, ngan tambahkeun data-spy="scroll"ka elemen rék nénjo dina (paling ilaharna ieu bakal awak).

  1. <body data-Spy = "scroll" > ... </body>
Mastaka tegak! Tumbu Navbar kudu boga target id resolvable. Contona, hiji <a href="#home">home</a>kudu pakait jeung hal di dom kawas <div id="home"></div>.

Métode

.scrollspy('refresh')

Nalika nganggo scrollspy sareng nambihan atanapi ngahapus unsur tina DOM, anjeun kedah nyauran metode refresh sapertos kieu:

  1. $ ( '[data-Spy="scroll"]' ). masing -masing ( fungsi () {
  2. var $ spy = $ ( ieu ). scrollspy ( 'refresh' )
  3. });

Pilihan

Ngaran ngetik standar katerangan
ngimbangan angka 10 Piksel pikeun ngimbangan ti luhur nalika ngitung posisi ngagugulung.

Kajadian

Acara Katerangan
ngaktipkeun Kajadian ieu hurung iraha waé item anyar diaktipkeun ku scrollspy.

Plugin ieu nambihan gancang, tab dinamis sareng fungsionalitas pil pikeun ngalihkeun eusi lokal.

Unduh file

Conto tab

Klik tab di handap pikeun toggle antara jandela disumputkeun, sanajan ngaliwatan menu dropdown.

Denim atah anjeun panginten henteu acan kantos nguping aranjeunna kaos jeans Austin. Nesciunt tahu stumptown aliqua, retro synth master cleanse. Kumis klise tempor, williamsburg carles vegan helvetica. Reprehenderit tukang daging retro keffiyeh dreamcatcher synth. Baju haneut Cosby eu banh mi, qui irure Terry richardson ex cumi. Aliquip nempatkeun salvia cillum iphone. Seitan aliquip quis cardigan apparel Amérika, jagal 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.


Ngagunakeun bootstrap-tab.js

Aktipkeun tab tabable via javascript (unggal tab kudu diaktipkeun individual):

  1. $ ( '#MyTab a' ). klik ( fungsi ( e ) {
  2. e . preventDefault ();
  3. $ ( ieu ). tab ( 'témbongkeun' );
  4. })

Anjeun tiasa ngaktipkeun tab individu ku sababaraha cara:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'témbongkeun' ); // Pilih tab ku ngaran
  2. $ ( '#MyTab a:mimiti' ). tab ( 'témbongkeun' ); // Pilih tab kahiji
  3. $ ( '#MyTab a:panungtung' ). tab ( 'témbongkeun' ); // Pilih tab panungtungan
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'témbongkeun' ); // Pilih tab katilu (0-indéks)

Markup

Anjeun tiasa ngaktipkeun navigasi tab atanapi pil tanpa nyerat JavaScript ku ngan saukur nangtukeun data-toggle="tab"atanapi data-toggle="pill"dina unsur. Nambahkeun navsareng nav-tabskelas kana tab ulbakal nerapkeun gaya tab bootstrap.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Propil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Talatah </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Setélan </a></li>
  6. </ul>

Métode

$().tab

Aktipkeun unsur tab sareng wadah eusi. Tab kedah gaduh data-targetatanapi hrefnargétkeun titik wadah dina DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Home </a></li>
  3. <li><a href = "#profile" > Propil </a></li>
  4. <li><a href = "#messages" > Talatah </a></li>
  5. <li><a href = "#settings" > Setélan </a></li>
  6. </ul>
  7.  
  8. <div class = "eusi tab" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profil" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( fungsi () {
  17. $ ( '#MyTab a:panungtung' ). tab ( 'témbongkeun' );
  18. })
  19. </script>

Kajadian

Acara Katerangan
nempokeun Kajadian ieu hurung dina acara tab, tapi sateuacan tab anyar ditingalikeun. Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
ditémbongkeun Kajadian ieu hurung dina acara tab saatos tab dipintonkeun. Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'ditémbongkeun' , fungsi ( e ) {
  2. e . target // tab diaktipkeun
  3. e . relatedTarget // tab saméméhna
  4. })

Ngeunaan Tooltips

Diideuan ku jQuery.tipsy plugin unggulan ditulis ku Jason pigura; Tooltips mangrupikeun versi anu diropéa, anu henteu ngandelkeun gambar, nganggo CSS3 pikeun animasi, sareng atribut data pikeun neundeun judul lokal.

Unduh file

Conto pamakéan Tooltips

Hover dina tumbu di handap pikeun ningali tooltips:

Calana ketat tingkat salajengna keffiyeh Anjeun meureun geus teu ngadéngé éta. Booth poto janggot denim atah letterpress vegan utusan kantong stumptown. Ladang-ka-méja seitan, fixie sustainable quinoa 8-bit Amérika apparel 8-bit mcsweeney urang boga terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tahu biodiesel williamsburg marfa, opat loko mcsweeney urang cleanse vegan chambray. A artisan bener ironis keytar naon , scenester tegalan-to-méja banksy Austin twitter nanganan freegan cred denim atah single-asal kopi viral.


Ngagunakeun bootstrap-tooltip.js

Micu tooltip via javascript:

  1. $ ( '#conto' ). tooltip ( pilihan )

Pilihan

Ngaran ngetik standar katerangan
animasi boolean leres nerapkeun transisi fade css ka tooltip
panempatan string|fungsi 'luhureun' kumaha posisi tooltip - top | handap | ditinggalkeun | leres
pamilih senar palsu Upami pamilih disayogikeun, obyék tooltip bakal didelegasikeun ka target anu ditangtukeun.
judul string | fungsi '' nilai judul standar upami tag `judul` teu aya
pemicu senar 'ngalayang' kumaha tooltip dipicu - hover | fokus | manual
reureuh angka | objék 0

reureuh némbongkeun sarta nyumputkeun tooltip (ms) - teu dilarapkeun ka tipe pemicu manual

Lamun jumlah disadiakeun, reureuh diterapkeun ka duanana nyumputkeun / acara

Struktur objék nyaéta:delay: { show: 500, hide: 100 }

Mastaka tegak! Pilihan pikeun tooltips individu bisa disaluyukeun ngaliwatan pamakéan atribut data.

Markup

Kanggo alesan kinerja, Tooltip sareng Popover data-apis dilebetkeun. Upami anjeun hoyong nganggo éta, tangtoskeun pilihan pamilih.

  1. <a href = "#" rel = "tooltip" title = "tooltip munggaran" > hover ka kuring </a>

Métode

$().tooltip(pilihan)

Ngagantelkeun panangan tooltip ka kumpulan unsur.

.tooltip('show')

Nembongkeun tooltip hiji unsur.

  1. $ ( '#elemen' ). tooltip ( 'tunjukkeun' )

.tooltip('sumputkeun')

Nyumputkeun tooltip unsur.

  1. $ ( '#elemen' ). tooltip ( 'sumputkeun' )

.tooltip('toggle')

Toggles tooltip hiji unsur.

  1. $ ( '#elemen' ). tooltip ( 'toggle' )

Ngeunaan popovers

Tambahkeun overlays leutik eusi, kawas nu aya dina iPad, kana elemen naon wae pikeun perumahan informasi sekundér.

* Merlukeun Tooltip pikeun kaasup

Unduh file

Contona hover popover

Hover leuwih tombol pikeun memicu popover nu.


Ngagunakeun bootstrap-popover.js

Aktipkeun popovers via javascript:

  1. $ ( '#conto' ). popover ( pilihan )

Pilihan

Ngaran ngetik standar katerangan
animasi boolean leres nerapkeun transisi fade css ka tooltip
panempatan string|fungsi 'leres' kumaha posisi popover - top | handap | ditinggalkeun | leres
pamilih senar palsu lamun pamilih disadiakeun, obyék tooltip bakal delegated ka target dieusian
pemicu senar 'ngalayang' kumaha tooltip dipicu - hover | fokus | manual
judul string | fungsi '' nilai judul standar upami atribut `judul` teu aya
eusi string | fungsi '' nilai eusi standar lamun atribut `data-content` teu aya
reureuh angka | objék 0

reureuh némbongkeun sarta nyumputkeun popover (ms) - teu dilarapkeun ka tipe pemicu manual

Lamun jumlah disadiakeun, reureuh diterapkeun ka duanana nyumputkeun / acara

Struktur objék nyaéta:delay: { show: 500, hide: 100 }

Mastaka tegak! Pilihan pikeun popovers individu Alternatipna bisa dieusian ngaliwatan pamakéan atribut data.

Markup

Kanggo alesan kinerja, Tooltip sareng Popover data-apis dilebetkeun. Upami anjeun hoyong nganggo éta, tangtoskeun pilihan pamilih.

Métode

$().popover(pilihan)

Initializes popovers pikeun kumpulan unsur.

.popover('show')

Nembongkeun hiji popover unsur.

  1. $ ( '#elemen' ). popover ( 'tunjukkeun' )

.popover('sumputkeun')

Nyumputkeun hiji unsur popover.

  1. $ ( '#elemen' ). popover ( 'sumputkeun' )

.popover('toggle')

Toggles hiji unsur popover.

  1. $ ( '#elemen' ). popover ( 'toggle' )

Ngeunaan béja

Plugin ngageter mangrupikeun kelas leutik pikeun nambihan fungsionalitas anu caket kana panggeuing.

Ngundeur

Conto béwara

Plugin panggeuing tiasa dianggo dina pesen ngageter biasa, sareng meungpeuk pesen.

Guacamole suci! Pangalusna cék anjeun sorangan, anjeun henteu katingali saé teuing.

Aduh jepret! Anjeun ngagaduhan kasalahan!

Robah ieu sareng éta sareng cobian deui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Candak tindakan ieu Atawa ngalakukeun ieu


Ngagunakeun bootstrap-alert.js

Aktipkeun panyabutan peringatan via javascript:

  1. $ ( ". waspada" ). waspada ()

Markup

Ngan tambahkeun data-dismiss="alert"kana tombol nutup anjeun pikeun otomatis masihan hiji fungsi nutup ngageter.

  1. <a class = "nutup" data-ngaleungitkeun = "waspada" href = "#"> & kali; </a>

Métode

$().siaga()

Bungkus sadaya panggeuing kalayan fungsionalitas anu caket. Pikeun ngahirupkeun panggeuing anjeun nalika ditutup, pastikeun aranjeunna gaduh .fadesareng .inkelas anu parantos dilarapkeun ka aranjeunna.

.alert('deukeut')

Nutup béja.

  1. $ ( ". waspada" ). waspada ( 'deukeut' )

Kajadian

Kelas waspada Bootstrap ngungkabkeun sababaraha acara pikeun ngahubungkeun kana fungsionalitas waspada.

Acara Katerangan
nutup Kajadian ieu langsung hurung nalika closemetode conto disebut.
ditutup Kajadian ieu dipecat nalika béwara parantos ditutup (bakal ngantosan transisi css réngsé).
  1. $ ( '#abdi-waspada' ). meungkeut ( 'tutup' , fungsi () {
  2. // ngalakukeun hiji hal ...
  3. })

Ngeunaan

Ngalakukeun leuwih ku tombol. Tombol kontrol nyatakeun atanapi jieun grup tombol pikeun langkung seueur komponén sapertos tulbar.

Unduh file

Conto kagunaan

Paké plugin tombol pikeun nagara bagian jeung toggles.

Stateful
Togel tunggal
Kotak centang
Radio

Ngagunakeun bootstrap-button.js

Aktipkeun tombol via javascript:

  1. $ ( '.nav-tabs' ). tombol ()

Markup

Atribut data anu integral kana plugin tombol. Pariksa conto kode di handap pikeun sababaraha jinis markup.

  1. <!-- Tambihkeun data-toggle="button" pikeun ngaktipkeun toggling dina hiji tombol -->
  2. <button class = "btn" data-toggle = "button" > Toggle Tunggal </button>
  3.  
  4. <!-- Tambahkeun data-toggle="buttons-checkbox" pikeun gaya kotak centang toggling dina btn-group -->
  5. <div class = "btn-group" data-toggle = "tombol-kotak centang" >
  6. <button class = "btn" > Kénca </tombol>
  7. <button class = "btn" > Tengah </button>
  8. <button class = "btn" > Katuhu </button>
  9. </div>
  10.  
  11. <!-- Tambahkeun data-toggle="buttons-radio" pikeun gaya radio toggling dina btn-group -->
  12. <div class = "btn-group" data-toggle = "tombol-radio" >
  13. <button class = "btn" > Kénca </tombol>
  14. <button class = "btn" > Tengah </button>
  15. <button class = "btn" > Katuhu </button>
  16. </div>

Métode

$().button('toggle')

Toggles kaayaan push. Méré tombol tampilan yén éta geus diaktipkeun.

Mastaka tegak! Anjeun tiasa ngaktipkeun tombol toggling otomatis ku ngagunakeun data-toggleatribut.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('loading')

Nyetél kaayaan tombol pikeun ngamuat - nganonaktipkeun tombol sareng swap téks kana ngamuat téks. Ngamuat téks kedah ditetepkeun dina unsur tombol nganggo atribut data data-loading-text.

  1. <button class = "btn" data-loading-text = "ngamuat barang..." > ... </button>
Mastaka tegak! Firefox tetep kaayaan ditumpurkeun sakuliah beban kaca . Solusi pikeun ieu nyaéta ngagunakeun autocomplete="off".

$().button('reset')

Reset kaayaan tombol - swaps téks kana téks aslina.

$().tombol(string)

Reset kaayaan tombol - swaps téks kana sagala data ditetepkeun kaayaan téks.

  1. <button class = "btn" data-complete-text = "réngsé!" > ... </tombol>
  2. <script>
  3. $ ( '.btn' ). tombol ( 'lengkep' )
  4. </script>

Ngeunaan

Kéngingkeun gaya dasar sareng dukungan anu fleksibel pikeun komponén anu tiasa dilipat sapertos akordion sareng navigasi.

Unduh file

* Merlukeun plugin Transisi pikeun kaasup.

Conto akordion

Ngagunakeun plugin runtuhna, urang ngawangun widget gaya akordion basajan:

Anim pariatur cliche reprehenderit, enim eiusmod hirup tinggi accusamus Terry richardson ad cumi. 3 ajag bulan officia aute, non cupidatat skateboard dolor brunch. Truk dahareun quinoa nesciunt laborum eiusmod. Brunch 3 ajag bulan tempor, sunt aliqua nempatkeun manuk dina eta cumi tunggal-asal kopi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan excepteur jagal wakil lomo. Leggings occaecat karajinan bir ladang-to-méja, denim atah estetika synth nesciunt Anjeun meureun geus teu ngadéngé éta accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod hirup tinggi accusamus Terry richardson ad cumi. 3 ajag bulan officia aute, non cupidatat skateboard dolor brunch. Truk dahareun quinoa nesciunt laborum eiusmod. Brunch 3 ajag bulan tempor, sunt aliqua nempatkeun manuk dina eta cumi tunggal-asal kopi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan excepteur jagal wakil lomo. Leggings occaecat karajinan bir ladang-to-méja, denim atah estetika synth nesciunt Anjeun meureun geus teu ngadéngé éta accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod hirup tinggi accusamus Terry richardson ad cumi. 3 ajag bulan officia aute, non cupidatat skateboard dolor brunch. Truk dahareun quinoa nesciunt laborum eiusmod. Brunch 3 ajag bulan tempor, sunt aliqua nempatkeun manuk dina eta cumi tunggal-asal kopi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan excepteur jagal wakil lomo. Leggings occaecat karajinan bir ladang-to-méja, denim atah estetika synth nesciunt Anjeun meureun geus teu ngadéngé éta accusamus labore sustainable VHS.

Ngagunakeun bootstrap-collapse.js

Aktipkeun via javascript:

  1. $ ( ". runtuhna" ). ambruk ()

Pilihan

Ngaran ngetik standar katerangan
kolot pamilih palsu Upami pamilih maka sadaya elemen anu tiasa dilipat dina indungna anu ditangtukeun bakal ditutup nalika item anu tiasa dilipat ieu ditampilkeun. (sarupa jeung kabiasaan akordion tradisional)
togél boolean leres Toggles unsur collapsible on invocation

Markup

Ngan tambahkeun data-toggle="collapse"na a data-targetka elemen pikeun otomatis napelkeun kadali unsur collapsible. Atribut data-targetnampi pamilih css pikeun nerapkeun runtuhna. Pastikeun pikeun nambahkeun kelas collapseka elemen collapsible. Upami anjeun hoyong kabuka sacara standar, tambahkeun kelas tambahan in.

  1. <button class = "btn btn-bahaya" data-toggle = "runtuh" ​​data-target = "#demo" >
  2. basajan collapsible
  3. </tombol>
  4.  
  5. <div id = "demo" class = "runtuhkeun" > ... </div>
Mastaka tegak! Pikeun nambahkeun manajemén grup kawas akordion kana kontrol collapsible, tambahkeun atribut data data-parent="#selector". Tingali kana demo pikeun ningali ieu aksi.

Métode

.collapse(pilihan)

Aktipkeun eusi anjeun salaku unsur collapsible. Narima hiji pilihan pilihan object.

  1. $ ( '#myCollapsible' ). ambruk ({
  2. togél : palsu
  3. })

.collapse('toggle')

Toggles unsur collapsible mun ditémbongkeun atawa disumputkeun.

.collapse('show')

Némbongkeun unsur collapsible.

.collapse('sumputkeun')

Nyumputkeun unsur anu tiasa dilipat.

Kajadian

Kelas runtuh Bootstrap ngungkabkeun sababaraha acara pikeun ngaitkeun kana fungsionalitas runtuh.

Acara Katerangan
nempokeun Kajadian ieu langsung hurung nalika showmetode conto disebut.
ditémbongkeun Kajadian ieu dipecat nalika unsur runtuh parantos katingali ku pangguna (bakal ngantosan transisi css réngsé).
nyumput Kajadian ieu dipecat langsung nalika hidepadika geus disebut.
disumputkeun Kajadian ieu dipecat nalika unsur runtuhna disumputkeun tina pangguna (bakal ngantosan transisi css réngsé).
  1. $ ( '#myCollapsible' ). on ( 'disumputkeun' , fungsi () {
  2. // ngalakukeun hiji hal ...
  3. })

Ngeunaan

Dasar, gampang diperpanjang plugin pikeun gancang nyieun typeaheads elegan jeung sagala formulir input téks.

Unduh file

Contona

Mimitian ngetik dina widang di handap pikeun mintonkeun hasil typeahead.


Ngagunakeun bootstrap-typeahead.js

Nelepon typeahead via javascript:

  1. $ ( '.typeahead' ). hurup ()

Pilihan

Ngaran ngetik standar katerangan
sumber susunan [] Sumber data pikeun query ngalawan.
barang angka 8 Jumlah max item pikeun dipintonkeun dina dropdown nu.
pameget fungsi bisi teu peka Métode anu digunakeun pikeun nangtukeun lamun query cocog hiji item. Narima hiji argumen tunggal, anu itemngalawan pikeun nguji query. Aksés pamundut ayeuna nganggo this.query. Balikkeun boolean trueupami query cocog.
tukang urut fungsi cocok persis,
case sensitive, case
sensitive
Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
highlighter function highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

Markup

Add data attributes to register an element with typeahead functionality.

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

Methods

.typeahead(options)

Initializes an input with a typeahead.