bootstrap-7

基礎表單：

　　表單中常見的元素主要有：文本輸入框、下拉選擇框、單選按鈕、複選按鈕、文本框和按鈕等。

　　bootstrap並未對齊作太多的的定製化效果設計，僅僅對錶單內的fieldset、legend、label標籤進行了定製。主要將這些元素的margin 、padding、border等進行了細化設置。

　　固然表單除了這幾個元素以外，還有input、select、textarea等元素，在bootstrap框架中，經過定製了一個類名form-control，也就是說，若是這幾個元素使用了類名form-control，將會實現一些設計上的定製效果。

　　1.寬度變爲100%

　　2.設置了一個淺灰色的邊框

　　3.具備4px的圓角

　　4.設置陰影效果，而且元素獲得焦點以後，陰影和邊框效果會有變化

　　5.設置了placeholder的顏色爲#999

 

水平表單：（標籤居左，表單控件居右）

　　bootstrap框架中要實現水平表單效果，必須知足一下兩條件：

　　　　1.在<form>元素是使用類名form-horizontal

　　　　2.配個bootstrap框架的網格系統

　　在form元素上使用類名form-horizontal主要有一下幾個做用：

　　　　1.設置了表單空間的padding和margin值

　　　　2.改變form-group的表現形式

 

內聯表單：

　　　　有時候咱們須要把表單的控件都在一行內顯示，在bootstrap框架中實現這樣的表單效果是垂手可得的，你只須要在<form>元素中添加類名「form-inline」便可。若是你要在input前面添加一個label標籤時，會致使input換行顯示。若是你必須添加這樣的一個label標籤，而且不想讓input換行，你須要將lable標籤放在容器「form-group」中。

 

表單控件（輸入框input）：

　　在bootstrap中使用Input時必須添加type類型，若是沒有指定type類型，將沒法獲得正確的樣式，由於bootstrap框架都是經過input[type=""]。爲了讓控件在各類表單風格中格式不出錯，須要添加類名form-control.

 

表單控件（下拉選擇框select）

　　bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設置multiple屬性的值爲multiple

 

表單控件（文本域textarea）:

　　文本域和原始使用方法同樣，設置rows可定義其高度，設置cols能夠設置其寬度，可是若是textarea元素添加了類名form-control類名，則無需設置cols屬性。由於form-control樣式的表單控件寬度爲100%或auto.

 

表單控件（複選框checkbox和單選選擇按鈕radio）

　　無論是checkbox仍是radio都使用label包起來

　　checkbox連同label標籤放置在一個名爲「.checkbox」的容器內

　　radio連同label標籤放置在一個名爲.radio的容器內

　　

表單控件（複選框和單選按鈕水平排列）

　　1.若是checkbox須要水平排列，只須要在label標籤上添加類名「checkbox-inline」

　　2.若是radio須要水平排列，只須要在label標籤上添加類名「radio-inline」

　　

表單控件（按鈕）

　　input[type="submit"]

　　input[type="button"]

　　input[type="reset"]

　　<button>

　　.btn-primary .btn-success .btn-info .btn-warning .btn-danger

 

表單控件大小：

　　bootstrap框架提供了兩個不一樣的類名，用來控制表單控件的高度，這兩個類名是：

　　1.input-sm:讓控件比正常大小更小

　　2.input-lg:讓控件比正常大小更大

　　適用於input、textarea、select控件

 

表單控件狀態（焦點狀態）

　　焦點狀態是經過僞類：focus來實現，bootstrap框架中表單控件的焦點狀態刪除了outline的默認樣式，從新添加陰影效果。只須要在控件添加類名form-control.bootstrap框架中，file、radio、checkbox控件在焦點狀態下的效果與普通的input控件不太同樣。

 

表單控件（禁用狀態）

　　在相應的表單控件上添加了屬性「disabled」，和其餘表單的禁用狀態不一樣的是，bootstrap框架作了一些樣式風格的處理。

　　在使用了form-control表單控件中，樣式設置了禁用表單背景色爲灰色，並且手型變成了不許輸入的形狀，若是控件中不使用類名form-control,禁用的 控件只會有一個不許輸入的手型出來。

　　在bootstrap框架中，若是filedset設置了disables屬性，整個域都將處於被禁用狀態。

　　對於整個禁用的域中，若是legend中有輸入框的話，這個輸入框是沒法被禁用的。　

 

表單控件狀態（驗證狀態）

　　bootstrap中提供了這幾種效果：

　　1.has-warning:警告狀態（黃色）

　　2.has-error:錯誤狀態（紅色）　

　　3.has-success:成功狀態（綠色）

　　在表單驗證的時候，不一樣的狀態可能對應不一樣的icon,好比has-feedback,has-error,has-warnning,has-success

 

表單提示信息：

　　在bootstrap框架中，使用了一個help-block樣式，將提示信息以塊狀顯示，而且顯示在控件底部。

　　在bootstrap v2.x版本中還提供了一個行內提示信息，其使用了類名help-inline，通常提示信息顯示在空間的後面，也就是同一水平顯示。若是你想在bootstrap v3.x版本也有這樣的效果，你能夠添加代碼

.help-inline{
  display:inline-block;
  padding-left:5px;
  color: #737373;
}

　　若是你不想在bootstrap.css增長本身的代碼，並且設計又有這種的需求，那麼只能藉助於bootstrap的網格系統。