Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

WordPress-Themes mit Bootstrap

JavaScript-Komponenten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bootstrap verfügt über vorgefertigte JavaScript-Komponenten, welche über das Data-Attribut direkt aus HTML heraus gesteuert werden können.
03:58

Transkript

Bootstrap ist nicht nur ein HTML und CSS Framework, es kommt auch mit ein paar JavaScript Komponenten daher, und da möchte ich Ihnen mal exemplarisch eines zeigen. Ich bin also nach getbootstrap.com gegangen, und hier klicke ich jetzt auf JavaScript. Sie können einfach mal runterscrollen, was es da alles gibt. Ich wähle jetzt hier mal den Tooltip aus. Und hier habe ich vier Buttons, Tooltip on the right, Button top, left und das möchte ich jetzt auch mal in meiner Musterdatei einbauen. Dazu mache ich jetzt hier mal Copy und Paste von diesem Button, das habe ich schon vorbereitet, und wenn ich das hier einfach einbaue, dann wird es zunächst einmal noch nicht funktionieren. Warum? Weil all diese Bereiche, die hier innerhalb von JavaScript stehen, auch extra gestartet werden müssen. Wenn wir hier runtergehen, dann sehen Sie, hier muss ich das Ganze nochmal mit einem JavaScript Befehl starten, also gehe ich hier nochmal in meine Muster HTML Datei hinein, hier habe ich Copy und Paste gemacht. Das schauen wir uns gleich nochmal etwas genauer an. Und hier unten habe ich dann nochmal einen Script-Bereich eingefügt und gesagt: sobald das Dokument komplett geladen ist, da sollen alle Buttons, also alles, was mit der Klasse btn definiert worden ist, diesen Tooltip bekommen. Ich könnte auch sagen, dass dieser eine einzelne Button eine eigene Identität bekommen soll, also eine eigene ID. Die nenne ich jetzt mal Tom, weil das ein schöner Vorname ist, und dann könnte ich hier natürlich auch sagen: nur dieser Button Tom soll diesen Tooltip haben. Das war es, mehr muss ich nicht machen. schauen wir uns mal diesen Button etwas genauer an. <button type=button, diese ID, die kann ich selber vergeben, das ist wichtig. btn und btn-default, damit das ausschaut wie ein Button, aber für die Funktionalität, die wir hier gerade gebaut haben, sind eigentlich diese Bereiche entscheidend: Dieses data-toogle="tooltip", damit sage ich: ich möchte hier einen Tooltip haben. Ich habe dieses data-placemenet="right". Das kann ich mit right, left, top und bottom angeben und im Titel Attribut, da gebe ich dann an, was hier tatsächlich zu sehen sein soll. Hier steht noch Tooltip on the left. Dann sage ich mal: "bitte hier die Maus drüberfahren". Naja, sagen wir mal besser: "hier mit der Maus drüberfahren". Dann ist es wenigstens halbwegs gutes Deutsch. Schauen wir uns das Beispiel mal an. Ich lade das neu, hier mit der Maus drüberfahren, und dann sehen Sie Tooltip auf der rechten Seite. Und wenn ich das Ganze jetzt verändern möchte, dann sage ich hier einfach data-placement soll ="top" sein und dann wird das Ganze hier auch automatisch drüber angezeigt und nicht mehr auf der rechten Seite. Und das sind diese JavaScript Komponenten. Da gibt es jede Menge. Dann haben Sie hier verschiedene Funktionen, verschiedene alerts, Sie können mit collapse Dinge auseinander und zusammenpacken, wenn ich jetzt hier mal drauf klicke, dann sehen Sie, kann ich hier so ein Akkordeon bauen, mit einem Karussell kann ich hier durch verschiedene Slides durchscrollen und all diese Komponenten, die stehen standardmäßig für Sie zur Verfügung. Man muss relativ wenig JavaScript in den Quelltext direkt eintragen, die wesentliche Steuerung, die passiert immer mit diesem HTML5 gerechten data Attribut. Das heißt wenn ich hier etwas verändern möchte, also slide 0, 1, 2 und so weiter, dann mache ich das immer mit diesem erweiterten data Attribute. Sie sehen, Bootstrap ist ein sehr umfangreiches Framework. Ich habe jetzt hier nur einen kurzen Blick drauf geworfen. Es besteht aus umfangreichen CSS Komponenten, aus einzelnen Komponenten, wie zum Beispiel diesen Glyphicons und sogar aus vorgefertigten JavaScript Snippets, die man mit Hilfe dieses data Attributes bequem von HTML aus direkt steuern kann.

WordPress-Themes mit Bootstrap

Verwirklichen Sie Ihre eigenen Designvorstellungen bei Ihrem Webauftritt und sehen Sie, wie Sie WordPress-Seiten über Plug-ins und Themes wie z.B. Bootstrap erweitern können.

2 Std. 33 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!