【初心者の方向け】 Bootstrap4の使い方 ボタン作成

Bootstrapには予めボタンのスタイルも定義されています。

問い合わせフォームであったり、覚えておくと便利かと思います。

今回はボタンについて詳しく説明いたします。

Bootstrap4のバージョン4.3をベースに書いています。

ボタンの基本について

<button>のクラス名にbtnを記述することでCSSが適用されます。

<button type=”button” class=”btn btn-○○”>ボタン</button>

このような書き方になります。btn-○○の部分は色を指定します。Bootstrapで用意されている色については、前回書いたカラーの記事を参考にしてください。ちなみに、btnのクラス名は単独での使用はできないです。

参考としてボタンを表示してみます。

• Primary
• Secondary
• Success
• Danger

コードはこんな感じです。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>

 <button>以外での使用

btnクラスは<button>要素と一緒に使用するよう設計されていますが、<a>や<input>要素にも使用することができます。

このふたつの要素を使用すると、リンク用のボタンや送信用のボタンとして利用ができます。

<a>要素を使用したボタン

リンク

コード

<a class="btn btn-primary" role="button" href="#">リンク</a>

<input>要素を使用したボタン

コード

<input class="btn btn-primary" type="submit" value="送信" />

アウトラインに色をつけたボタン

btn-outline-○○のクラスを指定。
アウトラインのみに色を指定することもできます。
マウスオーバーやタップ時に指定した色がボタンの背景色に切り替わります。

• Primary
• Secondary
• Success
• Danger

コード

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

ボタンのサイズ

btn-lgまたはbtn-smのクラスを追加することによってサイズが変わります。

ボタンサイズ　小
ボタンサイズ　大
コード

<button type="button" class="btn btn-primary btn-sm">ボタンサイズ　小</button>
<button type="button" class="btn btn-primary btn-lg">ボタンサイズ　大</button>

ブロックレベルでのボタン

btn-blockで、ブロックレベル（親の全幅にまたがる）での表示が可能になります。
他のクラスを付けることにより、デスクトップでは親の50％幅に指定→モバイルでは全幅に表示といったこともできます。

ブロックレベルボタン
コード

<button type="button" class="btn btn-primary btn-block">ブロックレベルボタン</button>

この他に、<label>要素にボタンスタイルを適用して、チェックボックスやラジオボタンをデザインすることも可能です。

チェックボックスやラジオボタンなどフォームに関する使い方は、別の機会で書きたいと思います。

関連投稿:

【初心者の方向け】 Bootstrap4の使い方 余白 【初心者の方向け】 Bootstrap4の使い方 ドロップダウン 【初心者の方向け】 Bootstrap4の使い方 フォーム 【初心者の方向け】 Bootstrap4の使い方 カルーセル