bootstrap 表單
簡介在本教程中，您將學習如何使用 bootstrap 2.0 工具包來建立表單。
bootstrap 已經為 input、textarea 和 select 等表單控制項定義樣式，支援列表和核取方塊，為禁用的表單控制項定義樣式，包括每個表單控制項的錯誤、警告、成功狀態。
自版本 2.0 起，bootstrap 提供了四中型別的表單布局 -
垂直(預設)
搜尋內聯
水平在 bootstrap 的上乙個版本中，表單布局預設是水平布局。但是，自版本 2.0 起，垂直布局是預設布局。
建立垂直表單布局
為 bootstrap.css 中 .form-vertical class 的 bootstrap 預設表單布局(即垂直表單)定義樣式。但是由於這是預設表單布局，在通過預設布局建立表單的時候，不需要規定 .form-vertical class。下面的例項演示乙個通過 bootstrap 2.0 預設表單布局建立的表單。
.well class 用於建立表單的容器(當然，它還有其他用途)。這個 class 可在 bootstrap.css 中行號 1650 到 1663 找到。對於這個布局，輸入框是塊級的(block level)。下面的例項演示如何使用 bootstrap 建立乙個預設表單布局。
例項標籤名稱
相關幫助文件 ！
選中我提交建立搜尋表單布局
使用位於 bootstrap.css 中行號為 962 到 1003 (這些行也包含了 .form-inline 的樣式)的 .form-search class，來建立乙個搜尋表單。對於這個布局，輸入框是塊級的(block level)。下面是乙個例項：
例項搜尋
建立內聯表單布局
使用位於 bootstrap.css 中行號為 962 到 1003 (這些行也包含了 .form-search 的樣式)的 .form-inline class，來建立乙個內聯表單。對於這個布局，輸入框是內聯的(inline)。下面是乙個例項：
例項記住我
登入建立水平表單布局
使用位於 bootstrap.css 中的 .form-horizontal class，來建立乙個水平表單。對於這個布局，輸入框是塊級的(block level)。下面是乙個例項：
例項bootstrap 支援的控制項
文字輸入
除了自由格式文字，一些html5基於文字的輸入像這樣呈現。
確認框選中選項，確認此項正確。
選擇列表
something 多選
檔案上傳
文字區域
儲存修改
取消bootstrap 表單控制項的瀏覽器狀態
當輸入字段獲得焦點或者輸入欄位被禁用或者字段唯讀時，bootstrap 已經為這些定義樣式。在 bootstrap.css 中從行號 677 到 697，為獲得焦點的輸入框和輸入域元素定義了樣式。
首先，webkit "outline" 作為 ":focus" 的值使用，但是現在已經變為 " box-shadow"。
下面是乙個例項，展示了獲得焦點的輸入框、唯讀的輸入框、禁用的輸入框、禁用的核取方塊和禁用的按鈕的樣式如何改變。
例項bootstrap支援的控制項
焦點輸入
除了自由格式文字，一些html5基於文字的輸入像這樣呈現。
唯讀輸入
除了自由格式文字，一些html5基於文字的輸入像這樣呈現。
禁用輸入
除了自由格式文字，一些html5基於文字的輸入像這樣呈現。
確認框 (禁用)
選中選項，確認此項正確。
儲存修改 (禁用按鈕)
取消為表單驗證定義樣式
bootstrap 2.0 可以為驗證表單時的錯誤、警告、成功狀態定義樣式。這是很好的特性，由於當使用者提交表單資料發生錯誤時，或者需要生成乙個警告時，甚至是通知使用者已經成功提交資料時，需要向使用者展示不同的樣式。
這裡有乙個例項：
例項表單驗證錯誤，警告或成功
輸入錯誤
請糾正錯誤
輸入警告
出現一些錯誤
成功輸入
成功輸入
選擇成功
選擇成功
Bootstrap橫向表單
在form上應用.form horizontal 2.使用柵格系統 3.實際操作 1 新建乙個demo03.html，接著再開啟demo03.html，將移動裝置優和css檔案先匯入到標頭檔案 貼上過來就行了 儲存一下。name viewport 移動裝置優 content width device...
bootstrap 表單樣式
為了獲得乙個好看的form表單空間，我們需要如下的操作 效果圖如下 我們首先通過form horizontal類來指定我們的表單空間是水平排列的，即標籤和輸入框在乙個水平線上，然後我們通過form group來使得表單控制項佔滿整個容器的寬度，然後通過col sm x來指定標籤和空間各自所佔的距離，...
Bootstrap筆記 表單
基礎表單 水平表單 內聯表單 form group通常將一組控制項放在該類裡，設定下邊距 單行輸入框 type型別，如果沒有指定type型別，將無法得到正確的樣式 form control讓控制項在各種表單風格中樣式不出錯 placeholder提示輸入 下拉選擇框 1 1文字域核取方塊 單選框核取...