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 class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Kalıcı başlık </h3>
  </div>
  <div class = "modal-body" > 
    <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 class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Kalıcı başlık </h3> 
  </div>
  <div class = "modal-body" > 
    <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 gezinme sekmeleri" 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 tooltip" > 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.

$ ( '#uyarim' ). 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üklemeye ayarlar - düğmeyi devre dışı bırakır ve metni yükleme metnine 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 = "akordeon-geçiş" 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.

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.

‹ ›

<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

Döngü konumunu kolayca kontrol etmek için veri özniteliklerini kullanın. Slayt konumunu geçerli konumuna göre değiştiren veya data-slideanahtar sözcüklerini kabul eder . Alternatif olarak, slayt konumunu ile başlayan belirli bir dizine atlayan atlıkarıncaya ham bir slayt indeksi iletmek için kullanın .prevnextdata-slide-todata-slide-to="2"0

JavaScript aracılığıyla

Carousel'i şu şekilde manuel olarak arayın:

$ ( '.carousel' ). atlıkarınca ()

Seçenekler

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

yöntemler

.carousel(seçenekler)

Atlıkarıncayı isteğe bağlı seçeneklerle objectbaşlatır ve öğeler arasında geçiş yapmaya başlar.

$ ( '.carousel' ). atlıkarınca ({
  aralık : 2000 
})

.carousel('döngü')

Döngü öğeleri arasında soldan sağa doğru geçiş yapar.

.carousel('duraklat')

Karuselin öğeler arasında dolaşmasını durdurur.

.carousel(sayı)

Döngü belirli bir kareye (0 tabanlı, bir diziye benzer) döner.

.carousel('önceki')

Önceki öğeye geçiş yapar.

.carousel('sonraki')

Bir sonraki öğeye geçiş yapar.

Olaylar

Bootstrap'in carousel sınıfı, carousel işlevselliğine bağlanmak için iki olayı ortaya çıkarır.

Örnek

Herhangi bir form metin girişi ile hızlı bir şekilde zarif daktilolar oluşturmak için basit, kolayca genişletilen bir eklenti.

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

autocomplete="off"Önyükleme yazı tipi açılır menüsünde varsayılan tarayıcı menülerinin görünmesini engellemek için ayarlamak isteyeceksiniz .

kullanım

Veri öznitelikleri aracılığıyla

Yukarıdaki örnekte gösterildiği gibi daktilo işlevine sahip bir öğeyi kaydetmek için veri öznitelikleri ekleyin.

JavaScript aracılığıyla

Yazı tipini manuel olarak şu şekilde arayın:

$ ( '.typeahead' ). daktilo ()

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-source="".

yöntemler

.typeahead(seçenekler)

Yazılı bir girişi başlatır.

Örnek

Soldaki alt gezinme, eklenti eklentisinin canlı bir demosudur.

kullanım

Veri öznitelikleri aracılığıyla

Herhangi bir öğeye kolayca ekleme davranışı eklemek data-spy="affix"için, casusluk yapmak istediğiniz öğeye eklemeniz yeterlidir. Ardından, bir öğenin sabitlemesinin ne zaman açılıp kapatılacağını tanımlamak için ofsetleri kullanın.

<div data-spy = "iliştirme" data-offset-top = "200" > ... </div>  

JavaScript aracılığıyla

Eklenti eklentisini JavaScript aracılığıyla çağırın:

$ ( '#navbar' ). iliştirmek ()

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-top="200".