Bootstrap 5 este un cadru CSS gratuit și open-source orientat către dezvoltarea web front-end receptivă, mobilă.

În caz că nu știați, Bootstrap 5 alpha a fost lansat oficial. A eliminat jQuery ca dependență, a renunțat la suportul pentru Internet Explorer 9 și 10 și aduce câteva actualizări minunate pentru fișierele Sass, markup și un nou API de utilitate.

Acest tutorial vă va arăta cum să începeți să utilizați VanillaJS în loc de jQuery atunci când creați site-uri web utilizând cea mai nouă versiune a Bootstrap 5.

Noțiuni de bază

Va trebui să includeți Bootstrap 5 în proiect. Există mai multe modalități de a face acest lucru, dar pentru a simplifica acest lucru, vom include cadrul prin CDN.

În primul rând, să creăm un gol index.html pagina din interiorul unui folder de proiect:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Vanilla JS tutorial by Themesberg</title>
</head>
<body>
    
</body>
</html>

Includeți fișierul bootstrap.min.css foaie de stil înainte de sfârșitul fișierului <head> etichetă:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

Apoi includeți biblioteca Popper.js și fișierul principal Bootstrap JavaScript înainte de sfârșitul fișierului <body> etichetă:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Curios ce integrity și crossorigin atribute înseamnă? Iată explicația:

Atribut de integritate: permite browserului să verifice sursa fișierului pentru a se asigura că codul nu este încărcat niciodată dacă sursa a fost manipulată.

Atribut Crossorigin: este prezent atunci când o solicitare este încărcată folosind „CORS”, care este acum o cerință de verificare SRI atunci când nu este încărcată din „aceeași origine”.

Grozav! Acum am inclus cu succes cea mai nouă versiune de Bootstrap în proiectul nostru. Una dintre diferențele evidente este că nu mai trebuia să cerem jQuery ca dependență, economisind aproximativ 82,54 KB în lățime de bandă dacă este într-o stare minimizată.

Trecerea de la jQuery la Vanilla JS

Înainte de a începe cu această secțiune, trebuie să știți că utilizarea Bootstrap 5 cu jQuery este încă posibilă în conformitate cu documentație oficială.

Vă recomandăm să utilizați Vanilla JavaScript dacă singurul motiv pentru care ați folosit jQuery a fost pentru selectorul de interogări, deoarece puteți face același lucru cu document.querySelector('#element') de parcă ar fi fost $('#element').

Primul pas este să creați un fișier JavaScript și să îl includeți înainte de sfârșitul etichetei de corp, dar după ce celelalte două includ:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<script src="js/app.js"></script>

Deci, când trebuie să utilizați Javascript cu Bootstrap 5? Există anumite componente în cadru care funcționează numai dacă sunt inițializate prin Javascript, cum ar fi sfaturi de instrumente, popovers și toasts.

În plus, cu componente cum ar fi modale, drop-down-uri și carusele, poate doriți să le puteți modifica programatic pe baza unei acțiuni a utilizatorului sau a unei logici a aplicației.

Inițializarea sfaturilor de instrumente prin Vanilla JavaScript

Cu toții ne plac sfaturile de instrumente, dar nu funcționează decât dacă sunt inițializate prin JavaScript. Să începem mai întâi prin crearea unui element tooltip în interiorul nostru index.html fişier:

<button id="tooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
    Tooltip on top
</button>

Trecând cu mouse-ul peste buton nu se va afișa descrierea, deoarece în mod implicit este o caracteristică de înscriere a Bootstrap și trebuie inițializată manual folosind JavaScript. Dacă doriți să o faceți cu jQuery, iată cum ar arăta:

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

Folosind Vanilla JS, va trebui să utilizați următorul cod pentru a activa descrierea:

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

Ceea ce face codul de mai sus este că selectează elementul cu ID-ul unic „tooltip” și apoi creează un obiect Bootstrap tooltip. Puteți utiliza apoi acest lucru pentru a manipula starea sfatului de instrumente, cum ar fi afișarea sau ascunderea sfaturilor de instrumente la nivel de program.

Iată un exemplu despre modul în care l-ai putea afișa / ascunde prin metode:

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

Dacă doriți să activați toate sfaturile de instrumente, puteți utiliza și următorul cod:

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

Ceea ce se întâmplă aici este că selectăm toate elementele care au data-toggle="tooltip" atributul și valoarea și inițializați un obiect de tip tooltip pentru fiecare. De asemenea, le salvează într-o variabilă tooltipList.

Comutați vizibilitatea elementelor dvs. utilizând metodele Reduceți JavaScript

Funcția de colaps din Bootstrap este un alt mod foarte util de a afișa și ascunde elemente prin atribute de date sau JavaScript.

Iată un exemplu despre modul în care putem afișa sau ascunde o carte atunci când se face clic pe un anumit buton. Să creăm mai întâi marcajul HTML:

<button id="toggleCardButton" type="button" class="btn btn-primary mb-2">Toggle Card</button>
    <div id="card" class="card collapse show" style="width: 18rem;">
        <img src="https://dev-to-uploads.s3.amazonaws.com/i/rphqzfoh2cbz3zj8m8t1.png" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Freecodecamp.org</h5>
            <p class="card-text">Awesome resource to learn programming from.</p>
            <a href="#" class="btn btn-primary">Learn coding for free</a>
        </div>
    </div>

Așa că am creat un buton cu ID-ul toggleCardButton și un card cu id-ul card. Să începem prin selectarea celor două elemente:

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

Apoi, trebuie să creăm un obiect pliabil folosind noul element de carte selectat:

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

Ce toggle:false steagul este că păstrează elementul vizibil după crearea obiectului. Dacă nu este prezent, ar ascunde cardul în mod implicit.

Acum trebuie să adăugăm un ascultător de evenimente pentru butonul pentru acțiunea de clic:

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

Și, în cele din urmă, trebuie să comutăm cardul folosind obiectul pliabil pe care l-am inițializat astfel:

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

Asta e! Acum, cardul va fi afișat / ascuns de fiecare dată când se face clic pe buton. Desigur, toate acestea ar fi putut fi făcute folosind caracteristica atributelor de date din Bootstrap, dar poate doriți să comutați anumite elemente pe baza unui apel API sau a unei logici din aplicația dvs.

Concluzie

Dacă ați urmat de-a lungul acestui tutorial, ar trebui să puteți folosi cel mai popular cadru CSS fără a fi nevoie de jQuery în proiect. Acest lucru vă permite economisiți până la 85 KB de date și vă face site-ul web mai rapid! Felicitări?

Dacă apreciați acest tutorial și vă place să utilizați Bootstrap ca cadru CSS pentru proiectele dvs., vă invit să verificați câteva dintre versiunile gratuite și premium Teme Bootstrap, șabloane și truse UI pe care îl construim la Themesberg ❤️