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 бо чаҳорчӯбаҳои JavaScript ба монанди React, Vue ва Angular , ки дониши пурраи DOM-ро дар бар мегиранд, комилан мувофиқ нест. Ҳам Bootstrap ва ҳам чаҳорчӯба метавонанд кӯшиш кунанд, ки ҳамон як унсури DOM-ро мутатсия кунанд, ки дар натиҷа хатогиҳо ба монанди афтандаҳое, ки дар ҳолати "кушода" часпидаанд, ба вуҷуд меоянд.

Алтернативаи беҳтар барои онҳое, ки аз ин намуди чаҳорчӯбаҳо истифода мебаранд, ин истифодаи бастаи мушаххаси чаҳорчӯба ба ҷои Bootstrap JavaScript мебошад. Дар ин ҷо баъзе аз имконоти маъмултарин ҳастанд:

Вокуниш: React Bootstrap
Vue: BootstrapVue (дар айни замон танҳо Vue 2 ва Bootstrap 4 -ро дастгирӣ мекунад)
кунҷӣ: ng-bootstrap

Истифодаи Bootstrap ҳамчун модул

Худатон кӯшиш кунед! Рамзи сарчашма ва намоиши кориро барои истифодаи Bootstrap ҳамчун модули ES аз анбори twbs/examples зеркашӣ кунед . Шумо инчунин метавонед мисолро дар StackBlitz кушоед .

Мо версияи Bootstrap-ро пешниҳод мекунем, ки ҳамчун ESM( 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'боло истифода мебарем. Аммо, ин вобастагии Попперро боз ҳам мураккабтар мекунад, ки Попперро ба JavaScript-и мо чунин ворид мекунад:

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 метавонанд танҳо тавассути HTML бо атрибутҳои додаҳо фаъол ва танзим карда шаванд (роҳи бартарии мо барои истифодаи функсияҳои JavaScript). Боварӣ ҳосил кунед, ки танҳо як маҷмӯи атрибутҳои маълумотро дар як элемент истифода баред (масалан, шумо наметавонед як маслиҳати абзор ва модалиро аз як тугма ангезед.)

Азбаски вариантҳоро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст, шумо метавонед номи опсияро ба data-bs-монанди дар data-bs-animation="{value}". Ҳангоми интиқоли параметрҳо тавассути атрибутҳои додаҳо, боварӣ ҳосил кунед, ки навъи парвандаи номи опсияро аз “ camelCase ” ба “ kebab-case ” иваз кунед. Масалан, data-bs-custom-class="beautifier"ба ҷои data-bs-customClass="beautifier".

Аз Bootstrap 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

Ҳодисаҳо

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, агар инстансия аз болои унсури дархостшуда оғоз нашавад.

Интихобан, getOrCreateInstanceмумкин аст барои ба даст овардани мисоли алоқаманд бо унсури DOM истифода шавад ё дар сурати ба кор андохта нашудани инстансияи нав эҷод кардан мумкин аст.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Дар сурати ба кор андохта нашудани мисол, он метавонад объекти конфигуратсияи ихтиёриро ҳамчун далели дуюм қабул ва истифода барад.

Селекторҳои CSS дар созандаҳо

Илова ба усулҳо getInstanceва getOrCreateInstanceусулҳо, ҳама созандагони плагинҳо метавонанд унсури DOM ё интихобкунандаи дурусти 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

Усулҳо ва хосиятҳо

Ҳар як плагини Bootstrap усулҳо ва хосиятҳои статикии зеринро фош мекунад.

Усул	Тавсифи
`dispose`	Модали элементро нест мекунад. (Маълумоти захирашударо дар элементи DOM нест мекунад)
`getInstance`	Усули статикӣ , ки ба шумо имкон медиҳад, ки намунаи модалии бо унсури DOM алоқамандро ба даст оред.
`getOrCreateInstance`	Усули статикӣ , ки ба шумо имкон медиҳад, ки намунаи модалии бо унсури DOM алоқамандро ба даст оред ё дар сурати ба кор андохта нашудани он нав эҷод кунед.

Амволи статикӣ	Тавсифи
`NAME`	Номи плагинро бармегардонад. (Мисол: `bootstrap.Tooltip.NAME`)
`VERSION`	Ба версияи ҳар як плагинҳои Bootstrap тавассути `VERSION`моликияти созандаи плагин дастрас шудан мумкин аст (Мисол: `bootstrap.Tooltip.VERSION`)

Санитизатор

Маслиҳатҳо ва Popovers безараргардонии дарунсохтаи моро барои безараргардонии имконоти қабулкардаи 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

Ба шумо jQuery дар Bootstrap 5 лозим нест , аммо ба ҳар ҳол метавон ҷузъҳои моро бо jQuery истифода бурд. Агар Bootstrap 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

Ин ба ҷузъҳои дигари мо низ дахл дорад.

Не низоъ

Баъзан лозим меояд, ки плагинҳои Bootstrap-ро бо дигар чаҳорчӯбаҳои UI истифода баред. Дар ин шароит, бархӯрдҳои фазои номҳо баъзан рух дода метавонанд. Агар ин рӯй диҳад, шумо метавонед .noConflictба плагин занг занед, ки мехоҳед арзиши онро баргардонед.

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

Bootstrap расман китобхонаҳои JavaScript-и тарафи сеюмро ба монанди Prototype ё jQuery UI дастгирӣ намекунад. Сарфи назар аз .noConflictрӯйдодҳо ва фазои ном, метавонад мушкилоти мутобиқат дошта бошад, ки шумо бояд мустақилона ислоҳ кунед.

рӯйдодҳои jQuery

Bootstrap jQuery-ро муайян мекунад, агар jQueryдар windowобъект мавҷуд бошад ва data-bs-no-jqueryдар <body>. Агар jQuery ёфт шавад, Bootstrap рӯйдодҳоро ба шарофати системаи рӯйдодҳои jQuery мебарорад. Ҳамин тавр, агар шумо хоҳед, ки рӯйдодҳои Bootstrap-ро гӯш кунед, шумо бояд ба ҷои усулҳои jQuery ( .on, .one) -ро истифода баред addEventListener.

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

JavaScript ғайрифаъол

Ҳангоми хомӯш кардани JavaScript, плагинҳои Bootstrap ягон бозгашти махсус надоранд. Агар шумо дар бораи таҷрибаи корбар дар ин ҳолат ғамхорӣ кунед, <noscript>барои шарҳ додани вазъият (ва чӣ гуна JavaScript-ро аз нав фаъол кардан) ба корбарони худ истифода баред ва/ё нусхаҳои фармоишии худро илова кунед.