जावास्क्रिप्ट

आमच्या पर्यायी जावास्क्रिप्ट प्लगइनांनी बूटस्ट्रॅप जिवीत हाडचें. दरेक प्लगइन, आमचो डेटा आनी प्रोग्रामेटिक API पर्याय, आनी हेर विशीं जाणून घेयात.

ह्या पानाचेर

वैयक्तीक वा संकलित

प्लगइन वैयक्तीकपणान समाविष्ट करूंक शकतात (Bootstrap's individual वापरून js/dist/*.js), वा सगळे एकाच वेळार वापरून bootstrap.jsवा मिनीफायड bootstrap.min.js(दोनूय समाविष्ट करूंक नाकात).

/js/dist/*.jsतुमी बंडलर वापरतात जाल्यार (Webpack, Parcel, Vite...), तुमी UMD तयार आशिल्लीं फायली वापरूं येतात .

जावास्क्रिप्ट फ्रेमवर्कासयत वापर

बूटस्ट्रॅप CSS खंयच्याय फ्रेमवर्कासयत वापरूं येता, तरी बूटस्ट्रॅप जावास्क्रिप्ट React, Vue, आनी Angular सारकिल्या जावास्क्रिप्ट फ्रेमवर्कांकडेन पुरायपणान सुसंगत ना जे DOM चें पुराय गिन्यान मानतात. बूटस्ट्रॅप आनी फ्रेमवर्क दोनूय एकाच DOM घटकाक उत्परिवर्तन करपाचो यत्न करूंक शकतात, ताचो परिणाम ड्रॉपडावन सारकिले बग जातात जे “उक्त्या” स्थितींत अडकतात.

ह्या प्रकारच्या फ्रेमवर्क वापरपी लोकांखातीर एक बरो पर्याय म्हणल्यार बूटस्ट्रॅप जावास्क्रिप्ट बदला फ्रेमवर्क-विशिश्ट पॅकेज वापरप. हांगा कांय चड लोकप्रिय पर्याय आसात:

प्रतिक्रिया: प्रतिक्रिया बूटस्ट्रॅप
Vue: BootstrapVue (सद्या फकत Vue 2 आनी Bootstrap 4 चो समर्थन करता)
कोनीय: एनजी-बूटस्ट्रॅप

बूटस्ट्रॅप मॉड्यूल म्हणून वापरप

स्वता करून पळयात! twbs/examples रिपॉझिटरींतल्यान Bootstrap ES मॉड्यूल म्हणून वापरपाखातीर स्त्रोत कोड आनी काम करपी डेमो डावनलोड करात . तुमी StackBlitz हातूंतय उदाहरण उगडूंक शकतात .

ESMआमी ( bootstrap.esm.jsआनी ) म्हणून तयार केल्ली बूटस्ट्रॅपाची आवृत्ती पुरवण करतात 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>

JS बंडलरांकडेन तुळा केल्यार, ब्राउझरांत ESM वापरपाखातीर तुमकां मॉड्यूल नांवा बदला पुराय मार्ग आनी फायलनाव वापरपाची गरज आसा. ब्राउझरांत JS मॉड्यूलां विशीं चड वाचात. देखूनच आमी वयर सांगचे 'bootstrap.esm.min.js'बदला वापरतात 'bootstrap'. पूण, आमच्या पॉपर अवलंबनाक लागून हें आनीक गुंतागुंतीचें जाता, जें पॉपर आमच्या जावास्क्रिप्टांत अशे तरेन आयात करता:

import * as Popper from "@popperjs/core"

तुमी हें जशें आसा तशें करून पळयल्यार, तुमकां सकयल दिल्ल्या प्रमाणें कंसोलांत त्रुटी दिसतली:

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

हें सुदारपाखातीर, तुमी importmapमार्ग पुराय करपाखातीर मनमानी मॉड्यूल नांवां सोडोवपाक an वापरूं येता. तुमचे लक्ष्य केल्ले ब्राउझर जर तेंको दिना जाल्यार , तुमकां es-module-shims प्रकल्प importmapवापरचो पडटलो . बूटस्ट्रॅप आनी पॉपर खातीर तें कशें काम करता तें पळयात:

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

अवलंबून आशिल्लीं

कांय प्लगइन आनी CSS घटक हेर प्लगइनांचेर आदारून आसतात. तुमी प्लगइन वैयक्तीकपणान समाविष्ट केल्यार, डॉक्सांत ह्यो अवलंबन तपासपाची खात्री करात.

आमचे ड्रॉपडावन, पॉपओव्हर, आनी टूलटिप्स लेगीत Popper चेर आदारून आसतात .

डेटा गुणधर्म

लागीं लागीं सगळे Bootstrap प्लगइन डेटा गुणधर्मां सयत फकत HTML वरवीं सक्षम आनी संरचीत करूंक शकतात (जावास्क्रिप्ट कार्यक्षमताय वापरपाची आमची पसंतीची पद्दत). एकाच घटकाचेर फकत एक डेटा गुणधर्मांचो संच वापरपाची खात्री करात (देखीक, तुमी एकाच बटणा वयल्यान साधनटिप आनी मोडल ट्रिगर करूंक शकना.)

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात म्हणून, तुमी पर्याय नांव जोडूंक शकतात data-bs-, जशें data-bs-animation="{value}". डेटा गुणधर्मां वरवीं पर्याय पास करतना पर्याय नांवाचो केस प्रकार “ camelCase ” वयल्यान “ kebab -case ” कडेन बदलपाची खात्री करात . देखीक, data-bs-custom-class="beautifier"बदला वापरात data-bs-customClass="beautifier".

Bootstrap 5.2.0 प्रमाणें, सगळे घटक प्रायोगिक राखीव डेटा गुणधर्माक तेंको दितात data-bs-configजे JSON स्ट्रिंग म्हणून सादें घटक संरचना दवरूंक शकता. जेन्ना घटकाक data-bs-config='{"delay":0, "title":123}'आनी data-bs-title="456"गुणधर्म आसतात, तेन्ना निमाणें titleमोल आसतलें 456आनी वेगळे डेटा गुणधर्म चेर दिल्ल्या मोलांक अधिलिखित करतले data-bs-config. ते भायर, सद्याचे डेटा गुणधर्म JSON मोलां सारकीं दवरपाक सक्षम आसात data-bs-delay='{"show":0,"hide":150}'.

निवड करपी

कार्यक्षमताय कारणांक लागून DOM घटकांची चवकशी करपाक आमी मुळ querySelectorआनी पद्दती वापरतात, देखून तुमी वैध निवडक वापरपाक जाय . जर तुमी सारके खाशेले निवडक वापरतात जाल्यार , तातूंतल्यान सुटपाची खात्री करात.querySelectorAllcollapse:Example

घडणुको

बूटस्ट्रॅप चडशा प्लगइनांच्या खाशेल्या कृतींखातीर सानुकूल घडणुको पुरवण करता. सादारणपणान हीं अव्यय आनी भूतकाळांत येतात - जंय अव्यय (ex. show) घडणुकेच्या सुरवेक सुरू जाता, आनी ताचें भूतकाळांतलें रूप (ex. shown) क्रिया पुराय जातकच सुरू जाता.

सगळ्यो अव्यय घडणुको preventDefault()कार्यक्षमता दितात. हाका लागून कृती सुरू जावचे पयलीं ताची कार्यान्वयन थांबवपाची तांक मेळटा. इव्हेंट हॅन्डलरा कडल्यान false परत दिल्यार आपसूकय कॉल करतले preventDefault().

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

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

प्रोग्रामेटिक एपीआय

सगळे कंस्ट्रक्टर पर्यायी पर्याय वस्तू वा कांयच स्वीकारनात (जें ताच्या मुलभूत वर्तनान प्लगइन सुरू करता):

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

तुमकां एक खाशेलो प्लगइन दृष्टांत मेळोवपाक जाय जाल्यार, दरेक प्लगइन एक getInstanceपद्दत उक्ती करता. देखीक, घटकांतल्यान थेट दृष्टांत परत मेळोवपाखातीर:

bootstrap.Popover.getInstance(myPopoverEl)

nullविनंती केल्ल्या घटकाचेर दृष्टांत सुरू करूंक ना जाल्यार ही पद्दत परत येतली .

पर्यायीपणान, getOrCreateInstanceDOM घटकाकडेन संबंदीत दृष्टांत मेळोवपाक वापरूं येता, वा ती आरंभ करूंक नाशिल्ल्या प्रकरणांत नवी तयार करूंक शकता.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

दृष्टांत आरंभ करूंक नाशिल्ल्या प्रकरणांत, तो दुसरो आर्ग्युमेंट म्हणून पर्यायी संरचना वस्तू मान्य करूंक शकता आनी वापरूंक शकता.

कंस्ट्रक्टरांत CSS निवडक

getInstanceआनी पद्दतीं भायर , सगळे प्लगइन कंस्ट्रक्टर पयलो आर्ग्युमेंट म्हणून getOrCreateInstanceDOM घटक वा वैध CSS निवडपी स्वीकारूंक शकतात. querySelectorआमचे प्लगइन फकत एकाच घटकाक तेंको दितात देखून प्लगइन घटक पद्दती वांगडा मेळटात .

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

अतुल्यकालिक कार्यां आनी संक्रमणां

सगळ्यो प्रोग्रामेटिक API पद्दती अतुल्यकालिक आसतात आनी एकदां संक्रमण सुरू जाले उपरांत कॉलराक परततात, पूण तो सोंपचे पयलीं . संक्रमण पुराय जातकच कृती चालीक लावपाखातीर, तुमी संबंदीत घडणूक आयकूंक शकतात.

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

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

ते भायर, संक्रमण घटकाचेर एक पद्दत कॉल दुर्लक्षीत जातलें .

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`पद्दत

disposeउपरांत रोखडीच पद्दत वापरप बरोबर दिसूं येता hide(), तरी ताका लागून चुकीचे परिणाम मेळटले. समस्या वापराचें एक उदाहरण हांगा दिला:

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

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

मुलभूत मांडावळी

तुमी प्लगइनाची वस्तू बदलून प्लगइनाची मुलभूत मांडावळी बदलूंक शकतात Constructor.Default:

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

पद्दती आनी गुणधर्म

दरेक Bootstrap प्लगइन सकयल दिल्ल्यो पद्दती आनी स्थिर गुणधर्म उक्ते करता.

पद्दत	वर्णन
`dispose`	एका घटकाचें मोडल नश्ट करता. (DOM घटकाचेर सांठयल्लो डेटा काडून उडयता)
`getInstance`	स्थिर पद्दत जी तुमकां DOM घटकाकडेन संबंदीत आशिल्ली मोडल दृष्टांत मेळोवपाक परवानगी दिता.
`getOrCreateInstance`	स्थिर पद्दत जी तुमकां DOM घटकाकडेन संबंदीत मोडल दृष्टांत मेळोवपाक परवानगी दिता, वा ती आरंभ करूंक नाशिल्ल्या प्रकरणांत नवी तयार करपाक परवानगी दिता.

स्थिर गुणधर्म	वर्णन
`NAME`	प्लगइन नांव परत दिता. (देखीक: `bootstrap.Tooltip.NAME`) .
`VERSION`	बूटस्ट्रॅपाच्या दरेका प्लगइनाची आवृत्ती `VERSION`प्लगइनाच्या कंस्ट्रक्टराच्या गुणधर्मांतल्यान ऍक्सॅस करूंक मेळटा (देखीक: `bootstrap.Tooltip.VERSION`)

सॅनिटायझर हें वखद

HTML स्वीकारपी पर्याय सॅनिटायज करपाक टूलटिप्स आनी Popovers आमच्या बिल्ट-इन सॅनिटायझराचो वापर करतात.

मुलभूत allowListमोल सकयल दिल्लें आसा:

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

तुमकां ह्या मुलभूतांत नवी मोलां जोडपाचीं आसल्यार तुमी allowListसकयल दिल्लें करूंक शकतात:

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)

तुमकां समर्पीत लायब्ररी वापरपाक आवडटा म्हणून तुमकां आमच्या सॅनिटायझराक बायपास करपाचो आसल्यार, देखीक DOMPurify , तुमी सकयल दिल्लें करचें:

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

पर्यायीपणान jQuery वापरून

तुमकां Bootstrap 5 त jQuery ची गरज ना , पूण jQuery कडेन आमचे घटक वापरप अजूनय शक्य आसा. बूटस्ट्रॅप वस्तूंत सोदून काडल्यार jQuery, windowतो jQuery च्या प्लगइन प्रणालींत आमचे सगळे घटक जोडटले. हाका लागून तुमकां सकयल दिल्लें करपाक मेळटा:

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

आमच्या हेर घटकां खातीरय तशेंच.

संघर्श ना

केन्ना केन्नाय हेर UI फ्रेमवर्कां वांगडा Bootstrap प्लगइन वापरप गरजेचें आसता. ह्या परिस्थितींत, नेमस्पेस टक्कर केन्ना केन्नाय जावंक शकता. अशें जाल्यार, तुमकां .noConflictमोल परत करपाक जाय आशिल्ल्या प्लगइनाचेर तुमी कॉल करूंक शकतात.

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

बूटस्ट्रॅप अधिकृतपणान प्रोटोटायप वा jQuery UI सारकिल्या तिसऱ्या पक्षाच्या जावास्क्रिप्ट लायब्ररींक तेंको दिना. आसून लेगीत .noConflictआनी नावस्पेस केल्लीं घडणुको, सुसंगती समस्या आसूं येतात जी तुमकां स्वता सुटावी करची पडटली.

jQuery घडणुको

jQueryवस्तूंत हाजीर आसल्यार windowआनी चेर सेट केल्लें कसलेंच data-bs-no-jqueryगुणधर्म ना जाल्यार बूटस्ट्रॅप jQuery सोदून काडटलो <body>. jQuery मेळ्ळो जाल्यार, Bootstrap jQuery च्या इव्हेंट प्रणालीक लागून घडणुको उत्सर्जीत करतले. देखून तुमकां Bootstrap ची घडणुको आयकूंक जाय जाल्यार, तुमकां , बदला jQuery पद्दती ( .on, ) वापरच्यो पडटल्यो ..oneaddEventListener

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

जावास्क्रिप्ट अक्षम केल्या

जावास्क्रिप्ट अक्षम केल्यार बूटस्ट्रॅपाच्या प्लगइनांक खाशेलो फॉलबॅक ना. ह्या प्रकरणांत तुमकां वापरप्याच्या अणभवाची काळजी आसल्यार, <noscript>तुमच्या वापरप्यांक परिस्थिती स्पश्ट करपाक (आनी जावास्क्रिप्ट कशी परतून सक्षम करची) वापरात, आनी/वा तुमचे स्वताचे सानुकूल फॉलबॅक जोडात.