bootstrap 基础表单 内联表单 横向表单
bootstrap 基础表单 内联表单 横向表单
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head>
<body>
<p class="btn-primary">基础表单</p>
<form>
<fieldset>
<legend>User Login</legend>
<div class="form-group">
<label for="">User</label>
<input type="email" class="form-control" placeholder="this is email input">
</div>
<div class="form-group">
<label for="">Pass</label>
<input type="password" class="form-control" placeholder="this is for password">
</div>
<div class="checkbox">
<label for="">
<input type="checkbox">ABC</input>
</label>
</div>
<button type="submit" class="btn btn-default">Login</button>
</fieldset>
</form>
<p class="btn-primary">内联表单</p>
<form class="form-inline">
<div class="form-group">
<label for="">User</label>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="this is for user">
</div>
<div class="checkbox">
<label for="chk2">
<input type="checkbox">Remember Pass</label>
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
<p class="btn-primary">横向表单</p>
<form action="" class="form-horizontal" role="form">
<div class="form-group">
<label for="account" class="col-sm-2 control-label">UserName</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="account place holder">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label for="chk">
<input type="checkbox">remember me</label>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.js"></script>
</body>
</html>- 上一篇 »javascript基础。表单操作
- 下一篇 »java表单基础
相关推荐
Bootstrap常用表单布局
参考链接：https://blog.csdn.net/shuai_wy/article/details/78978023
时间：2023-06-17 14:16
