JavaScript

Individual yoki tuzilgan

Plaginlar alohida-alohida (Bootstrap individual dan foydalangan holda js/dist/*.js) yoki bir vaqtning o'zida bootstrap.jsyoki kichiklashtirilgan bootstrap.min.js(ikkalasi ham qo'shilmaydi) yordamida kiritilishi mumkin.

Agar siz bundlerdan (Webpack, Rollup…) foydalansangiz /js/dist/*.js, UMD tayyor bo'lgan fayllardan foydalanishingiz mumkin.

Bootstrap-dan modul sifatida foydalanish

ESMBiz Bootstrap-ning ( bootstrap.esm.jsva ) shaklida yaratilgan versiyasini taqdim etamiz , agar maqsadli brauzerlaringiz uni qo'llab-quvvatlasabootstrap.esm.min.js , Bootstrap-dan brauzeringizda modul sifatida foydalanish imkonini beradi .

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

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

Bog'liqlar

Ba'zi plaginlar va CSS komponentlari boshqa plaginlarga bog'liq. Agar siz plaginlarni alohida-alohida qo'shsangiz, hujjatlarda ushbu bog'liqliklarni tekshiring.

Bizning ochiladigan menyular, popoverlar va maslahatlar ham Popper ga bog'liq .

Hali ham jQuery'dan foydalanmoqchimisiz? Bu mumkin!

Bootstrap 5 jQuery'siz foydalanish uchun mo'ljallangan, ammo jQuery bilan bizning komponentlarimizdan foydalanish hali ham mumkin. Agar Bootstrap ob'ektda aniqlansa jQuery,window jQuery plagin tizimidagi barcha komponentlarimizni qo'shadi; $('[data-bs-toggle="tooltip"]').tooltip()bu siz maslahatlarni yoqish uchun qila olasiz degan ma'noni anglatadi . Xuddi shu narsa bizning boshqa komponentlarimizga ham tegishli.

Ma'lumotlar atributlari

Deyarli barcha Bootstrap plaginlarini faqat ma'lumotlar atributlari bilan HTML orqali yoqish va sozlash mumkin (JavaScript funksiyasidan foydalanishning afzal usuli). Bitta elementda faqat bitta maʼlumotlar atributlari toʻplamidan foydalanishga ishonch hosil qiling (masalan, bitta tugmadan asboblar maslahati va modalni ishga tushira olmaysiz.)

Voqealar

Bootstrap ko'pchilik plaginlarning noyob harakatlari uchun maxsus tadbirlarni taqdim etadi. Odatda, bular infinitiv va o‘tgan zamon shakllarida keladi - bunda infinitiv (masalan show, ) hodisa boshida, uning o‘tgan zamon shakli (masalan shown, ) esa ish-harakat tugagandan so‘ng ishga tushadi.

Barcha infinitiv hodisalar preventDefault()funksionallikni ta'minlaydi. Bu harakat boshlanishidan oldin uning bajarilishini to'xtatish imkoniyatini beradi. Hodisa ishlovchisidan false qaytarilishi ham avtomatik ravishda qo'ng'iroq preventDefault()qiladi.

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

Dasturli API

Barcha konstruktorlar ixtiyoriy variantlar ob'ektini yoki hech narsani qabul qilmaydi (birlamchi xatti-harakati bilan plaginni ishga tushiradi):

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

Agar siz ma'lum bir plagin namunasini olishni istasangiz, har bir plagin o'ziga xos getInstanceusulni ko'rsatadi. Uni to'g'ridan-to'g'ri elementdan olish uchun quyidagilarni bajaring: bootstrap.Popover.getInstance(myPopoverEl).

Konstruktorlardagi CSS selektorlari

Plaginni ishga tushirish uchun DOM elementi oʻrniga birinchi argument sifatida CSS selektoridan ham foydalanishingiz mumkin. Hozirda plagin uchun element querySelectorusul bilan topilgan, chunki bizning plaginlarimiz faqat bitta elementni qo'llab-quvvatlaydi.

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

Asinxron funktsiyalar va o'tishlar

Barcha dasturiy API usullari asenkrondir va o'tish boshlanganidan keyin, lekin tugashidan oldin qo'ng'iroq qiluvchiga qaytadi .

O'tish tugagandan so'ng harakatni bajarish uchun siz tegishli voqeani tinglashingiz mumkin.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Bunga qo'shimcha ravishda, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .

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 !!

Standart sozlamalar

Constructor.DefaultPlagin ob'ektini o'zgartirish orqali plagin uchun standart sozlamalarni o'zgartirishingiz mumkin :

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Mojaro yo'q (faqat jQuery-dan foydalansangiz)

Ba'zan boshqa UI ramkalari bilan Bootstrap plaginlaridan foydalanish kerak bo'ladi. Bunday sharoitda, vaqti-vaqti bilan nomlar maydoni to'qnashuvi sodir bo'lishi mumkin. Agar bu ro'y bersa, siz .noConflictqiymatini qaytarishni xohlagan plaginga qo'ng'iroq qilishingiz mumkin.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

Versiya raqamlari

VERSIONBootstrap plaginlarining har bir versiyasiga plagin konstruktorining xususiyati orqali kirish mumkin . Masalan, maslahat plagini uchun:

bootstrap.Tooltip.VERSION // => "5.0.2"

JavaScript o'chirilgan bo'lsa, maxsus zaxiralar yo'q

Bootstrap plaginlari, ayniqsa JavaScript o'chirilgan bo'lsa, unchalik yaxshi ishlamaydi. Agar siz bu holatda foydalanuvchi tajribasi haqida qayg'ursangiz, foydalanuvchilarga <noscript>vaziyatni tushuntirish uchun foydalaning (va JavaScript-ni qayta yoqish) va/yoki o'zingizning shaxsiy zaxiralaringizni qo'shing.

Sanitizer

Maslahatlar va Popoverlar HTMLni qabul qiladigan variantlarni tozalash uchun oʻrnatilgan sanitarizatorimizdan foydalanadi.

Standart allowListqiymat quyidagicha:

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: []
}

Agar siz ushbu standartga yangi qiymatlar qo'shmoqchi allowListbo'lsangiz, quyidagilarni qilishingiz mumkin:

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)

Agar siz maxsus kutubxonadan, masalan , DOMPurify dan foydalanishni afzal ko'rganingiz uchun bizning dezinfektsiyalash vositasini chetlab o'tmoqchi bo'lsangiz, quyidagilarni qilishingiz kerak:

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