<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- form-inline类使表单水平呈现-->
<form >
<!-- 所有设置了form-control类的input,textarea,select,元素都将被默认为width:100% -->
<div class="form-group">
<label for="exampleInputEmail">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="input">
</div>
<div class="form-group">
<label for="exampleInputEmail">Email address</label>
<input type="password" class="form-control" id="exampleInputEmail" placeholder="input">
</div>
<div class="form-group">
<input type="text" id="idCard" aria-label="身份证">
<p class="help-block">Example block-level </p>
</div>
<div class="form-group">
<label for="idCard">身份证</label>
<input type="text" id="idCard" >
<p class="help-block">Example block-level </p>
</div>
<label for="hello1">hello</label><input type="text" id="hello"><br>
<label for="jiang">hello</label><input type="text" id="jiang"><br>
<!-- sr-only将label标签进行隐藏-->
<!-- laria-abel 和aria-labelledby的区别-->
<!-- for标签属性的作用 -->
</form>
<br>
<form class="form-inline">
<div class="form-group">
<label class="src-only" for="exampleInputAmount">Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control " id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">@</div>
</div>
</div>
<button type="submit" class="btn btn-primary">search</button>
</form>
<br>
<!-- 水平排列的表单control-label文本采用右对齐 -->
<form class="form-horizontal" >
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="password">
</div>
</div>
</form>
<!-- 输入框的属性text password datetime datetime-local date month time week number email week url tel color-->
<!-- disabled表示禁用 -->
<textarea class="form-control" rows="3"></textarea><br><br>
<div class="checkbox class="checkbox-inline" ">
<label class="checkbox-inline"><input type="checkbox" value="">choose 1</label>
</div>
<div class="checkbox class="checkbox-inline" ">
<label class="checkbox-inline"><input type="checkbox" value="">choose 2</label>
</div>
<div class="checkbox class="checkbox-inline" ">
<label class="checkbox-inline"><input type="checkbox" value="">choose 3</label>
</div>
<!-- 横向排列控件 -->
<br><br><br>
<label class="checkbox-inline"><input type="checkbox" value="">choose 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">choose 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">choose 3</label>
<!-- 不带label文本的checkbox和radio -->
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aira-label="checkBox">
</label>
</div>
<div class="radio">
<label>
<input type="radio" id="blankRadio" value="option1" aria-label="checkRadio">
</label>
</div>
<!-- 下拉列表 -->
<select multiple class="form-control">
<option>1111</option>
<option>2222</option>
<option>3333</option>
<option>4444</option>
<option>5555</option>
</select>
<br><br><br>
<!-- 将纯文本和label元素放置到同一行，给p元素加form-control-static类 -->
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword">Email</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" disabled="">
</div>
</div>
</form>
</body>
</html>
浙公网安备 33010602011771号