Bootstrap3 で Form を使うときに最低限押さえて忘れたくないことをメモ

まとめ

• とりあえず始めるなら、Getting started · Bootstrap Bootstrap CDN で読み込むのが楽。
  • Latest compiled and minified CSS は必須。
  • Optional theme は必要になることの方が少なそう。
  • Latest compiled and minified JavaScript は必要なときは必要。Bootstrap3 と同時に使うプラグインはこれをよく利用している印象。
• ページのメイン部分 (ヘッダー部分やフッター部分を除いたコンテンツ部分) は、<div class="container"> と </div><!-- /.container --> で囲む。
  • ソースは Getting started · Bootstrap の Starter template、Bootstrap theme、Grids の HTML ソース。
• form
  • 日本語で最初に読むと良いページ -> モバイル・ファーストな基本スタイル ≪ フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス
  • 安心と充実の英語本家ページ -> CSS · Bootstrap Forms

Form について

• input は必ず囲む。
  • text系 (text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.): <div class="form-group">
  • 他： <div class="checkbox">、<div class="radio">、<select class="form-control">、、、、
• label の右に入力フォームを並べたい場合
  1. form に class="form-horizontal" をつける。
  2. 大体は、label に class="col-sm-2 を付け、input を <div class="col-sm-10"> で囲む。

Form 応用編

• 基本的に form-horizontal としたいが、一部の項目だけ入力フォームを横に並べたい (form-inline) (例。ラベル: 開始終了時刻、フォーム左から1番目: 開始時刻、フォーム左から2番目: 終了時刻) 場合

例えば、次のようにすればうまくいきました。

        <div class="container">
            <h1>Bootstrap Timepicker サンプル</h1>
            <form action="index" method="post" class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="input_fullname">氏名</label>
                    <div class="col-sm-10">
                        <input id="input_fullname" name="fullname" type="text" class="form-control" placeholder="氏名">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="input_email">メール・アドレス</label>
                    <div class="col-sm-10">
                        <input id="input_email" name="email" type="email" class="form-control" placeholder="メール・アドレス">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="start_time">開始終了時刻: </label>
                    <div class="col-sm-10">
                        <div class="form-inline">
                            <div class="input-group bootstrap-timepicker timepicker">
                                <input id="start_time" name="start_time" type="text" class="form-control input-small">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                            </div>
                            <script type="text/javascript">
                                $('#start_time').timepicker({
                                minuteStep: 1,
                                showMeridian: false
                            });
                            </script>
                            <span> 〜 </span>
                            <div class="input-group bootstrap-timepicker timepicker">
                                <input id="end_time" name="end_time" type="text" class="form-control input-small">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                            </div>
                            <script type="text/javascript">
                                $('#end_time').timepicker({
                                minuteStep: 1,
                                showMeridian: false
                            });
                            </script>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">送信</button>
                    </div>
                </div>
            </form>
        </div><!-- /.container -->

おわりに

Bootstrap3 を使ったシステムで、プラグインの利用を検討したい場合、サクッとサンプルページが作れれば検討に集中できます。

ところが！

サクッと作れません＞＜。

今回は Timepicker for Twitter Bootstrap を検討したかったのです。

もう、時間がかかるかかる＞＜。

Bootstrap3 は、慣れれば非常に便利なのですけれども、時間が経って忘れてしまうと、HTML をパッと見た時のネストの深さに絶望してしまいます。

そこで、とうとう投稿としてメモいたしました♪

以上です。