Bootstrap - Popovers: руковод novičkov
Zdravo, ambiciozni web razvijalci! Danas ćemo zaroniti u prekrasni svet Bootstrap Popovers. Ne brinite ako ste novi u ovome; voditi ću vas kroz svaki korak sa istom strpljivosti koju sam koristio u mojoj učionici godinama. Do kraja ovog tutorijala, postati ćete profesionalac u prikazivanju popovers!
Šta su Popovers?
Pre nego što započnemo, razumemo što su popovers. Zamislite da čitate knjigu, i pored reči je malo zvezdice. Kad pogledate na dno strane, pronalazite dodatne informacije o toj reči. To je esencijalno ono štopopover radi na web stranici - pruža dodatne informacije kad korisnik interaguje sa elementom.
Omogućavanje Popovers
Prvo, moramo omogućiti popovers. To je poput uključivanja svetla pre nego što počnete čitati - morate namestiti stvari pre nego što ih možete koristiti.
Da biste omogućili popovers, morate uključiti Bootstrapove JavaScript i CSS datoteke u vaš HTML dokument. Evo kako to uradite:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Popovers</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Vaš sadržaj ide ovde -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>Ovaj kod postavlja osnovnu strukturu HTML dokumenta i uključuje Bootstrapove CSS i JavaScript datoteke. Skripta na dnu inicijalizuje sve popovers na stranici.
Kreiranje Popovera
Sada kada smo postavili scenu, kreirajmo naš prvi popover! To je jednostavno dodavanje nekoliko atributa na dugme.
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Naslov Popovera" data-bs-content="I evo nekih zadivljujućih sadržaja. Veoma angažujuće. Pravda?">Kliknite za prebacivanje popovers</button>Razbijimo ovo:
-
class="btn btn-lg btn-danger": Ovo čini naše dugme veliko i crveno. -
data-bs-toggle="popover": Ovo kaže Bootstrapu da ovaj element treba pokrenuti popover. -
title="Naslov Popovera": Ovo postavlja naslov našeg popovers. -
data-bs-content="...": Ovo je glavni sadržaj našeg popovers.
Pozicioniranje Popovera
Poput uređivanja nameštaja u sobi, možete postaviti vaš popover na različite načine. Bootstrap vam dozvoljava da postavite popovers na vrh, desno, dole ili levo od elementa.
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vrh popovers">
Popover na vrhu
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Desni popovers">
Popover na desno
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Donji popovers">
Popover na dno
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Levi popovers">
Popover na levo
</button>Atribut data-bs-placement određuje gde će se popover pojaviti u odnosu na dugme.
Prilagođeni popovers
Želite li dodati lični dodir vašim popovers? Možete ih prilagoditi sa vašim sopstvenim HTML sadržajem!
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-html="true" title="<h3>Prilagođeni Naslov</h3>" data-bs-content="<b>Podebljani</b> sadržaj. <a href='#'>Link</a> uključen.">
Popover sa prilagođenim HTML-om
</button>Ovdje, postavili smo data-bs-html="true" da dozvolimo HTML u našem sadržaju popovers. Sada možemo koristiti HTML oznake u naslovu i sadržaju!
Disponibilni Popover
Ponekad želite da vaš popover ostane sve dok korisnik izričito ne zatvori ga. Tada su dispozabilni popovers veoma korisni.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Disponibilni popovers" data-bs-content="I evo nekih zadivljujućih sadržaja. Veoma angažujuće. Pravda?">Disponibilni popovers</a>Ključ ovde je data-bs-trigger="focus". To znači da će popover ostati otvoren sve dok korisnik ne klikne negde drugde na strani.
Prolazak mišem preko Popovera
Želite li da se vaš popover pojavi kad korisnik pređe mišem preko elementa? Lako je!
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Pređite mišem preko mene!">
Prolazak mišem za pokretanje popovers
</button>Atribut data-bs-trigger="hover" čini da se popover pojavi na prelazu mišem.
Popover na onemogućenim elementima
Obično onemogućeni elementi ne pokreću korisničke interakcije. Ali sa malim trikom, možemo učiniti da popovers rade na njima isto tako!
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Onemogućeni popovers">
<button class="btn btn-primary" type="button" disabled>Onemogućeno dugme</button>
</span>Mi uokvirujemo naše onemogućeno dugme u <span> koji obrađuje pokretanje popovers.
Opcije
Bootstrap pruža raznovrsne opcije za prilagođavanje vaših popovers. Evo tabele nekih čestih opcija:
| Opcija | Tip | Podrazumevano | Opis |
|---|---|---|---|
| animation | boolean | true | Primeni CSS fade prijelaz na popover |
| container | string | element | false | false | Dodaje popover na specificirani element |
| content | string | element | function | '' | Podrazumevani sadržaj ako data-bs-content atribut nije prisutan |
| delay | number | object | 0 | Kašnjenje prikaza i sakrivanja popovers (ms) |
| html | boolean | false | Dozvoli HTML u popover |
| placement | string | function | 'right' | Kako postaviti popover |
| selector | string | false | false | Ako je dato selektor, objekti popovers će biti delegirani na specificirane ciljeve |
| template | string | <div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div> |
Osnovni HTML za kreiranje popovers |
| title | string | element | function | '' | Podrazumevani naslov ako title atribut nije prisutan |
| trigger | string | 'click' | Kako je pokrenut popovers - click | hover | focus | manual |
Možete koristiti ove opcije prilikom inicijalizacije popovers sa JavaScriptom:
var popover = new bootstrap.Popover(document.querySelector('#example'), {
trigger: 'hover',
placement: 'top'
})I to je sve! Sada ste profesionalac u Bootstrap Popovers. Ne zaboravite, ključ za savladavanje ovoga (i bilo kog koncepta kodiranja) je vežba. Dakle, nastavite da eksperimentišete sa ovim primerima, miješajte i kombinujte, i kreirajte nešto izvanredno. Srećno kodiranje!
Credits: Image by storyset