Bagaimana cara memasang tautan pada tombol dengan bootstrap?

92

ada 4 metode dalam dokumentasi 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">

Yang pertama tidak berfungsi untuk saya, tidak ada tombol yang ditampilkan, hanya teks dengan tautannya, rasakan tema yang saya gunakan.

Yang kedua menunjukkan tombol yang saya inginkan, tetapi kode apa yang membuat tombol tersebut terhubung ke halaman lain saat diklik?

Bersulang

— Philayyy
sumber

2

jsfiddle.net/Lstcymqo masalahnya mungkin dengan tema yang Anda gunakan

— linktoahref

Apa perbedaan antara Tombol dan Tautan?

— Monyet Sesat

68

Anda dapat memanggil suatu fungsi pada acara klik tombol.

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

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

ATAU Gunakan Kode ini

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

— developeraumya
sumber

22

Jawaban yang diterima cukup buruk: bagaimana tautan Anda diurai oleh perayap web? Tidak ada judul, tidak ada target, itu bukan tautan, itu pengalihan ...

— hugsbrugs

8

Ini sama sekali tidak perlu dan sangat buruk untuk SEO. Lihat solusi saya di bawah ini ( stackoverflow.com/a/44130105/1202214 ).

— Andreas Bergström

1

Jawaban yang bagus untuk saya.

— Mo1

135

Jika Anda tidak benar-benar membutuhkan elemen tombol, cukup pindahkan kelas ke tautan biasa:

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

Sebaliknya, Anda juga dapat mengubah tombol agar tampak seperti tautan:

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

— Domenic D.
sumber

11

jawaban yang jauh lebih baik daripada yang diterima - tidak perlu javascript .. terima kasih

— Balaji Krishnan

3

Perhatikan semantik dan aksesibilitas kapan Anda harus menggunakan tombol dan kapan Anda harus menggunakan tautan. Umumnya, tombol untuk tindakan di halaman, dan link untuk konten di halaman atau untuk keluar dari halaman.

— James Westgate

Pilihan kedua lebih baik;)

— Pathros

132

Solusi termudah adalah yang pertama dari contoh Anda:

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

Alasan mengapa itu tidak berfungsi untuk Anda kemungkinan besar, seperti yang Anda katakan, masalah dalam tema yang Anda gunakan. Tidak ada alasan untuk menggunakan markup ekstra yang membengkak atau Javascript sebaris untuk ini.

— Andreas Bergström
sumber

6

Yang ini paling mudah untuk semua.

— Nana Partykar

2

Satu baris adalah yang terbaik;)

— Ivan

12

Trik lain agar warna tautan berfungsi dengan benar di dalam <button>markup

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

Harap diingat bahwa di bs4 beta misalnya btn-primary-outlinediubah menjadibtn-outline-primary

— yg tinggal di hutan
sumber

btn-outline-primarydan btn-outline-primarymerupakan hal yang sama. Apakah ada kesalahan ketik?

— ismailarilik

Ini berhasil bagi saya karena gaya jangkar dikuasai oleh item tema jquery ui

— Avagut

9

Beginilah cara saya menyelesaikannya

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

— ecg
sumber

3

Menggabungkan jawaban di atas saya menemukan solusi sederhana yang mungkin akan membantu Anda juga:

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

dengan hanya menambahkan kode JS sebaris Anda dapat mengubah tombol di link dan mempertahankan desainnya.

— HA
sumber

2

Anda cukup menambahkan kode berikut;

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

— Ish
sumber