JavaScript

Bizning ixtiyoriy JavaScript plaginlarimiz yordamida Bootstrap-ni jonlantiring. Har bir plagin, maʼlumotlarimiz va dasturiy API imkoniyatlari va boshqalar haqida bilib oling.

Ushbu sahifada

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 foydalansangiz (Webpack, Parcel, Vite…), /js/dist/*.jsUMD tayyor bo'lgan fayllardan foydalanishingiz mumkin.

JavaScript ramkalari bilan foydalanish

Bootstrap CSS-dan har qanday ramka bilan foydalanish mumkin bo'lsa-da, Bootstrap JavaScript DOM haqida to'liq ma'lumotga ega bo'lgan React, Vue va Angular kabi JavaScript ramkalari bilan to'liq mos kelmaydi . Bootstrap ham, ramka ham bir xil DOM elementini o'zgartirishga urinishi mumkin, buning natijasida "ochiq" holatda qolgan ochiladigan menyular kabi xatolar paydo bo'ladi.

Ushbu turdagi ramkalardan foydalanadiganlar uchun yaxshiroq alternativa Bootstrap JavaScript o'rniga maxsus ramka paketidan foydalanishdir. Bu erda eng mashhur variantlardan ba'zilari:

Reakt: Bootstrap bilan reaksiyaga kirish
Vue: BootstrapVue (hozirda faqat Vue 2 va Bootstrap 4-ni qo'llab-quvvatlaydi)
Burchak: ng-bootstrap

Bootstrap-dan modul sifatida foydalanish

O'zingiz sinab ko'ring! Bootstrap-ni ES moduli sifatida ishlatish uchun manba kodini va ish demosini twbs/misollar omboridan yuklab oling . Siz misolni StackBlitz da ochishingiz mumkin .

ESMBiz Bootstrap-ning ( bootstrap.esm.jsva ) shaklida yaratilgan versiyasini taqdim etamiz , agar maqsadli brauzerlaringiz uni qo'llab-quvvatlasabootstrap.esm.min.js , Bootstrap-dan brauzerda 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>

JS bundlers bilan solishtirganda, brauzerda ESM dan foydalanish modul nomi o'rniga to'liq yo'l va fayl nomidan foydalanishni talab qiladi. Brauzerda JS modullari haqida ko'proq o'qing. Shuning uchun biz yuqoridagi 'bootstrap.esm.min.js'o'rniga foydalanamiz. 'bootstrap'Biroq, bu bizning Popperga bog'liqligimiz tufayli yanada murakkablashadi, bu Popperni JavaScript-ga quyidagi tarzda import qiladi:

import * as Popper from "@popperjs/core"

Agar buni avvalgidek sinab ko'rsangiz, konsolda quyidagi kabi xatolikni ko'rasiz:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

Buni tuzatish uchun siz importmapyo'llarni to'ldirish uchun o'zboshimchalik bilan modul nomlarini hal qilish uchun foydalanishingiz mumkin. Agar maqsadli brauzerlaringiz ni qo'llab-quvvatlamasa importmap, siz es-module-shims loyihasidan foydalanishingiz kerak bo'ladi. Bu Bootstrap va Popper uchun qanday ishlaydi:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

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 .

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ʼlumot atributlari toʻplamidan foydalanishga ishonch hosil qiling (masalan, bitta tugmadan asboblar maslahati va modalni ishga tushira olmaysiz.)

data-bs-Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkinligi sababli , ga variant nomini qo'shishingiz mumkin data-bs-animation="{value}". Variantlarni maʼlumotlar atributlari orqali oʻtkazishda variant nomining registr turini “ camelCase ” dan “ kabob-case ” ga oʻzgartirganingizga ishonch hosil qiling. Masalan, data-bs-custom-class="beautifier"o'rniga foydalaning data-bs-customClass="beautifier".

Bootstrap 5.2.0 dan boshlab barcha komponentlar JSON qatori sifatida oddiy komponent konfiguratsiyasini joylashtirishi mumkin bo'lgan eksperimental zahiradagi ma'lumotlar atributini qo'llab-quvvatlaydi. data-bs-configElement data-bs-config='{"delay":0, "title":123}'va data-bs-title="456"atributlariga ega bo'lsa, yakuniy titleqiymat bo'ladi 456va alohida ma'lumotlar atributlari ga berilgan qiymatlarni bekor qiladi data-bs-config. Bundan tashqari, mavjud ma'lumotlar atributlari kabi JSON qiymatlarini joylashtirishi mumkin data-bs-delay='{"show":0,"hide":150}'.

Selektorlar

Biz ishlash sabablari uchun DOM elementlarini so'rash uchun mahalliy querySelectorva usullardan foydalanamiz, shuning uchun siz to'g'ri tanlovchilardan foydalanishingiz kerak . Agar siz kabi maxsus selektorlardan foydalansangiz , ulardan qochishingizga ishonch hosil qiling.querySelectorAllcollapse:Example

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 ishlov beruvchisidan false qaytarilishi ham avtomatik ravishda qo'ng'iroq preventDefault()qiladi.

const myModal = document.querySelector('#myModal')

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

Dasturli API

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

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

Agar siz ma'lum bir plagin namunasini olishni istasangiz, har bir plagin o'ziga xos getInstanceusulni ko'rsatadi. Misol uchun, to'g'ridan-to'g'ri elementdan misolni olish uchun:

bootstrap.Popover.getInstance(myPopoverEl)

nullAgar so'ralgan element ustida namuna ishga tushirilmasa, bu usul qaytadi .

Shu bilan bir qatorda, getOrCreateInstanceDOM elementi bilan bog'langan misolni olish yoki agar u ishga tushirilmagan bo'lsa, yangisini yaratish uchun ishlatilishi mumkin.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Agar namuna ishga tushirilmagan bo'lsa, u ikkinchi argument sifatida ixtiyoriy konfiguratsiya ob'ektini qabul qilishi va ishlatishi mumkin.

Konstruktorlardagi CSS selektorlari

getInstanceVa usullariga qo'shimcha ravishda , barcha plagin konstruktorlari birinchi argument sifatida getOrCreateInstanceDOM elementini yoki haqiqiy CSS selektorini qabul qilishlari mumkin. Plagin elementlari querySelectorusul bilan topiladi, chunki bizning plaginlarimiz faqat bitta elementni qo'llab-quvvatlaydi.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

Asinxron funktsiyalar va o'tishlar

Barcha dasturiy API usullari asinxrondir va o'tish boshlangandan so'ng, lekin tugashidan oldin qo'ng'iroq qiluvchiga qaytadi . O'tish tugagandan so'ng harakatni bajarish uchun siz tegishli voqeani tinglashingiz mumkin.

const myCollapseEl = document.querySelector('#myCollapse')

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

Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', 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 !!

`dispose`usuli

disposedan so'ng darhol usulni qo'llash to'g'ri tuyulishi mumkin bo'lsa-da hide(), bu noto'g'ri natijalarga olib keladi. Muammodan foydalanishga misol:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

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

Usullari va xususiyatlari

Har bir Bootstrap plagini quyidagi usullar va statik xususiyatlarni ochib beradi.

Usul	Tavsif
`dispose`	Elementning modalini yo'q qiladi. (DOM elementida saqlangan ma'lumotlarni o'chiradi)
`getInstance`	DOM elementi bilan bog'langan modal misolni olish imkonini beruvchi statik usul.
`getOrCreateInstance`	DOM elementi bilan bog'langan modal misolni olish yoki agar u ishga tushirilmagan bo'lsa, yangisini yaratish imkonini beruvchi statik usul.

Statik xususiyat	Tavsif
`NAME`	Plagin nomini qaytaradi. (Misol: `bootstrap.Tooltip.NAME`)
`VERSION`	`VERSION`Bootstrap plaginlarining har bir versiyasiga plagin konstruktorining xususiyati orqali kirish mumkin (Misol: `bootstrap.Tooltip.VERSION`)

Sanitizer

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

Standart allowListqiymat quyidagicha:

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const 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 standart qiymatga yangi qiymatlarni qo'shmoqchi allowListbo'lsangiz, quyidagilarni qilishingiz mumkin:

const 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
const 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:

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

Ixtiyoriy ravishda jQuery-dan foydalanish

Bootstrap 5 da jQuery kerak emas , lekin jQuery bilan komponentlarimizdan foydalanish hali ham mumkin. Agar Bootstrap ob'ektda aniqlansa jQuery, windowu jQuery plagin tizimidagi barcha komponentlarimizni qo'shadi. Bu sizga quyidagilarni amalga oshirish imkonini beradi:

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

Xuddi shu narsa bizning boshqa komponentlarimizga ham tegishli.

Mojaro yo'q

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.

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

Bootstrap rasmiy ravishda Prototype yoki jQuery UI kabi uchinchi tomon JavaScript kutubxonalarini qo'llab-quvvatlamaydi. Voqealarga va nomlar oralig'iga qaramay .noConflict, siz o'zingiz hal qilishingiz kerak bo'lgan muvofiqlik muammolari bo'lishi mumkin.

jQuery voqealari

jQueryBootstrap jQuery ob'ektda mavjud bo'lsa windowva hech qanday data-bs-no-jqueryatribut o'rnatilmaganligini aniqlaydi <body>. Agar jQuery topilsa, Bootstrap jQuery voqealar tizimi tufayli voqealarni chiqaradi. Shunday qilib, agar siz Bootstrap voqealarini tinglamoqchi bo'lsangiz, o'rniga jQuery usullaridan ( .on, .one) foydalanishingiz kerak bo'ladi addEventListener.

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

JavaScript o'chirilgan

JavaScript o'chirilgan bo'lsa, Bootstrap plaginlari maxsus zaxiraga ega emas. 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.