Comment mettre un lien sur un bouton avec bootstrap?

92

il existe 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.

Le second montre le bouton que je veux, mais quel est le code qui fait le lien du bouton vers une autre page lorsque vous cliquez dessus?

À votre santé

— Philayyy
source

2

jsfiddle.net/Lstcymqo le problème vient peut-être du thème que vous utilisez

— linktoahref

Quelles sont les différences entre les boutons et les liens?

— Heretic Monkey

68

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>

— développeursaumya
source

22

Mauvaise réponse acceptée: comment vos liens sont analysés par les robots d'exploration? Pas de titre, pas de cible, ce n'est pas un lien, c'est une redirection ...

— hugsbrugs

8

C'est totalement inutile et vraiment mauvais pour le référencement. Jetez un œil à ma solution ci-dessous ( stackoverflow.com/a/44130105/1202214 ).

— Andreas Bergström

1

Bonne réponse à moi.

— Lu1

135

Si vous n'avez pas vraiment besoin de l'élément bouton, déplacez simplement les classes vers 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 modifier un bouton pour qu'il apparaisse comme un lien:

<button type="button" class="btn btn-link">Link</button>

— Domenic D.
source

11

une bien meilleure réponse que celle acceptée - pas besoin de javascript .. merci

— Balaji Krishnan

3

Soyez conscient de la sémantique et de l'accessibilité quand vous devez utiliser un bouton et quand vous devez utiliser un lien. Généralement, bouton pour les actions sur la page et liens pour le contenu de la page ou pour quitter la page.

— James Westgate

La deuxième option est la meilleure;)

— Pathros

132

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 à du Javascript en ligne pour cela.

— Andreas Bergström
source

6

Celui-ci est le plus simple pour tous.

— Nana Partykar

2

Les one-liners sont les meilleurs;)

— Ivan

12

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

<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-outlineremplacé parbtn-outline-primary

— sylvain
source

btn-outline-primaryet ce btn-outline-primarysont les mêmes choses. Y a-t-il une faute de frappe?

— ismailarilik

Cela a fonctionné pour moi car le style de l'ancre était

— remplacé par des

9

C'est comme ça que j'ai résolu

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

— ecg
source

3

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 son design.

— HA
source

2

Vous pouvez simplement ajouter simplement le code suivant;

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

— Ish
source