JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【Bootstrap入門】ボタンのサイズを変更するクラス（btn-lg・btn-sm・btn-block）の使い方

Bootstrapでは、専用のクラスをボタンに追加するだけで、サイズを簡単に調整できます。ここでは、ボタンの大きさを制御するための主要なクラスと、実際のサンプルコードをわかりやすく解説します。

ボタンのサイズを指定できるクラス一覧

クラス名説明
.btn-lgボタンを通常より大きいサイズ（Large）にします。
.btn-smボタンを小さいサイズ（Small）にします。
.btn-xsボタンを極小サイズ（Extra Small）にします。
※Bootstrap 3までのクラスで、Bootstrap 4以降では廃止されています。
.btn-blockブロックレベルのボタンを作成します。親要素の幅いっぱいに広がるボタンになります。

サンプルコード：小さいボタンを作成する

次のコードを実行すると、.btn-sm を使った小さいサイズのボタンを表示できます。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    <meta name = "viewport" content = "width = device-width, initial-scale = 1">
    <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
    <button type = "button" class = "btn btn-secondary btn-sm">
        小さいボタン
    </button>
</body>
</html>

その他のサイズクラスの使用例

同じ要領で、.btn-lg を指定すれば大きなボタンに、.btn-block を指定すれば横幅いっぱいに広がるボタンになります。

<!-- 大きいボタン -->
<button type="button" class="btn btn-primary btn-lg">大きいボタン</button>

<!-- ブロックレベルボタン（親要素の幅いっぱい） -->
<button type="button" class="btn btn-success btn-block">ブロックボタン</button>

補足：バージョンによる違いに注意

Bootstrap 4以降では、旧バージョンで使われていた .btn-default が廃止され、代わりに .btn-secondary や .btn-light などのスタイルクラスが導入されています。また、前述のとおり .btn-xs もBootstrap 4から削除されているため、バージョンごとの仕様差には注意が必要です。

  1. PowerPointプレゼンテーションにアクションボタンを追加する方法【初心者向け解説】

    PowerPointのスライドにアクションボタンを追加すると、プレゼンテーションがよりインタラクティブになり、閲覧者にとって使いやすいものになります。意外と知られていないこの機能は、アプリケーションのやや分かりにくい場所にありますが、上手に活用すれば発表の質を大きく向上させることができます。 アクションボタンを活用すれば、プレゼンテーション内の移動が格段に簡単になり、スライドがWebページのように動作するようになります。 アクションボタンを追加する前の準備 PowerPointプレゼンテーションにアクションボタンを追加する前に、まず閲覧者がどのようにプレゼンテーションを使用するのかを慎重に検討

  2. iPhone Xを使いこなすための便利なテクニック9選

    iPhone XはこれまでのiPhoneとはまったく異なるモデルで、ディスプレイ、顔認証、Animoji、そしてジェスチャー操作によってすべてをコントロールする、スマートフォンの新時代の幕開けを象徴する存在です。しかし、ホームボタンがないことに「不便そう」「難しそう」と感じる方も多いのではないでしょうか。変化に慣れるには時間がかかるものですが、より良い方向への進化であれば、その努力は十分に価値のあるものになります。 そこで本記事では、新しいiPhone Xを快適に使いこなすための隠れた便利機能やヒントをまとめました。ぜひ参考にして、より良いユーザー体験をお楽しみください。 Appleの未来型U