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
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
Twitter Bootstrap Version2.0 default form layout example
Twitter Bootstrap Version2.0 search form layout example
Twitter Bootstrap Version2.0 inline form layout example