Làm thế nào để đặt một liên kết trên một nút với bootstrap?

Làm thế nào để đặt một liên kết trên một nút với bootstrap?

có 4 phương pháp trong tài liệu 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">

Cái đầu tiên không phù hợp với tôi, không có nút nào hiển thị, chỉ có văn bản với liên kết, có cảm giác chủ đề tôi đang sử dụng.

Cái thứ hai hiển thị nút là thứ tôi muốn, nhưng mã gì khiến nút liên kết đến trang khác khi được nhấp vào?

Chúc mừng

Bạn có thể gọi một hàm khi nhấp vào sự kiện của nút.

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

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

HOẶC sử dụng mã này

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

Nếu bạn không thực sự cần phần tử nút, chỉ cần di chuyển các lớp đến một liên kết thông thường:

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

Ngược lại, bạn cũng có thể thay đổi một nút để xuất hiện giống như một liên kết:

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

Giải pháp dễ nhất là một trong những ví dụ đầu tiên của bạn:

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

Như bạn nói, lý do nó không hoạt động với bạn rất có thể là do vấn đề trong chủ đề bạn đang sử dụng. Không có lý do gì để sử dụng đánh dấu bổ sung cồng kềnh hoặc Javascript nội tuyến cho việc này.

Một thủ thuật khác để làm cho màu liên kết hoạt động chính xác bên trong <button>đánh dấu

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

Xin lưu ý rằng trong bản beta bs4, ví dụ: btn-primary-outlineđã thay đổi thànhbtn-outline-primary

Đây là cách tôi giải quyết

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

Kết hợp các câu trả lời trên, tôi tìm thấy một giải pháp đơn giản có thể sẽ giúp bạn:

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

bằng cách thêm mã JS nội tuyến, bạn có thể biến đổi một nút trong liên kết và giữ nguyên thiết kế của anh ấy.

Bạn chỉ cần thêm mã sau đây;

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