Comment mettre un lien sur un bouton avec bootstrap?
Comment 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, avoir une impression son le thème im en utilisant.
la deuxième affiche le bouton qui est ce que je veux, mais quel est le code qui fait le lien du bouton à une autre page lorsque cliqué?
Cheers
5 réponses
Vous pouvez appeler une fonction sur l'événement click 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
<input type="button" class="btn btn-info" value="Input Button" onclick="location.href = 'http:\www.google.com';">
si vous n'avez pas vraiment besoin de l'élément bouton, déplacez simplement les classes vers un lien régulier:
<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>
a l'Inverse, vous pouvez également modifier un bouton pour apparaître comme un lien:
<button type="button" class="btn btn-link">Link</button>
la solution la plus simple est la première 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 très probablement, comme vous le dites, un problème dans le thème que vous utilisez. Il n'y a aucune raison de recourir à un supplément gonflé ou Javascript en ligne pour cela.
un autre truc pour faire fonctionner correctement la couleur du lien à l'intérieur du <button> balise
<button type="button" class="btn btn-outline-success and-all-other-classes">
<a href="#" style="color:inherit"> Button text with correct colors </a>
</button>
s'il vous Plaît gardez à l'esprit que dans bs4 bêta par exemple,btn-outline-primary modifié btn-outline-primary
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 inline JS code vous pouvez transformer un bouton dans un lien et de garder sa conception.