bootstrap 基礎知識(表單)
六:表單
1、input輸入框(type=text/password/email)
2、input選擇框(type=“checkbox/radio”)
在Bootstrap框架中,主要藉助“.checkbox”和“.radio”樣式,來處理複選框、單選按鈕與標籤的對齊方式。
注:
1、不管是checkbox還是radio都使用label包起來了
2、checkbox連同label標籤放置在一個名為“.checkbox”的容器內
3、radio連同label標籤放置在一個名為“.radio”的容器內
4、如果checkbox需要水平排列,只需要在label標籤上新增類名“checkbox-inline”,
如果radio需要水平排列,只需要在label標籤上新增類名“radio-inline”
3、input(type=select/textarea)
注:multiple表多行選擇
4、按鈕
.btn 是基本的按鈕樣式
.btn-default 是預設的按鈕樣式(實際只修改了按鈕的背景、邊框等顏色)
注意:雖然在Bootstrap框架中使用任何標籤元素都可以實現按鈕風格,但個人並不建議這樣使用,為了避免瀏覽器相容性問題強烈建議使用button或a標籤來製作按鈕。
但有時候在製作按鈕的時候需要按鈕寬度充滿整個父容器(width:100%)
使用方法和前面的類似,只需要在原按鈕類名上新增“.btn-block
按鈕大小
按鈕的狀態
在Bootstrap框架中,要禁用按鈕有兩種實現方式:(2030行~第2039)
方法1:在標籤中新增disabled屬性
方法2:在元素標籤中新增類名“disabled”,其中新增類名的disabled只是在樣式上顯示為禁止,行為上並沒有真正禁止
5、其他
=>控制元件大小
=》控制元件狀態
1)表單的禁用狀態
新增disabled屬性即可
在Bootstrap框架中,如果fieldset設定了disabled屬性,整個域都將處於被禁用狀態。
如果legend中有輸入框的話,這個輸入框是無法被禁用的。
2)表單的驗證狀態(使用的時候只需要在form-group容器上對應新增狀態類名)
.has-warning:警告狀態(黃色)
.has-error:錯誤狀態(紅色)
.has-success:成功狀態(綠色)
如果你想讓表單在對應的狀態下顯示 icon 出來,只需要在對應的狀態下新增類名“has-feedback”。請注意,此類名要與“has-error”、“has-warning”和“has-success”在一起:
、
若想資訊在輸入框之後,利用網格結構(在Bootstrap V2.x版本中有help-inline的類名)
.help-inline{ display:inline-block; padding-left:5px; color: #737373; }
=》實現水平表單效果(文字與文字框水平),必須滿足以下兩個條件:
1)在<form>元素是使用類名“form-horizontal”。
2)配合Bootstrap框架的網格系統。
=》實現內聯表單效果(所有控制元件水平)