學習記錄(表單支持的各種控件)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表單支持的控件</title>
<!--<link rel="stylesheet" href="bootstrap.min.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
<!--輸入框-->
<input type="text" class="form-control">
<hr>
<!--文本域-->
<textarea class="form-control" rows="5">Hello</textarea>
<hr>
<!--複選、多選按鈕-->
<div class="checkbox">
<label>
<input type="checkbox" value="">
橘子
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
蘋果
</label>
</div>
<hr>
<!--單選按鈕,需指定相同的name-->
<div class="radio">
<label>
<input name="optionsRadios" type="radio" checked>
男
</label>
</div>
<div class="radio">
<label>
<input name="optionsRadios" type="radio" checked>
女
</label>
</div>
<hr>
<!--下拉列表 multiple可以讓選項全部在表單中出現-->
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!--靜態控件-->
<!--p 添加form-control-static-->
<p class="form-control-static">請按照我的格式輸入:[email protected]</p>
<!--焦點狀態-->
<!--不允許使用狀態 disabled
如果要使整個表單都處於該狀態,則代碼如下:
<form role="form">
<fieldset disabled>
表單內容
</fieldset>
</form>
-->
<input class="form-control" type="text" placeholder="hello" disabled>
<!--只讀狀態 readonly-->
<input class="form-control" type="text" readonly>
<!--輸入結果狀態-->
<div class="form-group has-warning">
<label>警告</label>
<input class="form-control" type="text">
</div>
<div class="form-group has-success">
<label>成功</label>
<input class="form-control" type="text">
</div>
<div class="form-group has-error">
<label>失敗</label>
<input class="form-control" type="text">
</div>
<hr>
<!--添加圖標-->
<div class="form-group has-warning has-feedback col-xs-5">
<label>警告</label>
<input class="form-control" type="text">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-success">
<label>成功</label>
<input class="form-control" type="text">
</div>
<div class="form-group has-error has-feedback">
<label>失敗</label>
<input class="form-control" type="text">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<!--控制尺寸,柵格系統-->
<!--輔助文本-->
</form>
</body>
</html>