ProgramingTip

부트로 버튼에 링크를 추가하는 방법은 무엇입니까?

bestdevel 2020. 10. 22. 22:17
반응형

부트로 버튼에 링크를 추가하는 방법은 무엇입니까?


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

부트 가능한 문서에는 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">

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

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

건배


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

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

그것이 당신을 위해 작동하지 않는 이유는 당신이 말하는 테마의 문제 일 가능성이 먹을 것입니다. 이를 위해 추가 마크 업이나 인라인 자바 확장에 의존 할 이유가 없습니다.


<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


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

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

참고 URL : https://stackoverflow.com/questions/36003670/how-to-put-a-link-on-a-button-with-bootstrap

반응형