Ngeunaan modals

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

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.

Ngagunakeun bootstrap-modal

Nelepon modal via javascript:

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

Pilihan

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.

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

<div class = "modal sumputkeun" id = "myModal" >  
  <div class = "modal-header" > 
    <tombol type = "tombol" class = "tutup" data-dismiss = "modal" > × </tombol>   
    <h3> Modal lulugu </h3>
  </div>
  <div class = "modal-body" > 
    <p> Hiji awak alus... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Tutup </a>   
    <a href = "#" class = "btn btn-primary" > Simpen parobahan </a>  
  </div>
</div>

Métode

.modal(pilihan)

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

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

.modal('toggle')

Sacara manual toggles modal.

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

.modal('show')

Sacara manual muka modal.

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

.modal('sumputkeun')

Sacara manual nyumputkeun modal.

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

Kajadian

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

$ ( '#MyModal' ). on ( 'disumputkeun' , fungsi () {   
  // ngalakukeun hiji hal ...
})

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

Contona

Klik dina dropdown nav Tumbu dina navbar na Pél handap pikeun uji dropdowns.

• Tumbu biasa
• Puragkeun
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 3
  • Action
  • Another action
  • Something else here
  • Separated link

Ngagunakeun bootstrap-dropdown.js

Nelepon dropdowns via javascript:

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

Markup

Pikeun gancang nambahkeun fungsionalitas dropdown kana unsur naon baé ngan tambahkeun data-toggle="dropdown"tur sagala dropdown bootstrap valid bakal otomatis diaktipkeun.

<ul class = "nav nav-pils" > 
  <li class = "aktif" ><a href = "#" > Tautan biasa </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Puragkeun
      <b class = "caret" ></b> 
    </a>
    <ul class = "menu dropdown" > 
      <li><a href = "#" > Aksi </a></li> 
      <li><a href = "#" > Peta sejen </a></li> 
      <li><a href = "#" > Lain di dieu </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Tautan dipisahkeun </a></li> 
    </ul>
  </li>
  ...
</ul>

Pikeun ngajaga URL gembleng, nganggo data-targetatribut tinimbang href="#".

<ul class = "nav nav-pils" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Puragkeun
      <b class = "caret" ></b> 
    </a>
    <ul class = "menu dropdown" > 
      ...
    </ul>
  </li>
</ul>

Métode

$().dropdown()

Api program pikeun ngaktipkeun ménu pikeun navbar atanapi navigasi tab.

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

Conto navbar kalawan scrollspy

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

Ngagunakeun bootstrap-scrollspy.js

Nelepon scrollspy via javascript:

$ ( '#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).

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

Métode

.scrollspy('refresh')

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

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

Pilihan

Kajadian

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

Conto tab

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

• Imah
• Propil
• Puragkeun
  • @fat
  • @mdo

Ngagunakeun bootstrap-tab.js

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

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

Anjeun tiasa ngaktipkeun tab individu ku sababaraha cara:

$ ( '#myTab a[href="#profile"]' ). tab ( 'témbongkeun' ); // Pilih tab ku ngaran 
$ ( '#MyTab a:mimiti' ). tab ( 'témbongkeun' ); // Pilih tab kahiji 
$ ( '#MyTab a:panungtung' ). tab ( 'témbongkeun' ); // Pilih tab panungtungan 
$ ( '#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.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Propil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Talatah </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Setélan </a></li>  
</ul>

Métode

$().tab

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

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Propil </a></li> 
  <li><a href = "#messages" > Talatah </a></li> 
  <li><a href = "#settings" > Setélan </a></li> 
</ul>
 
<div class = "eusi tab" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profil" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( fungsi () {  
    $ ( '#MyTab a:panungtung' ). tab ( 'témbongkeun' );
  })
</script>

Kajadian

$ ( 'a[data-toggle="tab"]' ). on ( 'ditémbongkeun' , fungsi ( e ) {   
  e . target // tab diaktipkeun
  e . relatedTarget // tab saméméhna
})

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.

Conto pamakéan Tooltips

Hover dina tumbu di handap pikeun ningali tooltips:

Ngagunakeun bootstrap-tooltip.js

Micu tooltip via javascript:

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

Pilihan

Markup

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

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

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

.tooltip('sumputkeun')

Nyumputkeun tooltip unsur.

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

.tooltip('toggle')

Toggles tooltip hiji unsur.

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

Contona hover popover

Hover leuwih tombol pikeun memicu popover nu.

Ngagunakeun bootstrap-popover.js

Aktipkeun popovers via javascript:

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

Pilihan

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.

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

.popover('sumputkeun')

Nyumputkeun hiji unsur popover.

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

.popover('toggle')

Toggles hiji unsur popover.

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

Ngeunaan béja

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

Conto béwara

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

Ngagunakeun bootstrap-alert.js

Aktipkeun panyabutan peringatan via javascript:

$ ( ". waspada" ). waspada ()

Markup

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

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

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

Kajadian

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

$ ( '#abdi-waspada' ). meungkeut ( 'tutup' , fungsi () {   
  // ngalakukeun hiji hal ...
})

Ngeunaan

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

Conto kagunaan

Paké plugin tombol pikeun nagara bagian jeung toggles.

Ngagunakeun bootstrap-button.js

Aktipkeun tombol via javascript:

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

Markup

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

<!-- Tambihkeun data-toggle="button" pikeun ngaktipkeun toggling dina hiji tombol -->
<button class = "btn" data-toggle = "button" > Toggle Tunggal </button>  
 
<!-- Tambahkeun data-toggle="buttons-checkbox" pikeun gaya kotak centang toggling dina btn-group -->
<div class = "btn-group" data-toggle = "tombol-kotak centang" >  
  <button class = "btn" > Kénca </tombol> 
  <button class = "btn" > Tengah </button> 
  <button class = "btn" > Katuhu </button> 
</div>
 
<!-- Tambahkeun data-toggle="buttons-radio" pikeun gaya radio toggling dina btn-group -->
<div class = "btn-group" data-toggle = "tombol-radio" >  
  <button class = "btn" > Kénca </tombol> 
  <button class = "btn" > Tengah </button> 
  <button class = "btn" > Katuhu </button> 
</div>

Métode

$().button('toggle')

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

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

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

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

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

Ngeunaan

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

* Merlukeun plugin Transisi pikeun kaasup.

Conto akordion

Ngagunakeun plugin runtuhna, urang ngawangun widget gaya akordion basajan:

Ngagunakeun bootstrap-collapse.js

Aktipkeun via javascript:

$ ( ". runtuhna" ). ambruk ()

Pilihan

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.

<button class = "btn btn-bahaya" data-toggle = "runtuh" ​​data-target = "#demo" >   
  basajan collapsible
</tombol>
 
<div id = "demo" class = "runtuhkeun" > ... </div>  

Métode

.collapse(pilihan)

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

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

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

$ ( '#myCollapsible' ). on ( 'disumputkeun' , fungsi () {   
  // ngalakukeun hiji hal ...
})

Ngeunaan

A plugin generik pikeun Ngabuburit ngaliwatan elemen. A merry-go-round.

Contona carousel

Lalajo pintonan slaid di handap.

Label Gambar leutik munggaran

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.

Second Thumbnail label

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

Third Thumbnail label

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

‹ ›

Ngagunakeun bootstrap-carousel.js

Telepon via javascript:

$ ( '.carousel' ). carousel ()

Pilihan

Markup

Atribut data dipaké pikeun kontrol saméméhna jeung saterusna. Pariksa conto markup di handap.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Item carousel -->
  <div class = "carousel-batin" > 
    <div class = "item aktip" > ... </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> & lsaquo ; </a>   
  <a class = "carousel-control katuhu" href = "#myCarousel" data-slide = "salajengna"> & rsaquo ; </a>   
</div>

Métode

.carousel(pilihan)

Initializes carousel kalawan pilihan pilihan objecttur mimitian Ngabuburit ngaliwatan item.

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

.carousel('siklus')

Siklus ngaliwatan item carousel ti kénca ka katuhu.

.carousel('pause')

Ngeureunkeun carousel tina ngurilingan barang.

.carousel(nomer)

Siklus carousel kana pigura nu tangtu (0 dumasar, sarupa hiji Asép Sunandar Sunarya).

.carousel('saméméhna')

Siklus ka item saméméhna.

.carousel('salajengna')

Siklus ka item salajengna.

Kajadian

Kelas carousel Bootstrap ngungkabkeun dua acara pikeun ngaitkeun kana fungsionalitas carousel.

Ngeunaan

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

Contona

Mimitian ngetik dina widang di handap pikeun mintonkeun hasil typeahead.

Ngagunakeun bootstrap-typeahead.js

Nelepon typeahead via javascript:

$ ( '.typeahead' ). hurup ()

Pilihan

Markup

Add data attributes to register an element with typeahead functionality.

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

Methods

.typeahead(options)

Initializes an input with a typeahead.