JavaScript

ئىختىيارىي JavaScript قىستۇرمىلىرىمىز بىلەن Bootstrap نى ھاياتلىققا ئېرىشتۈرۈڭ. ھەر بىر قىستۇرما ، سانلىق مەلۇماتلىرىمىز ۋە پروگرامما خاراكتېرلىك API تاللانمىلىرى ۋە باشقىلارنى ئۆگىنىۋېلىڭ.

بۇ بەتتە

يەككە ياكى تۈزۈلگەن

قىستۇرمىلارنى ئايرىم ئۆز ئىچىگە ئالغىلى بولىدۇ (Bootstrap نىڭ شەخسنى ئىشلىتىپ js/dist/*.js) ، ياكى بىرلا ۋاقىتتا ئىشلىتىش bootstrap.jsياكى كىچىكلىتىش bootstrap.min.js(ھەر ئىككىسىنى ئۆز ئىچىگە ئالمايدۇ).

ئەگەر باغلانما (Webpack, Parcel, Vite…) ئىشلەتسىڭىز /js/dist/*.js، UMD تەييار بولغان ھۆججەتلەرنى ئىشلىتەلەيسىز.

JavaScript رامكىسى بىلەن ئىشلىتىش

Bootstrap CSS نى ھەر قانداق رامكا بىلەن ئىشلىتىشكە بولسىمۇ ، Bootstrap JavaScript DOM نى تولۇق بىلىدىغان React, Vue ۋە Angular غا ئوخشاش JavaScript رامكىسىغا تولۇق ماس كەلمەيدۇ . Bootstrap ۋە رامكا ھەر ئىككىسى ئوخشاش DOM ئېلېمېنتىنى ئۆزگەرتىشكە ئۇرۇنۇشى مۇمكىن ، نەتىجىدە «ئوچۇق» ھالەتتە توختاپ قالغان تامچە چۈشۈش قاتارلىق خاتالىقلار كېلىپ چىقىشى مۇمكىن.

بۇ خىل رامكىلارنى ئىشلىتىۋاتقانلارغا نىسبەتەن تېخىمۇ ياخشى تاللاش بولسا Bootstrap JavaScript نىڭ ئورنىغا رامكىغا خاس بولاق ئىشلىتىش. بۇ يەردە ئەڭ ئالقىشقا ئېرىشكەن تاللاشلار بار:

رېئاكسىيە: Bootstrap نى رېئاكسىيە قىلىڭ
Vue: BootstrapVue (ھازىر پەقەت Vue 2 ۋە Bootstrap 4 نىلا قوللايدۇ)
بۇلۇڭ : ng-bootstrap

Bootstrap نى مودۇل قىلىپ ئىشلىتىش

ئۆزىڭىز سىناپ بېقىڭ! Twbs / مىسال ئامبىرىدىن Bootstrap نى ES مودۇلى قىلىپ ئىشلىتىشنىڭ ئەسلى كودى ۋە خىزمەت كۆرسەتمىسىنى چۈشۈرۈڭ . سىز StackBlitz دا مىسالنى ئاچالايسىز .

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>

JS باغلىغۇچىلارغا سېلىشتۇرغاندا ، توركۆرگۈدە ESM نى ئىشلىتىش سىزدىن مودۇل نامىنىڭ ئورنىغا تولۇق يول ۋە ھۆججەت نامىنى ئىشلىتىشىڭىزنى تەلەپ قىلىدۇ. توركۆرگۈدىكى JS مودۇلى ھەققىدىكى تەپسىلاتلارنى ئوقۇڭ. شۇڭلاشقا بىز يۇقىرىنىڭ 'bootstrap.esm.min.js'ئورنىغا ئىشلىتىمىز. 'bootstrap'قانداقلا بولمىسۇن ، Popper نى بىزنىڭ JavaScript غا ئىمپورت قىلىدىغان Popper غا تايىنىشچانلىقىمىز تېخىمۇ مۇرەككەپ.

import * as Popper from "@popperjs/core"

بۇنى سىناپ باقسىڭىز ، كونترول سۇپىسىدا تۆۋەندىكىدەك خاتالىق بارلىقىنى كۆرىسىز:

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

بۇنى ئوڭشاش ئۈچۈن ، سىز importmapخالىغان مودۇل نامىنى ھەل قىلىپ ، يوللارنى تاماملىيالايسىز. ئەگەر نىشانلىق توركۆرگۈڭىز قوللىمىسا 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 زاپچاسلىرى باشقا قىستۇرمىلارغا باغلىق. ئەگەر قىستۇرمىلارنى ئايرىم ئۆز ئىچىگە ئالسىڭىز ، ھۆججەتتىكى بۇ بېقىنىشلارنى تەكشۈرۈپ بېقىڭ.

بىزنىڭ چۈشۈش ، پوپايكا ۋە قورال قوراللىرىمىزمۇ Popper غا باغلىق .

سانلىق مەلۇمات خاسلىقى

Bootstrap قىستۇرمىلىرىنىڭ ھەممىسىنى دېگۈدەك سانلىق مەلۇمات خاسلىقى (بىزنىڭ JavaScript ئىقتىدارىنى ئىشلىتىشتىكى ئەۋزەل ئۇسۇلىمىز) ئارقىلىق HTML ئارقىلىقلا قوزغىتىشقا ۋە تەڭشەشكە بولىدۇ. بىرلا ئېلېمېنتتا پەقەت بىر يۈرۈش سانلىق مەلۇمات خاسلىقىنى ئىشلىتىشكە كاپالەتلىك قىلىڭ (مەسىلەن ، ئوخشاش بىر كۇنۇپكىدىن قورال كۆرسەتكۈچى ۋە مودېلنى قوزغىتالمايسىز.)

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدىغان بولغاچقا ، تاللاش نامىغا data-bs-ئوخشاش قوشۇمچە ئىسىم قوشالايسىز data-bs-animation="{value}". تاللاش خاسلىقى ئارقىلىق تاللاش نامىنى «تۆگە دېلوسى» دىن «kebab-case» غا ئۆزگەرتىشكە كاپالەتلىك قىلىڭ . مەسىلەن ، data-bs-custom-class="beautifier"ئۇنىڭ ئورنىغا ئىشلىتىڭ data-bs-customClass="beautifier".

Bootstrap 5.2.0 گە قەدەر ، بارلىق زاپچاسلار JSON تىزمىسى سۈپىتىدە ئاددىي زاپچاس سەپلىمىسىنى ساقلىيالايدىغان تەجرىبە ساقلانغان سانلىق مەلۇمات خاسلىقىنى قوللايدۇ. data-bs-configئېلېمېنتنىڭ خاسلىقى data-bs-config='{"delay":0, "title":123}'ۋە data-bs-title="456"خاسلىقى بولغاندا ، ئاخىرقى titleقىممىتى بولىدۇ 456ۋە ئايرىم سانلىق مەلۇمات خاسلىقى بېرىلگەن قىممەتنى بېسىپ data-bs-configچۈشىدۇ. بۇنىڭدىن باشقا ، مەۋجۇت سانلىق مەلۇمات خاسلىقى JSON قىممىتىنى ساقلىيالايدۇ data-bs-delay='{"show":0,"hide":150}'.

تاللىغۇچىلار

بىز يەرلىك querySelectorۋە querySelectorAllئۇسۇللارنى ئىشلىتىپ DOM ئېلېمېنتلىرىنى ئىقتىدار سەۋەبلىرى بىلەن سورايمىز ، شۇڭا چوقۇم ئۈنۈملۈك تاللىغۇچىلارنى ئىشلىتىشىڭىز كېرەك . ئەگەر سىزدەك ئالاھىدە تاللىغۇچىلارنى ئىشلەتسىڭىز collapse:Example، چوقۇم ئۇلارنى قاچۇرۇڭ.

Events

Bootstrap كۆپىنچە قىستۇرمىلارنىڭ ئۆزگىچە ھەرىكەتلىرى ئۈچۈن ئىختىيارى پائالىيەت بىلەن تەمىنلەيدۇ. ئادەتتە ، بۇلار چەكسىز ۋە ئۆتمۈشتىكى ئورتاقلىشىش شەكلىدە كېلىدۇ - بۇ يەردە ئىنفىنتىزىم (مەسىلەن 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 تاللىغۇچىلار

بارلىق قىستۇرما قۇرغۇچىلار DOM ئېلېمېنتىنى ياكى ئۈنۈملۈك getInstanceCSS تاللىغۇچنى بىرىنچى تالاش-تارتىش سۈپىتىدە قوبۇل قىلالايدۇ. قىستۇرمىلىرىمىز پەقەت بىرلا ئېلېمېنتنى قوللايدىغان بولغاچقا ، قىستۇرما ئېلېمېنتلىرى بۇ ئۇسۇل بىلەن تېپىلغان .getOrCreateInstancequerySelector

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`method

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`	Bootstrap نىڭ ھەر بىر قىستۇرمىلىرىنىڭ نۇسخىسىنى `VERSION`قىستۇرما قۇرغۇچىنىڭ خاسلىقى ئارقىلىق زىيارەت قىلغىلى بولىدۇ (مىسال `bootstrap.Tooltip.VERSION`:)

Sanitizer

قورال قوراللىرى ۋە پوپايكىلار ئىچىگە ئورۇنلاشتۇرۇلغان تازىلىغۇچ ئارقىلىق 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 رامكىسى بىلەن Bootstrap قىستۇرمىلىرىنى ئىشلىتىشكە توغرا كېلىدۇ. بۇ خىل ئەھۋال ئاستىدا ، ئىسىم بوشلۇقى سوقۇلۇش بەزىدە يۈز بېرىشى مۇمكىن. ئەگەر بۇ خىل ئەھۋال كۆرۈلسە ، .noConflictقىممىتىنى ئەسلىگە كەلتۈرمەكچى بولغان قىستۇرمىغا تېلېفون قىلسىڭىز بولىدۇ.

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

Bootstrap Prototype ياكى jQuery UI غا ئوخشاش ئۈچىنچى تەرەپ JavaScript كۈتۈپخانىلىرىنى رەسمىي قوللىمايدۇ. ئىسىم-فامىلىسى يۈز بەرگەن ۋەقەلەرگە قارىماي .noConflict، ئۆزىڭىز ھەل قىلىشقا ماس كېلىدىغان ماسلىشىش مەسىلىسى بولۇشى مۇمكىن.

jQuery ھادىسىلىرى

Bootstrap ئەگەر جىسىمدا بولسا ھەمدە ھېچقانداق خاسلىق ئورنىتىلمىغان jQueryبولسا jQuery نى بايقىيالايدۇ . ئەگەر jQuery تېپىلسا ، Bootstrap jQuery نىڭ پائالىيەت سىستېمىسى سايىسىدا ۋەقەلەر تارقىتىدۇ. شۇڭا ئەگەر Bootstrap نىڭ ۋەقەلەرنى ئاڭلىماقچى بولسىڭىز ، ئۇنىڭ ئورنىغا jQuery ئۇسۇلىنى ( ، ) ئىشلىتىڭ .windowdata-bs-no-jquery<body>.on.oneaddEventListener

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

JavaScript نى چەكلىدى

JavaScript چەكلەنگەندە Bootstrap نىڭ قىستۇرمىلىرىدا ئالاھىدە خاتالىق يوق. ئەگەر بۇ ئەھۋالدا ئىشلەتكۈچىنىڭ تەجرىبىسىگە كۆڭۈل بۆلسىڭىز <noscript>، ئەھۋالنى (ۋە JavaScript نى قايتا قوزغىتىش) ئىشلەتكۈچىلىرىڭىزگە چۈشەندۈرۈڭ ، ۋە ياكى ئۆزىڭىزنىڭ كەمچىلىكىڭىزنى قوشۇڭ.