<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- 视口 -->
<title>bootstrap表单</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
.glyphicon-search{
font-size: 13px;
color: gold;
/*在修改glyphicons的时候,
类名可以省却 glyphicons, 直接填入需要更改式样的图片名称.(glyphicon-search)
*/
}
#username022{
color: violet;
}
.glyphicon-home{
color:coral;
}
</style>
</head>
<body>
<h2>表单</h2>
<div class="container">
<div class="row">
<form action="">
<div class="form-group">
<!--
form-control 能够使输入框占据父集100%,类似于, button-block
-->
<label for="username"><span class="glyphicon glyphicon-user"></span>用户名:form-control</label>
<input type="text" name="" id="username" class="form-control">
<!-- 此处可以不用group包裹可达到同样效果, input分别使用group包裹更稳定. -->
<!-- <label for="password">密码:form-control</label>
<input type="text" name="" id="password" class="form-control"> -->
</div>
<div class="form-group">
<label for="password"><span class="glyphicon glyphicon-asterisk"></span>密码:form-control</label>
<input type="password" name="" id="password" class="form-control">
</div>
</form>
<br>
<br>
<form action="" class="form-inline">
<!-- form-inline 增加表单格式到form标签. -->
<div class="form-group">
<label for="username02"><span id="username022" class="glyphicon glyphicon-asterisk"></span>用户名:form-inline</label>
<input type="text" name="" id="username02" class="form-control">
</div>
<div class="form-group">
<label for="password02">密码:form-inline</label>
<input type="password" name="" id="password02" class="form-control">
</div>
</form>
<br>
<br>
<form action="" class="form-horizontal">
<!-- form-horizontal . 水平排列表格, 使表单元素可分row大小 -->
<div class="form-group">
<label for="username02" class="col-md-2">用户名:form-inline</label>
<div class="col-md-4">
<!-- 在表单中, 所有的input输入框,都需要再加一层包裹 不然大小分配对齐无用 -->
<input type="text" name="" id="username02" class="form-control col-md-4">
</div>
</div>
<div class="form-group">
<label for="password02" class=" col-md-2">密码:form-inline</label>
<div class="col-md-4">
<input type="password" name="" id="password02" class="form-control">
</div>
</div>
</form>
<br>
<form action="" class="form-horizontal">
<div class="form-group form-group-lg">
<label for="username02" class="col-md-2"><span class="glyphicon glyphicon-home"></span>地址:form-group-lg</label>
<div class="col-md-4">
<input type="text" name="" id="username02" class="form-control col-md-4">
</div>
</div>
<div class="form-group form-group-md">
<label for="password02" class=" col-md-2">邮编:form-group-md</label>
<div class="col-md-4">
<input type="password" name="" id="password02" class="form-control">
</div>
</div>
<div class="form-group form-group-xs">
<label for="password02" class=" col-md-2"><span class="glyphicon glyphicon-phone"></span>手机号:form-group-xs</label>
<div class="col-md-4">
<input type="password" name="" id="password02" class="form-control">
</div>
</div>
</form>
<form>
<div class="input-group">
<!--
input-group 组件, 能够使两个不同因素叠加在一起
-->
<input type="text" id="email" class="form-control col-md-3">
<span for="email" class="input-group-addon">@</span>
<input type="text" id="email" class="form-control">
</div>
<br>
</form>
<form action="">
<div class="input-group">
<input type="text" class="form-control">
<span class="btn btn-default input-group-addon">搜索</span>
<span class="btn btn-default input-group-addon">搜索</span>
</div>
</form>
<br>
<form action="">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-grop-btn">
<!-- 在使用按钮配合input框时候, 可以使用inputgroup-addon,也可以通过创建input-group-btn组,在中间增添按钮 -->
<button class="btn btn-info">搜索</button>
<!-- 通常做按钮使用三种标签:
input , a , button
-->
<button class="btn btn-info">
<span class="glyphicon glyphicon-search"></span>
<!-- glyphicon 字形图标 可以直接通过style进行修改式样. -->
</button>
</span>
</div>
</form>
<br>
</div>
</div>
</body>
</html>
