Wie kann man mit Bootstrap einen Link auf eine Schaltfläche setzen?

88

Wie würde man einen Link auf eine Schaltfläche mit Bootstrap setzen?

In der Bootstrap-Dokumentation gibt es 4 Methoden:

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Der erste funktioniert bei mir nicht, es werden keine Schaltflächen angezeigt, nur der Text mit dem Link hat das Gefühl, dass es das Thema ist, das ich verwende.

Die zweite zeigt die Schaltfläche, die ich möchte, aber wie lautet der Code, mit dem die Schaltfläche beim Klicken auf eine andere Seite verlinkt wird?

Prost

html twitter-bootstrap button hyperlink Philayyy
quelle
2
jsfiddle.net/Lstcymqo das Problem kann mit dem Thema sein, das Sie verwenden
linktoahref
Was sind die Unterschiede zwischen Schaltflächen und Links?
Heretic Monkey

Antworten:

66

Sie können eine Funktion beim Klicken auf das Ereignis der Schaltfläche aufrufen.

<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">

<script>
function relocate_home()
{
     location.href = "www.yoursite.com";
} 
</script>

ODER Verwenden Sie diesen Code

<a href="#link" class="btn btn-info" role="button">Link Button</a>
Entwicklerraumya
quelle
19
Eine ziemlich schlecht akzeptierte Antwort: Wie werden Ihre Links von Webcrawlern analysiert? Kein Titel, kein Ziel, das ist kein Link, das ist eine Weiterleitung ...
Umarmungen
8
Dies ist völlig unnötig und sehr schlecht für SEO. Schauen Sie sich meine Lösung unten an ( stackoverflow.com/a/44130105/1202214 ).
Andreas Bergström
1
Gute Antwort auf mich.
Mo1
133

Wenn Sie das Schaltflächenelement nicht wirklich benötigen, verschieben Sie die Klassen einfach auf einen regulären Link: 

<div class="btn-group">
    <a href="/save/1" class="btn btn-primary active">
        <i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> Save
    </a>
    <a href="/cancel/1" class="btn btn-default">Cancel</a>
</div>

Umgekehrt können Sie auch eine Schaltfläche so ändern, dass sie wie ein Link angezeigt wird:

<button type="button" class="btn btn-link">Link</button>
Domenic D.
quelle
10
eine viel bessere Antwort als die akzeptierte - keine Notwendigkeit für Javascript .. danke
Balaji Krishnan
3
Beachten Sie semantisch und für die Barrierefreiheit, wann Sie eine Schaltfläche verwenden sollten und wann Sie einen Link verwenden sollten. Im Allgemeinen Schaltfläche für Aktionen auf der Seite und Links für Inhalte auf der Seite oder zum Navigieren von der Seite weg.
James Westgate
Die zweite Option ist die bessere;)
Pathros
126

Die einfachste Lösung ist das erste Ihrer Beispiele:

<a href="#link" class="btn btn-info" role="button">Link Button</a>

Der Grund, warum es bei Ihnen nicht funktioniert, ist höchstwahrscheinlich ein Problem in dem von Ihnen verwendeten Thema. Es gibt keinen Grund, dafür auf aufgeblähtes zusätzliches Markup oder Inline-Javascript zurückzugreifen.

Andreas Bergström
quelle
5
Dieser ist für alle am einfachsten.
Nana Partykar
1
Einzeiler sind die besten;)
Ivan
10

Ein weiterer Trick, damit die Linkfarbe im <button>Markup richtig funktioniert

<button type="button" class="btn btn-outline-success and-all-other-classes"> 
  <a href="#" style="color:inherit"> Button text with correct colors </a>
</button>

Bitte beachten Sie, dass in bs4 Beta zB auf btn-primary-outlinegeändert wurdebtn-outline-primary

silvan
quelle
btn-outline-primaryund btn-outline-primarysind die gleichen Dinge. Gibt es einen Tippfehler?
ismailarilik
Dies funktionierte für mich, da das Anker-Styling von jquery ui-
Themenelementen außer Kraft gesetzt wurde
8

So habe ich gelöst

   <a href="#" >
      <button type="button" class="btn btn-info">Button Text</button>
   </a>
EKG
quelle
3

Wenn ich die obigen Antworten kombiniere, finde ich eine einfache Lösung, die Ihnen wahrscheinlich auch helfen wird:

<button type="submit" onclick="location.href = 'your_link';">Login</button>

Durch einfaches Hinzufügen von Inline-JS-Code können Sie eine Schaltfläche in einen Link umwandeln und sein Design beibehalten.

HA
quelle
2

Sie können einfach den folgenden Code hinzufügen.

<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>
Ish
quelle