JavaScript

jQuery üzerine kurulu isteğe bağlı JavaScript eklentilerimizle Bootstrap'a hayat verin. Her bir eklenti, verilerimiz ve programatik API seçeneklerimiz ve daha fazlası hakkında bilgi edinin.

Bireysel veya derlenmiş

Eklentiler tek tek dahil edilebilir (Bootstrap'in bireyi kullanılarak js/dist/*.js) veya tümü aynı anda bootstrap.jsveya küçültülmüş olarak bootstrap.min.js(her ikisini birden dahil etmeyin) dahil edilebilir.

/js/dist/*.jsBir paketleyici (Webpack, Rollup…) kullanıyorsanız, UMD'ye hazır dosyaları kullanabilirsiniz .

bağımlılıklar

Bazı eklentiler ve CSS bileşenleri diğer eklentilere bağlıdır. Eklentileri tek tek eklerseniz, bu bağımlılıkları belgelerde kontrol ettiğinizden emin olun. Ayrıca tüm eklentilerin jQuery'ye bağlı olduğunu unutmayın (bu, jQuery'nin eklenti dosyalarından önce dahil edilmesi gerektiği anlamına gelir ). Hangi jQuery sürümlerinin desteklendiğini görmek için bize danışın .package.json

Açılır listelerimiz, açılır pencerelerimiz ve araç ipuçlarımız da Popper.js'ye bağlıdır .

Veri öznitelikleri

Hemen hemen tüm Bootstrap eklentileri, veri öznitelikleri ile yalnızca HTML aracılığıyla etkinleştirilebilir ve yapılandırılabilir (tercih ettiğimiz JavaScript işlevselliğini kullanma yöntemimiz). Tek bir öğe üzerinde yalnızca bir veri özniteliği kümesi kullandığınızdan emin olun (örneğin, aynı düğmeden bir araç ipucunu ve modu tetikleyemezsiniz.)

Ancak bazı durumlarda bu işlevin devre dışı bırakılması istenebilir. API veri özniteliğini devre dışı bırakmak için, aşağıdaki gibi ad alanlı belgedeki tüm olayların bağlantısını kaldırın data-api:

$(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')

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.

Tüm mastar olaylar preventDefault()işlevsellik sağlar. Bu, bir eylemin yürütülmesini başlamadan önce durdurma yeteneği sağlar. Bir olay işleyicisinden false döndürmek de otomatik olarak preventDefault().

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

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').

Asenkron fonksiyonlar ve geçişler

Tüm programatik API yöntemleri zaman uyumsuzdur ve geçiş başlatıldığında ancak bitmeden arayana geri döner .

Geçiş tamamlandıktan sonra bir eylemi gerçekleştirmek için ilgili olayı dinleyebilirsiniz.

$('#myCollapse').on('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Ek olarak, geçiş yapan bir bileşen üzerindeki bir yöntem çağrısı yoksayılacaktır .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

Varsayılan ayarları

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

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = 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

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 // => "4.6.2"

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.

kullanım

Tüm Bootstrap JavaScript dosyaları bağlıdır util.jsve diğer JavaScript dosyalarıyla birlikte dahil edilmelidir. Derlenmiş (veya küçültülmüş) kullanıyorsanız bootstrap.js, bunu eklemenize gerek yoktur - zaten oradadır.

util.jsyardımcı işlevler ve transitionEndolaylar için temel bir yardımcının yanı sıra bir CSS geçiş öykünücüsü içerir. Diğer eklentiler tarafından CSS geçiş desteğini kontrol etmek ve asılı geçişleri yakalamak için kullanılır.

dezenfektan

Araç ipuçları ve Popover'lar, HTML'yi kabul eden seçenekleri sterilize etmek için yerleşik dezenfektanımızı kullanır.

Varsayılan whiteListdeğer aşağıdaki gibidir:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Bu varsayılana yeni değerler eklemek whiteLististiyorsanız aşağıdakileri yapabilirsiniz:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

DOMPurify gibi özel bir kitaplık kullanmayı tercih ettiğiniz için dezenfektanımızı atlamak istiyorsanız , aşağıdakileri yapmalısınız:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})