ブートストラップでボタンにリンクを張るにはどうすればいいですか？

Question

ブートストラップ付きのボタンにリンクを張るにはどうすればよいですか？

ブートストラップドキュメントの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"> 

は、最初のものは私のために動作しません、何のボタンを示し、リンクを単なるテキストは、使用して、そのテーマイムを感じていません。

2番目のボタンは私が欲しいものですが、クリックするとコードがボタンのリンクを別のページにしますか？

乾杯

Answer 1

あなたは、ボタンのクリックイベントに関数を呼び出すことができます。

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

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

OR 使用このコード

<input type="button" class="btn btn-info" value="Input Button" onclick="location.href = 'http:\\www.google.com';"> 

Answer 2

あなたが本当にボタン要素を必要としない場合は、普通のリンクにクラスを移動します。逆に

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

Answer 3

最も簡単な解決策は、あなたの例の最初のものである：

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

それはあなたのために働いていない理由は、あなたの言う、あなたが使用しているテーマで問題として、最も可能性が高いです。このために膨大な余分なマークアップやインラインJavascriptに頼る必要はありません。例えばBS4のベータ版であることを覚えておいてください

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

Answer 4

もう一つのトリックは<button>マークアップ内で正常に動作してリンクの色を取得します

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

だけインラインJSのコードを追加することによって、あなたは、リンクのボタンを変換し、彼のデザインを維持することができます。btn-outline-primaryは、私はおそらくあまりにもあなたを助けるだけで解決策を見つける上記の回答を組み合わせるbtn-outline-primary

Answer 5

に変更します。