Heute stelle ich euch bootstro.js vor. Mithilfe dieses 3KB kleinem Scripts und die dazu gehörige CSS Datei (0.5KB) kann ein Frontend-Developer ganz einfach eine Einführung für seine Webseite oder Web-Applikation bauen.
Alles was man dazu braucht ist Bootstrap, Bootstrap-Popover und Bootstro.js selbst. Jetzt müssen wir unser erstes Element als solches Intro Popover definieren:
<h1 class="bootstro myIntro"
data-bootstro-title="Dies ist die Überschrift der Webseite"
data-bootstro-description="Eine genaue Beschreibung kommt hier rein.">
Überschrift
</h1>Mit der Klasse bootstro geben wir den Script an, dass dieses Element hervor gehoben werden soll. Mit data-bootstro-title und data-bootstro-description geben wir den Titel und die Beschreibung zu diesem Punkt fest.
Damit das ganze jetzt auch funktioniert müssen wir bootstro noch initialisieren:
$(document).ready(function(){
bootstro.start('.myIntro', options);
});Möchte man jetzt weitere Schritte haben, nimmt man einfach das gleiche Vorgehen.