JavaScript

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(ikisini birden dahil etmeyin) dahil edilebilir.

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

Bootstrap'i modül olarak kullanma

Hedeflenen tarayıcılarınız destekliyorsa , Bootstrap'i tarayıcınızda bir modül olarak kullanmanıza izin veren ESM( bootstrap.esm.jsve ) olarak oluşturulmuş bir Bootstrap sürümü sunuyoruz .bootstrap.esm.min.js

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

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.

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

Hâlâ jQuery kullanmak istiyor musunuz? Mümkün!

Bootstrap 5, jQuery olmadan kullanılmak üzere tasarlanmıştır, ancak bileşenlerimizi jQuery ile kullanmak yine de mümkündür. Bootstrap nesnede algılarsa jQuery,window tüm bileşenlerimizi jQuery'nin eklenti sistemine ekler; $('[data-bs-toggle="tooltip"]').tooltip()bu , araç ipuçlarını etkinleştirmek için yapabileceğiniz anlamına gelir . Aynı şey diğer bileşenlerimiz için de geçerli.

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 dizi veri özniteliği kullandığınızdan emin olun (örneğin, aynı düğmeden bir araç ipucunu ve modu tetikleyemezsiniz.)

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

var myModal = document.getElementById('myModal')

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

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

Programatik API

Tüm yapıcılar isteğe bağlı seçenekler nesnesini kabul eder veya hiçbir şey kabul etmez (bu, varsayılan davranışıyla bir eklenti başlatır):

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

Belirli bir eklenti örneği almak istiyorsanız, her eklenti bir getInstanceyöntem sunar. Doğrudan bir öğeden almak için şunu yapın: bootstrap.Popover.getInstance(myPopoverEl).

Yapıcılarda CSS seçicileri

Eklentiyi başlatmak için DOM öğesi yerine ilk argüman olarak bir CSS seçici de kullanabilirsiniz. querySelectorEklentilerimiz yalnızca tek bir öğeyi desteklediğinden , şu anda eklentinin öğesi yöntemle bulunur .

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

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.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('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 .

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

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

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('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
bootstrap.Modal.Default.keyboard = false

Çakışma yok (yalnızca jQuery kullanıyorsanız)

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 eklentilerinin her birinin sürümüne , eklentinin kurucusunun özelliği aracılığıyla erişilebilir . Örneğin, araç ipucu eklentisi için:

bootstrap.Tooltip.VERSION // => "5.0.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.

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 allowListdeğer aşağıdaki gibidir:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // 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 allowLististiyorsanız aşağıdakileri yapabilirsiniz:

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

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

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].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:

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})