twitter-bootstrap-3
twitter-bootstrap-3のボタン

twitter-bootstrap `btn`クラスの使用

Twitter-bootstrapのbtnクラスは、次のhtml要素のどれでも使用できます。

1. アンカー
2. ボタン
3. with both type="button" and type="submit"入力

以下は、 btnクラスのすべての可能な使用例の例です

<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

上の4つの方法のいずれかでbtnクラスを使用できますが、できる限り<button>要素を使用することを強くお勧めし<button>

上のコードの画像が下に添付されています

ソース

twitter-bootstrap-3の異なるサイズのボタン

twitter-bootstrap-3は4つの異なるサイズのボタンを提供しています

1. 大きなボタンbtn-lg
2. デフォルトボタンdoes not require any btn size
3. 小さなボタンbtn-sm
4. 超小型ボタンbtn-xs

 <button type="button" class="btn  btn-lg">Large button</button>
 <button type="button" class="btn">Default button</button>
 <button type="button" class="btn  btn-sm">Small button</button>
 <button type="button" class="btn  btn-xs">Extra small button</button>

上のコードの画像が下に添付されています

ソース

ボタンにグリフィコンを追加する

グリフコンは、テキスト、ボタン、ツールバー、ナビゲーション、フォームなどで使用できます（出典：W3Schools）。グリフィコンは、基本的に上記のいずれかのスタイルに使用できるアイコンフォームです。これらの例では、グリフコン型のクラスを持つボタンの内側のスパンを使用するだけで、2種類のボタンの中でグリフコンの使用法の概要を説明します。

HTMLボタン

<button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
</button>

ASPボタン

<asp:LinkButton runat="server" CssClass="btn btn-info" >
    <span class="glyphicon glyphicon-envelope"></span> Email
</asp:LinkButton>