A Bootstrap 5 egy ingyenes és nyílt forráskódú CSS-keretrendszer, amely reagáló, mobil-első front-end webfejlesztésre irányul.
Ha nem tudnád, a Bootstrap 5 alfa hivatalosan is piacra került. Eltávolította a jQuery-t függőségként, megszüntette az Internet Explorer 9 és 10 támogatását, és fantasztikus frissítéseket hozott a Sass fájlokhoz, a jelölésekhez és egy új Utility API-hoz.
Ez az oktatóanyag megmutatja, hogyan kezdheti el a VanillaJS használatát a jQuery helyett, amikor webhelyeket épít a Bootstrap 5 legújabb verziójával.
Elkezdeni
Be kell építenie a Bootstrap 5-öt a projektjébe. Ennek többféle módja van, de az egyszerűség kedvéért a keretrendszert a CDN-en keresztül is beépítjük.
Először hozzunk létre egy üres index.htmloldalt a projektmappában:
Bootstrap 5 Vanilla JS tutorial by Themesberg Helyezze el a bootstrap.min.cssstíluslapot a címke vége előtt :
Ezután a címke vége előtt illessze be a Popper.js könyvtárat és a fő Bootstrap JavaScript fájlt :
Kíváncsi, hogy a integrityés az crossoriginattribútumok mit jelentenek? Íme a magyarázat:
Integritás attribútum : lehetővé teszi a böngésző számára, hogy ellenőrizze a fájl forrását, hogy a kódot soha ne töltsék be, ha a forrást manipulálták.
Crossorigin attribútum : akkor van jelen, amikor egy kérést a „CORS” használatával töltünk be, ami az SRI ellenőrzés követelménye, ha nem az „azonos eredetű” fájlból töltődik be.
Nagy! Most sikeresen beépítettük a Bootstrap legújabb verzióját a projektünkbe. Az egyik nyilvánvaló különbség az, hogy már nem kellett a jQuery-t függőségként megkövetelnünk, mintegy 82,54 KB sávszélességet takarítottunk meg, ha minifikált állapotban voltunk .
Váltás a jQuery-ről Vanilla JS-re
Mielőtt nekilátnánk ennek a szakasznak, tudnia kell, hogy a Bootstrap 5 használata a jQuery-vel továbbra is lehetséges a hivatalos dokumentáció szerint.
Akkor javasoljuk a Vanilla JavaScript használatát, ha a jQuery használatát csak a lekérdezésválasztóra használta, mert ugyanazt teheti document.querySelector('#element'), mintha az lenne $('#element').
Az első lépés egy JavaScript-fájl létrehozása, és annak felvétele a törzscímke vége előtt, de miután a másik kettő tartalmazza:
Tehát mikor kell valóban használni a Javascript-et a Bootstrap 5-tel? Vannak olyan összetevők a keretrendszerben, amelyek csak akkor működnek, ha a Javascript segítségével inicializálják őket, például az eszköztippek, a pop-upok és a pirítósok.
Ezenkívül az olyan összetevőkkel, mint a modálok, a legördülő listák és a körhinta, érdemes lehet őket programozottan megváltoztatni a felhasználói műveletek vagy az alkalmazás logikája alapján.
Az eszköztippek inicializálása Vanilla JavaScript-en keresztül
Mindannyian szeretjük az eszköztippeket, de azok csak akkor működnek, ha JavaScript-en keresztül inicializálják őket. Először kezdjük egy eszköztipp elem létrehozásával a fájlunkban index.html:
Tooltip on top Ha a gomb fölé viszi az egérmutatót, az eszköztipp nem jelenik meg, mert alapértelmezés szerint ez a Bootstrap engedélyezési szolgáltatása, és kézzel kell inicializálni a JavaScript használatával. Ha a jQuery használatával szeretné megtenni, a következőképpen nézne ki:
$('#tooltip').tooltip();A Vanilla JS használatával a következő kódot kell használnia az eszköztipp engedélyezéséhez:
var tooltipElement = document.getElementById('tooltip'); var tooltip = new bootstrap.Tooltip(tooltipElement);Amit a fenti kód tesz, hogy kiválasztja az elemet az egyedi azonosítóval: "tooltip", majd létrehoz egy Bootstrap tooltip objektumot. Ezután felhasználhatja az eszköztipp állapotának manipulálására, például az eszköztipp programozott megjelenítésére vagy elrejtésére.
Íme egy példa arra, hogyan lehetne módszerekkel megmutatni / elrejteni:
var showTooltip = true; if (showTooltip) { tooltip.show(); } else { tooltip.hide(); }Ha engedélyezni szeretné az összes tippet, használhatja a következő kódot is:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) });Itt az történik, hogy kiválasztjuk az összes elemet, amelyek rendelkeznek az data-toggle="tooltip"attribútummal és az értékkel, és mindegyikhez inicializálunk egy eszköztipp objektumot. Ezeket egy tooltipList változóba is elmenti.
Váltsa át az elemei láthatóságát a JavaScript összecsukása módszerekkel
A Bootstrap összecsukási funkciója egy nagyon hasznos módszer az elemek megjelenítésére és elrejtésére adatattribútumok vagy JavaScript használatával.
Íme egy példa arra, hogyan lehet egy kártyát megjeleníteni vagy elrejteni, amikor egy bizonyos gombra kattintanak. Először hozzuk létre a HTML jelölést:
Toggle Card 
Freecodecamp.org
Awesome resource to learn programming from.
Learn coding for free 
Így létrehoztunk egy gombot az azonosítóval toggleCardButtonés egy kártyát az azonosítóval card. Kezdjük a két elem kiválasztásával:
var toggleButton = document.getElementById('toggleCardButton'); var card = document.getElementById('card');Ezután létre kell hoznunk egy összecsukható objektumot az újonnan kiválasztott kártyaelem használatával:
var collapsableCard = new bootstrap.Collapse(card, {toggle: false});A toggle:falsezászló azt csinálja, hogy az objektum létrehozása után láthatóan tartja az elemet. Ha nincs jelen, alapértelmezés szerint elrejti a kártyát.
Most hozzá kell adnunk egy eseményfigyelőt a gombhoz a kattintási művelethez:
toggleButton.addEventListener('click', function () { // do something when the button is being clicked });És végül át kell váltanunk a kártyát az összecsukható objektummal, amelyet így inicializáltunk:
toggleButton.addEventListener('click', function () { collapsableCard.toggle(); });Ez az! Most a kártya megjelenik / el lesz rejtve, amikor a gombra kattint. Természetesen mindezt megtehette a Bootstrap adatattribútum-szolgáltatásának használatával, de érdemes átkapcsolni bizonyos elemeket az API-hívás vagy az alkalmazás logikája alapján.
Következtetés
Ha követte ezt az oktatóanyagot, akkor képesnek kell lennie arra, hogy a legnépszerűbb CSS keretrendszert használja anélkül, hogy a projektben jQuery-t igényelne. Ez akár 85 KB adatmegtakarítást is lehetővé tesz, és gyorsabbá teszi webhelyét! Gratulálunk ?
Ha értékeled ezt az oktatóanyagot, és szereted a Bootstrap CSS keretrendszerként való használatát a projektjeidhez, meghívom Önt, hogy nézzen meg néhány ingyenes és prémium Bootstrap témát, sablont és felhasználói felületet, amelyeket a Themesbergnél építünk