Twitter Bootstrap 3 の基本　ボタンのサンプル

今回はボタンの作成をしていきます。１から綺麗なボタンを作成しようとすると、画像を作成しなければならなかったり、JavaScriptを組まなければならなかったり、色々と手間がかかります。
Bootstrapを使用すると、どの程度簡単になるのでしょうか。早速サンプルをみていきましょう。

サンプル：様々なボタン

<div class="container-fluid">
<h1>ボタンの作成</h1>
    <p>
        「a」「button」「input」タグに「btn」と「btn-～」クラスを付与します。<br>
        <a class="btn btn-default" href="#">aタグで作成したボタン</a>
        <button class="btn btn-default" type="submit">buttonタグで作成したボタン</button>
        <input class="btn btn-default" type="submit" value="inputタグで作成したボタン">
    </p>
 
    <p>
        「btn-～」のクラス名を変えることで、ボタンの色を変更します。<br>
        <button type="button" class="btn btn-default">btn-default</button>
        <button type="button" class="btn btn-primary">btn-primary</button>
        <button type="button" class="btn btn-success">btn-success</button>
        <button type="button" class="btn btn-info">btn-info</button>
        <button type="button" class="btn btn-warning">btn-warning</button>
        <button type="button" class="btn btn-danger">btn-danger</button>
        <button type="button" class="btn btn-link">btn-link</button>
    </p>
    <p>
        「btn-～」でサイズを指定することもできます。<br>
        <button type="button" class="btn btn-default btn-lg">btn-lg</button>
        <button type="button" class="btn btn-default">指定なし</button>
        <button type="button" class="btn btn-default btn-sm">btn-sm</button>
        <button type="button" class="btn btn-default btn-xs">btn-xs</button>
    </p>
    <p style="width:300px;">
        「btn-block」で親要素の横幅に広がります。
        <button type="button" class="btn btn-default btn-block">btn-block</button>
    </p>
    <p>
        ボタンを押下状態、押下不可状態にするには、それぞれ「active」「disabled」を指定します。<br>
        <a href="#" class="btn btn-default btn-lg active">押下状態</a>
        <a href="#" class="btn btn-default btn-lg disabled">押下不可状態</a>
        <button type="button" class="btn btn-default btn-sm active">押下状態</button>
        <button type="button" class="btn btn-default btn-sm" disabled="disabled">押下不可状態</button>
    </p>
</div><!-- /container -->