Modallar hakkında

Basitleştirilmiş, ancak esnek, geleneksel javascript modal eklentisini yalnızca gerekli minimum işlevsellik ve akıllı varsayılanlarla üstlenir.

statik örnek

Aşağıda statik olarak oluşturulmuş bir modal bulunmaktadır.

Canlı demo

Aşağıdaki düğmeyi tıklayarak javascript aracılığıyla bir kip arasında geçiş yapın. Aşağı kayar ve sayfanın üst kısmından kaybolur.

Önyükleme modunu kullanma

Modalı javascript ile arayın:

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

Seçenekler

İşaretleme

Tek bir javascript satırı yazmanıza gerek kalmadan sayfanızdaki modları kolayca etkinleştirebilirsiniz. Yalnızca bir veya kalıcı öğe kimliğine karşılık gelen data-toggle="modal"bir denetleyici öğesinde ayarlayın ve tıklandığında, modunuzu başlatır.data-target="#foo"href="#foo"

Ayrıca, kalıcı örneğinize seçenekler eklemek için bunları kontrol öğesinde veya kalıcı biçimlendirmenin kendisinde ek veri öznitelikleri olarak eklemeniz yeterlidir.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Modal'ı Başlat </a>    

<div class = "modal gizleme" id = "myModal" >  
  <div sınıfı = "modal-başlık" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </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" data-dismiss = "modal" > Kapat </a>   
    <a href = "#" class = "btn btn-birincil" > Değişiklikleri kaydet </a>  
  </div>
</div>

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…
})

Açılır menüler hakkında

Bu basit eklenti ile Bootstrap'taki hemen hemen her şeye açılır menüler ekleyin. Bootstrap, gezinme çubuğunda, sekmelerde ve haplarda tam açılır menü desteği sunar.

Örnekler

Açılır listeleri test etmek için gezinme çubuğundaki açılır gezinme bağlantılarına ve aşağıdaki haplara tıklayın.

• Normal bağlantı
• Yıkılmak
  • Action
  • Another action
  • Something else here
  • Separated link
• Açılır 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Açılır 3
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.js'yi kullanma

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

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

İşaretleme

Herhangi bir öğeye hızlı bir şekilde açılır menü işlevi eklemek için eklemeniz yeterlidir; data-toggle="dropdown"geçerli herhangi bir önyükleme açılır menüsü otomatik olarak etkinleştirilecektir.

<ul class = "nav nav hapları" > 
  <li class = "etkin" ><a href = "#" > Normal bağlantı </a></li>  
  <li class = "açılır menü" id = "menu1" >  
    <a class = "açılır-açılır" data-toggle = "açılır" href = "#menu1" >   
      Yıkılmak
      <b sınıfı = "şapka" ></b> 
    </a>
    <ul class = "açılır menü" > 
      <li><a href = "#" > Eylem </a></li> 
      <li><a href = "#" > Başka bir işlem </a></li> 
      <li><a href = "#" > Burada başka bir şey var </a></li> 
      <li sınıf = "bölücü" ></li> 
      <li><a href = "#" > Ayrılmış bağlantı </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav hapları" > 
  <li class = "açılır menü" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Yıkılmak
      <b sınıfı = "şapka" ></b> 
    </a>
    <ul class = "açılır menü" > 
      ...
    </ul>
  </li>
</ul>

yöntemler

$().dropdown()

Belirli bir gezinme çubuğu veya sekmeli gezinme için menüleri etkinleştirmek için programlı bir API.

ScrollSpy eklentisi, kaydırma konumuna göre gezinme hedeflerini otomatik olarak güncellemek içindir.

Scrollspy ile örnek gezinme çubuğu

Aşağıdaki alanı kaydırın ve navigasyon güncellemesini izleyin. Açılır alt öğeler de vurgulanacaktır. Dene!

bootstrap-scrollspy.js'yi kullanma

Javascript aracılığıyla scrollspy'ı arayın:

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

İşaretleme

Üst çubuk navigasyonunuza kolayca scrollspy davranışı eklemek data-spy="scroll"için, gözetlemek istediğiniz öğeye eklemeniz yeterlidir (çoğunlukla bu gövde olur).

<body data-spy = "kaydır" > ... </body>  

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

Olaylar

Bu eklenti, yerel içerik arasında geçiş yapmak için hızlı, dinamik sekme ve hap işlevi ekler.

Örnek sekmeler

Açılır menüler aracılığıyla bile gizli bölmeler arasında geçiş yapmak için aşağıdaki sekmeleri tıklayın.

• Ev
• Profil
• Yıkılmak
  • @fat
  • @mdo

bootstrap-tab.js'yi kullanma

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

Herhangi bir javascript yazmadan bir öğeyi data-toggle="tab"veya data-toggle="pill"bir öğeyi belirterek bir sekmeyi veya hap navigasyonunu etkinleştirebilirsiniz. navSekmeye ve nav-tabssınıfları eklemek ul, önyükleme sekmesi stilini uygular.

<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
})

Araç İpuçları Hakkında

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 özniteliklerini kullanan güncellenmiş bir sürümdür.

Araç İpuçlarının Örnek Kullanımı

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

bootstrap-tooltip.js'yi kullanma

Araç ipucunu javascript ile tetikleyin:

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

Seçenekler

İşaretleme

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

<a href = "#" rel = "tooltip" title = "ilk ipucu" > imleci üzerime getirin </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ş' )

Popover'lar hakkında

İkincil bilgileri barındırmak için herhangi bir öğeye iPad'deki gibi küçük içerik katmanları ekleyin.

* Araç ipucunun dahil edilmesini gerektirir

Örnek vurgulu popover

Popover'ı tetiklemek için düğmenin üzerine gelin.

bootstrap-popover.js'yi kullanma

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

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

Seçenekler

İş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ş' )

uyarılar hakkında

Uyarı eklentisi, uyarılara yakın işlevsellik eklemek için küçük bir sınıftır.

Örnek uyarılar

Uyarı eklentisi normal uyarı mesajları üzerinde çalışır ve mesajları engeller.

bootstrap-alert.js'yi kullanma

Javascript aracılığıyla bir uyarının kapatılmasını etkinleştirin:

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

Hakkında

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.

Örnek kullanımlar

Durumlar ve geçişler için düğmeler eklentisini kullanın.

bootstrap-button.js'yi kullanma

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.

<!-- Tek bir düğmede geçişi etkinleştirmek için data-toggle="button" ekleyin -->
<button class = "btn" data-toggle = "button" > Tek Geçiş </button>  
 
<!-- btn-group'ta onay kutusu stili arasında geçiş yapmak için data-toggle="buttons-checkbox" ekleyin -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Sol </button> 
  <button class = "btn" > Orta </button> 
  <button class = "btn" > Sağ </button> 
</div>
 
<!-- btn-group'ta radyo stili geçişi için data-toggle="buttons-radio" ekleyin -->
<div class = "btn-group" data-toggle = "düğmeler-radyo" >  
  <button class = "btn" > Sol </button> 
  <button class = "btn" > Orta </button> 
  <button class = "btn" > Sağ </button> 
</div>

yöntemler

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

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

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

bootstrap-collapse.js'yi kullanma

Javascript ile etkinleştirin:

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

Seçenekler

İşaretleme

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.

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

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…
})

Hakkında

Öğeler arasında geçiş yapmak için genel bir eklenti. Bir atlıkarınca.

Örnek atlıkarınca

Aşağıdaki slayt gösterisini izleyin.

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

Üçüncü 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.

‹ ›

bootstrap-carousel.js'yi kullanma

Javascript ile arayın:

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

Seçenekler

İşaretleme

Veri öznitelikleri önceki ve sonraki kontroller için kullanılır. Aşağıdaki örnek işaretlemeye göz atın.

<div id = "myCarousel" sınıfı = "atlıkarınca slayt" >  
  <!-- 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>

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.

Hakkında

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

Örnek

Daktilo sonuçlarını göstermek için aşağıdaki alana yazmaya başlayın.

bootstrap-typeahead.js'yi kullanma

Yazı tipini javascript ile arayın:

$ ( '.typeahead' ). daktilo ()

Seçenekler

İşaretleme

Daktilo işlevine sahip bir öğeyi kaydetmek için veri öznitelikleri ekleyin.

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

yöntemler

.typeahead(seçenekler)

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