JavaScript

Ганцаарчилсан эсвэл эмхэтгэсэн

Залгаасуудыг тус тусад нь (Bootstrap-ийн individual -ийг ашиглан js/dist/*.js) эсвэл бүгдийг нь нэг дор bootstrap.jsэсвэл жижигрүүлсэн bootstrap.min.js(хоёуланг нь оруулахгүй) ашиглаж болно.

Хэрэв та багцлагч (Webpack, Rollup...) ашигладаг /js/dist/*.jsбол UMD бэлэн файлуудыг ашиглаж болно.

Bootstrap-ийг модуль болгон ашиглах

ESMБид Bootstrap-ийн ( bootstrap.esm.jsба ) хэлбэрээр бүтээгдсэн хувилбарыг санал болгож байгаа бөгөөд хэрэв таны зорилтот хөтчүүд үүнийг дэмждэг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>

Хамаарал

Зарим залгаасууд болон CSS бүрэлдэхүүн хэсгүүд нь бусад залгаасуудаас хамаардаг. Хэрэв та залгаасуудыг тусад нь оруулбал эдгээр хамаарлыг баримтаас шалгана уу.

Бидний унадаг цэс, поповер болон зөвлөмжүүд нь Попперээс хамаарна .

Одоо ч гэсэн jQuery ашиглахыг хүсч байна уу? Энэ боломжтой!

Bootstrap 5 нь jQuery-гүйгээр ашиглахад зориулагдсан боловч jQuery-тэй манай бүрэлдэхүүн хэсгүүдийг ашиглах боломжтой хэвээр байна. Хэрэв Bootstrap объектыг илрүүлбэл jQuery jQuery-window ийн залгаас системд бидний бүх бүрэлдэхүүн хэсгүүдийг нэмнэ; Энэ нь та $('[data-bs-toggle="tooltip"]').tooltip()зөвлөмжийг идэвхжүүлэх боломжтой болно гэсэн үг юм. Манай бусад бүрэлдэхүүн хэсгүүдэд мөн адил хамаарна.

Өгөгдлийн шинж чанарууд

Бараг бүх Bootstrap залгаасуудыг зөвхөн өгөгдлийн шинж чанаруудтай (бидний JavaScript функцийг ашиглах илүүд үздэг арга) HTML-ээр дамжуулан идэвхжүүлж, тохируулах боломжтой. Нэг элемент дээр зөвхөн нэг багц өгөгдлийн шинж чанарыг ашиглахаа мартуузай (жишээ нь, та нэг товчлуураас хэрэгслийн зөвлөмж болон модальыг идэвхжүүлэх боломжгүй).

Үйл явдал

Bootstrap нь ихэнх залгаасуудын өвөрмөц үйлдлүүдийн захиалгат үйл явдлуудыг хангадаг. showЕрөнхийдөө эдгээр нь үйл явдлын эхэнд инфинитив (жишээ нь) өдөөгддөг ба өнгөрсөн үеийн хэлбэр (жишээ shownнь) нь үйлдлийг дуусгахад өдөөгддөг - инфинитив болон өнгөрсөн үеийн хэлбэрээр ирдэг.

Бүх инфинитив үйл явдал нь preventDefault()функцийг хангадаг. Энэ нь үйлдлийг эхлэхээс өмнө гүйцэтгэх ажиллагааг зогсоох боломжийг олгодог. Үйл явдал зохицуулагчаас худал буцаах нь мөн автоматаар дуудагдана preventDefault().

var myModal = document.getElementById('myModal')

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

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

Програмчлалын API

Бүх бүтээгчид нэмэлт сонголтын объектыг хүлээн авдаг эсвэл юу ч биш (энэ нь анхдагч үйлдэлтэй залгаасыг эхлүүлдэг):

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

Хэрэв та тодорхой нэг залгаасын жишээ авахыг хүсвэл залгаас бүр getInstanceаргыг илчилнэ. Үүнийг элементээс шууд татаж авахын тулд дараахыг хийнэ үү: bootstrap.Popover.getInstance(myPopoverEl).

Бүтээгч дэх CSS сонгогчид

Та залгаасыг эхлүүлэхийн тулд DOM элементийн оронд CSS сонгогчийг эхний аргумент болгон ашиглаж болно. Одоогоор залгаасын элементийг энэ querySelectorаргаар олж байна, учир нь манай залгаасууд зөвхөн нэг элементийг дэмждэг.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

Асинхрон функцууд ба шилжилтүүд

Бүх программын API аргууд нь асинхрон бөгөөд шилжилт эхлэхээс өмнө дуусмагц дуудагч руу буцдаг .

Шилжилт дууссаны дараа үйлдлийг гүйцэтгэхийн тулд та холбогдох үйл явдлыг сонсож болно.

var myCollapseEl = document.getElementById('myCollapse')

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

Түүнчлэн шилжилтийн бүрэлдэхүүн хэсэг дээрх аргын дуудлагыг үл тоомсорлох болно.

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

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

Өгөгдмөл тохиргоо

Constructor.DefaultТа залгаасын объектыг өөрчлөх замаар залгаасын үндсэн тохиргоог өөрчилж болно :

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

Ямар ч зөрчил байхгүй (хэрэв та jQuery ашигладаг бол)

Заримдаа бусад UI хүрээтэй Bootstrap залгаасуудыг ашиглах шаардлагатай болдог. Ийм нөхцөлд нэрийн орон зайн зөрчилдөөн хааяа тохиолдож болно. Хэрэв ийм зүйл тохиолдвол та .noConflictутгыг буцаахыг хүссэн залгаас руу залгаж болно.

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

Хувилбарын дугаарууд

VERSIONBootstrap-ийн залгаас бүрийн хувилбарт залгаасын үүсгэгчийн өмчөөр хандаж болно . Жишээлбэл, зааврын нэмэлт өргөтгөлийн хувьд:

bootstrap.Tooltip.VERSION // => "5.0.2"

JavaScript-г идэвхгүй болгосон үед тусгай нөөц байхгүй

JavaScript идэвхгүй болсон үед Bootstrap-ийн залгаасууд тийм ч сайн унадаггүй. Хэрэв та энэ тохиолдолд хэрэглэгчийн туршлагад санаа тавьж байгаа бол хэрэглэгчдэдээ <noscript>нөхцөл байдлыг тайлбарлах (мөн JavaScript-г хэрхэн дахин идэвхжүүлэх) болон/эсвэл өөрийн захиалгат өгөгдлүүдийг нэмнэ үү.

Ариутгагч

Зөвлөмжүүд болон Popovers нь HTML-г хүлээн зөвшөөрдөг сонголтуудыг ариутгахын тулд бидний суулгасан ариутгагчийг ашигладаг.

Өгөгдмөл allowListутга нь дараах байна:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var 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дараах зүйлсийг хийж болно:

var 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
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Хэрэв та тусгай номын сан, жишээ нь DOMPurify ашиглахыг илүүд үздэг тул манай ариутгагчийг тойрч гарахыг хүсвэл дараах зүйлийг хийх хэрэгтэй.

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})