จะใส่ลิงค์บนปุ่มด้วย bootstrap ได้อย่างไร?

จะใส่ลิงค์บนปุ่มที่มี bootstrap ได้อย่างไร?

มี 4 วิธีในเอกสาร 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">

อันแรกใช้ไม่ได้สำหรับฉันไม่มีปุ่มใด ๆ แสดงแค่ข้อความที่มีลิงก์รู้สึกว่าเป็นธีมที่ฉันใช้

อันที่สองแสดงปุ่มที่ฉันต้องการ แต่รหัสอะไรทำให้ปุ่มเชื่อมโยงไปยังหน้าอื่นเมื่อคลิก?

ไชโย

คุณสามารถเรียกใช้ฟังก์ชันเมื่อคลิกเหตุการณ์ของปุ่ม

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

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

หรือใช้รหัสนี้

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

หากคุณไม่ต้องการองค์ประกอบปุ่มจริงๆให้ย้ายชั้นเรียนไปที่ลิงก์ปกติ:

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

ในทางกลับกันคุณยังสามารถเปลี่ยนปุ่มให้ปรากฏเป็นลิงก์ได้:

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

วิธีแก้ปัญหาที่ง่ายที่สุดคือตัวอย่างแรกของคุณ:

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

สาเหตุที่ไม่ได้ผลสำหรับคุณเป็นไปได้มากว่าเป็นปัญหาในธีมที่คุณใช้ ไม่มีเหตุผลที่จะหันมาใช้มาร์กอัปพิเศษหรือ Javascript แบบอินไลน์สำหรับสิ่งนี้

เคล็ดลับอีกอย่างในการทำให้สีของลิงก์ทำงานได้อย่างถูกต้องภายใน<button>มาร์กอัป

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

โปรดทราบว่าใน bs4 beta เช่นbtn-primary-outlineเปลี่ยนเป็นbtn-outline-primary

นี่คือวิธีที่ฉันแก้ไข

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

การรวมคำตอบข้างต้นฉันพบวิธีง่ายๆที่อาจช่วยคุณได้เช่นกัน:

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

เพียงแค่เพิ่มโค้ด JS แบบอินไลน์คุณก็สามารถเปลี่ยนปุ่มในลิงค์และรักษาการออกแบบของเขาได้

คุณสามารถเพิ่มรหัสต่อไปนี้

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