表單
Paste_Image.png
-
form-group ： 表單組樣式：將<label>和表單元素包含其中，可以獲得更好的排列。
-
form-control ： 表單元素樣式，常用于<input><textarea><select>元素。
-
form-inline ： 內聯表單樣式（用于<form>元素）： 可以使元素一行排列。
-
checkbox ： 復選框樣式
-
radio ： 單選框樣式
-
disabled ： 可以禁用單選框或復選框選項的文本。
-
form-horizontal ： 水平排列的表單（用于<form>元素）
-
sr-only ： 可以用于隱藏元素。
-
checkbox-inline ： 控制多個復選框元素在同一行顯示。
-
radio-inline ： 控制多個單選框元素在同一行顯示。
<!DOCTYPE html>
<html>
<head>
<title>BootstrapFormDemo</title>
<meta charset="utf-8">
<mata http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="padding:50px;background-color:#ccc;">
<div class="container" style="padding:50px;background-color:#fff;">
<form class="form-horizontal">
<div class="form-group">
<!-- for與input中的id保持一致，可以使得在點擊label時，也可以獲取焦點。 -->
<label class="col-md-2 control-label" for="username">用戶名：</label>
<div class="col-md-10">
<input type="text" id="username" placeholder="用戶名" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="password">密碼：</label>
<div class="col-md-10">
<input type="text" id="password" placeholder="請輸入你的密碼" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">上傳圖片:</label>
<div class="col-md-10">
<input type="file">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">興趣愛好：</label>
<div class="col-md-10">
<label class="checkbox-inline"><input type="checkbox" value="畫畫">畫畫</label>
<label class="checkbox-inline"><input type="checkbox" value="音樂">音樂</label>
<label class="checkbox-inline"><input type="checkbox" value="體育">體育</label>
<label class="checkbox-inline"><input type="checkbox" value="唱歌">唱歌</label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">學歷：</label>
<div class="col-md-10">
<label class="radio-inline"><input type="radio">高中</input></label>
<label class="radio-inline"><input type="radio">大專</input></label>
<label class="radio-inline"><input type="radio">本科</input></label>
<label class="radio-inline"><input type="radio">研究生</input></label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">個人簡介：</label>
<div class="col-md-10">
<textarea class="form-control" rows="5" placeholder="請輸入你的個人信息"></textarea>
</div>
</div>
<div class="col-md-offset-2">
<button class="btn btn-success btn-lg" type="button">提交</button>
</div>
</form>
</div>
</body>
</html>
<!-- <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
總結
-
input（text, file）,textarea
Paste_Image.png
div.container >
form.horizontal >
div.form-group >
label.col-md-2.control-label +
div.col-md-10 >
input.form-control
-
單選框（radio的name必須要一致才可以）和復選框（默認選中：checked）
排版中，單選框和復選框都要套在<label>內部
Paste_Image.png
