表单
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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//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="//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
网友评论