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тин ордуна атайын алкактык пакетти колдонуу. Бул жерде эң популярдуу варианттардын айрымдары:

React: React Bootstrap
Vue: BootstrapVue (учурда Vue 2 жана Bootstrap 4 гана колдойт)
Бурчтук: ng-bootstrap

Bootstrap модулу катары колдонуу

Өзүңүз байкап көрүңүз! Twbs/examples репозиторийинен ES модулу катары Bootstrap колдонуу үчүн баштапкы кодду жана жумушчу демонстрацияны жүктөп алыңыз . Сиз ошондой эле мисалды 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'Бирок, бул биздин Попперге болгон көз карандылыгыбыз менен ого бетер татаалдашат, ал Попперди биздин 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 компоненттери башка плагиндерден көз каранды. Эгер сиз плагиндерди өзүнчө кошсоңуз, бул көз карандылыктарды документтерде текшериңиз.

Биздин ачылуучу тизмелерибиз, попоперлерибиз жана кеңештерибиз да Попперден көз каранды .

Маалымат атрибуттары

Дээрлик бардык 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 версиясында, бардык компоненттер 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}'.

Селекторлор

Биз DOM элементтерин аткаруу үчүн суроо үчүн жергиликтүү querySelectorжана ыкмаларды колдонобуз, андыктан жарактуу селекторлорду колдонушуңуз керек . сыяктуу атайын селекторлорду колдонсоңуз , алардан качууну унутпаңыз.querySelectorAllcollapse:Example

Окуялар

Bootstrap көпчүлүк плагиндердин уникалдуу аракеттери үчүн ыңгайлаштырылган окуяларды камсыз кылат. Негизинен булар инфинитив жана өткөн чак формада келет - мында инфинитив (мис. show) окуянын башталышында, ал эми анын өткөн чак формасы (мис. shown) иш-аракет аяктаганда ишке ашырылат.

Бардык инфинитив окуялар preventDefault()функционалдуулукту камсыз кылат. Бул аракеттин аткарылышын ал башталганга чейин токтотуу мүмкүнчүлүгүн берет. Окуяны иштеткичтен false кайтаруу да автоматтык түрдө чакырат 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 селекторлору

getInstanceжана усулдарынан тышкары , бардык плагин конструкторлору биринчи аргумент катары getOrCreateInstanceDOM элементин же жарактуу 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 плагини төмөнкү ыкмаларды жана статикалык касиеттерди көрсөтөт.

Метод	Description
`dispose`	Элементтин модалды жок кылат. (DOM элементинде сакталган маалыматтарды жок кылат)
`getInstance`	DOM элементи менен байланышкан модалдык инстанцияны алууга мүмкүндүк берген статикалык ыкма.
`getOrCreateInstance`	DOM элементи менен байланышкан модалдык инстанцияны алууга же ал инициализацияланбаган учурда жаңысын түзүүгө мүмкүндүк берген статикалык ыкма.

Статикалык касиет	Description
`NAME`	Плагиндин атын кайтарат. (Мисалы: `bootstrap.Tooltip.NAME`)
`VERSION`	Bootstrap плагиндеринин ар биринин версиясына `VERSION`плагиндин конструкторунун касиети аркылуу кирүүгө болот (Мисалы: `bootstrap.Tooltip.VERSION`)

Санитизатор

Tooltips жана 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 колдонуу

Bootstrap 5те jQuery'дин кереги жок , бирок биздин компоненттерди 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

Ошол эле биздин башка компоненттерге да тиешелүү.

Конфликт жок

Кээде башка 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 кантип кайра иштетүү керек) түшүндүрүү үчүн колдонуңуз жана/же өзүңүздүн жеке ыңгайлаштырылган резервдерди кошуңуз.