Jak umieścić link na przycisku z bootstrapem?

92

Jak można umieścić link na przycisku za pomocą programu bootstrap?

w dokumentacji bootstrap są 4 metody:

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

Pierwszy nie działa dla mnie, nie wyświetla się żaden przycisk, tylko tekst z linkiem, mam wrażenie, że to motyw, którego używam.

Drugi pokazuje przycisk, który jest tym, czego chcę, ale jaki kod tworzy link do innej strony po kliknięciu?

Twoje zdrowie

html twitter-bootstrap button hyperlink Philayyy
źródło
2
jsfiddle.net/Lstcymqo problem może dotyczyć motywu, którego używasz
linktoahref
Jakie są różnice między przyciskami a linkami?
Heretic Monkey,

Odpowiedzi:

68

Możesz wywołać funkcję po kliknięciu przycisku.

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

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

LUB Użyj tego kodu

<a href="#link" class="btn btn-info" role="button">Link Button</a>
developersaumya
źródło
22
Dość źle zaakceptowana odpowiedź: w jaki sposób Twoje linki są analizowane przez roboty sieciowe? Bez tytułu, bez celu, to nie jest link, to przekierowanie ...
hugsbrugs
8
Jest to całkowicie niepotrzebne i bardzo niekorzystne dla SEO. Spójrz na moje rozwiązanie poniżej ( stackoverflow.com/a/44130105/1202214 ).
Andreas Bergström
1
Dobra odpowiedź dla mnie.
Pon1
135

Jeśli tak naprawdę nie potrzebujesz elementu przycisku, po prostu przenieś klasy do zwykłego linku: 

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

I odwrotnie, możesz także zmienić przycisk, aby wyglądał jak link:

<button type="button" class="btn btn-link">Link</button>
Domenic D.
źródło
11
dużo lepszy niż odpowiedź na przyjętą jednego - nie ma potrzeby javascript .. dzięki
Balaji Krishnan
3
Zwróć uwagę na semantycznie i dostępność, kiedy powinieneś używać przycisku, a kiedy powinieneś używać łącza. Ogólnie rzecz biorąc, przycisk do wykonywania czynności na stronie i łącza do treści na stronie lub do opuszczania strony.
James Westgate,
Druga opcja jest lepsza;)
Pathros
132

Najłatwiejszym rozwiązaniem jest pierwszy z Twoich przykładów:

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

Powodem, dla którego to nie działa, jest najprawdopodobniej, jak mówisz, problem z motywem, którego używasz. Nie ma powodu, aby w tym celu uciekać się do rozdętych dodatkowych znaczników lub wbudowanego kodu JavaScript.

Andreas Bergström
źródło
6
Ten jest najłatwiejszy dla wszystkich.
Nana Partykar
2
One-liniery są najlepsze;)
Ivan
12

Kolejna sztuczka, aby kolor linku działał poprawnie wewnątrz <button>znacznika

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

Należy pamiętać, że w bs4 beta np. btn-primary-outlineZmieniono nabtn-outline-primary

borowy
źródło
btn-outline-primaryi btn-outline-primarysą tym samym. Czy jest literówka?
ismailarilik
U mnie to zadziałało, ponieważ styl kotwicy był
zastępowany
9

Oto jak rozwiązałem

   <a href="#" >
      <button type="button" class="btn btn-info">Button Text</button>
   </a>
ekg
źródło
3

Łącząc powyższe odpowiedzi znajduję proste rozwiązanie, które prawdopodobnie również Tobie pomoże:

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

wystarczy dodać wbudowany kod JS, aby przekształcić przycisk w odsyłaczu i zachować jego projekt.

HA
źródło
2

Możesz po prostu dodać następujący kod;

<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>
Ish
źródło