Bootstrapのボタンを理解する【図解たっぷりBootstrap入門】

吉田先生

ボタンも簡単に作成できます。非常に美しくCall to Actionにも即役立つものが用意されていますよ。

ボタン

今回は Bootstrapのフォームを理解するのフォームでも使用した、ボタンについてみていきましょう。

ボタンの使い方には、大きく分けて２つあります。

一つは、ボタンを作成するための「button」タグを使う方法です。これは、フォームなどのボタンの時に使います。

もう一つは、リンクタグやinputタグで使用する方法です。リンクタグは他ページなどへの遷移の為のリンクボタンで使用します。インプットタグは、前のページに戻るというボタンなどで使用します。

ボタンのデザインのカスタマイズを学んでいきましょう。まず、ボタンタグ及び、ボタンのCSSクラスの構造を確認します。

タイプという属性は、「submit＝送信」や「button＝汎用的に使えるボタン」などのボタンの役割を指定します。フォームで使う場合は、入力内容を送信するので「submit」になります。

次にCSSクラスです。ボタンは、btnというCSSクラスを使用します。これは、ボタン作成の為のクラスです。

そしてもうひとつは、ボタンのデザインを指定する為のCSSクラスです。この部分は、Bootstrapで用意されているカラーテンプレートから任意のものを選び使用します。

では、一例ですが色々なデザインを見てみましょう。

ボタン内のテキストが配色名です。これを「btn-配色名」の部分に入れて使用します。

ボタンのサイズのカスタマイズ方法を見ていきます。用意されているボタンのサイズには、大きく分けて４種類あります。小・中（標準）・大・親要素の幅いっぱいの４種類です。

では、これら一つ一つの指定方法とイメージを見てみましょう。

標準サイズ（上から２番目）以外は、専用のCSSクラスが存在します。１番最後の親要素の幅いっぱいに広がる種類は、高さは標準タイプと同じくらいです。

Buttons-Bootstrapのページを見ながら、下図のように色々なデザインのボタンを表示させてみましょう。

使用しているクラスは書き込んである通りです。

そのままボタンのタグだけを打ち込んでしまうとぴったりとくっついてしまうので、間隔を<div class="container" style="margin-top:25px;">などスタイル直書きで開けて良いです。

・見出しタグやクラスには、沢山の種類がある

・装飾の為のタグも予め用意されている

・ボタンもカラー含め、テンプレートが複数存在する

・ボタンタグだけでなく、リンクタグなどでもテンプレートが使える