JavaScript

Keen Bootstrap nolosha iyada oo la adeegsanayo furayaashayada JavaScript ee ikhtiyaarka ah ee lagu dhisay jQuery. Baro plugin kasta, xogtayada iyo barnaamijyada API ikhtiyaarka ah, iyo in ka badan.

Shakhsi ama la ururiyey

Plugins si gaar ah ayaa loogu dari karaa (iyadoo la adeegsanayo shakhsi Bootstrap js/dist/*.js), ama dhammaan hal mar la isticmaalayo bootstrap.jsama la dhimay bootstrap.min.js(ha ku darin labadaba).

Haddii aad isticmaasho xidhmo (Webpack, Rollup…), waxaad isticmaali kartaa /js/dist/*.jsfaylasha UMD diyaar ah.

Ku-tiirsanaanta

Qaybaha qaar iyo qaybaha CSS waxay ku xidhan yihiin plugins kale. Haddii aad si gaar ah ugu darto plugins, hubi inaad hubiso waxyaalahan ku-tiirsanaanta dukumentiyada. Sidoo kale ogow in dhammaan pluginsku ay ku xiran yihiin jQuery (taasi waxay ka dhigan tahay jQuery waa in lagu daraa ka hor faylasha plugin). Kala tashopackage.json si aad u aragto noocyada jQuery ee la taageeray.

Hoos-u-dhacyadayada , popovers iyo qalabyada qalabku waxay sidoo kale ku xiran yihiin Popper.js .

Sifooyinka xogta

Ku dhawaad ​​​​dhammaan bootstrap plugins waa la awoodsiin karaa oo lagu habeyn karaa HTML oo keliya oo leh sifooyinka xogta (habka aan doorbideyno ee isticmaalka shaqeynta JavaScript). Hubi inaad isticmaasho hal sifo oo xogta ah oo keliya hal shay (tusaale, ma kicin kartid qalab iyo qaab isla badhanka.)

Si kastaba ha ahaatee, xaaladaha qaarkood waxa laga yaabaa in la jeclaysto in la joojiyo shaqadan. Si loo baabi'iyo sifada xogta API, ka saar dhammaan dhacdooyinka dukumeentiga u dhexeeyo data-apisidan:

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

Haddii kale, si loo beegsado plugin gaar ah, kaliya ku dar magaca plugin-ka oo ah meel magac ah oo ay la socoto xogta-api namespace sidan oo kale:

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

Dhacdooyinka

Bootstrap waxay siisaa dhacdooyin caado u ah inta badan ficilada gaarka ah ee plugins. Guud ahaan, kuwani waxay ku yimaadaan qaab aan dhammaad lahayn oo hore uga qayb-qaatay-halkaas oo aan dhammaad lahayn (tusaale ahaan show) uu kiciyo bilawga dhacdada, iyo qaabkeedii hore ee ka qaybqaadashada (tus. shown) uu kiciyo marka ficilku dhammeeyo.

Dhammaan dhacdooyinka aan dhamaadka lahayn waxay bixiyaan preventDefault()shaqeyn Tani waxay siinaysaa awoodda lagu joojinayo fulinta ficilka ka hor inta uusan bilaaban. Ka soo noqoshada beenta maamulaha dhacdada ayaa sidoo kale si toos ah u soo wici doona preventDefault().

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

API Programmatic

Waxaan sidoo kale aaminsanahay inaad awood u leedahay inaad isticmaasho dhammaan Bootstrap plugins iyada oo keliya JavaScript API. Dhammaan API-yada dadwaynaha waa hal, habab la silsiladi karo, oo soo celi ururinta lagu dhaqmay.

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

Dhammaan hababka waa in ay aqbalaan shay ikhtiyaari ikhtiyaari ah, xadhig bartilmaameed u ah hab gaar ah, ama waxba (kaas oo bilaabaya plugin leh dabeecad aan caadi ahayn):

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

Plugin kasta waxa kale oo uu soo bandhigaa dhisaha ceeriin ee Constructorguriga: $.fn.popover.Constructor. Haddii aad jeclaan lahayd inaad hesho tusaale plugin gaar ah, si toos ah uga soo celi curiyaha: $('[rel="popover"]').data('popover').

Hawlaha iyo kala-guurka asynchronous

Dhammaan hababka API-ga ee barnaamijku waa isku mid waxayna ku noqdaan soo wacaha marka kala guurka la bilaabo laakiin ka hor inta uusan dhammaan .

Si loo fuliyo ficil marka kala guurka la dhammeeyo, waxaad dhagaysan kartaa dhacdada u dhiganta.

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

Intaa waxa dheer hab ku baaqaya qayb ka-wareejineed waa la iska indhatiraa .

$('#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 !!

Dejinta asalka ah

Waxaad ka beddeli kartaa habaynta caadiga ah ee plugin adiga oo wax ka beddelaya Constructor.Defaultshayga plugin:

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

Khilaaf ma jiro

Mararka qaarkood waa lagama maarmaan in la isticmaalo bootstrap plugins oo leh qaabab kale oo UI ah. Duruufahaan, isku dhacyada meel magac ayaa marmar dhici kara. Haddii tani dhacdo, waxaad wici .noConflictkartaa plugin-ka aad rabto inaad dib u soo celiso qiimaha.

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

Nambarada nooca

Nooca mid kasta oo ka mid ah Bootstrap's jQuery plugins waxaa laga geli karaa VERSIONhantida dhisaha plugin. Tusaale ahaan, plugin tip-ka ah:

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

Ma jiro dib-u-dhac gaar ah marka JavaScript naafo yahay

Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <noscript> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.

Util

All Bootstrap’s JavaScript files depend on util.js and it has to be included alongside the other JavaScript files. If you’re using the compiled (or minified) bootstrap.js, there is no need to include this—it’s already there.

util.jswaxaa ka mid ah hawlaha utility iyo caawiyaha aasaasiga ah ee transitionEnddhacdooyinka iyo sidoo kale ku dayashada kala guurka CSS. Waxa isticmaala plugins-yada kale si ay u hubiyaan taageerada kala-guurka ee CSS iyo inay qabtaan kala-guurka ka laadlaadda.