genel bakış

Bireysel veya derlenmiş

Eklentiler tek tek (Bootstrap'in bireysel *.jsdosyalarını kullanarak) veya hepsi bir kerede (kullanarak bootstrap.jsveya küçültülmüş olarak bootstrap.min.js) dahil edilebilir.

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, ad alanlı belgedeki tüm olayların bağlantısını kaldırarak veri özniteliği API'sini devre dışı bırakma olanağı da sağlıyoruz data-api. Bu şuna benziyor:

$(document).off('.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:

$(document).off('.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.danger').button('toggle').addClass('fat')

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()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Her eklenti ayrıca ham yapıcısını bir Constructorözellik ü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').

Varsayılan ayarları

Eklentinin Constructor.DEFAULTSnesnesini değiştirerek bir eklentinin varsayılan ayarlarını değiştirebilirsiniz:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Ç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.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Olaylar

Bootstrap, çoğu eklentinin benzersiz eylemleri için özel etkinlikler 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ıyla tetiklenir.

3.0.0'dan itibaren tüm Bootstrap olayları ad alanlıdır.

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

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Sürüm numaraları

VERSIONBootstrap'in jQuery eklentilerinin her birinin sürümüne , eklentinin kurucusunun özelliği aracılığıyla erişilebilir . Örneğin, araç ipucu eklentisi için:

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

JavaScript devre dışı bırakıldığında özel geri dönüş yok

Bootstrap'ın eklentileri, JavaScript devre dışı bırakıldığında özellikle zarif bir şekilde geri düşmez. Bu durumda kullanıcı deneyimini önemsiyorsanız <noscript>, durumu (ve JavaScript'in nasıl yeniden etkinleştirileceğini) kullanıcılarınıza açıklamak ve/veya kendi özel yedeklerinizi eklemek için kullanın.

Geçişler geçiş.js

Geçişler hakkında

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

içinde ne var

transitionEndTransition.js, olaylar için temel bir yardımcı ve bir CSS geçiş öykünücüsüdür. Diğer eklentiler tarafından CSS geçiş desteğini kontrol etmek ve asılı geçişleri yakalamak için kullanılır.

Geçişleri devre dışı bırakma

Geçişler , yüklendikten sonra transition.js(veya bootstrap.jsduruma göre ) gelmesi gereken aşağıdaki JavaScript snippet'i kullanılarak genel olarak devre dışı bırakılabilir :bootstrap.min.js

$.support.transition = false

Modal modal.js

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

HTML5'in semantiğini nasıl tanımladığı nedeniyle, autofocusHTML özniteliğinin Bootstrap modellerinde hiçbir etkisi yoktur. Aynı efekti elde etmek için bazı özel JavaScript kullanın:

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

Örnekler

statik örnek

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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 title</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">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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.

<!-- 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">
  <div class="modal-dialog" role="document">
    <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 title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

İsteğe bağlı boyutlar

Modalların iki isteğe bağlı boyutu vardır ve bunlar, bir .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Animasyonu kaldır

Görüntülemek için solmak yerine basitçe görünen modlar için, .fadesınıfı modsal işaretlemenizden kaldırın.

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

Izgara sistemini kullanma

Bir kip içinde Bootstrap ızgara sisteminden yararlanmak için, .rows öğesini içine yerleştirmeniz .modal-bodyve ardından normal ızgara sistemi sınıflarını kullanmanız yeterlidir.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <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 title</h4>
      </div>
      <div class="modal-body">
        <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">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Tetik düğmesine göre değişen mod içeriği

Sadece biraz farklı içeriklerle aynı modu tetikleyen bir sürü düğmeniz var mı? Hangi düğmenin tıklandığına bağlı olarak kipin içeriğini değiştirmek için ve event.relatedTargetHTML özniteliklerini data-*( muhtemelen jQuery aracılığıyla ) kullanın. Ayrıntılar için Modal Events belgelerine bakın relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <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">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</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">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

kullanım

Kalıcı eklenti, veri öznitelikleri veya JavaScript aracılığıyla isteğe bağlı olarak gizli içeriğinizi değiştirir. Ayrıca , varsayılan kaydırma davranışını geçersiz kılmak için ekler ve .modal-openkipin dışına tıklandığında gösterilen kipleri yok saymak için bir tıklama alanı sağlamak üzere bir a oluşturur.<body>.modal-backdrop

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">Launch modal</button>

JavaScript aracılığıyla

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

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

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(options)

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

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

.modal('toggle')

Bir modu manuel olarak değiştirir. Kip fiilen gösterilmeden veya gizlenmeden (yani shown.bs.modalveya hidden.bs.modalolayı gerçekleşmeden önce) arayana geri döner.

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

.modal('show')

Bir modeli manuel olarak açar. Modal gerçekte gösterilmeden önce (yani shown.bs.modalolay meydana gelmeden önce) arayana geri döner.

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

.modal('hide')

Bir modu el ile gizler. Modal gerçekten gizlenmeden (yani hidden.bs.modalolay meydana gelmeden önce) arayana geri döner.

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

.modal('handleUpdate')

Modun sola atlamasını sağlayacak şekilde, birinin görünmesi durumunda bir kaydırma çubuğuna karşı koymak için modun konumunu yeniden ayarlar.

Sadece modal açıkken yüksekliği değiştiğinde gereklidir.

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

Olaylar

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

Tüm mod olayları, modun kendisinde (yani 'de <div class="modal">) tetiklenir.

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Açılır listeler dropdown.js

Ö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

hap içinde

kullanım

.openVeri öznitelikleri veya JavaScript aracılığıyla, açılır eklenti, sınıfı üst liste öğesinde değiştirerek gizli içeriği (açılır menüler) değiştirir .

Mobil cihazlarda bir açılır menüyü açmak .dropdown-backdrop, menünün dışına dokunulduğunda açılır menüleri kapatmak için bir dokunma alanı olarak ekler, bu da uygun iOS desteği için bir gerekliliktir. Bu, açık bir açılır menüden farklı bir açılır menüye geçişin mobil cihazlarda fazladan bir dokunuş gerektirdiği anlamına gelir.

Not: Bu data-toggle="dropdown"özellik, uygulama düzeyinde açılır menüleri kapatmak için kullanılır, bu nedenle her zaman kullanmak iyi bir fikirdir.

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 class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

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

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

JavaScript aracılığıyla

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

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

Seçenekler

Hiçbiri

yöntemler

$().dropdown('toggle')

Belirli bir gezinme çubuğunun veya sekmeli gezinmenin açılır menüsünü değiştirir.

Olaylar

Tüm açılır olaylar, .dropdown-menu'nin üst öğesinde tetiklenir.

Tüm açılır olaylar relatedTarget, değeri geçiş yapan bağlantı öğesi olan bir özelliğe sahiptir.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

Göreceli konumlandırma gerektirir

Uygulama yöntemi ne olursa olsun, scrollspy, gözetlediğiniz öğede kullanılmasını gerektirir position: relative;. Çoğu durumda bu <body>. dışındaki öğeler üzerinde gezinirken, bir kümeye sahip olduğunuzdan ve uyguladığınızdan <body>emin olun .heightoverflow-y: scroll;

Veri öznitelikleri aracılığıyla

Üst çubuk navigasyonunuza kolayca scrollspy davranışı eklemek data-spy="scroll"için, gözetlemek istediğiniz öğeye ekleyin (çoğunlukla bu, <body>). Ardından , herhangi bir Bootstrap bileşeninin data-targetüst öğesinin kimliği veya sınıfıyla özniteliği ekleyin..nav

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

position: relative;CSS'nizi ekledikten sonra , JavaScript aracılığıyla scrollspy'ı arayın:

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

yöntemler

.scrollspy('refresh')

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

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

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

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Değiştirilebilir sekmeler tab.js

Ö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. İç içe sekmeler desteklenmez.

kullanım

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

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

Tek tek sekmeleri birkaç şekilde etkinleştirebilirsiniz:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

İş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ının data-toggle="pill"eklenmesi Bootstrap sekme stilini uygularken ve sınıflarının eklenmesi hap stilini uygular .navnav-tabsulnavnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <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 .fadeiçin her birine ekleyin .tab-pane. İlk sekme bölmesinin de .inilk içeriği görünür hale getirmesi gerekir.

<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

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. hrefYukarıdaki örneklerde sekmeler, niteliklere <a>sahip data-toggle="tab"s'lerdir.

.tab('show')

Verilen sekmeyi seçer ve ilişkili içeriğini gösterir. Daha önce seçilen diğer sekmelerin seçimi kaldırılır ve ilişkili içeriği gizlenir. Sekme bölmesi gerçekte gösterilmeden önce (yani shown.bs.tabolay meydana gelmeden önce) arayana geri döner.

$('#someTab').tab('show')

Olaylar

Yeni bir sekme gösterilirken olaylar aşağıdaki sırayla tetiklenir:

1. hide.bs.tab(geçerli aktif sekmede)
2. show.bs.tab(gösterilecekler sekmesinde)
3. hidden.bs.tab(önceki etkin sekmede, hide.bs.tabetkinlikle aynı)
4. shown.bs.tab(yeni etkin olan az önce gösterilen sekmede, show.bs.tabetkinlikle aynı)

Hiçbir sekme zaten etkin değilse, hide.bs.taband hidden.bs.tabolayları tetiklenmez.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Araç ipuçları tooltip.js

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.

Sıfır uzunlukta başlıklara sahip araç ipuçları hiçbir zaman görüntülenmez.

Örnekler

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

Statik araç ipucu

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

dört yön

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

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

kullanım

Araç ipucu eklentisi, isteğe bağlı olarak içerik ve işaretleme oluşturur ve varsayılan olarak araç ipuçlarını tetikleyici öğelerinden sonra yerleştirir.

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

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

İşaretleme

Bir araç ipucu için gerekli işaretleme yalnızca bir dataniteliktir ve titleHTML öğesinde bir araç ipucuna sahip olmak istersiniz. Bir araç ipucunun oluşturulan işaretlemesi, bir konum gerektirmesine rağmen (varsayılan olarak, topeklenti tarafından ayarlanır) oldukça basittir.

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

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

yöntemler

$().tooltip(options)

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

.tooltip('show')

Bir öğenin ipucunu ortaya çıkarır. Araç ipucu gerçekten gösterilmeden önce (yani shown.bs.tooltipolay meydana gelmeden önce) arayana geri döner. Bu, araç ipucunun "manuel" tetiklenmesi olarak kabul edilir. Sıfır uzunlukta başlıklara sahip araç ipuçları hiçbir zaman görüntülenmez.

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

.tooltip('hide')

Bir öğenin ipucunu gizler. Araç ipucu gizlenmeden (yani hidden.bs.tooltipolay gerçekleşmeden önce) arayana geri döner. Bu, araç ipucunun "manuel" tetiklenmesi olarak kabul edilir.

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

.tooltip('toggle')

Bir öğenin ipucunu değiştirir. Araç ipucu gerçekten gösterilmeden veya gizlenmeden (yani shown.bs.tooltipveya hidden.bs.tooltipolayı gerçekleşmeden önce) arayana geri döner. Bu, araç ipucunun "manuel" tetiklenmesi olarak kabul edilir.

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

.tooltip('destroy')

Bir öğenin ipucunu gizler ve yok eder. Temsilci kullanan (seçenek kullanılarak oluşturulan) araç ipuçları , selectorsoyundan gelen tetikleyici öğelerde tek tek yok edilemez.

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

Olaylar

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popover'lar popover.js

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

Hem başlığı hem de içeriği sıfır uzunlukta olan popover'lar hiçbir zaman görüntülenmez.

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

Örnekler

statik popover

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

Canlı demo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</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.">
  Popover on left
</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.">
  Popover on top
</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.">
  Popover on bottom
</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.">
  Popover on right
</button>

Sonraki tıklamada kapat

focusKullanıcının yaptığı bir sonraki tıklamada açılır pencereleri kapatmak için tetikleyiciyi kullanın .

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

kullanım

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

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

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

yöntemler

$().popover(options)

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

.popover('show')

Bir öğenin popover'ını ortaya çıkarır. Popover fiilen gösterilmeden önce (yani shown.bs.popoverolay meydana gelmeden önce) arayana geri döner. Bu, popover'ın "manuel" tetiklenmesi olarak kabul edilir. Hem başlığı hem de içeriği sıfır uzunlukta olan popover'lar hiçbir zaman görüntülenmez.

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

.popover('hide')

Bir öğenin açılır penceresini gizler. Popover fiilen gizlenmeden (yani hidden.bs.popoverolay meydana gelmeden önce) arayana geri döner. Bu, popover'ın "manuel" tetiklenmesi olarak kabul edilir.

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

.popover('toggle')

Bir öğenin açılır penceresini değiştirir. Popover fiilen gösterilmeden veya gizlenmeden (yani shown.bs.popoverveya hidden.bs.popoverolayı gerçekleşmeden önce) arayana geri döner. Bu, popover'ın "manuel" tetiklenmesi olarak kabul edilir.

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

.popover('destroy')

Bir öğenin popover'ını gizler ve yok eder. Temsilci kullanan (seçenek kullanılarak oluşturulan) popover'lar, alttan gelen selectortetikleyici öğelerde tek tek yok edilemez.

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

Olaylar

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Uyarı mesajları alert.js

Örnek uyarılar

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

Bir .closedüğme kullanırken, düğmenin ilk çocuğu olmalıdır .alert-dismissibleve işaretlemede ondan önce hiçbir metin içeriği gelmemelidir.

kullanım

data-dismiss="alert"Otomatik olarak bir uyarı kapatma işlevi vermek için kapat düğmenize ekleyin . Bir uyarıyı kapatmak, onu DOM'den kaldırır.

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

Uyarılarınızın kapanırken animasyon kullanmasını sağlamak için, onlara .fadeve .insınıflarının zaten uygulanmış olduğundan emin olun.

yöntemler

$().alert()

data-dismiss="alert"Özniteliğe sahip alt öğelerdeki tıklama olaylarını dinleyen bir uyarı yapar . (Data-api'nin otomatik başlatmasını kullanırken gerekli değildir.)

$().alert('close')

DOM'den kaldırarak bir uyarıyı kapatır. .fadeÖğede ve sınıfları varsa, .inuyarı kaldırılmadan önce kaybolur.

Olaylar

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

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Düğmeler button.js

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 .

Bu özellik v3.3.5'ten beri kullanımdan kaldırılmıştır ve v4'te kaldırılmıştır.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

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-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Onay Kutusu / Radyo

İlgili stillerde geçişi etkinleştirmek için içeren data-toggle="buttons"bir onay kutusuna veya radyo girişlerine ekleyin ..btn-group

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 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> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

yöntemler

$().button('toggle')

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

$().button('reset')

Düğme durumunu sıfırlar - metni orijinal metne değiştirir. Bu yöntem asenkrondur ve sıfırlama fiilen tamamlanmadan önce döner.

$().button(string)

Metni herhangi bir veri tanımlı metin durumuna değiştirir.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Daralt.js'yi daralt

Kolay geçiş davranışı için bir avuç sınıf kullanan esnek eklenti.

Örnek

Sınıf değişiklikleri yoluyla başka bir öğeyi göstermek ve gizlemek için aşağıdaki düğmeleri tıklayın:

• .collapseiçeriği gizler
• .collapsinggeçişler sırasında uygulanır
• .collapse.iniçeriği gösterir

Öznitelik içeren bir bağlantı hrefveya öznitelik içeren bir düğme kullanabilirsiniz data-target. Her iki durumda data-toggle="collapse"da gereklidir.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

akordeon örneği

Panel bileşeniyle bir akordeon oluşturmak için varsayılan daraltma davranışını genişletin.

<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 role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #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" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #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" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #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-bodys'yi s ile değiştirmek de mümkündür .list-group.

kullanım

Daraltma eklentisi, ağır kaldırmayı halletmek için birkaç sınıf kullanır:

• .collapseiçeriği gizler
• .collapse.iniçeriği gösterir
• .collapsinggeçiş başladığında eklenir ve bittiğinde kaldırılır

Bu sınıflar adresinde bulunabilir component-animations.less.

Veri öznitelikleri aracılığıyla

Katlanabilir bir öğenin kontrolünü otomatik olarak atamak için öğeye data-toggle="collapse"ve a'yı eklemeniz yeterlidir. data-targetNitelik data-target, daraltmanın uygulanacağı bir CSS seçiciyi kabul eder. collapseSınıfı daraltılabilir öğeye eklediğinizden emin olun . Varsayı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:

$('.collapse').collapse()

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(options)

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

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

.collapse('toggle')

Daraltılabilir bir öğeyi gösterilen veya gizli olarak değiştirir. Arayana daraltılabilir öğe fiilen gösterilmeden veya gizlenmeden önce (yani shown.bs.collapseveya hidden.bs.collapseolayı gerçekleşmeden önce) döner.

.collapse('show')

Katlanabilir bir öğe gösterir. Katlanabilir öğe fiilen gösterilmeden önce (yani shown.bs.collapseolay meydana gelmeden önce) arayana geri döner.

.collapse('hide')

Bir daraltılabilir öğeyi gizler. Arayana daraltılabilir öğe fiilen gizlenmeden önce (yani hidden.bs.collapseolay meydana gelmeden önce) döner.

Olaylar

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Döngü gibi öğeler arasında geçiş yapmak için bir slayt gösterisi bileşeni. İç içe dönen karuseller desteklenmez.

Örnekler

Öncesi Sonraki

<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">Previous</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">Next</span>
  </a>
</div>

İsteğe bağlı altyazılar

.carousel-captionHerhangi bir içindeki öğeyle slaytlarınıza kolayca altyazı ekleyin .item. Hemen hemen tüm isteğe bağlı HTML'leri oraya yerleştirin ve otomatik olarak hizalanacak ve biçimlendirilecektir.

İlk slayt etiketi

Nulla vitae seçkin libero, bir pharetra augue mollis interdum.

İkinci slayt etiketi

Lorem ipsum dolor sit amet, conectetur adipiscing elit.

Üçüncü slayt etiketi

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Öncesi Sonraki

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

kullanım

Çoklu atlıkarınca

Karusel denetimlerinin düzgün çalışması için iden dıştaki kapta ( ) bir öğesinin kullanılmasını gerektirir . .carouselBirden fazla karusel eklerken veya bir karuselinid ilgili kontrolleri güncellediğinizden emin olun.

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 kaydıran atlıkarıncaya ham bir slayt indeksi iletmek için kullanın .prevnextdata-slide-todata-slide-to="2"0

Nitelik data-ride="carousel", bir atlıkarıncayı sayfa yüklendiğinden başlayarak animasyon olarak işaretlemek için kullanılır. Aynı döngünün (gereksiz ve gereksiz) açık JavaScript başlatmasıyla birlikte kullanılamaz.

JavaScript aracılığıyla

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

$('.carousel').carousel()

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

yöntemler

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

Önceki öğeye geçiş yapar.

.carousel('next')

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.

Her iki olay da aşağıdaki ek özelliklere sahiptir:

• direction: Karuselin kaydığı yön (ya "left"veya "right").
• relatedTarget: Etkin öğe olarak yerine kaydırılan DOM öğesi.

Tüm atlıkarınca olayları atlıkarıncanın kendisine ateşlenir (yani 'de <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

affix.js'yi ekleyin

Örnek

Eklenti eklentisi position: fixed;, ile bulunan efekti taklit ederek açılır ve kapanır position: sticky;. Sağdaki alt gezinme, eklenti eklentisinin canlı bir demosudur.

kullanım

Eklenti eklentisini veri öznitelikleri aracılığıyla veya kendi JavaScript'inizle manuel olarak kullanın. Her iki durumda da, eklenmiş içeriğinizin konumu ve genişliği için CSS sağlamanız gerekir.

Not: Safari oluşturma hatası nedeniyle, çekme veya itme sütunu gibi nispeten konumlanmış bir öğede bulunan bir öğede eklenti eklentisini kullanmayın .

CSS ile konumlandırma

Eklenti eklentisi, her biri belirli bir durumu temsil eden üç sınıf arasında geçiş yapar: .affix, .affix-topve .affix-bottom. Gerçek konumları işlemek için bu sınıflar için (bu eklentiden bağımsız olarak) position: fixed;on hariç stilleri sağlamalısınız ..affix

Eklenti eklentisi şu şekilde çalışır:

1. Başlamak için eklenti ekler.affix-top , öğenin en üst konumunda olduğunu belirtmek için ekler. Bu noktada hiçbir CSS konumlandırması gerekli değildir.
2. Yapıştırılmasını istediğiniz öğeyi kaydırmak, asıl yapıştırmayı tetiklemelidir. Burası .affixdeğiştirir .affix-topve ayarlar position: fixed;(Bootstrap'ın CSS'si tarafından sağlanır).
3. Bir alt ofset tanımlanmışsa, kaydırıldığında .affixile değiştirilmelidir .affix-bottom. Ofsetler isteğe bağlı olduğundan, birini ayarlamak uygun CSS'yi ayarlamanızı gerektirir. Bu durumda, position: absolute;gerektiğinde ekleyin. Eklenti, öğeyi oradan nereye konumlandıracağını belirlemek için data niteliğini veya JavaScript seçeneğini kullanır.

Aşağıdaki kullanım seçeneklerinden herhangi biri için CSS'nizi ayarlamak için yukarıdaki adımları izleyin.

Veri öznitelikleri aracılığıyla

Herhangi bir öğeye kolayca ekleme davranışı eklemek data-spy="affix"için, casusluk yapmak istediğiniz öğeye eklemeniz yeterlidir. Bir öğenin sabitlemesinin ne zaman değiştirileceğini tanımlamak için ofsetleri kullanın.

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

JavaScript aracılığıyla

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

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

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

yöntemler

.affix(options)

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

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

İlgili öğelerin boyutlarına, konumuna ve kaydırma konumuna göre ekin durumunu yeniden hesaplar. , .affix, .affix-topve .affix-bottomsınıfları, eklenen içeriğe yeni duruma göre eklenir veya kaldırılır. Eklenen içeriğin doğru konumlandırılmasını sağlamak için, eklenen içeriğin veya hedef öğenin boyutları değiştirildiğinde bu yöntemin çağrılması gerekir.

$('#myAffix').affix('checkPosition')

Olaylar

Bootstrap'in eklenti eklentisi, eklenti işlevine bağlanmak için birkaç olayı ortaya çıkarır.