Bootstrapで業務Webアプリのカッコいい入力フォームを作る

対象読者

　本記事は、次の方を対象にしています。

• HTML5／CSS／JavaScriptを使ってWebアプリケーションの画面作成ができる方
• デザインに自信のない方

ボタン

　Webアプリでは、さまざまな処理を行うのでUIとしてボタンを配置しますが、このボタンの押しやすさや分かりやすさは、アプリの操作性に大きくかかわってきます。ここでは、Bootstrapのボタンを利用する方法について説明します。

スタイル

　Bootstrapのボタンはbutton要素／a要素／input要素のclass属性に"btn"を指定すると、スタイル指定ができます。

<button type="button" class="btn btn-default">button要素</button>
<a href="#" class="btn btn-default">a要素</a>
<input type="button" class="btn btn-default" value="input要素">

ボタンの表示例

　警告や注意などボタンの用途によって、デザインを変えるには、class属性に以下の属性を指定します。class属性は複数の値を指定できます。複数の値を指定するときは、値をスペースで区切ります。

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

ボタンスタイルの例

サイズ

　ボタンのサイズを指定するには、class属性にボタンサイズを指定します。指定できるサイズは次のとおりです。

<button type="button" class="btn btn-lg">大きなボタン</button>
<button type="button" class="btn">デフォルトボタン</button>
<button type="button" class="btn btn-sm">小さいボタン</button>
<button type="button" class="btn btn-xs">とても小さいボタン</button>

ボタンサイズの例

　サイズを固定するには、class属性に"btn-block"を指定します。サイズは、親コントロールの幅に応じて設定されます。

<button type="button" class="btn btn-block">サイズ指定</button>
<hr />
<div class="row">
    <div class="col-xs-8">
<button type="button" class="btn btn-block">ボタン1</button></div>
    <div class="col-xs-4">
<button type="button" class="btn btn-block">ボタン2</button></div>
</div>

ボタン幅固定の例

有効化／無効化

　ボタンを選択できる状態（有効化）にするには、class属性に"active"を指定します。また、ボタンを選択できない状態（無効化）にするには、disabled属性を指定します。無効化すると、ボタンの表示色が淡い色に変わります。

<button type="button" class="btn active">有効なボタン</button>
<button type="button" class="btn" disabled="disabled">無効なボタン</button>

ボタンの有効化／無効化の例

グループ化

　関連するボタンをまとめてグループするには、class属性に"btn-group"を指定したdiv要素でボタンをまとめます。ボタンの隙間がなくなり、端のボタンのみ角が丸くなります。

<div class="btn-group">
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
</div>

ボタンのグループ化の例

アイコン付ボタン

　アプリの操作に関する説明を文章で表示するより、直感的に分かるアイコンで表示すると分かりやすいボタンが作成できます。ボタンにアイコンを挿入するには、span要素のclass属性に"glyphicon"を指定します。使用できるグリフアイコンの一覧は以下のサイトにあります。

• Components ・ Bootstrap

　例えば、ホームアイコンを表示するときは、class属性に"glyphicon-home"を指定します。

<button type="button" class="btn">ホーム
    <span class="glyphicon glyphicon-home"></span>
</button>
<button type="button" class="btn">ダウンロード
    <span class="glyphicon glyphicon-download"></span>
</button>

アイコン付きボタンの例