[html] 부트 스트랩으로 버튼에 링크를 추가하는 방법은 무엇입니까?

Question 1

부트 스트랩이있는 버튼에 링크를 어떻게 넣을까요?

부트 스트랩 문서에는 4 가지 방법이 있습니다.

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

첫 번째는 나를 위해 작동하지 않고 버튼이 표시되지 않고 링크가있는 텍스트 만 사용하는 테마가 있습니다.

두 번째는 내가 원하는 버튼을 보여 주지만, 클릭했을 때 버튼이 다른 페이지로 연결되는 코드는 무엇입니까?

건배

Question 2

버튼을 클릭하면 함수를 호출 할 수 있습니다.

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

Question 3

버튼 요소가 실제로 필요하지 않으면 클래스를 일반 링크로 이동하십시오.

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

Question 4

가장 쉬운 솔루션은 첫 번째 예제입니다.

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

그것이 당신을 위해 작동하지 않는 이유는 당신이 말했듯이 당신이 사용하는 테마의 문제 일 가능성이 큽니다. 이를 위해 비대해진 추가 마크 업이나 인라인 자바 스크립트에 의지 할 이유가 없습니다.

Question 5

<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 베타에서 예를 들어 다음과 같이 btn-primary-outline변경되었습니다.btn-outline-primary

Question 6

이것이 내가 해결 한 방법입니다

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

Question 7

위의 답변을 결합하면 아마도 당신에게 도움이 될 간단한 해결책을 찾을 수 있습니다.

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

인라인 JS 코드를 추가하기 만하면 링크의 버튼을 변형하고 그의 디자인을 유지할 수 있습니다.

Question 8

다음 코드를 추가하기 만하면됩니다.

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