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