جاواسکریپټ

انفرادي یا تالیف شوی

پلگ انونه په انفرادي ډول شامل کیدی شي (د بوټسټریپ انفرادي په کارولو سره js/dist/*.js) ، یا ټول په یوځل کارول bootstrap.jsیا کوچني bootstrap.min.jsشوي (دواړه شامل نه کړئ).

که تاسو بنډلر کاروئ (ویب پیک، رول اپ…)، تاسو کولی شئ هغه /js/dist/*.jsفایلونه وکاروئ کوم چې UMD چمتو دي.

د ماډل په توګه د بوټسټریپ کارول

موږ د بوټسټریپ یوه نسخه چمتو کوو چې د 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>

انحصارونه

ځینې ​​​​پلگ انونه او د CSS برخې په نورو پلگ انونو پورې اړه لري. که تاسو په انفرادي ډول فلګونه شامل کړئ، ډاډ ترلاسه کړئ چې په اسنادو کې د دې انحصارونو لپاره وګورئ.

زموږ ډراپ ډاونونه ، پاپورونه او اوزار ټیپونه هم په پوپر پورې اړه لري .

لاهم غواړئ jQuery وکاروئ؟ دا کېدای شي!

Bootstrap 5 د jQuery پرته د کارولو لپاره ډیزاین شوی، مګر دا لاهم ممکنه ده چې زموږ اجزا د jQuery سره وکاروئ. که بوټسټریپ jQueryپه windowاعتراض کې کشف کړي دا به زموږ ټولې برخې د jQuery پلگ ان سیسټم کې اضافه کړي؛ دا پدې مانا ده چې تاسو به وکولی شئ $('[data-bs-toggle="tooltip"]').tooltip()د اوزار ټایپ فعالولو لپاره ترسره کړئ. همداسې زموږ د نورو برخو لپاره ځي.

د معلوماتو ځانګړتیاوې

نږدې ټول بوټسټریپ پلگ ان یوازې د HTML له لارې د ډیټا ځانګړتیاو سره فعال او تنظیم کیدی شي (زموږ د جاوا سکریپټ فعالیت کارولو غوره لاره). ډاډ ترلاسه کړئ چې یوازې په یو عنصر کې د ډیټا ځانګړتیاو یوه سیټ وکاروئ (د مثال په توګه ، تاسو نشئ کولی د ورته تڼۍ څخه د وسیلې ټایپ او ماډل رامینځته کړئ.)

پیښې

بوټسټریپ د ډیری پلگ انونو ځانګړي کړنو لپاره دودیز پیښې چمتو کوي. عموما، دا په غیر انتفاعي او پخوانۍ برخه اخیستونکي بڼه کې راځي - چیرې چې انفینیټیوټ (مثال 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 چوکاټونو سره د بوټسټریپ پلگ ان وکاروئ. په دې شرایطو کې، د نوم ځای ټکر کله ناکله واقع کیدی شي. که دا پیښ شي، تاسو کولی .noConflictشئ هغه پلگ ان ته زنګ ووهئ چې تاسو یې غواړئ ارزښت بیرته راوباسئ.

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

د نسخې شمیرې

VERSIONد هر بوټسټریپ پلگ ان نسخه د پلگ ان جوړونکي ملکیت له لارې لاسرسی کیدی شي . د مثال په توګه، د اوزار ټایپ پلگ ان لپاره:

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

کله چې جاواسکریپټ غیر فعال وي نو کوم ځانګړي فال بیک نشته

د بوټسټریپ پلگ انونه په ځانګړي ډول په زړه پورې نه راځي کله چې جاواسکریپټ غیر فعال وي. که تاسو پدې قضیه کې د کارونکي تجربې ته پاملرنه کوئ ، نو <noscript>د وضعیت تشریح کولو لپاره وکاروئ (او څنګه د جاوا سکریپټ بیا فعال کړئ) خپلو کاروونکو ته ، او/یا خپل دودیز فال بیکونه اضافه کړئ.

سینیټایزر

Tooltips او 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)
  }
})