Ön bakış

Birbirinden ayrı veya derlenmiş

Eklentiler tek tek (Bootstrap'in birbirinden ayrı *.js dosyaları kullanarak) veya hepsi bir seferde (bootstrap.js veya küçültülmüş bootstrap.min.js dosyasını kullanarak) eklenebilir.

Derlenmiş JavaScript kullanımmı

Hem bootstrap.js hem de bootstrap.min.js tek bir dosyada tüm eklentileri içerir. Sadece bir tanesini ekleyin.

Eklenti bağımlılığı

Bazı eklenti ve CSS bileşenleri diğer eklentilere bağımlıdır. Eğer eklentileri birbirinden ayrı eklersen, dokümantasyonda belirtilen bağımlılığı kontrol ettiğinden emin ol. Ayrıca dikkat edilmelidir ki, tüm eklentiler jQuery'e bağımlıdır. Yani jQuery tüm eklenti dosyalarından önce eklenmelidir. Hangi jQuery versiyonunun desteklendiği görmek için bizim bower.json'a danışabilirsin.

Veri özellikleri

Tek bir satır JavaScript kodu yazmadan işaretleme API'si sayesinde tüm Bootstrap eklentilerini kullanabilirsin. Bu Bootstrap'in birinci-sınıf API'sidir ve bir eklenti kullanırken ilk dikkat edeceğin husus olmalıdır.

Buna rağmen, bazı durumlarda bu fonksiyonalitenin kapatılması arzulanabilir. Bundan dolayı, data-api ad uzayına sahip dokümandaki tüm eylemlerin bağlantısını çözme yöntemi ile veri özelliği API'sini devre dışı bırakma yeteneğini sunuyoruz. Bu şuna benzemektedir:

$(document).off('.data-api')

Alternatif olarak, özel bir eklentiyi hedef almak için sadece data-api ad uzayının başına eklentinin adını ekleyin. Örneğin:

$(document).off('.alert.data-api')

Veri özellikleri ile element başına sadece bir eklenti

Aynı elementte farklı eklentilerdeki veri özelliklerini kullanmayın. Örneğin, bir düğme aynı anda hem açıklama metnine sahip hem de modal'ı açma/kapama işlemini yapamaz. Bunu sağlamak için sarmalayıcı element kullanın.

Program niteliğinde API

Ayrıca, tüm Bootstrap eklentilerini JavaScript API sayesinde kullanılanılabilme imkanı olmasına inanıyoruz. Tüm genel API'ler tekil, zincirlenebilir metodlardır ve üzerinde oynanan koleksiyonu döner.

$('.btn.danger').button('toggle').addClass('fat')

Tüm metodlar opsiyonel seçenekler nesnesi, belirli bir metodu hedefleyen metin veya hiçbir şey (eklentiyi varsayılan davranışı ile başlatır), kabul etmelidir:

$('#myModal').modal()                      // Varsayılan ile başlatıldı
$('#myModal').modal({ keyboard: false })   // Klavyesiz başlatıldı
$('#myModal').modal('show')                // Başlar ve hemen göstermeyi tetikler

Her eklenti kendi ham derleyicisini, Constructor özelliğinde meydana çıkarır: $.fn.popover.Constructor. Özel bir eklenti nesnesi elde etmek istiyorsan, elementten doğrudan al: $('[rel="popover"]').data('popover').

Varsayılan ayarlar

Bir eklentinin varsayılan ayarlarını, onun Constructor.DEFAULTS nesnesini değiştirerek yapabilirsin:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // Modal eklentisinin `keyboard` seçeneğini false yaparak varsayılanı değiştirebilirsin

Çakışma yok

Bazen Bootstrap eklentilerini diğer arayüz uygulama iskeletleri ile beraber kullanmak gerekmektedir. Bu durumda, ad uzayı çakışması ara sıra oluşabilir. Bu olursa, değeri eski haline dönmesini istediğin eklentide .noConflict çağırabilirsin.

var bootstrapButton = $.fn.button.noConflict() // önceki atanmış değere $.fn.button dön
$.fn.bootstrapBtn = bootstrapButton            // $().bootstrapBtn'a Bootstrap fonksiyonalitesini ver

Eylemler

Bootstrap, çoğu eklentinin tekil aksiyonları için özel eylemler sunmaktadır. Genel olarak, bunlar mastar ve geçmiş edilgen halindedir. Mastar (mesela show) eylemin başında tetiklenir, geçmiş edilgen hali de (mesela shown) eylem tamamlandığında tetiklenir.

3.0.0 ile beraber tümm Bootstrap eylemleri ad uzayına sahiptir.

Tüm mastar eylemler preventDefault fonksiyonalitesi sağlar. Bu, başlama öncesinde devam eden herhangi bir aksiyonun durdurulması yeteneğini sağlar.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // modal'ın gösterilmesini durdurur
})

Versiyon numaraları

Bootstrap'in jQuery eklentisi versiyonuna eklentinin yapılandırıcısının VERSION özelliğinden erişilebilir. Örneğin, açıklama (tooltip) eklentisi için:

$.fn.tooltip.Constructor.VERSION // => "3.3.4"

JavaScript devre dışı olduğunda özel yedek plan yoktur

Bootstrap'in eklentileri, JavaScript devre dışı olduğunda özellikle yedek planlama olmaz. Bu durumda kullanıcı deneyimini önemsiyorsan, kullanıcılarına durumu anlatmak (JavaScript'i nasıl aktif edileceğini) ve/veya özel yedek planını eklemek için <noscript> kullan.

Üçüncü parti kütüphaneler

Bootstrap, Prototype veya jQuery UI gibi üçüncü parti kütüphanelerini resmi olarak desteklemez. .noConflict ve ad uzayına sahip eylemler dışında kendinin düzeltmesini gerektirecek uyumluluk problemleri olabilir.

Geçişler transition.js

Geçişler hakkında

Temel geçiş efektleri için, transition.js'ı diğer JS dosyaları yanına ekleyin. Eğer derlenmiş (veya küçültülmüş) bootstrap.js kullanıyorsan, bunu eklemene gerek yok — zaten ordadır.

İçinde ne var

Transition.js, CSS geçiş emülatör gibi transitionEnd eylemleri için temel yardımcıdır. Diğer eklentiler tarafından CSS geçiş desteği var mı diye kontrol etmek ve askıda kalan geçişleri yakalamak için kullanılır.

Modal modal.js

Modal'lar gerekli en az fonksiyonalitesi ve akıllı varsayılanları ile modern ve esnek diyalog pencereleridir.

Üst üste binen modal'lar desteklenmez

Bir modal açıkken başka bir tane açmadığından emin ol. Aynı anda birden fazla modal göstermek özelleşmiş kod gerektirmektedir.

Modal etiket yerleştirme

Diğer bileşenlerin modal'ın görünümünü ve/veya fonksiyonalitesini etkilemesinden sakınmak için her zaman modal'ın HTML kodunu üst-seviyede konumlandırın.

Mobil cihaz ikazı

Mobil cihazlarda modal kullanımına dair bazı ikazlar mevcuttur. Detay için destek dokümanımıza bakınız.

HTML5'in kendi anlambilimini tanımlamasından dolayı, autofocus HTML özelliğinin Bootstrap modal'larında etkisi yoktur. Aynı efekti yapmak için biraz özel JavaScript kullanın:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Örnekler

Statik örnek

Başlık, gövde ve alt başlıktaki aksiyonlar ile yorumlanmış modal.

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal başlığı</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
        <button type="button" class="btn btn-primary">Değişiklikleri kaydet</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Canlı tanıtım

Alttaki düğmeye tıklayarak JavaScript yardımıyla modal'ı aç/kapat. Aşağı doğru sürüklenir ve sayfanın üstünden yavaşça kaybolur.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal başlığı</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
        <button type="button" class="btn btn-primary">Değişiklikleri kaydet</button>
      </div>
    </div>
  </div>
</div>

Modal'ları erişilebilir yap

.modal'a role="dialog" eklediğinden, modal başlığını referans etmek için aria-labelledby="myModalLabel" özelliği ve yardımcı teknolojilere modal'ın DOM elementlerini geçmesini için aria-hidden="true" kullandığından emin ol.

Ek olarak, .modal'da aria-describedby kullanarak modal diyaloğuna açıklama verebilirsin.

YouTube videolarını gömmek

Modal'lara YouTube videolarını gömmek, Bootstrap'de otomatik olarak çalma ve daha fazlası ek JavaScript gerektirir. Daha fazla bilgi için bu yardımcı Stack Overflow sorusuna bakabilirsin.

Opsiyonel boyutlar

Modal'lar, .modal-dialog içine yerleştirilen değiştirici sınıflar aracılığıyla iki opsiyonel boyuta sahiptir.

<!-- Büyük modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Büyük modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
<!-- Küçük modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Küçük modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Animasyonu kaldır

Yavaşça görünen yerine basitçe görünen modal için modal işaretlemesindeki .fade sınıfını kaldırın.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  ...
</div>

Izgara sistemini kullanmak

Modal içerisinde Bootstrap'in ızgara sisteminin avantajlarından faydalanmak için .modal-body içinde .container-fluid ekleyin ve sonra bu taşıyıcı içinde normal ızgara sistemini kullanın.

<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal başlığı</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              Seviye 1: .col-sm-9
              <div class="row">
                <div class="col-xs-8 col-sm-6">
                  Seviye 2: .col-xs-8 .col-sm-6
                </div>
                <div class="col-xs-4 col-sm-6">
                  Seviye 2: .col-xs-4 .col-sm-6
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
        <button type="button" class="btn btn-primary">Değişiklikleri kaydet</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Aynı modal'ı tetikleyen birkaç düğme olsun, fakat hepsi farklı içerik göstersin. Modal içeriğini hangi düğmeye tıklandığına göre değiştiirilmesini sağlamak için event.relatedTarget ve HTML data-* özelliklerini (muhtemelen jQuery aracılığıyla) kullanın. Detay için relatedTarget'da Modal Eylemleri görün.

...daha fazla düğme...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">@mdo için modal aç</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">@fat için modal aç</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">@getbootstrap için modal aç</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Yeni mesaj</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Alıcı:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Mesaj:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
        <button type="button" class="btn btn-primary">Mesajı gönder</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Modal'ı tetikleyen düğme
  var recipient = button.data('herhangi bir şey') // data-* özelliklerinden bilgi çıkar
  // Gerekliyse burda AJAX isteği başlatabilirsin (ve sonra callback'te güncelleme işlemini yaparsın).
  // Modal'ın içeriğini güncelle. Biz burda jQuery kullancağız, ama veri bağlama veya diğer yöntemleri de kullanabilirsin.
  var modal = $(this)
  modal.find('.modal-title').text('Yeni mesaj ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Kullanımı

Modal eklentisi, data özellikleri veya JavaScript ile isteğe bağlı olarak gizli içeriği açıp kapatır. Varsayılan kaydırma davranışını geçersiz kılmak için <body>'e .modal-open ekler. Modal'ın dışına tıklandığı zaman görünen modal'ın kapanması maksadıyla tıklama alanı sağlamak için .modal-backdrop oluşturur.

Data özelliği ile

Modal'ı, JavaScript yazmadan aktif et. Özel bir modal'ı açıp kapamak için data-target="#foo" veya href="#foo" ayarlamak yanı sıra düğme gibi kontolcü bir elemente data-toggle="modal" ayarlayın.

<button type="button" data-toggle="modal" data-target="#myModal">Modal'ı aç</button>

JavaScript ile

Tek satır JavaScript ile belirleyici myModal kullanarak modal'ı çağır:

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

Seçenekler

Seçenekler, data özellikleri veya JavaScript kullanılarak verilebilir. Data özellikleri için, data-backdrop=""'da olduğu gibi data-'ya seçeneğin adını ekleyin.

Adı Türü Varsayılan Açıklama
backdrop boolean veya 'static' metni true modal-backdrop elementi ekler. Alternatif olarak, tıklandığında modal'ı kapatmayan backdrop için static tanımı yapın.
keyboard boolean true Escape tuşuna basıldığında modal'ı kapatır.
show boolean true Başladığında modal'ı gösterir.
remote path false

Bu seçenek v3.3.0 ile kullanılmamaktadır ve v4 ile tamamen kaldırılacaktır. Onun yerine istemci taraflı şablonlama veya veri bağlama sistemi kullanmayı veya jQuery.load'ı kendinizin çağırmasını tavsiye ediyoruz.

Uzak URL verilmişse, jQuery'nin load metodu ile içerik bir sefer yüklenecektir ve .modal-content div'i içine enjekte olur. Eğer data-api kullanıyorsan, uzak kaynağı belirtmek için alternatif olarak href özelliğini kullanabilirsin. Aşağıda bunun örneği gösterilmiştir:

<a data-toggle="modal" href="remote.html" data-target="#modal">Bana tıkla</a>

Metodlar

.modal(seçenekler)

İçeriğinizi modal olarak aktifleştirir. Opsiyonel seçenekler object'i kabul eder.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Modal'ı elle açıp kapatır. Modal tam olarak görünmeden veya gizlenmeden önce çağırana döner (mesela shown.bs.modal veya hidden.bs.modal eylemleri oluşmadan önce).

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

.modal('show')

Modal'ı elle açar. Modal tam olarak görünmeden önce çağırana döner (mesela shown.bs.modal eylemi oluşmadan önce).

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

.modal('hide')

Modal'ı elle gizler. Modal tam olarak gizlenmeden önce çağırana döner (mesela hidden.bs.modal eylemi oluşmadan önce).

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

.modal('handleUpdate')

Modal'ın konumlandırmasını, kaydırma çubuğu çıkmasına yani modal'ı sola kaydıracak bir olay oluşmasına karşın, yeniden ayarlar.

Açık olduğunda modal'ın yüksekliği değişiyorsa gereklidir.

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

Eylemler

Bootstrap'in modal sınıfı, modal fonksiyonalitesi için birkaç eylem açığa çıkarır.

Tüm modal eylemleri modal'ın kendisinde tetiklenir (mesela <div class="modal">'da).

Eylem türü Açıklama
show.bs.modal Bu eylem, show metodu çağrıldığında hemen tetiklenir. Eğer tıklanma sebebiyle oluşmuşsa, tıklanan element eylemin relatedTarget özelliğinde ulaşılabilir olur.
shown.bs.modal Bu eylem, kullanıcıya modal'ın görünür olması (CSS geçişlerinin tamamlanmasını bekler) ile tetiklenir. (will wait for CSS transitions to complete). Eğer tıklanma sebebiyle oluşmuşsa, tıklanan element eylemin relatedTarget özelliğinde ulaşılabilir olur.
hide.bs.modal Bu eylem, hide metodu çağrıldığında hemen tetiklenir.
hidden.bs.modal Bu eylem, kullanıcıya modal'ın gizli olması (CSS geçişlerinin tamamlanmasını bekler) ile tetiklenir.
loaded.bs.modal Bu eylem, kullanıcıya modal'ın remote seçeneğini kullanarak içeriği yüklemesi ile tetiklenir.
$('#myModal').on('hidden.bs.modal', function (e) {
  // bir şeyler yap...
})

Dropdowns dropdown.js

Bu basit bileşenle nerdeyse herhangi bir şeye, dropdown menü ekleyebilirsin. Navigasyon çubuğu, sekmeler ve hapları da içerecek şekilde.

Navigasyon çubuğu (navbar) içinde

Hapların içinde

Veri özellikleri veya JavaScript aracılığıyla, dropdown eklentisi, gizli içeriği (dropdown menüyü) ata liste nesnesine .open sınıfını ekleyip çıkararak açıp/kapatır.

Mobil cihazlarda, dropdown'u açma .dropdown-backdrop ekler. Çünkü menünün dışına dokunarak dropdown menüyü kapatırsın, ayrıca uygun iOS desteği için gereksinimdir. Bu, mobil cihazlarda açık dropdown menüden başka bir dropdown menüye geçişte ekstra bir dokunma gerektirir anlamındadır.

Not: data-toggle="dropdown" özelliği dropdown menüyü uygulama katmanında kapatmak için kullanılır, dolayısıyla her zaman kullanmak iyi bir fikirdir.

Veri özellikleri aracılığıyla

Dropdown'u açıp kapatmak için kısayola veya düğmeye data-toggle="dropdown" ekleyin.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown tetikleyicisi
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Kısayol düğmeleri ile URL'leri bozulmamış bırakmak için, href="#" yerine data-target özelliğini kullanın.

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
    Dropdown tetikleyicisi
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

JavaScript aracılığıyla

JavaScript aracılığıyla dropdown'ı çağırın:

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

data-toggle="dropdown" halen gereklidir

Dropdown'ı, JavaScript veya onun yerine data-api'yi kullanarak çağırmadan bağımsız olarak, dropdown'ın tetikleyici elementinde data-toggle="dropdown" bulunmasında her zaman gereklidir.

None

$().dropdown('toggle')

Verilen navigasyon çubuğu veya sekmeli navigasyonun dropdown menüsünü açıp kapatır.

Tüm dropdown eylemleri .dropdown-menu'nün ata elementinde tetiklenir.

Tüm dropdown eylemleri, değeri açıp/kapanacak çapa elementi olan relatedTarget özelliğine sahiptir.

Eylem türü Açıklama
show.bs.dropdown Bu eylem, show örnek metodu çağrıldığında tetiklenir.
shown.bs.dropdown Bu eylem, dropdown'ın kullanıcıya görünür olduğu anda (CSS geçişlerinin bitmesini bekler) tetiklenir.
hide.bs.dropdown Bu eylem, hide örnek metodu çağrıldığında tetiklenir.
hidden.bs.dropdown Bu eylem, dropdown'ın kullanıcıdan gizlenmesi bittiği anda (CSS geçişlerinin bitmesini bekler) tetiklenir.
$('#myDropdown').on('show.bs.dropdown', function () {
  // bir şeyler yap…
})

ScrollSpy scrollspy.js

Navigasyon çubuğunda örnek

ScrollSpy eklentisi, kaydırma pozisyonuna göre navigasyon hedefinin otomatik güncellemesini sağlar. Navigasyon çubuğu altındaki alan kaydırın ve aktif sınıf değişimini gözlemleyin. Dropdown alt nesneleri de belirtilecektir.

@fat

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.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

bir

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

iki

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.

üç

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 whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Kullanımı

Bootstrap nav gerekmektedir

Scrollspy, aktif kısayolun düzgün belirtilmesi için Bootstrap nav bileşeninin kullanımını gerektirir.

Çözümlenebilir ID hedefleri gerektirir

Navbar kısayolları çözümlenebilir ID hedeflerine sahip olmalıdır. Örneğin, <a href="#home">home</a> DOM''da <div id="home"></div> gibi bir şey ile örtüşmelidir.

:visible olmayan hedef elementleri göz ardı edilir

jQuery'e göre :visible olmayan hedef elementleri göz ardı edilir ve ilgili nav elementleri belirtilmez.

Göreceli pozisyonlama gerektirir

Uygulama metodundan bağımsız olarak, scrollspy gözetlediği element için position: relative; kullanımını gerektirir. Çoğu durumda bu <body>'dir.

Veri özellikleri aracılığıyla

Üstteki navigasyona scrollspy davranışını kolayca eklemek için gözlemlemek istediğin elemente (çoğu durum için bu <body> olmaktadır) data-spy="scroll" ekleyin. Sonra herhangi bir Bootstrap .nav bileşeninin ata elementinin ID veya sınıfını belirten data-target özelliği ekleyin.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScript aracılığıyla

CSS'e position: relative; ekledikten sonra JavaScript aracılığıyla scrollspy'ı çağır:

$('body').scrollspy({ target: '#navbar-example' })

Yöntemler

.scrollspy('refresh')

Scrollspy kullanırken DOM'a element ekleyip çıkarıyorsan tazeleme metodunu aşağıdaki gibi çağırman gerekmektedir:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Seçenekler

Seçenekler veri özellikleri veya JavaScript aracılığıyla geçilebilir. Veri özellikleri için, seçenek adını data- sonuna ekleyin, örneğin data-offset="" gibi.

Ad Tür Varsayılan Açıklama
offset number 10 Kaydırılacak pozisyonu hesaplarken yukarıdan bırakılacak pixel biriminden iç kenar boşluğudur.

Events

Eylem türü Açıklama
activate.bs.scrollspy Scrollspy tarafından herhangi bir element aktif hale getirildiğinde tetiklenir.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // bir şeyler yap…
})

Açılır/kapanır Sekmeler tab.js

Örnek sekmeler

Yerel içeriğin çerçeveleri arasında geçiş yapmak için, dropdown menü aracılığıyla dahi, hızlı ve dinamik sekme fonksiyonalitesi ekler.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.

Sekmeli navigasyonu genişletir

Bu bileşen, sekmeli bölgeler eklemek için sekmeli navigasyon bileşenini genişletir.

Kullanımı

JavaScript aracılığıyla sekmelenebilir sekmeleri aktif hale getirir. Her sekme kendisi aktifleştirilmelidir:

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Her bir sekmeyi birkaç yol kullanarak aktifleştirebilirsin:

$('#myTab a[href="#profile"]').tab('show') // Adına göre sekme seç
$('#myTab a:first').tab('show') // İlk sekmeyi seç
$('#myTab a:last').tab('show') // Son sekmeyi seç
$('#myTab li:eq(2) a').tab('show') // Üçüncü sekmeyi seç (0-endeksli)

İşaretleme

Bir sekme veya hap navigasyonunu, hiç JavaScript yazmadan sadece element için data-toggle="tab" veya data-toggle="pill" tanımlayarak yapabilirsin. Sekme ul'ye nav ve nav-tabs sınıflarını eklemek Bootstrap sekme stiline sebep olur. Fakat nav ve nav-pills sınıflarını eklemek hap stiline sebep olur.

<div role="tabpanel">
  <!-- Nav sekmeleri -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Ev</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profil</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Mesajlar</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Ayarlar</a></li>
  </ul>
  <!-- Sekme çerçeveleri -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>
</div>

Solma efekti

Sekmeleri soldurmak için, her .tab-pane'e .fade ekleyin. İlk içeriğin düzgün solması için ilk sekme çerçevesi de .in sınıfına sahip olmalıdır.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Yöntemler

$().tab

Sekme elementini ve içerik kapsayıcısını aktifleştirir. Sekme, DOM'daki kapsayıcı düğümü hedef alan data-target veya href'e sahip olmalıdır.

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Ev</a></li>
  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profil</a></li>
  <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Mesajlar</a></li>
  <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Ayarlar</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">...</div>
  <div role="tabpanel" class="tab-pane" id="profile">...</div>
  <div role="tabpanel" class="tab-pane" id="messages">...</div>
  <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
</script>

Eylemler

Yeni bir sekmeyi gösterirken eylemler aşağıdaki sıraya göre tetiklenir:

  1. hide.bs.tab (güncel aktif sekme üstünde)
  2. show.bs.tab (gösterilecek sekme üstünde)
  3. hidden.bs.tab (önceki aktif sekme üstünde, hide.bs.tab eylemindeki ile aynı)
  4. shown.bs.tab (yeni-aktif yeni-gözükmüş sekme üstünde, show.bs.tab eylemindeki ile aynı)

Eğer hiçbir sekme zaten aktif değilse, hide.bs.tab ve hidden.bs.tab eylemleri tetiklenmez.

Eylem türü Açıklama
show.bs.tab Bu eylem, sekmenin gösterilmesiyle ama yeni sekme gösterilmeden önce tetiklenir. Aktif sekmeyi ve önceki aktif sekmeyi hedeflemek (eğer varsa) için sırasıyla event.target ve event.relatedTarget kullanın.
shown.bs.tab Bu eylem, sekme gösterildikten sonra sekme gösterilmesiyle tetiklenir. Aktif sekmeyi ve önceki aktif sekmeyi hedeflemek (eğer varsa) için sırasıyla event.target ve event.relatedTarget kullanın.
hide.bs.tab Bu eylem, yeni sekmenin gösterilecekken (ve dolayısıyla eski aktif sekmenin gizlenecekken) tetiklenir. Mevcut aktif sekmeyi ve yeni aktif olacak sekmeyi hedeflemek (eğer varsa) için sırasıyla event.target ve event.relatedTarget kullanın.
hidden.bs.tab Bu eylem, yeni sekmenin gösterildikten sonra (ve dolayısıyla eski aktif sekmenin gizlenmesiyle) tetiklenir. Önceki sekmeyi ve yeni aktif sekmeyi hedeflemek için sırasıyla event.target ve event.relatedTarget kullanın.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // yeni aktifleşmiş sekme
  e.relatedTarget // önceki aktif sekme
})

Açıklama Metinleri tooltip.js

Jason Frame tarafından yazılan mükemmel jQuery.tipsy eklentisinden esinlenilmiştir; Tooltips, resimlere dayanmayan, geçişlerde CSS3 animasyonlarını kullanan, yerel başlık depolaması için veri özellikleri kullanan güncellenmiş sürümdür.

Sıfır uzunluklu açıklama metinleri asla gösterilmez.

Örnekler

Aşağıdaki kısayolların üzerine gelerek açıklama metinlerini görebilirsin:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Statik açıklama metni

Dört seçenek vardır: yukarı, sağa, aşağı ve sola yaslanmış.

Four directions

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Açıklama metni solda">Açıklama metni solda</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Açıklama metni yukarıda">Açıklama metni yukarıda</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Açıklama metni aşağıda">Açıklama metni aşağıda</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Açıklama metni sağda">Açıklama metni sağda</button>

Seçimli Fonksiyonalite

Performans sebebiyle, Tooltip ve Popover data-api'leri seçimli bırakılmıştır, yani onları kendin başlatmalısın.

Sayfadaki tüm açıklama metinlerini seçmenin bir yolu onların data-toggle özelliğini kullanmaktır:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Düğme ve girdi grubu içindeki açıklama metinleri özel ayar gerektirir

.btn-group veya .input-group içindeki elementlerde açıklama metinleri kullanırken, istenmeyen yan etkilerden (açıklama metni tetiklendiğinde elementin daha geniş olması ve/veya yuvarlaklı köşelerin kaybolması gibi) sakınmak için container: 'body' seçeneğini belirtmek zorundasın (aşağıda dokümante edilmiştir).

Gizli elementlerde açıklama metni göstermeye çalışmayın

Hedef element display: none; ise $(...).tooltip('show') komutunu çalıştırınca açıklama metninin yanlış pozisyonlamasına sebep olur.

Engellenmiş elementlerde açıklama metni kullanımı sarmalayıcı element gerektirir

disabled veya .disabled elemente açıklama metni eklemek için, elementi <div> içine yerleştirin ve açıklama metnini bu <div>'e uygulayın.

Kullanımı

Açıklama metni eklentisi, talep olduğunda içeriği ve işaretlemeyi oluşturur, varsayılan olarak açıklama metnini tetikleyici elementten sonraya yerleştirir.

JavaScript aracılığıyla açıklama metnini tetikleme:

$('#example').tooltip(options)

İşaretleme

Açıklama metni için gerekli işaretleme, ilgili HTML elementi üstüne sadece data özelliği ve title eklemektir. Açıklama metni için oluşturulan işaretleme basittir, öyle ki pozisyon (varsayılan olarak, eklenti aracılığıyla top'a ayarla) gerektirmektedir.

Çoklu-satır kısayolları

Bazen birden fazla satırdan oluşan kısayola açıklama metni eklemek istersin. Açıklama metni eklentisinin varsayılan davranışı yatay ve dikey olarak ortalamaktır. Bunu önlemek için white-space: nowrap; ekleyin.

<!-- Yazılacak HTML -->
<a href="#" data-toggle="tooltip" title="Örnek açıklama metni!">Benim üstüme gel</a>
<!-- Eklenti tarafından oluşturulan işaretleme -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Örnek açıklama metni!
  </div>
</div>

Seçenekler

Seçenekler veri özellikleri veya JavaScript ile aktarılabilir. Veri özellikleri için, seçenek adını data- sonuna ekleyin, örneğin data-animation="" gibi.

Ad Tür Varsayılan Açıklama
animation boolean true Açıklama metnine CSS kararma geçişi uyarlar
container string | false false

Belirli bir elemente, açıklama metni ekler. Örneğin: container: 'body'. Bu seçenek, açıklama metnini dokümanın akışına göre konumlandırdığı için çok kullanışlıdır. Pencere yeniden boyutlandırması sırasında açıklama metninin tetikleyen elementten uzak kalmasını önler.

delay number | object 0

Açıklama metninin görünür ve gizlenir olurkenki gecikme süresi (milisaniye cinsinden) - elle tetikleme türüne uygulanmaz

Eğer bir sayı verilmişse, gecikme hem gösterirken hem de gizlerken uygulanır

Nesne yapısı: delay: { "show": 500, "hide": 100 }

html boolean false Açıklama metnine HTML yerleştirir. Eğer false değerine sahipse, jQuery'nin text metodu, DOM'a içerik eklemek için kullanılabilir. XSS saldırılarına karşı endişeleniyorsan text kullanabilirsin.
placement string | function 'top'

Açıklama metnini nasıl konumlandıracağını belirler: top | bottom | left | right | auto.
Eğer "auto" belirtilmiş ise, açıklama metnini dinamik olarak yeniden konumlandırır. Örneğin, placement değeri "auto left" ise, mümkünse açıklama metnini solda gösterir, değilse sağda gösterir.

Konumlandırma için bir fonksiyon kullanıldığında, ilk parametre olarak açıklama metni DOM elementi, ikinci parametre olarak da tetikleyen DOM elementi verilerek çağrılır. this bağlamı açıklama metni nesnesine ayarlanır.

selector string false Eğer bir seçici kullanılmışsa, açıklama metni nesneleri belirtilen hedeflere görevlendirilir. Bunu pratikte, açıklama metni eklenmiş dinamik HTML elementini aktifleştirmek için kullanılır. Bakınız buna ve bilgilendirici örneğe.
template string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Açıklama metnini oluştururken kullanılacak temel HTML.

Açıklama metninin title.tooltip-inner içine enjekte edilir.

.tooltip-arrow, açıklama metninin oku olacaktır.

En dıştan sarmalayan element .tooltip sınıfına ihtiyaç duyar.

title string | function ''

title özelliği sunulmamış ise varsayılan başlık değeridir.

Eğer bir fonksiyon verilmiş ise, açıklama metninin bağlandığı elemente this referansı ile beraber çağrılmalıdır.

trigger string 'hover focus' Açıklama metni nasıl tetiklenir - click | hover | focus | manual. Birden fazla tetikleyici değer verebilirsiniz, boşluk karakteri ile ayırabilirsiniz.
viewport string | object { selector: 'body', padding: 0 }

Açıklama metnini, bu elementin sınırları içerisinde tutar. Örneğin: viewport: '#viewport' veya { "selector": "#viewport", "padding": 0 }

Bireysel açıklama metinleri için veri özellikleri

Yukarıda açıklandığı üzere, bireysel açıklama metinleri için seçenekler, alternatif olarak veri özellikleri kullanımında belirtilebilir.

Metodlar

$().tooltip(seçenekler)

Bir elementin kolleksiyonuna açıklama metni ele alıcısı bağlar.

.tooltip('show')

Elementin açıklama metnini ortaya çıkarır. Açıklama metni gösterilmeden önce çağırana döner (mesela shown.bs.tooltip eylemi oluşmadan önce). Bu, açıklama metninin "elle" tetiklenmesi olarak değerlendirilir. Sıfır-boyutlu açıklama metinleri asla gösterilmez.

$('#element').tooltip('show')

.tooltip('hide')

Elementin açıklama metnini gizler. Açıklama metni gizlenmeden önce çağırana döner (mesela hidden.bs.tooltip eylemi oluşmadan önce). Bu, açıklama metninin "elle" tetiklenmesi olarak değerlendirilir.

$('#element').tooltip('hide')

.tooltip('toggle')

Elementin açıklama metnini açar/kapatır. Açıklama metni gizlenmeden veya gösterilmeden önce çağırana döner (mesela shown.bs.tooltip veya hidden.bs.tooltip eylemi oluşmadan önce). Bu, açıklama metninin "elle" tetiklenmesi olarak değerlendirilir.

$('#element').tooltip('toggle')

.tooltip('destroy')

Elementin açıklama metnini gizler ve yok eder. Yetkilendirme kullanan açıklama metinleri (selector seçeneği ile oluşturulanlar), oğul tetikleyici elementlerde bireysel olarak yok edilemezler.

$('#element').tooltip('destroy')

Eylemler

Eylem türü Açıklama
show.bs.tooltip Bu eylem, show eylem metodu çağrıldığında hemen tetiklenir.
shown.bs.tooltip Bu eylem, açıklama metni kullanıcıya görünür olduğunda (CSS geçişlerinin tamamlanmasını bekler) tetiklenir.
hide.bs.tooltip Bu eylem, hide eylem metodu çağrıldığında hemen tetiklenir.
hidden.bs.tooltip Bu eylem, açıklama metni kullanıcıya görünür olamyı bitirdiğinde (CSS geçişlerinin tamamlanmasını bekler) tetiklenir.
$('#myTooltip').on('hidden.bs.tooltip', function () {
                        // bir şeyler yap…
})

Açılır Bilgi Penceresi popover.js

Küçük içerik fazlalığını, iPad'deki gibi, herhangi bir elemente ikincil bilgi olarak ekleyin.

Başlığı ve içeriği sıfır boyutlu olan açılır bilgi pencereleri gösterilmez.

Eklenti bağımlılığı

Açılır bilgi pencereleri, Bootstrap versiyonuna açıklama metinleri eklentisini gerektirir.

Seçimli Fonksiyonalite

Performans sebeplerinden dolayı, açıklama metinleri ve açılır bilgi pencereleri data-api'leri seçimlidir. Bu, senin kendinin ilklendirmeyi yapman demektir.

One way to initialize all popovers on a page would be to select them by their data-toggle attribute:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Düğme gruplarında ve girdi gruplarındaki açılır bilgi penceresi özel ayar gerektirir.

.btn-group veya .input-group içindeki elementlerde açılır bilgi penceresi kullanırken, istenmeyen yan etkilerden (açıklama metni tetiklendiğinde elementin daha geniş olması ve/veya yuvarlaklı köşelerin kaybolması gibi) sakınmak için container: 'body' seçeneğini belirtmek zorundasın (aşağıda dokümante edilmiştir).

Gizli elementlerde açılır bilgi penceresi göstermeye çalışmayın

Hedef element display: none; ise $(...).popover('show') komutunu çalıştırınca açılır bilgi penceresinin yanlış pozisyonlamasına sebep olur.

Engellenmiş elementlerde açılır bilgi penceresi kullanımı sarmalayıcı element gerektirir

code>disabled veya .disabled elemente açıklama metni eklemek için, elementi <div> içine yerleştirin ve açıklama metnini bu <div>'e uygulayın.

Çoklu-satır kısayolları

Bazen birden fazla satırdan oluşan kısayola açılır bilgi penceresi eklemek istersin. Açılır bilgi penceresi eklentisinin varsayılan davranışı yatay ve dikey olarak ortalamaktır. Bunu önlemek için white-space: nowrap; ekleyin.

Örnekler

Statik açılır bilgi penceresi

Dört seçenek vardır: yukarı, sağa, aşağı ve sola yaslanmış.

Açılır bilgi penceresi yukarıda

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Açılır bilgi penceresi sağda

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Açılır bilgi penceresi aşağıda

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Açılır bilgi penceresi solda

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Canlı tanıtım

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Açılır bilgi penceresi başlığı" data-content="İşte biraz çarpıcı içerik. Harika değil mi?">Açılır bilgi penceresini açıp/kapatmak için tıklayın</button>

Dört yön

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Açılır bilgi penceresi solda
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Açılır bilgi penceresi yukarıda
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Açılır bilgi penceresi aşağıda
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Açılır bilgi penceresi sağda
</button>

Sonraki tıklamada yoksay

Kullanıcının yaptığı sonraki tıklamada açılır bilgi penceresini yoksaymak için focus tetikleyicisini kullanın.

dismiss-on-next-click için özel işaretleme gereklidir

Çapraz-tarayıcı ve çapraz-ortamda uygun davranış için, <a> etiketi kullanman lazım, <button> etiketi değil, ve ayrıca role="button" ve tabindex özelliklerini eklemen lazımdır.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Kapatılabilir açılır bilgi penceresi" data-content="İşte biraz çarpıcı içerik. Harika değil mi?">Kapatılabilir açılır bilgi penceresi</a>

Kullanımı

JavaScript aracılığıyla açılır bilgi penceresini aktif edin:

$('#example').popover(seçenekler)

Seçenekler

Seçenekler veri özellikleri veya JavaScript ile aktarılabilir. Veri özellikleri için, seçenek adını data- sonuna ekleyin, örneğin data-animation="" gibi.

Ad Tür Varsayılan Açıklama
animation boolean true Açılır bilgi penceresine CSS kararma geçişi uyarlar
container string | false false

Belirli bir elemente, açılır bilgi penceresi ekler. Örneğin: container: 'body'. Bu seçenek, açılır bilgi penceresini dokümanın akışına göre konumlandırdığı için çok kullanışlıdır. Pencere yeniden boyutlandırması sırasında açılır bilgi penceresinin tetikleyen elementten uzak kalmasını önler.

content string | function ''

data-content özelliği belirtilmemişse varsyılan içerik değeridir.

Eğer bir fonksiyon verilmiş ise, açılır bilgi penceresinin bağlandığı elemente this referansı ile beraber çağrılmalıdır.

delay number | object 0

Açılır bilgi penceresinin görünür ve gizlenir olurkenki gecikme süresi (milisaniye cinsinden) - elle tetikleme türüne uygulanmaz

Eğer bir sayı verilmişse, gecikme hem gösterirken hem de gizlerken uygulanır

Nesne yapısı: delay: { "show": 500, "hide": 100 }

html boolean false Açılır bilgi penceresine HTML yerleştirir. Eğer false değerine sahipse, jQuery'nin text metodu, DOM'a içerik eklemek için kullanılabilir. XSS saldırılarına karşı endişeleniyorsan text kullanabilirsin.
placement string | function 'top'

Açılır bilgi penceresini nasıl konumlandıracağını belirler: top | bottom | left | right | auto.
Eğer "auto" belirtilmiş ise, açılır bilgi penceresini dinamik olarak yeniden konumlandırır. Örneğin, placement değeri "auto left" ise, mümkünse açılır bilgi penceresini solda gösterir, değilse sağda gösterir.

Konumlandırma için bir fonksiyon kullanıldığında, ilk parametre olarak açılır bilgi penceresi DOM elementi, ikinci parametre olarak da tetikleyen DOM elementi verilerek çağrılır. this bağlamı açılır bilgi penceresi nesnesine ayarlanır.

selector string false Eğer bir seçici kullanılmışsa, açılır bilgi penceresi nesneleri belirtilen hedeflere görevlendirilir. Bunu pratikte, açılır bilgi penceresi eklenmiş dinamik HTML elementini aktifleştirmek için kullanılır. Bakınız buna ve bilgilendirici örneğe.
template string '<div class="popover" role="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Açılır bilgi penceresini oluştururken kullanılacak temel HTML.

Açılır bilgi penceresinin title.popover-title içine enjekte edilir.

Açılır bilgi penceresinin content'i .popover-content içine enjekte edilir.

.popover-arrow, açılır bilgi penceresinin oku olacaktır.

En dıştan sarmalayan element .popover sınıfına ihtiyaç duyar.

title string | function ''

title özelliği sunulmamış ise varsayılan başlık değeridir.

Eğer bir fonksiyon verilmiş ise, açılır bilgi penceresinin bağlandığı elemente this referansı ile beraber çağrılmalıdır.

trigger string 'hover focus' Açılır bilgi penceresi nasıl tetiklenir - click | hover | focus | manual. Birden fazla tetikleyici değer verebilirsiniz, boşluk karakteri ile ayırabilirsiniz.
viewport string | object { selector: 'body', padding: 0 }

Açılır bilgi penceresini, bu elementin sınırları içerisinde tutar. Örneğin: viewport: '#viewport' veya { "selector": "#viewport", "padding": 0 }

Tekil açılır bilgi pencereleri için data özellikleri

Tekil açılır bilgi pencereleri için seçenekler, data özellikleri kullanılarak yukarıda belirtildiği gibi alternatif olarak tanımlanabilir.

Metodlar

$().popover(seçenekler)

Element topluluğu için açılır bilgi pencerelerini ilklendirir.

.popover('show')

Elementin açılır bilgi penceresini ortaya çıkarır. Açılır bilgi penceresi gösterilmeden önce çağırana döner (mesela shown.bs.popover eylemi oluşmadan önce). Bu, açılır bilgi penceresinin "elle" tetiklenmesi olarak değerlendirilir. Sıfır-boyutlu açılır bilgi pencereleri asla gösterilmez.

$('#element').popover('show')

.popover('hide')

Elementin açılır bilgi penceresini gizler. Açılır bilgi penceresi gizlenmeden önce çağırana döner (mesela hidden.bs.popover eylemi oluşmadan önce). Bu, açılır bilgi penceresinin "elle" tetiklenmesi olarak değerlendirilir.

$('#element').popover('hide')

.popover('toggle')

Elementin açılır bilgi penceresini açar/kapatır. Açılır bilgi penceresi gizlenmeden veya gösterilmeden önce çağırana döner (mesela shown.bs.popover veya hidden.bs.popover eylemi oluşmadan önce). Bu, açılır bilgi penceresinin "elle" tetiklenmesi olarak değerlendirilir.

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

.popover('destroy')

Elementin açılır bilgi penceresini gizler ve yok eder. Yetkilendirme kullanan aççılır bilgi pencereleri (selector seçeneği ile oluşturulanlar), oğul tetikleyici elementlerde bireysel olarak yok edilemezler.

$('#element').popover('destroy')

Eylemler

Eylem türü Açıklama
show.bs.popover Bu eylem, show eylem metodu çağrıldığında hemen tetiklenir.
shown.bs.popover Bu eylem, açılır bilgi penceresi kullanıcıya görünür olduğunda (CSS geçişlerinin tamamlanmasını bekler) tetiklenir.
hide.bs.popover Bu eylem, hide eylem metodu çağrıldığında hemen tetiklenir.
hidden.bs.popover Bu eylem, açılır bilgi penceresi kullanıcıya görünür olamyı bitirdiğinde (CSS geçişlerinin tamamlanmasını bekler) tetiklenir.
$('#myPopover').on('hidden.bs.popover', function () {
  // bir şeyler yap…
})

Uyarı Mesajları alert.js

Örnek uyarılar

Bu eklenti ile tüm uyarı mesajlarına yoksayılabilir fonksiyonalitesi eklenir.

.close düğmesi kullanırken, .alert-dismissible'in ilk çocuğu olmalıdır ve işaretlemede ondan önce metin içeriği gelmemelidir.

Kullanımı

Otomatik olarak uyarı kapatma fonksiyonalitesi vermek için sadece kapat düğmesine data-dismiss="alert" ekleyin. Uyarıyı kapatmak onu DOM'dan çıkaracaktır.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Uyarıların kapanırken animasyonlu olması için, .fade ve .in sınıflarının onlara işlendiğinden emin ol.

Metodlar

$().alert()

Uyarının, data-dismiss="alert" özelliğine sahip olan ata elementlerindeki tıklama eylemeleri için dinlemesini sağlar. (data-api'nin otomatik ilklendirmesini kullanırken gerekli değildir.)

$().alert('close')

DOM'dan çıkararak uyarıyı kapatır. Elementte .fade ve .in sınıfları mevcutsa, uyarı kaldırılırken yavaşça solar.

Eylemler

Bootstrap'in uyarı eklentisi, uyarı fonksiyonalitesini sağlamak için birkaç eylem kullanır.

Eylem Türü Açıklama
close.bs.alert Bu eylem, close nesne metodu çağrıldığında hemen tetiklenir.
closed.bs.alert bu eylem, uyarı kapatıldığında tetiklenir (CSS geçişlerinin tamamlanmasını bekler).
$('#myAlert').on('closed.bs.alert', function () {
  // bir şeyler yap…
})

Düğmeler button.js

Düğmelerle daha fazlasını yapın. Düğmelerin durumlarını kontrol edin veya araç çubukları gibi düğme grupları oluşturur.

Çapraz-tarayıcı uyumluluğu

Firefox, sayfa yüklemeleri arasında form kontrol durumlarını (disabledness and checkedness) sürdürür. Bu durum için geçici çözüm, autocomplete="off" kullanmaktır. Bakınız Mozilla bug #654072.

Durumsal

Bir düğmede yükleniyor durumunu kullanmak için data-loading-text="Yükleniyor..." ekleyin.

İstediğiniz herhangi bir durumu kullanabilirsin!

Bu gösterinin hatrına, data-loading-text ve $().button('loading') kullanıyoruz, ama bu kullanabileceğiniz tek durum değildir. $().button(string) dokümantasyonu altında daha fazlasını görebilirsin.

<button type="button" id="myButton" data-loading-text="Yükleniyor..." class="btn btn-primary" autocomplete="off">
  Yüklenme durumu
</button>
<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // iş mantığı...
    $btn.button('reset')
  })
</script>

Tek açıp/kapama

Tek düğmede açma/kapamayı aktifleştirmek için data-toggle="button" ekleyin.

Ön-açıp/kapanmış düğmeler .active ve aria-pressed="true" ihtiyaç duyarlar

Ön-açıp/kapanmış düğmeler için, button'a .active sınıfını ve aria-pressed="true" özelliğini kendin eklemelisin.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Tek açıp/kapama
</button>

Seçim kutusu / Radyo

Kendi stillerinde açıp/kapanabilirliği aktif etmek için seçim kutusu ve radyo içeren .btn-group'a data-toggle="buttons" ekleyin.

Ön seçimli seçenekler .active isterler

Ön seçimli seçenekler için, girdinin label'ına .active sınıfını kendin eklemelisin.

Görsel seçilmiş durumu sadece tıklamada güncellenir

Eğer bir seçim kutusu düğmesinin seçilmiş durumu, düğmenin click eylemi çağrılmadan güncellenmişse (mesela, <input type="reset"> aracılığıyla veya girdinin checked özelliğini ayarlayarak), girdinin label'ına .active sınıfını kendin ekleyip çıkarmalısın.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Seçim kutusu 1 (ön-seçimli)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Seçim kutusu 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Seçim kutusu 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radyo 1 (ön-seçimli)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radyo 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radyo 3
  </label>
</div>

Metodlar

$().button('toggle')

Basılma durumunu değiştirir. Düğmeye aktifleştiğine dair görünümü verir.

$().button('reset')

Düğmenin durumunu başlangıç değerine getirir - metnini, orjinal metni ile yer değiştirir.

$().button(string)

Data ile tanımlanmış metin durumunu verilen metin ile değiştirir.

<button type="button" id="myStateButton" data-complete-text="bitti!" class="btn btn-primary" autocomplete="off">
  ...
</button>
<script>
  $('#myStateButton').on('click', function () {
    $(this).button('bitti') // düğmenin metni "bitti!" olacak
  })
</script>

Daraltma collapse.js

Basit açıp/kapama davranışı için bazı sınıfları yöneten esnek bir eklentidir.

Eklenti bağımlılığı

Daraltma, Bootstrap versiyonunuzda geçiş eklentisinin dahil edilmesini gerektirir.

Örnek

Sınıf değişimi aracılığıyla başka bir elementi göstermek ve saklamak için aşağıdaki düğmelere tıklayın:

  • .collapse içeriği gizler
  • .collapsing geçiş sırasında uygulanır
  • .collapse.in içeriği gösterir

Kısayolu href özelliğiyle beraber veya düğmeyi data-target özelliğiyle beraber kullanabilirsin. Her iki durumda da data-toggle="collapse" gerekmektedir.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  href ile beraber kısayol
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  data-target özellikli düğme
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Akordiyon örneği

Panel bileşeni ile akordiyon yaratmak için varsayılan daraltma davranışını genişletir.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Daraltılabilir Grup Nesnesi #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Daraltılabilir Grup Nesnesi #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Daraltılabilir Grup Nesnesi #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

.panel-body'lerin .list-group'ları ile yer değiştirilmesi mümkündür.

  • Bootply
  • One itmus ac facilin
  • Second eros

Genişlet/daralt kontrollerini erişilebilir yap

Kontrol elementine aria-expanded eklediğinden emin ol. Bu özellik, daraltılabilir elementin mevcut durumunu ekran okuyuculara ve benzer yardımcı teknolojilere açıkça tanımlar. Eğer daraltılabilir element varsayılan olarak kapanmış ise, aria-expanded="false" değerine sahip olmalıdır. Eğer daraltılabilir elementin, in sınıfını kullanarak varsayılan olarak açık olmasını ayaralamışsan, kontrol elemente aria-expanded="true" ayarlamasını yap. Eklenti, otomatik olarak bu özelliği, daraltılabilir elementin açılıp/kapanmasına göre değiştirecektir.

Ek olarak, eğer kontrol element tek bir daraltılabilir elementi hedef almışsa (mesela, data-target özelliği id seçicisini gösteriyorsa), daraltılabilir elementin id değerini içeren kontrol elementine ek bir aria-controls özelliği ekleyebilirsin. Modern ekran okuyucuları ve benzer yardımcı teknolojiler, daraltılabilir elementin kendisine doğrudan erişmek üzere kullanıcılara ek kısayolları sağlamak maksadıyla bu özelliği kullanmaktadır.

Kullanımı

Daraltma eklentisi, ağır yükseltmeyi ele almak için birkaç sınıfı kullanır:

  • .collapse içeriği gizler
  • .collapse.in içeriği gösterir
  • .collapsing geçiş başladığında eklenir, bittiğinde çıkarılır

Bu sınıflar component-animations.less içinde bulunabilir.

Veri özellikleri ile

Otomatik olarak daraltılabilir elementin kontrol etmek için elemente sadece data-toggle="collapse" ve data-target ekleyin. data-target özelliği, daraltmayı uygulamak için CSS seçicisi kabul eder. Daraltılabilir elemente collapse sınıfını eklediğinizden emin olun. Eğer varsayılan olarak açık bırakmak istiyorsan, in sınıfını ekleyin.

Daraltılabilir kontrole akordiyon benzeri grup yönetimi eklemek için, data-parent="#selector" veri özelliğini ekleyin. Bunun uygulamada nasıl olduğunu görmek için örnek gösterime bakın.

JavaScript aracılığıyla

Elle aktif edin:

$('.collapse').collapse()

Seçenekler

Seçenekler veri özellikleri veya JavaScript ile aktarılabilir. Veri özellikleri için, seçenek adını data- sonuna ekleyin, örneğin data-parent="" gibi.

Ad Tür Varsayılan Açıklama
parent seçici false Eğer bir seçici sunulmuşsa, daraltılabilir element gösterildiğinde belirtilen atanın altındaki tüm daraltılabilir elementler kapatılır. (geleneksel akordiyon davranışına benzer olarak - bu panel sınıfına bağlıdır)
toggle ikili değer true Yürütüldüğünde daraltılabilir elementi açıp/kapatır

Metodlar

.collapse(seçenekler)

İçeriği daraltılabilir element olarak aktifleştirir. object seçeneğini opsiyonel olarak kabul eder.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Daraltılabilir elementi göstermek veya gizlemek için açıp/kapatır.

.collapse('show')

Daraltılabilir elementi gösterir.

.collapse('hide')

Daraltılabilir elementi gizler.

Eylemler

Bootstrap'in daraltma sınıfı, daraltma fonksiyonalitesini sağlamak için birkaç eylem kullanır.

Eylem türü Açıklama
show.bs.collapse Bu eylem, show eylem metodu çağrıldığında hemen tetiklenir.
shown.bs.collapse Bu eylem, daraltılabilir element kullanıcıya görünür olduğunda (CSS geçişlerinin tamamlanmasını bekler) tetiklenir.
hide.bs.collapse Bu eylem, hide eylem metodu çağrıldığında hemen tetiklenir.
hidden.bs.collapse Bu eylem, daraltılabilir element kullanıcıya görünür olamyı bitirdiğinde (CSS geçişlerinin tamamlanmasını bekler) tetiklenir.
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // bir şeyler yap…
})

Karusel carousel.js

Elementler arasında dönmek için bir gösteri aracıdır, tıpkı atlı karınca gibi. İç içe karuseller desteklenmemektedir.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Önceki</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Sonraki</span>
  </a>
</div>

Opsiyonel başlıklar

.item içindeki slaytlara .carousel-caption elementi kullanarak kolayca başlık ekleyin. İçine istenilen HTML'i yerleştirin, otomatik olarak yaslanıp formatlanacaktır.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Çoklu karusel

Karusel kontrollerinin düzgün çalışması için en dıştaki taşıyıcı (.carousel) id kullanımını gerektirir. Birden fazla karusel eklenirken veya karuselin id değerini değiştirirken, ilgili kontrollerin güncellenildiğinden emin ol.

Veri özellikleri ile

Karuselin pozisyonunu kolayca kontrol etmek için veri özelliklerini kullan. data-slide, prev veya next anahtar kelimelerini kabul eder. Bu anahtar kelimeler, mevcut pozisyona göreceli olarak slaytın pozisyonunu değiştirir. Alternatif olarak, karusele slayt indeksini vermek için data-slide-to kullan. Bu, 0'dan başlayarak slayt pozisyonunu belirtilen indekse kaydırır.

data-ride="carousel" özelliği, sayfa yüklendiğinde başlayacak şekilde işaretlemek için kullanılır. Aynı karuseli JavaScript kullanarak başlatma ile kombine edilmez.

JavaScript aracılığıyla

Elle karuseli çağır:

$('.carousel').carousel()

Seçenekler veri özellikleri veya JavaScript ile aktarılabilir. Veri özellikleri için, seçenek adını data- sonuna ekleyin, örneğin data-interval="" gibi.

Ad Tür Varsayılan Açıklama
interval sayı 5000 Slaytlar arası gecikme süresi. Eğer yanlış değer girilmişse karusel otomatik olarak dönmez.
pause metin "hover" Karuselin dönmesini fare girdiğinde duraklatır ve fare çıktığında dönmeye devam eder.
wrap ikili değer true Karusel sürekli dönmeye devam mı edecek yoksa kesin durmalar mı yapacak.
keyboard ikili değer true Karusel klavye eylemlerine tepki verecek mi.

.carousel(seçenekler)

Karuseli, opsiyonel object seçeneği ile ilklendirir ve maddeler arasındaki dönüşü başlatır.

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

.carousel('cycle')

Karusel maddelerini soldan sağa döndürür.

.carousel('pause')

Karuseli maddeler arası dönüşünü durdurur.

.carousel(number)

Karuseli belirtilen çerçeveye döndürür (0 tabanlı, dizilerdeki gibi).

.carousel('prev')

Önceki maddeye döner.

.carousel('next')

Sonraki maddeye döner.

Bootstrap'in karusel sınıfı, karusel fonksiyonalitesini sağlamak için iki eylem kullanır.

Her iki eylem de aşağıdaki ek özelliklere sahiptir:

  • direction: Karuselin hangi yöne döndüğü ("left" veya "right").
  • relatedTarget: Aktif madde olarak geçiş yapılmış DOM elementi.

Tüm karusel eylemleri, karuselin kendisinde (mesela <div class="carousel">) tetiklenir.

Eylem Türü Açıklama
slide.bs.carousel Bu eylem, slide nesne metodunun çağrılması ile tetiklenir.
slid.bs.carousel Bu eylem, slayt geçisinin tamamlanması ile tetiklenir.
$('#myCarousel').on('slide.bs.carousel', function () {
  // bir şeyler yap…
})

İliştirme affix.js

Örnek

İliştirme eklentisi position: fixed; değerini açıp/kapatır, position: sticky; efektine benzemeye çalışarak. Sağdaki alt-navigasyon, iliştirme eklentisinin canlı örneğidir.


Kullanımı

İliştirme eklentisini, veri özellikleri aracılığıyla veya yazdığınız JavaScript ile kullanın. Her iki durumda da, pozisyonlama ve iliştirilen içeriğin genişliği için CSS sağlamak zorundasın.

CSS ile pozisyonlama

İliştirme eklentisi, her biri özel durumu yansıtan üç sınıf arasında değişim yapar: .affix, .affix-top ve .affix-bottom. Gerçek pozisyonlandırma için .affix'teki position: fixed; dışında stilleri kendin sunmalısın.

İliştirme eklentisinin nasıl çalıştığı:

  1. Başlangıçta, element kendisinin en üst pozisyonunda olduğunu belirtmek için eklenti .affix-top ekler. Bu noktada CSS pozisyonlaması gerekmez.
  2. İliştirmek istediğin elementi geçen kaydırma asıl iliştirmeyi tetiklemelidir. Burası, .affix'in .affix-top ile yer değiştirip position: fixed; ayarlamasının (Bootstrap'in CSS kullanılarak) yapıldığı noktadır.
  3. Eğer alt iç kenar boşluğu tanımlanmışsa, kaydırma geçmişi .affix'i .affix-bottom ile yer değiştirir. İç kenar boşlukları opsiyonel olduğu için, birini ayarlamak uygun CSS'i ayarlamayı gerektirir. Bu durumda, gerekliyse position: absolute; ekleyin. Eklenti, elementi nerede pozisyonlandıracağına karar vermek için ver özelliğini veya JavaScript seçeneğini kullanır.

Aşağıdaki kullanım seçeneklerinin her ikisi için de CSS'i ayarlamak için yukarıdaki adımları takip edin.

Veri özellikleri ile

Herhangi bir elemente kolayca iliştirme davranışı eklemek için, gözlemlemek istediğin elemente sadece data-spy="affix" ekleyin. Elementin iğnelenmesinin ne zaman açılıp/kapanacağını belirtmek için iç kenar boşluğunu kullanın.

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

JavaScript aracılığıyla

JavaScript aracılığıyla iliştirme eklentisini çağırın:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Seçenekler

Seçenekler veri özellikleri veya JavaScript ile aktarılabilir. Veri özellikleri için, seçenek adını data- sonuna ekleyin, örneğin data-offset-top="200" gibi.

Ad Tür Varsayılan Açıklama
offset sayı | fonksiyon | obje 10 Kaydırma pozisyonunu hesaplarken ekrandan bırakılacak iç kenar boşluğu pikselidir. Eğer sadece tek bir sayı verilmişse, iç kenar boşluğu hem üst hem de alta uygulanır. Tekil alt ve üst iç kenar boşluğu uygulamak için sadece offset: { top: 10 } veya offset: { top: 10, bottom: 5 } objesi verin. Dinamik olarak iç kenar boşluğu hesaplamak istiyorsan bir fonksiyon kullanın.
target seçici | düğüm (node) | jQuery elementi the window object İliştirmenin hedef elementini tanımlar.

Eylemler

Bootstrap'in iliştirme eklentisi, iliştirme fonksiyonalitesini sağlamak için birkaç eylem kullanır.

Eylem Türü Açıklama
affix.bs.affix Bu eylem, element iliştirilmeden hemen önce tetiklenir.
affixed.bs.affix Bu eylem, element iliştirilmeden hemen sonra tetiklenir.
affix-top.bs.affix Bu eylem, element yukarı iliştirilmeden hemen önce tetiklenir.
affixed-top.bs.affix Bu eylem, element yukarı iliştirilmeden hemen sonra tetiklenir.
affix-bottom.bs.affix Bu eylem, element aşağı iliştirilmeden hemen önce tetiklenir.
affixed-bottom.bs.affix Bu eylem, element aşağı iliştirilmeden hemen sonra tetiklenir.