2 flat logo on transparent 256
2018-07-05

Bootstrapでボタンの色や大きさを変更する|コピペで動くサンプル付き

Button sample02121

通常のhtml要素のbuttonクラスではデザインがイケてない場合が多いですが、Bootstrapのbuttonクラスを利用すれば、ボタンの用途毎にそれっぽいデザインにすることが可能です。

以下はデザインの一例です。

今回もコピペで動くサンプルコード付きです。

ボタンクラスのサンプルコード

以下内容をメモ帳などに、保存しhtml形式で展開すれば 実際に内容を確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ボタン</title>
    <!--CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $('#sample-button').on('click', function () {
                $(this).button('loading');

            });
        });
    </script>
    <style>
        .m-30 {
            margin-top: 30px;
        }
    </style>
</head>

<div class="m-30">
    <div>ボタンのデザインを変更する</div>
    <!-- デフォルトのデザイン  -->
    <button type="button" class="btn btn-default">Default</button>

    <!-- btn-primary-->
    <button type="button" class="btn btn-primary">Primary</button>

    <!-- btn-Success-->
    <button type="button" class="btn btn-success">Success</button>

    <!--btn-Info-->
    <button type="button" class="btn btn-info">Info</button>

    <!--btn-Warning-->
    <button type="button" class="btn btn-warning">Warning</button>

    <!--btn-Danger-->
    <button type="button" class="btn btn-danger">Danger</button>

    <!--btn-link-->
    <button type="button" class="btn btn-link">Link</button>
</div>
<div class="m-30">
    <div>大きさを変更する</div>

    <!-- btn-primary btn-lg-->
    <button type="button" class="btn btn-primary btn-lg">Primary</button>

    <!-- btn-Success btn-sm-->
    <button type="button" class="btn btn-success">Success</button>

    <!--btn-Info btn-xs-->
    <button type="button" class="btn btn-info btn-xs">Info</button>

    <div class="m-30">
        <!--btn-Info btn-lg  btn-block-->
        <button type="button" class="btn btn-primary btn-block">Block level button</button>

    </div>

</div>

<div class="m-30">

    <!-- ボタンを押すと非活性になる-->
    <button type="button" id="sample-button" class="btn btn-default" data-loading-text="実行中" autocomplete="off">
        このボタンを押すと実行中になる
    </button>

</div>

</body>
</html>

サンプルコードの解説

ボタンクラスの色を変更する

ボタンクラスの色を変更するに以下の通りCSSでbtnクラスとその後に設定したい色のクラスを設定すれば対応できます。

    <!-- btn-Success-->
    <button type="button" class="btn btn-success">Success</button>

上記、class="btn btn-success"で青色のボタンを設定する事が可能です。

ボタンクラスの大きさを変更する

ボタンクラスの大きさを変更するには、以下の通りCSSでbtnクラスとその後にbtn-lgやbtn-smを設定するとBootstrapで指定さているテンプレートの大きさに変更されます。

    <!-- btn-primary btn-lg-->
    <button type="button" class="btn btn-primary btn-lg">Primary</button>

    <!-- btn-Success btn-sm-->
    <button type="button" class="btn btn-success">Success</button>

    <!--btn-Info btn-xs-->
    <button type="button" class="btn btn-info btn-xs">Info</button>

btn-block

div要素いっぱいにボタンを設定する場合は、btn-blockを設定すればdiv要素いっぱいまでボタンの大きさが拡張されます。

        <!--btn-Info btn-lg  btn-block-->
        <button type="button" class="btn btn-primary btn-block">Block level button</button>

ボタンを押すと非活性にする

以下はボタンを押すと 実行中というテキストに変更され、 ボタンを押せなくなります。

data-loading-text= の部分がクリックした際のテキストの設定になります。

    <button type="button" id="sample-button" class="btn btn-default" data-loading-text="実行中" autocomplete="off">
        このボタンを押すと実行中になる
    </button>

非活性にする際はjavaScriptになり、サンプルコードの上部のhead部分に設定しています。

  <script>
        $(function () {
            $('#sample-button').on('click', function () {
                $(this).button('loading');

            });
        });
    </script>

以上になります。

その他関連記事

現役デザイナーが教える! デザインを勉強する上で参考になりそうなサイトとその理由

CSS3でhoverした時に背景をふわっと変更する|コピペで動くサンプル付き

Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き

サイトへ簡単にアイコンを無料設定できる|Font Awesomeの使い方|サンプルコード付き)

Bootstrapでパンくずリストを設定する|コピペで動くサンプル付き

Vue.jsでSVGのアイコンを操作する|コピペで動くサンプル付き

前の記事
次の記事