web-dev-qa-db-fra.com

Comment mettre un lien sur un bouton avec bootstrap?

Comment peut-on mettre un lien sur un bouton avec bootstrap?

il y a 4 méthodes dans la documentation de bootstrap:

<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">

Le premier ne fonctionne pas pour moi, aucun bouton ne s'affiche, juste le texte avec le lien, j'ai l'impression que c'est le thème que j'utilise.

La seconde montre le bouton qui correspond à ce que je veux, mais quel est le code pour que le bouton renvoie à une autre page lorsque vous cliquez dessus?

À votre santé

htmltwitter-bootstrapbuttonhyperlink
52
Philayyy

Vous pouvez appeler une fonction sur l'événement de clic du bouton.

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

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

OU Utilisez ce code

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

Si vous n'avez pas vraiment besoin de l'élément button, déplacez simplement les classes sur un lien normal: 

<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>

Inversement, vous pouvez également changer un bouton pour qu’il apparaisse comme un lien:

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

La solution la plus simple est le premier de vos exemples:

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

La raison pour laquelle cela ne fonctionne pas pour vous est probablement, comme vous le dites, un problème dans le thème que vous utilisez. Il n'y a aucune raison de recourir à un balisage supplémentaire gonflé ou à un script Javascript intégré pour cela.

87
Andreas Bergström

Une autre astuce pour que la couleur du lien fonctionne correctement dans le balisage <button>

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

Veuillez garder à l'esprit que dans bs4 beta, par exemple btn-primary-outline changé en btn-outline-primary

4
silvan

En combinant les réponses ci-dessus, je trouve une solution simple qui vous aidera probablement aussi:

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

en ajoutant simplement du code JS en ligne, vous pouvez transformer un bouton en lien et conserver sa conception.

2
H. A.

Voici comment j'ai résolu

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

Vous pouvez simplement ajouter le code suivant;

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