JavaScript

Cuir Bootstrap ar an saol lenár bhforlíontáin roghnacha JavaScript bunaithe ar jQuery. Foghlaim faoi gach breiseán, ár sonraí agus ár roghanna API ríomhchláraithe, agus tuilleadh.

Aonair nó tiomsaithe

Is féidir forlíontáin a áireamh ina n-aonar (ag baint úsáide as duine aonair Bootstrap js/dist/*.js), nó iad go léir ag baint úsáide as bootstrap.jsnó an mionghearrtha ag an am céanna bootstrap.min.js(ná cuir an dá cheann san áireamh).

Má úsáideann tú bundler (Webpack, Rollup…), is féidir leat /js/dist/*.jscomhaid a úsáid atá réidh le UMD.

Spleáchais

Braitheann roinnt breiseán agus comhpháirteanna CSS ar fhorlíontáin eile. Má chuireann tú forlíontáin san áireamh ina n-aonar, déan cinnte seiceáil le haghaidh na spleáchais seo sna doiciméid. Tabhair faoi deara freisin go mbraitheann gach breiseán ar jQuery (ciallaíonn sé seo nach mór jQuery a chur san áireamh roimh na comhaid breiseán). Téigh i gcomhairle lenár n-package.json aghaidh le fáil amach cé na leaganacha de jQuery a fhaigheann tacaíocht.

Braitheann ár dropdowns, popovers agus leideanna uirlisí freisin ar Popper.js .

Tréithe sonraí

Is féidir beagnach gach breiseán Bootstrap a chumasú agus a chumrú trí HTML amháin le tréithe sonraí (an bealach is fearr linn feidhmiúlacht JavaScript a úsáid). Bí cinnte nach n-úsáideann ach sraith amháin de shaintréithe sonraí ar eilimint amháin (m.sh., ní féidir leat leid uirlisí agus modha a spreagadh ón gcnaipe céanna).

Mar sin féin, i gcásanna áirithe d'fhéadfadh sé a bheith inmhianaithe an fheidhmiúlacht seo a dhíchumasú. Chun an API aitreabúide sonraí a dhíchumasú, dícheangail gach imeacht ar an doiciméad a bhfuil spásáil air le data-apia leithéid:

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

Nó, chun díriú ar bhreiseán ar leith, níl le déanamh ach ainm an bhreiseáin a chur san áireamh mar ainmspás in éineacht leis an ainmspás data-api mar seo:

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

Imeachtaí

Soláthraíonn Bootstrap imeachtaí saincheaptha le haghaidh gníomhartha uathúla fhormhór na mbreiseán. Go ginearálta, tagann siad seo i bhfoirm infinideach agus i bhfoirm rannpháirtí san am a chuaigh thart - áit a spreagtar an infinideach (ex. show) ag tús imeachta, agus ina shownspreagtar foirm an rannpháirtí san am atá thart (ex. ) ar chríochnú gníomhaíochta.

Soláthraíonn gach imeacht infinitive preventDefault()feidhmiúlacht. Soláthraíonn sé seo an cumas chun stop a chur le gníomh a chur i gcrích sula dtosaíonn sé. Má fhilleann tú bréagach ó láimhseálaí teagmhais, glaofar go huathoibríoch é preventDefault().

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

Clár API

Creidimid freisin gur cheart go mbeifeá in ann gach breiseán Bootstrap a úsáid tríd an API JavaScript amháin. Is modhanna aonair inslabhra iad gach API poiblí, agus seolann siad an bailiúchán ar gníomhaíodh ina leith.

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

Ba cheart do gach modh glacadh le réad roghanna roghnach, teaghrán a dhíríonn ar mhodh áirithe, nó rud ar bith (a thionscnaíonn breiseán a bhfuil iompraíocht réamhshocraithe aige):

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

Nochtann gach breiseán a chruthaitheoir amh ar Constructorairí freisin: $.fn.popover.Constructor. Más mian leat mar shampla breiseán ar leith a fháil, é a aisghabháil go díreach ó eilimint: $('[rel="popover"]').data('popover').

Feidhmeanna agus aistrithe asincrónacha

Tá na modhanna API ríomhchláraithe go léir asincrónach agus filleann siad chuig an nglaoiteoir nuair a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé .

Chun gníomh a dhéanamh nuair a bheidh an t-aistriú críochnaithe, is féidir leat éisteacht leis an imeacht comhfhreagrach.

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

Ina theannta sin ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#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 !!

Socruithe réamhshocraithe

Is féidir leat na socruithe réamhshocraithe le haghaidh breiseán a athrú trí Constructor.Defaultréad an bhreiseáin a mhodhnú:

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

Gan choimhlint

Uaireanta is gá forlíontáin Bootstrap a úsáid le creataí Chomhéadain eile. Sna cúinsí seo, féadann imbhuailtí ainmspáis tarlú ó am go chéile. Má tharlaíonn sé seo, is féidir leat glaoch .noConflictar an mbreiseán is mian leat a luach a chur ar ais.

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

Uimhreacha leagan

Is féidir teacht ar an leagan de gach breiseán jQuery de chuid Bootstrap trí VERSIONmhaoin chruthaitheoir an bhreiseáin. Mar shampla, don bhreiseán leid uirlisí:

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

Gan aon chúluithe speisialta nuair atá JavaScript díchumasaithe

Ní thiteann forlíontáin Bootstrap siar go háirithe go galánta nuair a bhíonn JavaScript díchumasaithe. Más spéis leat eispéireas an úsáideora sa chás seo, bain úsáid as <noscript>chun an cás a mhíniú (agus conas JavaScript a athchumasú) do d’úsáideoirí, agus/nó cuir do chuid fallbacks saincheaptha féin leis.

Util

Braitheann gach comhad JavaScript de chuid Bootstrap util.jsagus ní mór é a áireamh taobh leis na comhaid JavaScript eile. Má tá tú ag baint úsáide as an tiomsaithe (nó mionghearrtha) bootstrap.js, ní gá é seo a chur san áireamh - tá sé ann cheana féin.

util.jsfolaíonn sé feidhmeanna fóntais agus cúntóir bunúsach le haghaidh transitionEndimeachtaí chomh maith le aithriseoir trasdula CSS. Úsáideann na forlíontáin eile é chun tacaíocht trasdula CSS a sheiceáil agus chun trasdulta crochta a ghabháil.

Sanitizer

Úsáideann Leideanna Uirlisí agus Popovers ár sláintitheoir ionsuite chun roghanna a ghlacann le HTML a shláintiú.

whiteListSeo a leanas an luach réamhshocraithe :

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', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Más mian leat luachanna nua a chur leis an réamhshocrú seo whiteListis féidir leat na rudaí seo a leanas a dhéanamh:

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)

Más mian leat ár sláintitheoir a sheachbhóthar toisc gur fearr leat leabharlann tiomnaithe a úsáid, mar shampla DOMPurify , ba cheart duit an méid seo a leanas a dhéanamh:

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