Bootstrapで文字や表などをカッコよく表示しよう

業務Webアプリケーションエンジニアのための「Bootstrap」入門 第3回

ページネーション

　業務アプリで表示するデータ量が多くなると、スクロールなどを行う必要があり、見づらくなってきます。そこで1ページに表示する情報量を決めて、ページネーションをするとすっきりしたWebアプリになります。

番号によるページネーション

　ページ番号を表示してページネーションを使う時は、ui要素のclass属性に"pagination"を指定します。各ページ番号はui要素の子要素であるli要素に指定します。現在表示しているページを示すときは、li要素のclass属性に"active"を指定します。

　ページが選択できないように制御するときはli要素のclass属性に"disabled"を指定します。この場合であれば、1ページ目が先頭ページであり、1ページ目の前にページはありませんので、1ページ目がactiveの場合は［戻る］ボタンはdisableになっています。

　　また、ブラウザで確認すると"&laquo;"は「<<」、"&raquo;"は「>>」が表示されます。これは、HTMLで特殊文字を表示するもので、HTMLエンティティとよばれています。

リスト8　番号によるページネーション（pagination1.htmlの抜粋）

<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#1">1</a></li>
  <li><a href="#2">2</a></li>
  <li><a href="#3">3</a></li>
  <li><a href="#4">4</a></li>
  <li><a href="#5">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>
<hr />

　なお、大きなサイズのページネーションを配置するには、class属性に”pagination-lg”、 小さなサイズのページネーションを配置するには、class属性に”pagination-sm”を指定します。

番号によるページネーションの例

［戻る］［進む］によるページネーション

　カタログや画像などページ数ではなく、［戻る］［進む］ボタンで1ページごとページネーションをしたいときはul要素のclass属性に"pager"を指定します。

リスト9　pagerよるページネーション（pagination2.htmlの抜粋）

<ul class="pager">
  <li><a href="#">&laquo; 戻る</a></li>
  <li><a href="#">進む &raquo;</a></li>
</ul>

　また、［戻る］と［進む］のリンクボタンを画面の左右に配置したいときは、ul要素の子要素であるli要素のclass属性に［戻る］の場合は"previous"、［進む］の場合は"next"を指定します。

リスト10　番号によるページネーション（pagination1.htmlの抜粋）

<ul class="pager">
  <li class="previous"><a href="#">&laquo; 戻る</a></li>
  <li class="next"><a href="#">進む &raquo;</a></li>
</ul>

pagerによるページネーションの例

アラート

　アラートは、業務アプリでユーザになんらかの情報を伝えたいときに使用します。例えば、ユーザが誤ったデータを入力したときは、ユーザに対して、正しいデータの入力を促すための分かりやすい警告を表示する必要があります。ここでは情報を表示するためのコントロールを説明します。

アラート

　フォームでの入力値のバリデーションチェックを行ったときに、もし誤った値や必須入力項目が未入力のときは、アプリケーション利用者に適切な値を入力するよう促す、アラートを表示します。アラートを使う時は、div要素のclass属性に”alert”を指定します。アラートは情報の内容によって以下の値が指定できます。

アラートの色

用途	class属性の指定	色
成功	alert-success	緑
情報	alert-info	水色
注意	alert-warning	オレンジ
警告	alert-danger	赤

　アラートの中にリンクを含めるときは、a要素のclass属性に"alert-link"を指定します。

リスト11　アラート（alert1.htmlの抜粋）

<div class="alert alert-success">成功</div>
<div class="alert alert-info">情報</div>
<div class="alert alert-warning">注意</div>
<div class="alert alert-danger">警告
    <a href="#" class="alert-link">クリック</a>するとリンクします
</div>

アラートの例

削除ボタン付きのアラート

　アラートは、ユーザが確認し終わったら削除できるようにしておくと画面がすっきりします。削除ボタンのついたアラートを配置するには、div要素のclass属性に"alert-dismissible"要素を指定します。アラートの中に表示する削除ボタンは、button要素のclass属性に"close"、data-dismiss属性に"alert"を指定します。"&times;"HTMLエンティティで「×」が表示されます。

リスト12　削除ボタン付きのアラート（alert2.htmlの抜粋）

<div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">
        <span>&times;</span>
    </button>
    削除ボタン付きのアラート
</div>

削除ボタン付きアラートの例

おわりに

　今回の記事では、Webアプリの中で表示する情報やデータを効果的に表示するためのUIコントロールについて説明しました。

　次回は、Webアプリケーションを作るうえで欠かせないナビゲーションバーをご紹介します。