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

अस्माकं वैकल्पिकजावास्क्रिप्ट् प्लगिन्स् इत्यनेन सह Bootstrap इत्यस्य जीवनं आनयन्तु। प्रत्येकस्य प्लगिन्, अस्माकं आँकडानां तथा प्रोग्रामेटिक एपिआइ विकल्पानां विषये, इत्यादीनां विषये ज्ञातव्यम्।

इस पृष्ठ पर

व्यक्तिगतं वा संकलितं वा

प्लगिन् व्यक्तिगतरूपेण (Bootstrap इत्यस्य व्यक्तिगतस्य उपयोगेन js/dist/*.js), अथवा सर्वे एकदा एव उपयुज्य bootstrap.jsवा लघुकृतं वा bootstrap.min.js(उभयम् अपि न समाविष्टं) समाविष्टं कर्तुं शक्यते ।

यदि भवान् बण्डलर (Webpack, Parcel, Vite...) इत्यस्य उपयोगं करोति तर्हि भवान् तादृशानि /js/dist/*.jsसञ्चिकानि उपयोक्तुं शक्नोति ये UMD सज्जाः सन्ति ।

जावास्क्रिप्ट्-रूपरेखाभिः सह उपयोगः

यद्यपि Bootstrap CSS इत्यस्य उपयोगः कस्यापि ढाञ्चेन सह कर्तुं शक्यते तथापि Bootstrap JavaScript React, Vue, Angular इत्यादिभिः JavaScript frameworks इत्यनेन सह पूर्णतया संगतम् नास्ति ये DOM इत्यस्य पूर्णज्ञानं गृह्णन्ति Bootstrap तथा framework इत्येतयोः द्वयोः अपि समानं DOM तत्त्वं उत्परिवर्तनं कर्तुं प्रयतते, यस्य परिणामेण “open” स्थाने अटन्तः dropdowns इत्यादीनि दोषाः भवन्ति ।

एतादृशानां frameworks इत्यस्य उपयोगं कुर्वतां कृते एकः उत्तमः विकल्पः Bootstrap JavaScript इत्यस्य स्थाने framework-विशिष्टस्य package इत्यस्य उपयोगः अस्ति । अत्र केचन लोकप्रियाः विकल्पाः सन्ति ।

प्रतिक्रिया करें: प्रतिक्रिया करें बूटस्ट्रैप
Vue: BootstrapVue (सम्प्रति केवलं Vue 2 तथा Bootstrap 4 समर्थयति)
कोणीय: ng-bootstrap

Bootstrap इत्यस्य उपयोगः मॉड्यूलरूपेण

स्वयमेव प्रयतस्व ! twbs/examples भण्डारतः ES मॉड्यूलरूपेण Bootstrap इत्यस्य उपयोगाय स्रोतसङ्केतं तथा कार्यप्रदर्शनं डाउनलोड् कुर्वन्तु । StackBlitz इत्यत्र अपि उदाहरणं उद्घाटयितुं शक्नुवन्ति ।

ESMवयं ( bootstrap.esm.jsतथा ) इति निर्मितस्य Bootstrap इत्यस्य संस्करणं प्रदामः bootstrap.esm.min.jsयत् भवन्तं ब्राउजर् मध्ये Bootstrap इत्यस्य उपयोगं मॉड्यूलरूपेण कर्तुं शक्नोति, यदि भवतां लक्षिताः ब्राउजर्-जनाः तत् समर्थयन्ति

<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'तथापि, अस्माकं Popper निर्भरतायाः कारणेन एतत् अधिकं जटिलं भवति, यत् Popper इत्येतत् अस्माकं JavaScript मध्ये एवं आयातयति:

import * as Popper from "@popperjs/core"

यदि भवान् एतत् यथावत् प्रयतते तर्हि भवन्तः निम्नलिखितवत् कन्सोल् मध्ये त्रुटिं पश्यन्ति ।

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

एतत् समाधातुं, भवन्तः importmapमार्गान् पूर्णं कर्तुं मनमानामॉड्यूलनामानि समाधातुं an इत्यस्य उपयोगं कर्तुं शक्नुवन्ति । यदि भवतां लक्षितब्राउजर् समर्थनं न करोति importmapतर्हि भवद्भिः es-module-shims परियोजनायाः उपयोगः करणीयः भविष्यति । अत्र Bootstrap तथा Popper कृते कथं कार्यं करोति:

<!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 घटकाः अन्येषु प्लगिन्स् इत्यस्य उपरि निर्भराः सन्ति । यदि भवान् प्लगिन्स् व्यक्तिगतरूपेण समावेशयति तर्हि docs मध्ये एतानि आश्रयाणि अवश्यं पश्यतु ।

अस्माकं ड्रॉपडाउन्स्, पोपोवर्स्, टूल्टिप्स् च अपि Popper इत्यस्य उपरि निर्भरं भवन्ति ।

दत्तांशगुणाः

प्रायः सर्वाणि Bootstrap प्लगिन्स् केवलं HTML मार्गेण data attributes (JavaScript कार्यक्षमतायाः उपयोगस्य अस्माकं प्राधान्यमार्गः) सह सक्षमीकरणं विन्यस्तं च कर्तुं शक्यते । एकस्मिन् तत्त्वे केवलं एकस्य दत्तांशगुणसमूहस्य उपयोगं अवश्यं कुर्वन्तु (उदा., भवान् एकस्मात् बटन् तः टूल्टिप् तथा मोडल् ट्रिगर कर्तुं न शक्नोति ।)

यतः विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते, भवान् विकल्पनाम योजयितुं शक्नोति data-bs-, यथा data-bs-animation="{value}". data attributes मार्गेण विकल्पान् पारयन्ते सति विकल्पनामस्य case type “ 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}'and data-bs-title="456"attributes भवति तदा अन्तिममूल्यं titleभविष्यति 456तथा च पृथक् data attributes इत्यत्र दत्तानि मूल्यानि अधिलिखिष्यन्ति 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 चयनकर्तारः

getInstanceand मेथड्स् इत्यस्य अतिरिक्तं getOrCreateInstanceसर्वे प्लगिन् कन्स्ट्रक्टर् प्रथमतर्करूपेण DOM एलिमेण्ट् अथवा वैधं 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')

अतुल्यकालिक कार्य एवं संक्रमण

सर्वे प्रोग्रामेटिक एपिआइ मेथड्स् अतुल्यकालिकाः सन्ति तथा च एकवारं संक्रमणं आरब्धं चेत् आह्वानकर्त्रे प्रत्यागच्छन्ति, परन्तु तस्य समाप्तेः पूर्वं . एकवारं संक्रमणं सम्पन्नं जातं चेत् क्रियायाः निष्पादनार्थं भवन्तः तत्सम्बद्धं घटनां श्रोतुं शक्नुवन्ति ।

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 इत्यस्य प्रत्येकस्य प्लगिन् इत्यस्य संस्करणं प्लगिन् इत्यस्य कन्स्ट्रक्टर् इत्यस्य गुणद्वारा अभिगन्तुं शक्यते (उदाहरणम्: `bootstrap.Tooltip.VERSION`)

सेनेटाइजर

Tooltips तथा Popovers अस्माकं अन्तर्निर्मित-सेनेटाइजरस्य उपयोगं कुर्वन्ति विकल्पान् सेनिटाइज् कर्तुं ये HTML स्वीकुर्वन्ति।

पूर्वनिर्धारितं 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 इत्यनेन सह अस्माकं घटकानां उपयोगः अद्यापि सम्भवः अस्ति । यदि Bootstrap ऑब्जेक्ट् jQueryमध्ये पश्यति तर्हि windowjQuery इत्यस्य प्लगिन् सिस्टम् मध्ये अस्माकं सर्वाणि घटकानि योजयिष्यति । एतेन भवन्तः निम्नलिखितम् कर्तुं शक्नुवन्ति ।

$('[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 frameworks इत्यनेन सह Bootstrap plugins इत्यस्य उपयोगः आवश्यकः भवति । एतेषु परिस्थितिषु नामस्थानस्य टकरावः यदा कदा भवितुं शक्नुवन्ति । यदि एतत् भवति तर्हि भवान् .noConflictयस्य प्लगिन् इत्यस्य मूल्यं पुनः प्रत्यागन्तुं इच्छति तत् आह्वयितुं शक्नोति ।

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

बूटस्ट्रैप् आधिकारिकतया तृतीयपक्षस्य जावास्क्रिप्ट् पुस्तकालयानाम् समर्थनं न करोति यथा Prototype अथवा jQuery UI । अपि .noConflictच नामान्तरितघटनानां, संगततासमस्याः भवितुम् अर्हन्ति येषां समाधानं भवद्भिः स्वयमेव करणीयम् ।

jQuery घटनाएँ

Bootstrap jQuery ज्ञास्यति यदि वस्तु jQueryमध्ये वर्तते windowतथा च इत्यत्र कोऽपि data-bs-no-jqueryविशेषता सेट् नास्ति <body>। यदि jQuery दृश्यते तर्हि Bootstrap jQuery इत्यस्य घटनाप्रणाल्याः धन्यवादेन घटनाः उत्सर्जयिष्यति । अतः यदि भवान् Bootstrap इत्यस्य इवेण्ट्स् श्रोतुम् इच्छति तर्हि भवद्भिः इत्यस्य स्थाने jQuery मेथड् ( .on, ) इत्यस्य उपयोगः करणीयः भविष्यति ।.oneaddEventListener

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

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

जावास्क्रिप्ट् अक्षमीकरणे बूटस्ट्रैप् इत्यस्य प्लगिन्स् मध्ये विशेषः फॉलबैक् नास्ति । यदि भवान् अस्मिन् सन्दर्भे उपयोक्तृ-अनुभवस्य चिन्तां करोति तर्हि स्वप्रयोक्तृभ्यः <noscript>स्थितिं व्याख्यातुं (तथा च जावास्क्रिप्ट् पुनः कथं सक्षमीकरणं कर्तव्यम् इति) उपयुञ्जीत, तथा/वा स्वकीयानि कस्टम्-फॉलबैक् योजयन्तु