bootstrap中的表單

1、最普通最簡單的表單形式，代碼以下：

1.<label>標籤用於標識須要輸入內容的名稱類別，其中placeholder 屬性提供可描述輸入字段預期值的提示信息。經過在<label>中添加class="sr-only",<label>標籤內的內容可隱藏。將 label 元素包裹在 .form-group 中能夠得到最好的排列。
2.<input>標籤用於盛裝用戶輸入內容，在該標籤中加入class="form-control"，邊框會出現圓角的效果，會好看一些。全部設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性爲 width: 100%;。經過type屬性規定輸入類型。
效果圖爲

3.若將表單設置爲內聯表單（內聯就是放在html頁面內部的樣式表，外聯就是與html頁面分離的外部樣式表。內聯的直接寫在頁面裏，外聯的須要引入）只需在<form>中添加class="form-inline"
效果圖爲

二.最多見的水平表單形式，代碼以下：

與上面代碼比較一下便知，其實就是將<form>標籤中的class更改成class="form-horizontal"，變爲水平表單，即<label>標籤的內容和輸入框是水平方向的。效果圖爲

由上圖可知，輸入框不對稱很差看，下面咱們利用bootstrap提供的柵格系統將它們重定位，代碼以下：

咱們知道，整個屏幕能承載的柵格是12個單元。在這裏咱們給<label>分配了兩個單元，即class="col-lg-2"（針對於手機是"col-xs-2"，針對於pad是"col-sm-2"，針對於小型顯示器是"col-md-2"，針對於大型顯示器是"col-lg-2"）咱們給<input>盛裝在<div>中，分配10個單元，即class="col-lg-10"。上述代碼對應的效果圖爲

咱們在加上覆選框和一個登陸按鈕，代碼以下：

經過設置class="col-lg-offset-2 col-lg-10"將佔有10個單元的柵格向右移動兩個單元，這樣就能夠與上面輸入框對齊了。效果圖爲