ブートストラップ-フォームデモ

フォームレイアウト

Bootstrapは、次のタイプのフォームレイアウトを提供します-

• 垂直（デフォルト）フォーム
• インラインフォーム
• 横型

縦型または基本型

基本的なフォーム構造にはBootstrapが付属しています。個々のフォームコントロールは、自動的にグローバルなスタイルを受け取ります。基本的なフォームを作成するには、次のようにします。

• 親の<form>要素にロールフォームを追加します。

• ラベルとコントロールをクラス.form-groupで<div>にラップします。これは、最適な間隔のために必要です。

• .form-controlのクラスをすべてのテキストの<input>、<textarea>、および<select>要素に追加します。

インラインフォーム

すべての要素がインラインで、左揃えで、ラベルが並んでいるフォームを作成するには、クラス.form-inlineを<form>タグに追加します。

横型

水平フォームは、マークアップの量だけでなく、フォームの表示においても他のフォームとは一線を画しています。水平レイアウトを使用するフォームを作成するには、次のようにします。

• .form-horizo​​ntalのクラスを親の<form>要素に追加します。

• ラベルとコントロールをクラス.form-groupで<div>にラップします。

• .control-labelのクラスをラベルに追加します。

例	説明	ダウンロードリンク
ログインページ	この例は、Bootstrapのログインページ構造について示しています	ダウンロード
お問い合わせページ	この例は、Bootstrapの連絡先ページの構造について示しています	ダウンロード
サインアップページ	この例は、Bootstrapのサインアップページ構造について示しています	ダウンロード