ボタンのサンプル




(参考)クラスを適用していないボタン

MM-S

Home News Photo Mail


<h1>ボタンのサンプル</h1>
<input type="button" value="戻る" class="btn btn-default" onclick="history.back();"><br>
<hr>
<h4 class="page-header">ボタン</h4>
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<br>
<h5>(参考)クラスを適用していないボタン</h5>
<button>Default</button>
<button>Primary</button>
<button>Success</button>
<button>Info</button>
<button>Warning</button>
<button>Danger</button>
<hr>
<h4 class="page-header">a要素ボタン(リンク)</h4>
<a href="http://www.mm-s.biz/"   class="btn btn-primary">MM-S</a>
<hr>
<h4 class="page-header">ボタンのサイズ</h4>
<button class="btn btn-primary btn-lg">Button Size</button>
<button class="btn btn-primary">Button Size</button>
<button class="btn btn-primary btn-sm">Button Size</button>
<button class="btn btn-primary btn-xs">Button Size</button>
<hr>

<h4 class="page-header">グリフアイコン</h4>
<a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-home"></span> Home
</a>
<a href="#" class="btn btn-primary btn-lg">
    <span class="glyphicon glyphicon-list-alt"></span> News
</a>
<a href="#" class="btn btn-warning btn-lg">
    <span class="glyphicon glyphicon-camera"></span> Photo
</a>
<a href="#" class="btn btn-danger btn-lg">
    <span class="glyphicon glyphicon-envelope"></span> Mail
</a>
<div class="btn-group pull-right">
    <button class="btn btn-default"><span class="glyphicon glyphicon-cog"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
</div>