web-dev-qa-db-ja.com

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

どのようにしてブートストラップを使ってボタンにリンクを張るのでしょうか。

ブートストラップのドキュメントには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番目のものは私が欲しいものであるボタンを示しています、しかしコードがクリックされたとき他のページへのボタンリンクを作るのはなぜ？

乾杯

htmltwitter-bootstrapbuttonhyperlink
61
Philayyy

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

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

あなたが本当にbutton要素を必要としないのであれば、単に通常のリンクにクラスを移動してください。

<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>
111
Domenic D.

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

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

それがあなたのために働いていない理由はあなたの言うように、あなたが使っているテーマの問題である可能性が最も高いです。これのために肥大化された余分なマークアップやインラインJavascriptに頼る理由はありません。

92
Andreas Bergström

<button>マークアップ内でリンクカラーを正しく機能させるためのもう1つのトリック

<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に変更

5
silvan

これが私が解決した方法です

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

上記の答えを組み合わせると、おそらくあなたにも役立つだろう単純な解決策が見つかるでしょう。

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

インラインのJSコードを追加するだけで、リンク内のボタンを変換し、そのデザインを維持することができます。

1
H. A.