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

フォームレイアウト

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のサインアップページ構造について示しています ダウンロード