bootstrap javascript

bootstrap.javascript.md

bootstrap javascript

  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

  bootstrap.Popover.getInstance(myPopoverEl)
  bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

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

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

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})
//
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

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

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

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

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