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

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

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