天天看點
傳回

Bootstrap響應式前端架構筆記四——表單

Bootstrap響應式前端架構筆記四——表單

一、基本表單樣式

    在Bootstrap架構中，可以為表單标簽添加form-control屬性來為其設定預設樣式，預設表單控件的寬度将充滿父容器标簽。需要注意，在布局表單時，可以為其設定一個label标簽用于說明，将label标簽的for屬性與表單标簽的id相對應，可以實作當使用者點選label标簽時使其對應的表單自動擷取輸入焦點。示例代碼如下：

<p>Bootstrap為預設的表單便簽添加了樣式</p>
		<form>
			<div class="form-group">
				<label for="exampleInputEmail1">Email address</label>
				<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">Password</label>
				<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
			</div>
			<div class="checkbox">
				<label>
				<input type="checkbox">性别
				</label>
			</div>	
			<button type="submit">送出</button>
		</form>

複制

需要注意，将label和表單标簽包裹在form-group類内，會自動進行間距的布局設定。效果如下：

Bootstrap響應式前端架構筆記四——表單

    預設情況下，label與表單元素的排列是豎直布局的，可以使用form-horizontal類來将其設定為水準布局，示例如下：

<p>使用from-horizontal類可以将label與表單進行水準排列，并可以結合栅格系統使用</p>
		<form class="form-horizontal" role="form">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2">Email</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2">Password</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">Sign in</button>
				</div>
			</div>
		</form>

複制

效果如下：

Bootstrap響應式前端架構筆記四——表單

二、選擇框與下拉清單

    HTML中有單選框和複選框兩種選擇框标簽。示例代碼如下：

<p>預設的單選框與複選框樣式</p>
		<p>複選框</p>
		<div class="checkbox">
		<label>
			<input type="checkbox" name="" id="" value="" />
			足球
		</label>
		</div>
		<div class="checkbox">
		<label>
			<input type="checkbox" name="" id="" value="" />
			籃球
		</label>
		</div>
		<div class="checkbox">
		<label>
			<input type="checkbox" name="" id="" value="" />
			乒乓球
		</label>
		</div>
		<p>單選框</p>
		<div class="radio">
			<label>
				<input type="radio" name="sex"/>
				男
			</label>
		</div>
		<div class="radio">
			<label>
				<input type="radio" name="sex"/>
				女
			</label>
		</div>

複制

Bootstrap響應式前端架構筆記四——表單

可以看到，預設的單選框與複選框的排列也是垂直布局的，使用checkbox-inline類和radio-inline類可以實作水準排列布局，示例如下：

<p>水準排列的單選框與複選框樣式</p>
		<p>複選框</p>
		<div class="checkbox-inline">
			<label>
			<input type="checkbox" name="" id="" value="" />
			足球
		</label>
		</div>
		<div class="checkbox-inline">
			<label>
			<input type="checkbox" name="" id="" value="" />
			籃球
		</label>
		</div>
		<div class="checkbox-inline">
			<label>
			<input type="checkbox" name="" id="" value="" />
			乒乓球
		</label>
		</div>
		<p>單選框</p>
		<div class="radio-inline">
			<label>
				<input type="radio" name="sex"/>
				男
			</label>
		</div>
		<div class="radio-inline">
			<label>
				<input type="radio" name="sex"/>
				女
			</label>
		</div>

複制

效果如下圖：

Bootstrap響應式前端架構筆記四——表單

    Bootstrap架構中預設的下拉清單樣式示例如下：

<p>預設的下拉清單</p>
		<select class="form-control">
			<option>上海</option>
			<option>北京</option>
			<option>鄭州</option>
			<option>深圳</option>
			<option>廣州</option>
		</select>

複制

效果如下：

Bootstrap響應式前端架構筆記四——表單

開發者也可以通過添加multiple參數的方式來進行下拉選項的全部展示，示例如下：

<p>使用multiple參數來進行下拉選項的全部展示</p>
		<select multiple class="form-control">
			<option>上海</option>
			<option>北京</option>
			<option>鄭州</option>
			<option>深圳</option>
			<option>廣州</option>
		</select>

複制

效果如下：

Bootstrap響應式前端架構筆記四——表單

三、表單狀态

    為表單元素添加disabled屬性來将表單設定為禁用狀态，示例如下：

<p>禁用表單</p>
		<input class="form-control" placeholder="被禁用的輸入框" type="text" disabled/>
		<div  class="checkbox">
		<label>
			<input type="checkbox" disabled/>被禁用的複選框
		</label>
		</div>

複制

效果如下：

Bootstrap響應式前端架構筆記四——表單

    如果在開發中需要使一組的表單元素全部處于禁用狀态，可以使用fieldset标簽進行包裹，并為fieldset标簽添加disabled屬性。示例如下：

<p>進行一組表單元素的禁用</p>
		<form>
			<fieldset disabled>
				<div class="form-group">
					<label for="disabledTextInput">被禁用的輸入框</label>
					<input type="text" id="disabledTextInput" class="form-control" placeholder="被禁用的輸入框">
				</div>
				<div class="form-group">
					<label for="disabledSelect">被禁用的下拉菜單</label>
					<select id="disabledSelect" class="form-control">
						<option>被禁用的下拉菜單</option>
					</select>
				</div>
				<div class="checkbox">
					<label>
        <input type="checkbox"> 被禁用的選擇框
      </label>
				</div>
				<button type="submit" class="btn btn-primary">被禁用的按鈕</button>
			</fieldset>
		</form>

複制

效果如下：

Bootstrap響應式前端架構筆記四——表單

Bootstrap中也定義好了一些校驗狀态的樣式，例如警告，成功，錯誤等狀态，為表單元素的父标簽添加這些狀态類即可，示例如下：

<p>校驗狀态</p>
		<form>
			<div class="has-error form-group">
				<input class="form-control" placeholder="錯誤狀态的表單" type="text" />
			</div>
			<div class="has-success form-group">
				<input class="form-control" placeholder="成功狀态的表單" type="text" />
			</div>
			<div class="has-warning form-group">
				<input class="form-control" placeholder="警告狀态的表單" type="text" />
			</div>
		</form>

複制

效果如下：

Bootstrap響應式前端架構筆記四——表單

開發者也可以為驗證表單的右側添加一個小圖示，前提需要為表單元素的父元素設定has-feedback類，示例如下：

<p>為表單添加右側icon</p>
		<form>
			<div class="form-group has-error has-feedback ">
				<input class="form-control" placeholder="錯誤狀态的表單" type="text" />
				<span class="glyphicon glyphicon-eur form-control-feedback"></span>
			</div>
			<div class="has-success form-group has-feedback">
				<input class="form-control" placeholder="成功狀态的表單" type="text" />
				<span class="glyphicon glyphicon-ok form-control-feedback"></span>
			</div>
			<div class="has-warning form-group has-feedback">
				<input class="form-control" placeholder="警告狀态的表單" type="text" />
				<span class="glyphicon glyphicon-off form-control-feedback"></span>
			</div>
		</form>

複制

效果如下：

Bootstrap響應式前端架構筆記四——表單

   另外，本篇部落格中所有的執行個體代碼及顯示效果，在如下位址中，需要的可以自行對照學習。

http://zyhshao.github.io/bootStrapDemo/form.html。

前端學習新人，有志同道合的朋友，歡迎交流與指導，QQ群:541458536
上一篇: VUE一些積累 原
下一篇: 簡單MD5加密類