Bootstrap - Eklentilere Genel Bakış

Önceki bölümlerde tartışılan bileşenler Layout Componentssadece başlangıç. Bootstrap, özellikleri genişleten ve sitenize daha fazla etkileşim ekleyebilen 12 jQuery eklentisiyle birlikte gelir. Bootstrap'in JavaScript eklentilerini kullanmaya başlamak için gelişmiş bir JavaScript geliştiricisi olmanıza gerek yoktur. Bootstrap Data API kullanılarak, eklentilerin çoğu tek bir kod satırı yazmadan tetiklenebilir.

Bootstrap Eklentileri sitenize iki şekilde dahil edilebilir -

Individually- Bootstrap'in bağımsız * .js dosyalarını kullanma. Bazı eklentiler ve CSS bileşenleri diğer eklentilere bağlıdır. Eklentileri tek tek eklerseniz, bu bağımlılıkları dokümanlarda kontrol ettiğinizden emin olun.
Veya compiled (all at once)- bootstrap.js veya küçültülmüş bootstrap.min.js'yi kullanma . Her iki şekilde, her ikisini de denemeyin bootstrap.js ve bootstrap.min.js tek bir dosyada tüm eklentileri içerir.

Tüm eklentiler jQuery'ye bağlıdır. Dolayısıyla jQuery eklenti dosyalarından önce eklenmelidir. Kontrol bower.json jQuery sürümleri desteklenmektedir görmek için.

Veri Öznitelikleri

Tüm Bootstrap eklentilerine, dahil olan Veri API'sı kullanılarak erişilebilir. Bu nedenle, eklenti özelliklerinden herhangi birini çağırmak için tek bir JavaScript satırı eklemenize gerek yoktur.
Bazı durumlarda, Data API'nin bu işlevselliğinin kapatılması istenebilir. Veri API'sını kapatmanız gerekirse, aşağıdaki JavaScript satırını ekleyerek özniteliklerin bağlantısını kaldırabilirsiniz -

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

Belirli / tek bir eklentiyi kapatmak için, eklentinin adını bunun gibi data-api ad alanıyla birlikte bir ad alanı olarak ekleyin -

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

Programatik API

Bootstrap geliştiricileri, tüm eklentileri yalnızca JavaScript API aracılığıyla kullanabilmeniz gerektiğine inanıyor. Tüm genel API'ler tekil, zincirlenebilir yöntemlerdir ve örneğin;

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

Tüm yöntemler isteğe bağlı bir seçenek nesnesini, belirli bir yöntemi hedefleyen bir dizeyi veya aşağıda gösterildiği gibi (varsayılan davranışla bir eklentiyi başlatan) hiçbir şeyi kabul etmez -

// initialized with defaults
$("#myModal").modal()    

 // initialized with no keyboard                  
$("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')

Her eklenti ayrıca ham yapıcısını bir Constructorözellik: $ .fn.popover.Constructor . Belirli bir eklenti örneğini almak istiyorsanız, onu doğrudan bir öğeden alın -

$('[rel = popover]').data('popover').

Çatışma yok

Bootstrap eklentileri bazen diğer UI çerçeveleriyle kullanılabilir. Bu durumlarda, bazen ad alanı çakışmaları meydana gelebilir. Bu çağrının üstesinden gelmek için.noConflict eklentide değerini geri döndürmek istiyorsunuz.

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()

// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

Etkinlikler

Bootstrap, çoğu eklentinin benzersiz eylemleri için özel etkinlikler sağlar. Genellikle bu olaylar iki şekilde gelir -

Infinitive form- Bu, bir olayın başlangıcında tetiklenir. Örneğin, gösteri . Infinitive olaylar, preventDefault işlevselliği sağlar. Bu, başlamadan önce bir eylemin yürütülmesini durdurma yeteneği sağlar.

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

Past participle form- Bu, bir eylemin tamamlanmasıyla tetiklenir. Örneğin gösterilmiştir.