JavaScript

Bweretsani Bootstrap kukhala ndi moyo ndi mapulagini athu osankha a JavaScript omangidwa pa jQuery. Phunzirani za pulogalamu yowonjezera iliyonse, zosankha zathu zamapulogalamu a API, ndi zina zambiri.

Munthu payekha kapena gulu

Mapulagini amatha kuphatikizidwa payekhapayekha (pogwiritsa ntchito Bootstrap payekha js/dist/*.js), kapena zonse nthawi imodzi pogwiritsa ntchito bootstrap.jskapena minified bootstrap.min.js(musaphatikizepo zonse ziwiri).

Ngati mugwiritsa ntchito bundler (Webpack, Rollup…), mutha kugwiritsa ntchito /js/dist/*.jsmafayilo omwe ali okonzeka ku UMD.

Zodalira

Mapulagini ena ndi zigawo za CSS zimadalira mapulagini ena. Ngati muphatikiza mapulagini payekhapayekha, onetsetsani kuti mwayang'ana zodalira izi mu ma docs. Onaninso kuti mapulagini onse amadalira jQuery (izi zikutanthauza kuti jQuery iyenera kuphatikizidwa pamaso pa mafayilo a pulogalamu yowonjezera). Funsani athupackage.json kuti muwone mitundu ya jQuery yothandizidwa.

Kutsitsa kwathu, popovers ndi zida zothandizira zimadaliranso Popper.js .

Makhalidwe a data

Pafupifupi mapulagini onse a Bootstrap amatha kuyatsidwa ndikukonzedwa kudzera mu HTML yokha ndi mawonekedwe a data (njira yomwe timakonda yogwiritsira ntchito JavaScript). Onetsetsani kuti mungogwiritsa ntchito gulu limodzi la data pachinthu chimodzi (mwachitsanzo, simungathe kuyambitsa chida ndi modal kuchokera pa batani lomwelo.)

Komabe, nthawi zina zingakhale zofunika kuletsa izi. Kuti mulepheretse API ya data, masulani zochitika zonse pachikalatacho chokhala ndi dzina lotere data-api:

$(document).off('.data-api')

Kapenanso, kuti mulondole pulogalamu yowonjezera, ingophatikizani dzina la plugin ngati malo okhala ndi dzina la data-api monga chonchi:

$(document).off('.alert.data-api')

Zochitika

Bootstrap imapereka zochitika zapadera pazochita zapadera za mapulagini ambiri. Nthawi zambiri, izi zimabwera mu mawonekedwe osamalizidwa komanso am'mbuyomu - pomwe mawu osamalitsa (mwachitsanzo. show) amayambika kumayambiriro kwa chochitika, ndipo mawonekedwe ake apitalo (mwachitsanzo. shown) amayambika akamaliza kuchitapo kanthu.

Zochitika zonse zopanda malire zimapereka preventDefault()magwiridwe antchito. Izi zimapereka mwayi woyimitsa kuchita chinthu chisanayambe. Kubweza zabodza kuchokera kwa woyang'anira zochitika kudzayimbanso preventDefault().

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) {
    return e.preventDefault() // stops modal from being shown
  }
})

Programmatic API

Tikukhulupiriranso kuti muyenera kugwiritsa ntchito mapulagini onse a Bootstrap kudzera mu JavaScript API. Ma API onse omwe ali pagulu ndi amodzi, njira zosinthira, ndikubweza zosonkhanitsa zomwe zachitika.

$('.btn.danger').button('toggle').addClass('fat')

Njira zonse ziyenera kuvomereza chinthu chosankha, chingwe chomwe chimayang'ana njira inayake, kapena palibe (chomwe chimayambitsa pulogalamu yowonjezera yokhala ndi machitidwe osakhazikika):

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

Pulagi iliyonse imawululanso womanga wake panyumba Constructor: $.fn.popover.Constructor. Ngati mukufuna kupeza pulogalamu yowonjezera, itengereni mwachindunji ku chinthu: $('[rel="popover"]').data('popover').

Asynchronous ntchito ndi kusintha

Njira zonse zamapulogalamu a API ndizosasinthika ndipo zimabwerera kwa woyimbirayo pomwe kusintha kwayambika koma kusanathe .

Kuti muthe kuchitapo kanthu pakamaliza kusintha, mutha kumvera zomwe zikugwirizana.

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

Kuphatikiza apo, kuyitana kwa njira pagawo losinthira sikudzanyalanyazidwa .

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

Zokonda zofikira

Mutha kusintha makonda a pulogalamu yowonjezera posintha chinthu cha pulogalamu yowonjezera Constructor.Default:

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

Palibe mkangano

Nthawi zina pamafunika kugwiritsa ntchito mapulagini a Bootstrap okhala ndi ma UI ena. Pazifukwa izi, kugunda kwa mayina kumachitika nthawi zina. Izi zikachitika, mutha kuyitanitsa pulogalamu yowonjezera .noConflictyomwe mukufuna kubwezeretsanso mtengo wake.

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

Nambala za mtundu

Mtundu wa mapulagini aliwonse a Bootstrap a jQuery atha kupezeka kudzera pamtundu VERSIONwa wopanga pulogalamu yowonjezera. Mwachitsanzo, pa tooltip plugin:

$.fn.tooltip.Constructor.VERSION // => "4.4.1"

Palibe zolakwika zapadera pomwe JavaScript yayimitsidwa

Mapulagini a Bootstrap samabwerera m'mbuyo mwachisomo pomwe JavaScript yazimitsidwa. Ngati mumasamala za ogwiritsa ntchito pankhaniyi, gwiritsani ntchito <noscript>kufotokoza momwe zinthu ziliri (ndi momwe mungayambitsirenso JavaScript) kwa ogwiritsa ntchito anu, ndi/kapena onjezani zolakwika zanu.

Util

Mafayilo onse a JavaScript a Bootstrap amadalira util.jsndipo amayenera kuphatikizidwa pamodzi ndi mafayilo ena a JavaScript. Ngati mukugwiritsa ntchito compiled (kapena minified) bootstrap.js, palibe chifukwa chophatikizira izi - zili kale.

util.jszikuphatikizapo ntchito zofunikira ndi zofunika mthandizi kwa transitionEndzochitika komanso CSS kusintha emulator. Amagwiritsidwa ntchito ndi mapulagini ena kuti ayang'ane chithandizo cha kusintha kwa CSS ndikugwira masinthidwe olendewera.

Sanitizer

Zida ndi Popovers amagwiritsa ntchito sanitizer yathu yopangira kuti ayeretse zosankha zomwe zimavomereza HTML.

Mtengo whiteListwokhazikika ndi uwu:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // 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', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Ngati mukufuna kuwonjezera ma values ​​atsopano pazosintha izi whiteListmutha kuchita izi:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-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-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Ngati mukufuna kulambalala sanitizer yathu chifukwa mumakonda kugwiritsa ntchito laibulale yodzipereka, mwachitsanzo DOMpurify , muyenera kuchita izi:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})