フォームを作る
以下で説明するように、ビジュアル的にかなり良いフォームを作る事が出来ます。
また、HTML5になるとフォームにdatetimeなどを指定する事で自動でカレンダーが出るような効果が有りますが、それにも対応しているようです。
Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. 公式サイト
ただ、HTML5のサポートが各ブラウザで実装され、ユーザーの多くがこれの恩恵を受ける、或いはそれでも旧ブラウザを使い続けるユーザーを切り捨てるに至るには、 まだまだ何年も掛かると思うので、今のとこは無視しておいて良いと思います。
テキスト入力系
先ず、そのまま使うとテキストフォームの幅は常に100%になるようです。*インラインは次のページにて
ですので、size="10" などと幅を変更しようと思っても効きません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <form> <div class="form-group"> <label for="email">メールアドレス</label> <input type="email" class="form-control" id="email" placeholder="メールアドレスを記入" size="10"> </div> <div class="form-group"> <label for="passwd">パスワード</label> <input type="password" class="form-control" id="passwd" placeholder="パスワードを記入"> </div> <div class="form-group"> <label for="comment">ご意見をどうぞ</label> <textarea class="form-control" rows="3" id="comment" placeholder="ご意見をどうぞ"></textarea> </div> <button type="button" class="btn btn-primary">送信 ≫</button></form> |
フォームの大きさ
input-{sm,lg}
-lgと-smが指定できるようです。
1 2 3 | <input type="text" class="form-control input-sm" id="text" placeholder="input-sm"><input type="text" class="form-control" id="text" placeholder="無指定"><input type="text" class="form-control input-lg" id="text" placeholder="input-lg"> |