Bootstrap ile bir düğmeye nasıl bağlantı eklenir?

92

bootstrap belgelerinde 4 yöntem vardır:

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

İlki benim için çalışmıyor, hiçbir düğme gösterilmiyor, sadece bağlantıya sahip metin, kullandığı temayı hissettiriyor.

İkincisi, istediğim düğmeyi gösterir, ancak kod, tıklandığında düğmeyi başka bir sayfaya bağlayan nedir?

Şerefe

— Philayyy
kaynak

2

jsfiddle.net/Lstcymqo Sorun kullandığınız temayla ilgili olabilir

— linktoahref

Düğmeler ve bağlantılar arasındaki farklar nelerdir?

— Kafir Maymun

68

Düğmeye tıklama olayında bir işlevi çağırabilirsiniz.

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

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

VEYA bu Kodu kullanın

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

— Geliştiriciler
kaynak

22

Oldukça kötü bir cevap: Bağlantılarınız web tarayıcıları tarafından nasıl ayrıştırılıyor? Başlık yok, hedef yok, bu bir bağlantı değil, bu bir yönlendirme ...

— hugsbrugs

8

Bu tamamen gereksiz ve SEO için gerçekten kötü. Aşağıdaki çözümüme bir göz atın ( stackoverflow.com/a/44130105/1202214 ).

— Andreas Bergström

1

Bana güzel cevap.

— Mo1

135

Düğme öğesine gerçekten ihtiyacınız yoksa, sınıfları normal bir bağlantıya taşıyın:

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

Tersine, bir düğmeyi bağlantı gibi görünecek şekilde de değiştirebilirsiniz:

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

— Domenic D.
kaynak

11

Kabul olandan çok daha iyi bir cevap - javascript gerek .. teşekkürler

— Balaji Krishnan

3

Bir düğmeyi ne zaman ve ne zaman bir bağlantı kullanmanız gerektiğini anlamsal olarak ve erişilebilirlik açısından bilin. Genel olarak, sayfadaki eylemler için düğme ve sayfadaki içerik için bağlantılar veya sayfadan uzaklaşma.

— James Westgate

İkinci seçenek daha iyi;)

— Pathros

132

En kolay çözüm, örneklerinizden ilkidir:

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

Sizin için çalışmamasının nedeni, büyük olasılıkla, sizin de söylediğiniz gibi, kullandığınız temadaki bir sorundur. Bunun için şişirilmiş ekstra işaretlemeye veya satır içi Javascript'e başvurmak için hiçbir neden yoktur.

— Andreas Bergström
kaynak

6

Bu herkes için en kolayı.

— Nana Partykar

2

Tek gömlekler en iyisidir;)

— Ivan

12

Bağlantı renginin <button>işaretlemede doğru çalışmasını sağlamak için başka bir numara

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

Lütfen bs4 beta sürümünde örneğin şu şekilde btn-primary-outlinedeğiştiğini unutmayın:btn-outline-primary

— Silvan
kaynak

btn-outline-primaryve btn-outline-primaryaynı şeyler. Bir yazım hatası var mı?

— ismailarilik

Bu, çapa stilinin jquery kullanıcı

— arabirimi

9

Ben böyle çözdüm

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

— ekg
kaynak

3

Yukarıdaki cevapları birleştirerek muhtemelen size de yardımcı olacak basit bir çözüm buluyorum:

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

yalnızca satır içi JS kodu ekleyerek bağlantıdaki bir düğmeyi dönüştürebilir ve tasarımını koruyabilirsiniz.

— HA
kaynak

2

Sadece aşağıdaki kodu ekleyebilirsiniz;

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

— Ish
kaynak