it-swarm.com.de

Wie lege ich einen Link auf einen Button mit Bootstrap?

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

es gibt 4 Methoden in der Bootstrap-Dokumentation:

<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 nicht für mich, es werden keine Schaltflächen angezeigt, nur der Text mit dem Link hat das Gefühl, dass das Thema darin verwendet wird.

Die zweite zeigt die Schaltfläche, die ich will, aber was macht der Code, wenn die Schaltfläche auf eine andere Seite verweist?

Prost

52
Philayyy

Sie können eine Funktion beim Klickereignis 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>
32
developersaumya

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 eine Schaltfläche auch so ändern, dass sie wie ein Link erscheint:

<button type="button" class="btn btn-link">Link</button>
103
Domenic D.

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 für Sie nicht funktioniert, ist höchstwahrscheinlich ein Problem in dem von Ihnen verwendeten Thema. Es gibt keinen Grund dafür, auf aufgeblähtes Extra-Markup oder Inline-Javascript zurückzugreifen.

87

Ein weiterer Trick, um die Link-Farbe in der <button>-Markierung richtig zu machen

<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 der bs4-Beta z. btn-primary-outline geändert in btn-outline-primary

4
silvan

Durch die Kombination der obigen Antworten finde ich eine einfache Lösung, die wahrscheinlich auch Ihnen helfen wird:

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

durch das Hinzufügen von Inline-JS-Code können Sie einen Button in einen Link umwandeln und sein Design beibehalten.

2
H. A.

So habe ich gelöst

   <a href="#" >
      <button type="button" class="btn btn-info">Button Text</button>
   </a>  
0
ecg

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

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