ASP.NETに採用されたBootstrapでCSSデザイン変更

CodeZine / 2014年7月8日 14時0分

Bootswatchのuniteテーマを適用して赤色に変更

 この記事では、ASP.NET MVC5のひな形ページで使用されているBootstrapについて紹介します。Bootstrapは、CSSとJavaScriptをベースとしたオープンソースで、デザインが得意ではないエンジニアでも見栄えの良いページを作ることができる魅力的なライブラリです。初回はBootstrapの概要について、前回はグリッドシステムについて紹介してきました。最終回にあたる本稿ではフォームコンポーネントとデザインの変更について紹介していきます。

■フォームコンポーネント

 ここでは、データ登録などで使用することが多いフォームの機能についてご紹介します。ひな形で生成されるアカウント登録ページを例に説明します。

アカウント登録画面(PC)


 まずは生成されるHTMLを見てみましょう。

アカウント登録ページで生成されたHTML(Form部のみ抜粋)
<!-- フォーム部分 --> <form class="form-horizontal" role="form" action="/Account/Register" method="post" novalidate="novalidate"> <input name="__RequestVerificationToken" type="hidden" value="prXfel..."> <h4>新しいアカウントを作成します。</h4> <hr> <div class="validation-summary-valid" data-valmsg-summary="true"> <ul> <li style="display: none;"></li> </ul> </div> <!-- (1)ユーザー名 --> <div class="form-group"> <label class="col-md-2 control-label" for="UserName">ユーザー名</label> <div class="col-md-10"> <input name="UserName" class="form-control valid" id="UserName" type="text" value="" data-val-required="ユーザー名 フィールドが必要です。" data-val="true"> </div> </div> <!-- (2)パスワード --> <div class="form-group"> <label class="col-md-2 control-label" for="Password">パスワード</label> <div class="col-md-10"> <input name="Password" class="form-control input-validation-error" id="Password" type="password" data-val-required="パスワード フィールドが必要です。" data-val="true" data-val-length-min="6" data-val-length-max="100" data-val-length="パスワード の長さは、6 文字以上である必要があります。"> </div> </div> <!-- (3)パスワードの確認 --> <div class="form-group"> <label class="col-md-2 control-label" for="ConfirmPassword">パスワードの確認入力</label> <div class="col-md-10"> <input name="ConfirmPassword" class="form-control input-validation-error" id="ConfirmPassword" type="password" data-val="true" data-val-equalto-other="*.Password" data-val-equalto="'パスワードの確認入力' と 'パスワード' が一致しません。"> </div> </div> <!-- (4)登録ボタン --> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input class="btn btn-default" type="submit" value="登録"> </div> </div> </form>
 Bootstrapのフォームでは、クラス名にform-groupと記載することで、ラベルとテキストボックスの見ばえを整頓できます。テキストボックスにform-controlと記載すると、入力枠が丸みを帯び、カーソルが移動した時に青色でフォーカス表示されます。

 フォームでは、下表のクラス名を設定できます。

フォーム系で指定できるBootstrapのクラス例 要素例 クラス名 説明 form form-group ラベルとテキストを整列 form form-inline 横に並べて(インライン)整列 form form-horizontal ラベルとテキストを水平に並べて整列 input/textarea/select form-control 入力コントロールの見栄え改善 input/textarea/select input-xs サイズ極小 input/textarea/select input-sm サイズ小 input/textarea/select input-md サイズ中 input/textarea/select input-lg サイズ大 div has-success 正常時 div has-warning 警告あり div has-error エラーあり label control-label 説明用ラベルを整列 フォームの設定項目の詳細は公式サイトの説明をご覧ください。



CodeZine

トピックスRSS

ランキング