Bootstrap 3 Grundkurs

Unterschiedliche Schaltflächen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Vorgefertigte Schaltflächen-Elemente, als "button" eingeführt und mit unterschiedlichen Klassen versehen, können breit gefächert eingesetzt werden.
03:45

Transkript

Schaltflächen werden von Bootstrap in quasi allen Geschmacksrichtungen angeboten. Es sind wieder vorgefertigte CSS Elemente, die je nach Bedarf und Belieben eingesetzt werden können. Und wie einfach das ganze funktioniert, zeige ich Ihnen jetzt wieder mal an einem Beispiel. Und zwar möchte ich so einen Info Button, also einen hellblauen Button, gerne bei mir verwenden. Ich kopiere mir also mit Steuerung C jetzt einfach mal diesen Code auf die Schnelle, und werde ihn in meinen Unterartikeln verwenden. Da habe ich 3 Spalten nebeneinander und in eine dieser Spalten tue ich, also eigentlich in alle 3 Spalten, werde ich jetzt diesen Button setzen. Und werde ihn mit dem Text mehr Info versehen. Hier nochmal mehr Info und hier mehr Info. Ich sage speichern. Und wir schauen uns das ganze mal an. Und so habe ich innerhalb von einmal kopieren, sofort jetzt die Möglichkeit, dass ich hier diese Schaltflächen habe. Und natürlich kann ich jetzt diese Schaltflächen auch noch mit Informationen belegen. Nämlich hier würde ich dann z. B. auf andere Seiten meine Web Präsens verweisen wollen. Und um jetzt eben diese Funktionalität noch hinzuzufügen, reicht es völlig wenn wir das ganze in einen Link betten. Sagen wir also, hier hätten wir dann href Link hin zu der ueberuns Seite, und Steuerung X schneide ich es aus, hier hinten mit Steuerung V setzte ich es wieder ein, und wir schauen uns das neuerlich an. Ich speicher das ganze. Und Sie sehen jetzt im linken unteren Bereich schon, dass die Funktionalität da ist, nämlich das ich hier weitergeleitet werde auf diese ueberuns Seite. Gut. Sie können jetzt mit nur ein bisschen Austauschen der Bezeichnungen nicht nur die Farbe ändern, sondern auch z. B. die Größe ändern. Oder die Funktionalität ändern. Schauen wir uns nochmal schnell noch auf der Bootstrap Seite an, was es überhaupt für Möglichkeiten gäbe. Um die Größe zu bestimmen haben Sie einerseits den Eintrag-Button Large oder Button Small. Probieren wir doch mal Button Small aus. D. h. wir fügen bei der Klasse einfach noch diese zusätzliche Funktionalität hinzu, btn-sm, wir speichern wieder. Schauen's uns an. Und Sie merken gleich im Unterschied zum anderen ist es ein bedeutend dezenterer Button geworden. Oder wenn wir die Farbe ändern wollen, ist das ebenfalls leicht erlädigt, wenn wir z. B. sagen es ist kein Info, sondern ein Warning. Dann bekommt er gleich die dafür vorgesehene Farbe, nämlich er wird Orange. So können Sie in sehr kurzer Zeit einfach nur mit diesen mitgelieferten Versatzstücken sich Ihre Buttons gestalten wie Sie's brauchen und mit Funktionen füllen.

Bootstrap 3 Grundkurs

Lernen Sie, wie Sie über Bootstrap 3 mit dem Gridsystem - einem ausgeklügelten Spaltensystem – beliebige Gestaltungsmöglichkeiten schnell und flexibel umsetzen können.

2 Std. 14 min (25 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!