3-1 基礎表單
單中常見的元素主要包括:文本輸入框、下拉選擇框、單選按鈕、複選按鈕、文本域和按鈕等。
在Bootstrap框架中,通過定製了一個類名`form-control`,也就是說,如果這幾個元素使用了類名“form-control”,將會實現一些設計上的定製效果。
1、寬度變成了100%
2、設置了一個淺灰色(#ccc)的邊框
3、具有4px的圓角
4、設置陰影效果,並且元素得到焦點之時,陰影和邊框效果會有所變化
5、設置了placeholder的顏色爲#999
3-2內聯表單
在Bootstrap框架中實現內聯表單,只需要在<form>元素中添加類名“form-inline”即可。如果你要在input前面添加一個label標籤時,會導致input換行顯示。如果你必須添加這樣的一個label標籤,並且不想讓input換行,你需要將label標籤也放在容器“form-group”中.
3-3表單控件(輸入框input)
每一個表單都是由表單控件組成。離開了控件,表單就失去了意義。在Bootstrap中使用input時也必須添加type類型,如果沒有指定type類型,將無法得到正確的樣式,因爲Bootstrap框架都是通過input[type=“?”](其中?號代表type類型,比如說text類型,對應的是input[type=“text”])的形式來定義樣式的。
3-4表單控件(複選框和單選框按鈕水平排列)
複選框和單選按鈕有時需要水平排列:
1、如果checkbox需要水平排列,只需要在label標籤上添加類名“checkbox-inline”
2、如果radio需要水平排列,只需要在label標籤上添加類名“radio-inline”
*要讓控件在焦點狀態下有樣式效果,需要給控件添加類名“form-control”
3-5表單控件狀態(禁用狀態)
Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的,在相應的表單控件上添加屬性“disabled”。Bootstrap框架做了一些樣式風格的處理:使用方法爲:只需要在需要禁用的表單控件上加上“disabled”即可
3-6 form-group的作用
基本的表單結構是 Bootstrap 自帶的,個別的表單控件自動接收一些全局樣式。下面列出了創建基本表單的步驟:
- 向父 <form> 元素添加 role="form"。
- 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
-
3-7 control-label的作用
-
col-sm-2指的是12柵格系統中在小屏幕下佔兩列, control-label則指的是控制標籤(label)樣式的一個類,一般用於控制表單控件裏的樣式
例如這個代碼:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="請輸入你的密碼“>
</div>
</div>
</form>
意思就是密碼這兩個字佔兩列,密碼輸入框佔10列,一共佔12列。如果不加control-label,這兩個元素就總是對不齊
-