in English

જાવાસ્ક્રિપ્ટ

અમારા વૈકલ્પિક JavaScript પ્લગઈનો સાથે બુટસ્ટ્રેપને જીવંત બનાવો. દરેક પ્લગઇન, અમારા ડેટા અને પ્રોગ્રામેટિક API વિકલ્પો અને વધુ વિશે જાણો.

આ પૃષ્ઠ પર

વ્યક્તિગત અથવા સંકલિત

પ્લગઇન્સ વ્યક્તિગત રીતે (બૂટસ્ટ્રેપના વ્યક્તિગતનો ઉપયોગ કરીને js/dist/*.js), અથવા બધા એકસાથે bootstrap.jsઅથવા મિનિફાઇડ bootstrap.min.js(બંને શામેલ કરશો નહીં) નો ઉપયોગ કરીને સમાવેશ કરી શકાય છે.

જો તમે બંડલર (વેબપેક, પાર્સલ, વિટ…) નો ઉપયોગ કરો છો, તો તમે /js/dist/*.jsUMD તૈયાર હોય તેવી ફાઇલોનો ઉપયોગ કરી શકો છો.

JavaScript ફ્રેમવર્ક સાથે ઉપયોગ

જ્યારે બુટસ્ટ્રેપ CSS નો ઉપયોગ કોઈપણ ફ્રેમવર્ક સાથે થઈ શકે છે, ત્યારે બુટસ્ટ્રેપ JavaScript JavaScript ફ્રેમવર્ક જેમ કે React, Vue અને Angular સાથે સંપૂર્ણપણે સુસંગત નથી જે DOM નું સંપૂર્ણ જ્ઞાન ધારણ કરે છે. બૂટસ્ટ્રેપ અને ફ્રેમવર્ક બંને સમાન DOM ઘટકને પરિવર્તિત કરવાનો પ્રયાસ કરી શકે છે, પરિણામે ડ્રોપડાઉન જેવી ભૂલો કે જે "ઓપન" સ્થિતિમાં અટવાઇ જાય છે.

આ પ્રકારના ફ્રેમવર્કનો ઉપયોગ કરનારાઓ માટે એક વધુ સારો વિકલ્પ એ છે કે બુટસ્ટ્રેપ જાવાસ્ક્રિપ્ટને બદલે ફ્રેમવર્ક-વિશિષ્ટ પેકેજનો ઉપયોગ કરવો. અહીં કેટલાક સૌથી લોકપ્રિય વિકલ્પો છે:

પ્રતિક્રિયા: બુટસ્ટ્રેપ પ્રતિક્રિયા
Vue: BootstrapVue (હાલમાં માત્ર Vue 2 અને Bootstrap 4 ને સપોર્ટ કરે છે)
કોણીય: ng-બૂટસ્ટ્રેપ

મોડ્યુલ તરીકે બુટસ્ટ્રેપનો ઉપયોગ કરવો

તેને જાતે અજમાવી જુઓ! Twbs/examples repository માંથી બુટસ્ટ્રેપનો 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પાથ પૂર્ણ કરવા માટે મનસ્વી મોડ્યુલ નામોને ઉકેલવા માટે વાપરી શકો છો. જો તમારા લક્ષિત બ્રાઉઝર્સ સપોર્ટ કરતા નથી , તો તમારે 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 ઘટકો અન્ય પ્લગઇન્સ પર આધાર રાખે છે. જો તમે વ્યક્તિગત રીતે પ્લગઇન્સનો સમાવેશ કરો છો, તો દસ્તાવેજમાં આ નિર્ભરતાઓ તપાસવાનું સુનિશ્ચિત કરો.

અમારા ડ્રોપડાઉન, પોપોવર્સ અને ટૂલટિપ્સ પણ પોપર પર આધારિત છે .

ડેટા લક્ષણો

લગભગ તમામ બુટસ્ટ્રેપ પ્લગઈનો ડેટા એટ્રીબ્યુટ્સ (જાવાસ્ક્રિપ્ટ કાર્યક્ષમતાનો ઉપયોગ કરવાની અમારી પસંદગીની રીત) સાથે એકલા HTML દ્વારા સક્ષમ અને ગોઠવી શકાય છે. એક એલિમેન્ટ પર ડેટા એટ્રિબ્યુટના માત્ર એક સેટનો ઉપયોગ કરવાની ખાતરી કરો (દા.ત., તમે સમાન બટનથી ટૂલટિપ અને મોડલને ટ્રિગર કરી શકતા નથી.)

data-bs-ડેટા એટ્રિબ્યુટ્સ અથવા JavaScript દ્વારા વિકલ્પો પસાર કરી શકાય છે, તમે ની જેમ, માં વિકલ્પ નામ ઉમેરી શકો છો data-bs-animation="{value}". ડેટા એટ્રિબ્યુટ્સ દ્વારા વિકલ્પો પસાર કરતી વખતે વિકલ્પ નામના કેસ પ્રકારને “ camelCase ” થી “ kebab-case ” માં બદલવાની ખાતરી કરો. ઉદાહરણ તરીકે, data-bs-custom-class="beautifier"ની જગ્યાએ ઉપયોગ કરો data-bs-customClass="beautifier".

બુટસ્ટ્રેપ 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

ઘટનાઓ

બુટસ્ટ્રેપ મોટાભાગના પ્લગિન્સની અનન્ય ક્રિયાઓ માટે કસ્ટમ ઇવેન્ટ્સ પ્રદાન કરે છે. સામાન્ય રીતે, આ અનંત અને ભૂતકાળના પાર્ટિસિપલ સ્વરૂપમાં આવે છે - જ્યાં showઘટનાની શરૂઆતમાં અનંત (ઉદા. ) ટ્રિગર થાય છે, અને તેના ભૂતકાળના પાર્ટિસિપલ ફોર્મ (ઉદા. shown) ક્રિયા પૂર્ણ થવા પર ટ્રિગર થાય છે.

બધી અનંત ઘટનાઓ preventDefault()કાર્યક્ષમતા પ્રદાન કરે છે. આ ક્રિયા શરૂ થાય તે પહેલાં તેના અમલને રોકવાની ક્ષમતા પૂરી પાડે છે. ઇવેન્ટ હેન્ડલર પાસેથી ખોટા પાછા ફરવાથી પણ આપમેળે કૉલ થશે preventDefault().

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

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

પ્રોગ્રામેટિક API

બધા કન્સ્ટ્રક્ટર વૈકલ્પિક વિકલ્પો ઑબ્જેક્ટ અથવા કંઈપણ સ્વીકારે છે (જે તેના ડિફૉલ્ટ વર્તન સાથે પ્લગઇન શરૂ કરે છે):

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

પદ્ધતિઓ અને ગુણધર્મો

દરેક બુટસ્ટ્રેપ પ્લગઇન નીચેની પદ્ધતિઓ અને સ્થિર ગુણધર્મોને છતી કરે છે.

પદ્ધતિ	વર્ણન
`dispose`	તત્વના મોડલનો નાશ કરે છે. (DOM તત્વ પર સંગ્રહિત ડેટાને દૂર કરે છે)
`getInstance`	સ્ટેટિક મેથડ જે તમને DOM એલિમેન્ટ સાથે સંકળાયેલ મોડલ ઇન્સ્ટન્સ મેળવવા માટે પરવાનગી આપે છે.
`getOrCreateInstance`	સ્ટેટિક મેથડ જે તમને DOM એલિમેન્ટ સાથે સંકળાયેલ મોડલ ઇન્સ્ટન્સ મેળવવાની પરવાનગી આપે છે અથવા જો તે પ્રારંભ ન કરવામાં આવ્યું હોય તો એક નવું બનાવો.

સ્થિર મિલકત	વર્ણન
`NAME`	પ્લગઇન નામ પરત કરે છે. (ઉદાહરણ `bootstrap.Tooltip.NAME`:)
`VERSION`	`VERSION`દરેક બુટસ્ટ્રેપના પ્લગઈનના વર્ઝનને પ્લગઈનના કન્સ્ટ્રક્ટરની પ્રોપર્ટી દ્વારા એક્સેસ કરી શકાય છે (ઉદાહરણ: `bootstrap.Tooltip.VERSION`)

સેનિટાઈઝર

ટૂલટિપ્સ અને પોપોવર્સ 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 નો ઉપયોગ કરીને

તમને બુટસ્ટ્રેપ 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 ફ્રેમવર્ક સાથે બુટસ્ટ્રેપ પ્લગિન્સનો ઉપયોગ કરવો જરૂરી છે. આ સંજોગોમાં, નેમસ્પેસની અથડામણ અવારનવાર થઈ શકે છે. .noConflictજો આવું થાય, તો તમે જે પ્લગઇનનું મૂલ્ય પાછું લાવવા માંગો છો તેના પર કૉલ કરી શકો છો.

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

બુટસ્ટ્રેપ પ્રોટોટાઇપ અથવા jQuery UI જેવી તૃતીય-પક્ષ JavaScript લાઇબ્રેરીઓને સત્તાવાર રીતે સમર્થન આપતું નથી. .noConflictઇવેન્ટ્સ અને નામ સ્થાન હોવા છતાં , ત્યાં સુસંગતતા સમસ્યાઓ હોઈ શકે છે જેને તમારે તમારા પોતાના પર ઠીક કરવાની જરૂર છે.

jQuery ઇવેન્ટ્સ

jQueryજો ઑબ્જેક્ટમાં હાજર હોય windowઅને ત્યાં કોઈ data-bs-no-jqueryવિશેષતા સેટ ન હોય તો બુટસ્ટ્રેપ jQuery શોધી કાઢશે <body>. જો jQuery મળી આવે, તો બુટસ્ટ્રેપ jQuery ની ઇવેન્ટ સિસ્ટમને આભારી ઘટનાઓને ઉત્સર્જિત કરશે. તેથી જો તમે બુટસ્ટ્રેપની ઘટનાઓ સાંભળવા માંગતા હો, તો તમારે jQuery પદ્ધતિઓનો ઉપયોગ કરવો પડશે ( .on, .one) ને બદલે addEventListener.

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

અક્ષમ કરેલ JavaScript

જ્યારે JavaScript અક્ષમ હોય ત્યારે બુટસ્ટ્રેપના પ્લગિન્સમાં કોઈ ખાસ ફોલબેક હોતું નથી. જો તમે આ કિસ્સામાં વપરાશકર્તા અનુભવની કાળજી લેતા હો, તો તમારા વપરાશકર્તાઓને <noscript>પરિસ્થિતિ (અને કેવી રીતે JavaScript ફરીથી સક્ષમ કરવું) સમજાવવા અને/અથવા તમારા પોતાના કસ્ટમ ફૉલબેક્સ ઉમેરો.