Sådan skifter du fra jQuery til Vanilla JavaScript med Bootstrap 5

Bootstrap 5 er en gratis og open-source CSS-ramme rettet mod lydhør, mobil-første front-end webudvikling.

Hvis du ikke vidste det, er Bootstrap 5 alpha officielt lanceret. Det har fjernet jQuery som en afhængighed, har droppet understøttelse af Internet Explorer 9 og 10 og bringer nogle fantastiske opdateringer til Sass-filerne, markeringen og en ny Utility API.

Denne vejledning viser dig, hvordan du begynder at bruge VanillaJS i stedet for jQuery, når du bygger websteder, der bruger den nyeste version af Bootstrap 5.

Kom godt i gang

Du bliver nødt til at medtage Bootstrap 5 i dit projekt. Der er flere måder at gøre dette på, men for at holde det simpelt inkluderer vi rammen via CDN.

Lad os først og fremmest oprette en tom index.htmlside inde i en projektmappe:

     Bootstrap 5 Vanilla JS tutorial by Themesberg    

Inkluder bootstrap.min.csstypografiarket inden slutningen af ​​dit tag:

Derefter inkluderer du Popper.js-biblioteket og den vigtigste Bootstrap JavaScript-fil inden slutningen af ​​dit tag:

Nysgerrig, hvad egenskaberne integrityog crossoriginattributterne betyder? Her er forklaringen:

Integritetsattribut : gør det muligt for browseren at kontrollere filkilden for at sikre, at koden aldrig indlæses, hvis kilden er manipuleret.

Crossorigin-attribut : er til stede, når en anmodning indlæses ved hjælp af 'CORS', som nu er et krav om SRI-kontrol, når den ikke indlæses fra 'samme oprindelse'.

Store! Nu har vi med succes inkluderet den nyeste version af Bootstrap i vores projekt. En af de åbenlyse forskelle er, at vi ikke længere behøvede at kræve jQuery som en afhængighed, hvilket sparer ca. 82,54 KB i båndbredde, hvis vi er i en formindsket tilstand.

Skift fra jQuery til Vanilla JS

Før vi kommer i gang med dette afsnit, skal du vide, at brug af Bootstrap 5 med jQuery stadig er mulig ifølge den officielle dokumentation.

Vi anbefaler at bruge Vanilla JavaScript, hvis den eneste grund til, at du har brugt jQuery, var for forespørgselvælgeren, fordi du kan gøre det samme med det document.querySelector('#element')som om det var $('#element').

Det første trin er at oprette en JavaScript-fil og inkludere den inden slutningen af ​​body-tagget, men efter de to andre inkluderer:

Så hvornår skal du faktisk bruge Javascript med Bootstrap 5? Der er visse komponenter i rammen, der kun fungerer, hvis de initialiseres via Javascript, såsom værktøjstip, popovers og toasts.

Desuden kan du med komponenter som modaler, dropdowns og karruseller muligvis være i stand til at programmatisk ændre dem baseret på en brugerhandling eller applikationslogik.

Initialisering af værktøjstip via Vanilla JavaScript

Vi elsker alle værktøjstip, men de fungerer ikke, medmindre de initialiseres via JavaScript. Lad os først starte med at oprette et værktøjstip-element inde i vores index.htmlfil:

 Tooltip on top 

Hvis du holder markøren over knappen, vises ikke værktøjstip, fordi det som standard er en opt-in-funktion i Bootstrap, og det skal initialiseres manuelt ved hjælp af JavaScript. Hvis du vil gøre det med jQuery, kan du se sådan her ud:

$('#tooltip').tooltip();

Ved hjælp af Vanilla JS skal du bruge følgende kode for at aktivere værktøjstip:

var tooltipElement = document.getElementById('tooltip'); var tooltip = new bootstrap.Tooltip(tooltipElement);

Hvad koden ovenfor gør det, at det vælger elementet med den unikke id "værktøjstip" og derefter opretter et Bootstrap-værktøjstip-objekt. Du kan derefter bruge det til at manipulere tilstanden af ​​værktøjstip, såsom at vise eller skjule værktøjstip programmatisk.

Her er et eksempel på, hvordan du kan vise / skjule det via metoder:

var showTooltip = true; if (showTooltip) { tooltip.show(); } else { tooltip.hide(); }

Hvis du vil aktivere alle værktøjstip, kan du også bruge følgende kode:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) });

Hvad der sker her er, at vi vælger alle de elementer, der har data-toggle="tooltip"attributten og værdien, og initialiserer et værktøjstip-objekt til hver enkelt. Det gemmer dem også i en tooltipList-variabel.

Skift synligheden af ​​dine elementer ved hjælp af JavaScript-metoderne Collapse

Kollapsfunktionen på Bootstrap er en anden meget praktisk måde at vise og skjule elementer via dataattributter eller JavaScript.

Her er et eksempel på, hvordan vi kan vise eller skjule et kort, når der klikkes på en bestemt knap. Lad os først oprette HTML-markeringen:

Toggle Card ...
Freecodecamp.org

Awesome resource to learn programming from.

Learn coding for free

Så vi oprettede en knap med id toggleCardButtonog et kort med id card. Lad os starte med at vælge de to elementer:

var toggleButton = document.getElementById('toggleCardButton'); var card = document.getElementById('card');

Derefter skal vi oprette et sammenklappeligt objekt ved hjælp af det nyvalgte kortelement:

var collapsableCard = new bootstrap.Collapse(card, {toggle: false});

Hvad toggle:falseflaget gør, er at det holder elementet synligt efter oprettelsen af ​​objektet. Hvis det ikke er til stede, skjuler det kortet som standard.

Nu skal vi tilføje en begivenhedslytter til knappen til klikhandlingen:

toggleButton.addEventListener('click', function () { // do something when the button is being clicked });

Og endelig er vi nødt til at skifte kortet ved hjælp af det sammenklappelige objekt, som vi initialiserede sådan:

toggleButton.addEventListener('click', function () { collapsableCard.toggle(); });

Det er det! Nu vises / skjules kortet, når der trykkes på knappen. Selvfølgelig kunne alt dette være gjort ved hjælp af dataattribut-funktionen fra Bootstrap, men du vil muligvis skifte visse elementer baseret på et API-opkald eller en logik i din applikation.

Konklusion

Hvis du har fulgt denne vejledning, skal du nu kunne bruge den mest populære CSS-ramme uden behov for at kræve jQuery i dit projekt. Dette giver dig mulighed for at gemme op til 85 KB data og gøre dit websted hurtigere! Tillykke ?

Hvis du sætter pris på denne tutorial og kan lide at bruge Bootstrap som en CSS-ramme til dine projekter, opfordrer jeg dig til at tjekke nogle af de gratis og premium Bootstrap-temaer, skabeloner og UI-sæt, som vi bygger på Themesberg ❤️