Bireysel veya derlenmiş

Eklentiler tek tek dahil edilebilir (bazıları gerekli bağımlılıklara sahip olsa da) veya hepsi bir kerede dahil edilebilir. Hem bootstrap.js hem de bootstrap.min.js , tüm eklentileri tek bir dosyada içerir.

Veri öznitelikleri

Tüm Bootstrap eklentilerini, tek bir JavaScript satırı yazmadan yalnızca biçimlendirme API'si aracılığıyla kullanabilirsiniz. Bu, Bootstrap'in birinci sınıf API'sidir ve bir eklenti kullanırken ilk düşünceniz olmalıdır.

Bununla birlikte, bazı durumlarda bu işlevin kapatılması istenebilir. Bu nedenle, "data-api" ile isim alan gövde üzerindeki tüm olayların bağlantısını kaldırarak veri özniteliği API'sini devre dışı bırakma yeteneği de sağlıyoruz. Bu şuna benziyor:

$ ( 'vücut' ). kapalı ( '.data-api' )

Alternatif olarak, belirli bir eklentiyi hedeflemek için, eklentinin adını aşağıdaki gibi data-api ad alanıyla birlikte ad alanı olarak eklemeniz yeterlidir:

$ ( 'vücut' ). kapalı ( '.alert.data-api' )

Programatik API

Ayrıca, tüm Bootstrap eklentilerini yalnızca JavaScript API aracılığıyla kullanabilmeniz gerektiğine inanıyoruz. Tüm genel API'ler tek, zincirlenebilir yöntemlerdir ve üzerinde işlem yapılan koleksiyonu döndürür.

$ ( ".btn.tehlike" ). düğmesi ( "geçiş" ). addClass ( "şişman" )

Tüm yöntemler, isteğe bağlı bir seçenekler nesnesini, belirli bir yöntemi hedefleyen bir dizeyi veya hiçbir şeyi (varsayılan davranışa sahip bir eklenti başlatan) kabul etmelidir:

$ ( "#myModal" ). modal () // varsayılanlarla başlatıldı                       
$ ( "#myModal" ). modal ({ klavye : yanlış }) // klavye olmadan başlatıldı     
$ ( "#myModal" ). modal ( 'show' ) // show'u hemen başlatır ve çağırır                

Her eklenti aynı zamanda ham yapıcısını bir "Yapıcı" özelliği üzerinde gösterir: $.fn.popover.Constructor. Belirli bir eklenti örneği almak istiyorsanız, onu doğrudan bir öğeden alın: $('[rel=popover]').data('popover').

Çatışma yok

Bazen Bootstrap eklentilerini diğer UI çerçeveleriyle birlikte kullanmak gerekir. Bu durumlarda, zaman zaman ad alanı çakışmaları meydana gelebilir. Böyle bir durumda, .noConflictdeğerini geri almak istediğiniz eklentiyi arayabilirsiniz.

var bootstrapButton = $ . fn . düğme . noConflict () // $.fn.button'u önceden atanan değere döndür 
$ . fn . bootstrapBtn = bootstrapButton             // $().bootstrapBtn'ye önyükleme işlevini verin

Olaylar

Bootstrap, çoğu eklentinin benzersiz eylemleri için özel olaylar sağlar. Genellikle bunlar mastar ve geçmiş ortaç biçiminde gelir - burada mastar (örn. show) bir olayın başlangıcında tetiklenir ve geçmiş ortaç biçimi (örn. shown) bir eylemin tamamlanmasında tetiklenir.

Tüm mastar olayları, önlemeVarsayılan işlevselliği sağlar. Bu, bir eylemin yürütülmesini başlamadan önce durdurma yeteneği sağlar.

$ ( '#myModal' ). on ( 'göster' , işlev ( e ) {   
    if (! veri ) e döndürür . önlemeDefault () // kipin gösterilmesini durdurur   
})

Geçişler hakkında

Basit geçiş efektleri için, bootstrap-transition.js dosyasını diğer JS dosyalarının yanına ekleyin. Derlenmiş (veya küçültülmüş) bootstrap.js kullanıyorsanız , bunu eklemenize gerek yoktur; zaten oradadır.

Kullanım durumları

Geçiş eklentisine birkaç örnek:

• Modallarda kayma veya solma
• Soluk sekmeler
• Sönen uyarılar
• Sürgülü atlıkarınca bölmeleri

Örnekler

Modal'lar, gerekli minimum işlevsellik ve akıllı varsayılanlarla basitleştirilmiş ancak esnek iletişim istemleridir.

statik örnek

Altbilgide üstbilgi, gövde ve eylemler kümesiyle oluşturulmuş bir modal.

<div class = "modal solmayı gizle" > 
  <div sınıfı = "modal-başlık" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Kalıcı başlık </h3>
  </div>
  <div sınıfı = "modal gövde" > 
    <p> Güzel bir vücut… </p>
  </div>
  <div sınıfı = "modal-altbilgi" > 
    <a href = "#" class = "btn" > Kapat </a>  
    <a href = "#" class = "btn btn-birincil" > Değişiklikleri kaydet </a>  
  </div>
</div>

Canlı demo

Aşağıdaki düğmeyi tıklayarak bir modeli JavaScript aracılığıyla değiştirin. Aşağı kayar ve sayfanın üst kısmından kaybolur.

<!-- Modu tetikleme düğmesi -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo modunu başlat </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal solmayı gizle" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div sınıfı = "modal-başlık" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Kalıcı başlık </h3> 
  </div>
  <div sınıfı = "modal gövde" > 
    <p> Güzel bir vücut… </p>
  </div>
  <div sınıfı = "modal-altbilgi" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Kapat </button>   
    <button class = "btn btn-birincil" > Değişiklikleri kaydet </button> 
  </div>
</div>

kullanım

Veri öznitelikleri aracılığıyla

JavaScript yazmadan bir modeli etkinleştirin. Geçiş yapmak için belirli bir modu hedeflemek için veya data-toggle="modal"ile birlikte bir düğme gibi bir denetleyici öğesinde ayarlayın .data-target="#foo"href="#foo"

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Modu başlat </button>   

JavaScript aracılığıyla

myModalTek bir JavaScript satırı ile kimliği olan bir model çağırın :

$ ( '#myModal' ). mod ( seçenekler )

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-backdrop="".

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

yöntemler

.modal(seçenekler)

İçeriğinizi modal olarak etkinleştirir. İsteğe bağlı seçenekleri kabul eder object.

$ ( '#myModal' ). mod ({
  klavye : yanlış 
})

.modal('geçiş')

Bir modu manuel olarak değiştirir.

$ ( '#myModal' ). modal ( 'geçiş' )

.modal('göster')

Bir modeli manuel olarak açar.

$ ( '#myModal' ). modal ( 'göster' )

.modal('gizle')

Bir modu el ile gizler.

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

Olaylar

Bootstrap'in modal sınıfı, modal işlevselliğe bağlanmak için birkaç olayı ortaya çıkarır.

$ ( '#myModal' ). açık ( 'gizli' , işlev () {   
  // bir şey yap…
})

Örnekler

Gezinme çubuğu, sekmeler ve haplar dahil olmak üzere bu basit eklentiyle hemen hemen her şeye açılır menüler ekleyin.

Bir gezinme çubuğu içinde

sekmeler içinde

kullanım

Veri öznitelikleri aracılığıyla

data-toggle="dropdown"Bir açılır liste arasında geçiş yapmak için bir bağlantıya veya düğmeye ekleyin .

<div sınıfı = "açılır menü" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Açılan tetikleyici </a>   
  <ul class = "açılır menü" rolü = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL'leri olduğu gibi tutmak için data-targetözniteliği yerine kullanın href="#".

<div sınıfı = "açılır menü" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Yıkılmak
    <b sınıfı = "şapka" ></b> 
  </a>
  <ul class = "açılır menü" rolü = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript aracılığıyla

JavaScript aracılığıyla açılır listeleri arayın:

$ ( '.dropdown-toggle' ). açılır menü ()

Seçenekler

Hiçbiri

yöntemler

$().dropdown('geçiş')

Belirli bir gezinme çubuğu veya sekmeli gezinme için menüler arasında geçiş yapmak için programlı bir API.

Gezinme çubuğundaki örnek

ScrollSpy eklentisi, kaydırma konumuna göre gezinme hedeflerini otomatik olarak güncellemek içindir. Gezinme çubuğunun altındaki alanı kaydırın ve aktif sınıf değişimini izleyin. Açılır alt öğeler de vurgulanacaktır.

kullanım

Veri öznitelikleri aracılığıyla

Üst çubuk navigasyonunuza kolayca scrollspy davranışı eklemek data-spy="scroll"için, gözetlemek istediğiniz öğeye ekleyin (genellikle bu gövde olur) ve data-target=".navbar"hangi navigasyonun kullanılacağını seçin. .navBir bileşenle scrollspy kullanmak isteyeceksiniz .

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

JavaScript aracılığıyla

JavaScript ile scrollspy'ı arayın:

$ ( '#navbar' ). kaydırma casusu ()

yöntemler

.scrollspy('yenile')

DOM'a öğe ekleme veya çıkarma ile birlikte scrollspy kullanırken, yenileme yöntemini şu şekilde çağırmanız gerekir:

$ ( '[data-spy="scroll"]' ). her ( işlev () {  
  var $spy = $ ( this ). scrollspy ( 'yenile' )
});

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-offset="".

Olaylar

Örnek sekmeler

Açılır menüler aracılığıyla bile yerel içerik bölmeleri arasında geçiş yapmak için hızlı, dinamik sekme işlevi ekleyin.

kullanım

JavaScript aracılığıyla sekmeli sekmeleri etkinleştirin (her sekmenin ayrı ayrı etkinleştirilmesi gerekir):

$ ( '#myTab a' ). tıklayın ( işlev ( e ) {  
  e . önlemeVarsayılan ();
  $ ( bu ). sekme ( 'göster' );
})

Tek tek sekmeleri birkaç şekilde etkinleştirebilirsiniz:

$ ( '#myTab a[href="#profile"]' ). sekme ( 'göster' ); // Ada göre sekme seçin 
$ ( '#myTab a:ilk' ). sekme ( 'göster' ); // İlk sekmeyi seç 
$ ( '#myTab a:son' ). sekme ( 'göster' ); // Son sekmeyi seç 
$ ( '#myTab li:eq(2) a' ). sekme ( 'göster' ); // Üçüncü sekmeyi seç (0 indeksli) 

İşaretleme

Bir öğeyi basitçe belirterek data-toggle="tab"veya üzerinde JavaScript yazmadan bir sekmeyi veya hap navigasyonunu etkinleştirebilirsiniz . Sekmeye ve sınıfları data-toggle="pill"eklemek , Bootstrap sekme stilini uygular.navnav-tabsul

<ul class = "nav gezinme sekmeleri" > 
  <li><a href = "#home" data-toggle = "tab" > Ana Sayfa </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mesajlar </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Ayarlar </a></li>  
</ul>

yöntemler

$().sekme

Bir sekme öğesini ve içerik kapsayıcısını etkinleştirir. Sekme, DOM'da bir kapsayıcı düğümünü hedefleyen data-targetveya bir kapsayıcı düğümüne sahip olmalıdır.href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "etkin" ><a href = "#home" > Ana Sayfa </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Mesajlar </a></li> 
  <li><a href = "#settings" > Ayarlar </a></li> 
</ul>
 
<div class = "sekme içeriği" > 
  <div class = "sekme bölmesi etkin" id = "ev" > ... </div>  
  <div class = "sekme bölmesi" id = "profil" > ... </div>  
  <div class = "sekme bölmesi" id = "mesajlar" > ... </div>  
  <div class = "sekme bölmesi" id = "ayarlar" > ... </div>  
</div>
 
<script>
  $ ( işlev () {  
    $ ( '#myTab a:son' ). sekme ( 'göster' );
  })
</script>

Olaylar

$ ( 'a[data-toggle="tab"]' ). on ( 'gösterilen' , işlev ( e ) {   
  e . hedef // aktif sekme
  e . ilgiliTarget // önceki sekme
})

Örnekler

Jason Frame tarafından yazılmış mükemmel jQuery.tipsy eklentisinden esinlenilmiştir; Araç ipuçları, resimlere dayanmayan, animasyonlar için CSS3 ve yerel başlık depolaması için veri öznitelikleri kullanan güncellenmiş bir sürümdür.

Performans nedenleriyle, araç ipucu ve açılır veri apileri etkinleştirilmiştir, yani bunları kendiniz başlatmanız gerekir .

Araç ipuçlarını görmek için aşağıdaki bağlantıların üzerine gelin:

dört yön

Giriş gruplarındaki araç ipuçları

Önyükleme giriş gruplarıyla araç ipuçlarını ve açılır pencereleri kullanırken, containeristenmeyen yan etkilerden kaçınmak için (aşağıda belgelenmiştir) seçeneğini ayarlamanız gerekir.

kullanım

Araç ipucunu JavaScript aracılığıyla tetikleyin:

$ ( '#örnek' ). araç ipucu ( seçenekler )

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-animation="".

İşaretleme

<a href = "#" data-toggle = "tooltip" title = "ilk araç ipucu" > fareyle üzerime gelin </a>   

yöntemler

$().tooltip(seçenekler)

Bir öğe koleksiyonuna bir araç ipucu işleyicisi ekler.

.tooltip('göster')

Bir öğenin ipucunu ortaya çıkarır.

$ ( '#eleman' ). araç ipucu ( 'göster' )

.tooltip('gizle')

Bir öğenin ipucunu gizler.

$ ( '#eleman' ). araç ipucu ( 'gizle' )

.tooltip('geçiş')

Bir öğenin ipucunu değiştirir.

$ ( '#eleman' ). araç ipucu ( 'geçiş' )

.tooltip('yok et')

Bir öğenin ipucunu gizler ve yok eder.

$ ( '#eleman' ). araç ipucu ( 'yok et' )

Örnekler

İkincil bilgileri barındırmak için herhangi bir öğeye iPad'deki gibi küçük içerik katmanları ekleyin. Popover'ı tetiklemek için düğmenin üzerine gelin. Araç ipucunun dahil edilmesini gerektirir .

statik popover

Dört seçenek mevcuttur: üst, sağ, alt ve sola hizalı.

dataJavaScript'ten ve bir öznitelik içindeki içerikten popover'lar olarak gösterilen hiçbir işaretleme oluşturulmaz .

Canlı demo

dört yön

kullanım

JavaScript aracılığıyla açılır pencereleri etkinleştirin:

$ ( '#örnek' ). popover ( seçenekler )

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-animation="".

İşaretleme

Performans nedenleriyle, Araç İpucu ve Popover veri apileri etkinleştirilir. Bunları kullanmak isterseniz bir seçici seçeneği belirtmeniz yeterlidir.

yöntemler

$().popover(seçenekler)

Bir öğe koleksiyonu için açılır pencereleri başlatır.

.popover('göster')

Bir öğe popover'ı ortaya çıkarır.

$ ( '#eleman' ). popover ( 'göster' )

.popover('gizle')

Bir öğe açılır penceresini gizler.

$ ( '#eleman' ). popover ( 'gizle' )

.popover('geçiş')

Bir öğe açılır penceresini değiştirir.

$ ( '#eleman' ). popover ( 'geçiş' )

.popover('yok et')

Bir öğenin popover'ını gizler ve yok eder.

$ ( '#eleman' ). popover ( 'yok etmek' )

Örnek uyarılar

Bu eklenti ile tüm uyarı mesajlarına kapatma işlevi ekleyin.

kullanım

JavaScript aracılığıyla bir uyarının kapatılmasını etkinleştir:

$ ( ".uyarı" ). uyarı ()

İşaretleme

data-dismiss="alert"Otomatik olarak bir uyarı kapatma işlevi vermek için kapat düğmenize ekleyin .

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

yöntemler

$().uyarı()

Yakın işlevsellik ile tüm uyarıları sarar. Uyarılarınızın kapatıldığında canlandırılması için, .fadeand .insınıfının kendilerine uygulanmış olduğundan emin olun.

.alert('kapat')

Bir uyarıyı kapatır.

$ ( ".uyarı" ). uyarı ( 'kapat' )

Olaylar

Bootstrap'in uyarı sınıfı, uyarı işlevine bağlanmak için birkaç olayı ortaya çıkarır.

$ ( '#uyartım' ). bağlama ( 'kapalı' , işlev () {   
  // bir şey yap…
})

Örnek kullanımlar

Düğmelerle daha fazlasını yapın. Araç çubukları gibi daha fazla bileşen için düğme durumlarını kontrol edin veya düğme grupları oluşturun.

durum bilgisi

data-loading-text="Loading..."Bir düğmede yükleme durumu kullanmak için ekleyin .

<button type = "button" class = "btn btn-primary" data-loading-text = "Yükleniyor..." > Yükleme durumu </button>   

Tek geçiş

data-toggle="button"Tek bir düğme üzerinde geçişi etkinleştirmek için ekleyin .

<button type = "button" class = "btn btn-birincil" data-toggle = "button" > Tek Geçiş </button>   

onay kutusu

data-toggle="buttons-checkbox"btn-group'ta geçiş yapan onay kutusu stili için ekleyin .

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-birincil" > Sol </button>  
  <button type = "button" class = "btn btn-birincil" > Orta </button>  
  <button type = "button" class = "btn btn-birincil" > Sağ </button>  
</div>

Radyo

data-toggle="buttons-radio"btn-group'ta radyo stili geçişi için ekleyin .

<div class = "btn-group" data-toggle = "düğmeler-radyo" >  
  <button type = "button" class = "btn btn-birincil" > Sol </button>  
  <button type = "button" class = "btn btn-birincil" > Orta </button>  
  <button type = "button" class = "btn btn-birincil" > Sağ </button>  
</div>

kullanım

JavaScript aracılığıyla düğmeleri etkinleştirin:

$ ( '.nav-tabs' ). düğme ()

İşaretleme

Veri öznitelikleri, düğme eklentisinin ayrılmaz bir parçasıdır. Çeşitli işaretleme türleri için aşağıdaki örnek kodu inceleyin.

Seçenekler

Hiçbiri

yöntemler

$().button('geçiş')

İtme durumunu değiştirir. Düğmeye etkinleştirilmiş görünümü verir.

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

$().button('yükleniyor')

Düğme durumunu yükleme olarak ayarlar - düğmeyi devre dışı bırakır ve metni yükleme metniyle değiştirir. Yükleme metni, data özniteliği kullanılarak button öğesinde tanımlanmalıdır data-loading-text.

<button type = "button" class = "btn" data-loading-text = "malzeme yükleniyor..." > ... </button>    

$().button('sıfırla')

Düğme durumunu sıfırlar - metni orijinal metne değiştirir.

$().düğme(dize)

Düğme durumunu sıfırlar - metni herhangi bir veri tanımlı metin durumuna değiştirir.

<button type = "button" class = "btn" data-complete-text = "bitti!" > ... </düğme>    
<script>
  $ ( '.btn' ). düğmesi ( 'tamamlandı' )
</script>

Hakkında

Akordeonlar ve navigasyon gibi katlanabilir bileşenler için temel stiller ve esnek destek alın.

* Geçişler eklentisinin dahil edilmesini gerektirir.

Örnek akordeon

Daraltma eklentisini kullanarak basit bir akordeon stili widget'ı oluşturduk:

<div class = "akordeon" id = "akordeon2" >  
  <div class = "akordeon grubu" > 
    <div class = "akordeon başlığı" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Katlanabilir Grup Öğesi #1
      </a>
    </div>
    <div id = "collapseOne" class = "akordeon gövdesi çökmesi" >  
      <div class = "akordeon-iç" > 
        Animasyon klişesi...
      </div>
    </div>
  </div>
  <div class = "akordeon grubu" > 
    <div class = "akordeon başlığı" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Katlanabilir Grup Öğesi #2
      </a>
    </div>
    <div id = "collapseTwo" class = "akordeon gövdesi çökmesi" >  
      <div class = "akordeon-iç" > 
        Animasyon klişesi...
      </div>
    </div>
  </div>
</div>
...

Eklentiyi akordeon işareti olmadan da kullanabilirsiniz. Başka bir öğenin genişletilmesi ve daraltılması arasında geçiş yapan bir düğme yapın.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  basit katlanabilir
</button>
 
<div id = "demo" class = "daralt" > … </div>  

kullanım

Veri öznitelikleri aracılığıyla

Katlanabilir bir öğenin kontrolünü otomatik olarak atamak için bir öğeye data-toggle="collapse"ve bir öğeye eklemeniz yeterlidir. Öznitelik, daraltmanın uygulanacağı bir css seçiciyi kabul eder data-target. Sınıfı daraltılabilir öğeye data-targeteklediğinizden emin olun . collapseVarsayılan olarak açılmasını istiyorsanız, ek sınıfı ekleyin in.

Daraltılabilir bir kontrole akordeon benzeri grup yönetimi eklemek için data niteliğini ekleyin data-parent="#selector". Bunu çalışırken görmek için demoya bakın.

JavaScript aracılığıyla

Şunlarla manuel olarak etkinleştirin:

$ ( ".daralt" ). çöküş ()

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-parent="".

yöntemler

.collapse(seçenekler)

İçeriğinizi daraltılabilir bir öğe olarak etkinleştirir. İsteğe bağlı seçenekleri kabul eder object.

$ ( '#benimCollapsible' ). daralt ({
  geçiş : yanlış 
})

.collapse('geçiş')

Daraltılabilir bir öğeyi gösterilen veya gizli olarak değiştirir.

.collapse('göster')

Katlanabilir bir öğe gösterir.

.collapse('gizle')

Bir daraltılabilir öğeyi gizler.

Olaylar

Bootstrap'in daraltma sınıfı, daraltma işlevine bağlanmak için birkaç olayı ortaya çıkarır.

$ ( '#benimCollapsible' ). açık ( 'gizli' , işlev () {   
  // bir şey yap…
})

Örnek atlıkarınca

Aşağıdaki slayt gösterisi, atlıkarınca gibi öğeler arasında geçiş yapmak için genel bir eklenti ve bileşeni gösterir.

İlk Küçük Resim etiketi

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id, eget metus'ta elit olmayan porta gravida. Nullam kimliği dolor kimliği nibh ultricies vehicula ut id elit.

İkinci Küçük Resim etiketi

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id, eget metus'ta elit olmayan porta gravida. Nullam kimliği dolor kimliği 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.

‹ ›

<div id = "myCarousel" sınıfı = "atlıkarınca slayt" >  
  <ol class = "atlıkarınca göstergeleri" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "etkin" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Dönen öğeler -->
  <div class = "atlıkarınca-iç" > 
    <div class = "etkin öğe" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Dönen Karusel -->
  <a class = "sol atlıkarınca kontrolü" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

kullanım

Veri öznitelikleri aracılığıyla

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to it's current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which jump's the slide position to a particular index beginning with 0.

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to data-, as in data-interval="".

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

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

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Example

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

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

You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.

Usage

Via data attributes

Add data attributes to register an element with typeahead functionality as shown in the example above.

Via JavaScript

Call the typeahead manually with:

$('.typeahead').typeahead()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

Methods

.typeahead(options)

Initializes an input with a typeahead.

Example

The subnavigation on the left is a live demo of the affix plugin.

Usage

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

<div data-spy="affix" data-offset-top="200">...</div>

Via JavaScript

Call the affix plugin via JavaScript:

$('#navbar').affix()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".