Bootstrapには予めボタンのスタイルも定義されています。
問い合わせフォームであったり、覚えておくと便利かと思います。
今回はボタンについて詳しく説明いたします。
Bootstrap4のバージョン4.3をベースに書いています。
ボタンの基本について
このような書き方になります。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>
btnクラスは
このふたつの要素を使用すると、リンク用のボタンや送信用のボタンとして利用ができます。
リンク
コード
<a class="btn btn-primary" role="button" href="#">リンク</a>
要素を使用したボタン
コード
<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>
この他に、
チェックボックスやラジオボタンなどフォームに関する使い方は、別の機会で書きたいと思います。
