Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

WordPress-Themes mit Bootstrap

Buttons gestalten

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Buttons lassen sich in verschiedenen Größen und Farben gestalten. Dies kann mit Hilfe von zusätzlichen Klassen abgewickelt werden.
03:14

Transkript

Bootstrap ist ja sehr kleinteilig aufgebaut und ich kann alles über bestimmte Klassen machen. Jetzt möchte ich Ihnen einmal verschiedene Buttons zeigen, die Sie verwenden können. Ich bin hier auf getbootstrap.com/css. Und dann habe ich hier bis nach Buttons runter gescrollt und ich kann hier verschiedene Buttons verwenden und wenn ich hier beispielsweise die Farbe eines Buttons verändern möchte, dann gebe ich hier einfach zusätzlich zur Klasse btn für Button auch noch zum Beispiel btn-primary an für einen blauen Button, btn-success für ein grünen, Info, Warning und so weiter. Das heißt ich würde in dem Fall einfach Copy und Paste machen und dann kann ich diesen orangefarbenen Button bei mir in meinem System einbinden. Das mache ich jetzt einfach mal, füge das hier ein, speichere das ab, und jetzt schaue ich mal, wie das hier ausschaut. Hier haben wir den Button, der hat natürlich noch keine Funktionalität. Wenn ich jetzt Button Warning verändere in Button Info, dann hat sich hier halt automatisch auch die Farbe verändert. Wenn ich ein bisschen weiter runtergehe habe ich verschiedene Größen, btn-large, small und xs. Ich nehme jetzt mal ein Large und das bedeutet ich muss, um diesen Button zu verändern, einfach hier eine zusätzliche Klasse angeben, in dem Fall btn-lg für large und wenn ich mir das Ganze jetzt nochmal anschaue und neu lade, dann sehen Sie, ist dieser Button hier gerade größer geworden. Das heißt ich suche mir zunächst einmal, welche Farbe soll dieser Button haben. Es gibt zum Beispiel auch einen durchsichtigen Button, wenn ich mit der Maus hier schon dran bin, dann ist dieser Button hier schon scharf, das sieht aus wie ein Link, ist aber in Wahrheit ein Button, der heißt einfach nur btn-link. Ich suche mir die Farbe aus, dann suche ich mir die Größe aus und dann kann ich eben hier mir meine Buttons quasi schön zusammenstellen. Ich kann zum Beispiel auch btn-blog angeben. Schauen wir mal was passiert, wenn ich das noch zusätzlich hier angebe. Wie das Ganze dann ausschaut. Neu laden, dann habe ich hier einen Button, der über die gesamte Breite, die ihm hier momentan zur Verfügung steht, auch tatsächlich drüber geht. Und jetzt gibt es die Möglichkeit, diesem Button eine ID zu geben. Also beispielsweise Achtung, und dann kann ich später mit JavaScript auf diese ID Achtung zugreifen, das ist die eine Variante, oder aber ich bau hier einfach noch einen Link außen rum und sage: wenn man hier draufklickt, dann soll ich zu einer bestimmten Seite gelangen, in dem Fall zu video2brain.com und wenn ich jetzt hier den ganzen Button nicht mehr Warning nenne, sondern video2brain, macht das Ganze wenigstens halbwegs hier Sinn in diesem Beispiel. Ich klicke drauf und wenn ich jetzt hier drauf gehe, dann lande ich hier automatisch dahin, wo ich auch erwartungsgemäß landen sollte. Mit Hilfe von diesen verschiedenen Button Klassen wie btn, das ist die Standard Klasse, btn-info und so weiter, btn-large, kann ich mir eben verschiedene Buttons für mein System zusammenstellen, ich kann die Größe beeinflussen und die Farbe.

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!