Bootstrap学習ノート(2)Form


Form


form制御のinput,textarea,selectラベルはBootstrapでスタイルのサポートがあり、lists,checkboxラベルもサポートされています.各formのステータス情報(エラー、警告、成功など)はスタイルに含まれます.Bootstrapは2.0のバージョンで4つのformスタイルを提供しています.
1、Vertical(デフォルト)
2、Search
3、Inline
4、Horizontal
以前のバージョンではHorizontalがデフォルトでしたが、現在のバージョンではVerticalがデフォルトです.

vertical form


まずvertical formの例を示します.
   
   
   
   
Twitter Bootstrap Version2.0 default form layout example   
   
  
  
  
Associated help text!
verticalはデフォルトformスタイルなのでclassのform-verticalは省略できます.ここでclassのwell値はformにcontainerを作成します(他の用途もあります).

search form


ここではsearch formの例です.
   
   
   
   
Twitter Bootstrap Version2.0 search form layout example   
   
  
  
  
  
  
  
ここのformタグおよびその後のinputタグとbuttonタグには特殊なclassが付加されています.ここでinputはblock-levelの要素に設定されています

Inline form


次にinline formの例を示します.
   
   
   
   
Twitter Bootstrap Version2.0 inline form layout example   
   
  
  
  
ここでformにform-inlineのclassが追加されたのは、インラインformであることを示しています.ここでinputはinline-levelの要素です.

义齿


まずここまでにしましょう.私のような初心者は、Bootstrapのcss部分を簡単に適用して、しばらくはそれぞれの特殊なスタイルに対応するclass値について理解していますが、本当に身につけることはチュートリアルを見るだけではなく、多くの練習をすることが一番重要でしょう.
チュートリアル:http://www.w3resource.com/twitter-bootstrap/forms-tutorial.php