• Navigation überspringen
  • Zur Navigation
  • Zum Seitenende
Organisationsmenü öffnen Organisationsmenü schließen
Friedrich-Alexander-Universität Referenzinstallation FAU Design
  • FAUZur zentralen FAU Website
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
Suche öffnen
  • Campo
  • StudOn
  • FAUdir
  • Stellenangebote
  • Lageplan
  • Hilfe im Notfall
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
Friedrich-Alexander-Universität Referenzinstallation FAU Design
Menu Menu schließen
  • Texte
    • Überschriften
    • Absatzklassen
    • Tabellen
    • Listen
    • Textelemente
    • Blockquotes und Zitate
    • Symbole aus Font Awesome
    • Formularfelder
    • Code und Pre
    • Test: Standard-Template mit Default WordPress Textstyles
    Portal Texte
  • Bilder
    • Bildpositionierungen
    • Bildpositionen in der Seite
    • Bildpositionen im Beitrag
    • Galerie
      • Bildergalerie ohne Dots
      • Bildergalerie als Grid
      • Bildergalerie mit vielen Bildern
    Portal Bilder
  • Plugins
    • Elements
    • RRZE-Video
    • Plugin Bluesky
    • FAU oEmbed
    • Contact Form 7
    • Downloads
    • Plugin FAUdir
    • FAU Person
    • RRZE-UnivIS
    • RRZE-FAQ
    • RRZE Jobs
    • Plugin Mein Studium
    • Public Display Beispiel
    • Plugin FAU-CRIS
    Portal Plugins
  • Tests
    • Test: Standard-Template mit Default WordPress Textstyles
    • Tutorials
    • Komplexe Testseite
    • Smileys
    • Templates
      • Startseite Lehrstuhl
      • Startseite
      • Portalindex
      • Portalseite
    • Unterseite des Portals Test mit einem etwas längeren Titel. Manche wollen das ja so…
    • Beispiel-Seite mit Page Break
    • Seite mit h2 zu Beginn und Sidebar
    • WordPress oEmbed von WordPress-Seiten
    • Standard oEmbeds
    • Test Linklisten Sidebar
    • Shortcodes
      • Shortcode Spalten
      • Shortcode Portalmenu
      • Shortcode blogroll
      • Shortcode articlelist
      • Accordions
        • Accordion in Accordion
        • Accordions mit multimedialen Inhalten
        • Accordion auf Standardseite mit Sidebar rechts
      • Glossar
      • Synonyme
      • Organigramm
      • Shortcode Imagelink
        • CSS Klassen in Imagelinks
        • Imagelink Sizes
        • Imagelink Sizes bei Listendarstellung
    Portal Testfälle
  • Block Editor Testfälle
    • core/gallery
    Portal Block Editor Testfälle
  1. Startseite
  2. Texte
  3. Buttons

Buttons

Bereichsnavigation: Texte
  • Absatzklassen
  • Blockquotes und Zitate
  • Buttons
  • Code und Pre
  • Formularfelder
  • Listen
  • Symbole aus Font Awesome
  • Tabellen
  • Textelemente
  • Überschriften

Buttons

Diese Funktionalität sollte Experten vorbehalten bleiben. Bis auf Weiteres werden daher keine Shortcodes zur Verfügung gestellt, es sei denn es ergibt sich besonders großer Bedarf. Diese Funktionalität soll zunächst nicht in die offiziele Dokumentation aufgenommen werden.

Über die Nutzung via HTML-Anweisungen können Buttons aus dem Bootstrap-Framework verwendet werden.
Buttons können dazu verwendet werden um im Rahmen von Aktionen oder Kampagnen besonders deutlich auf Links hinzuweisen.
Auch für Formulare können Buttons unter Umständen sinnvoll sein.

Beispiele mit <a>

Default Primary Success Info Warning Danger Link

Code

<a role="button" href="#" class="btn btn-default">Default</a>
<a role="button" href="#"  class="btn btn-primary">Primary</a>
<a role="button" href="#"  class="btn btn-success">Success</a>
<a role="button" href="#"  class="btn btn-info">Info</a>
<a role="button" href="#"  class="btn btn-warning">Warning</a>
<a role="button" href="#"  class="btn btn-danger">Danger</a>
<a role="button" href="#"  class="btn btn-link">Link</a>

Beispiele mit <button>

Code

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Die Buttons sind ohne weitere Maßnahmen, wie einer Verlinkung etc. nicht „funktionstätig“.

Mehr Beispiele auf der Dokumentation von Bootstrap 3.3 zu Buttons

  • Blog
  • Kontakt
  • Impressum
  • Barrierefreiheit
  • Datenschutz
  • BlueSky
  • Facebook
  • RSS Feed
  • Xing
  • YouTube
Nach oben