首页 > 代码库 > bootstarp表单
bootstarp表单
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="http://www.mamicode.com/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="input-group">
<span class="input-group-addon">用户名</span>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group input-group-sm">
<span class="input-group-addon">密码</span>
<input type="text" class="form-control">
</div>
<br>
<button class="btn btn-success">提交</button>
<button class="btn btn-warning">取消</button>
<hr>
<form action="" method="post">
<div class="form-group">
<label for="idd">e-mail</label>
<input type="email" class="form-control" id="idd" placeholder="username"><br>
</div>
<div class="form-group">
<label for="iid">密码</label>
<input type="passwd" class="form-control" id="iid" placeholder="userpwd"><br>
</div>
<div>
<label for="ii">file</label>
<input type="file" id="ii">
<p class="help-block">text here.</p>
</div>
<div class="checkbox">
<label for="">
<input type="checkbox">check me out
</label>
</div>
<button type="sunmit" class="btn btn-default">submit</button>
</form>
<hr>
<br>
<!-- 输入框 type 属性的输入包括大部分控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。 <input type="控件" class="form-control" placeholder="username">-->
<!-- 内联表单 为 <form> 元素添加 .form-inline。 -->
<!-- 水平排列的表单<form> 元素添加 .form-horizontal -->
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="idd">e-mail</label>
<input type="email" class="form-control" id="idd" placeholder="username">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input type="passwd" class="form-control" placeholder="userpwd">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="ii">file</label>
<input type="file" class="form-group" id="ii">
<p class="help-block">text here.</p>
</div>
<div class="checkbox">
<label for="">
<input type="checkbox">check me out
</label>
</div>
<button type="sunmit" class="btn btn-default">submit</button>
</form>
<!-- 静态控件 -->
<form action="" class="form-horizontal" role="form">
<div class="form-group">
<label for="" class="col-sm-3 control-label">email</label>
<div class="col-sm-9">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group hsa-success has-feedback">
<label for="1" class="col-sm-3 control-label">passwd</label>
<div class="col-sm-9">
<input type="passwd" id="1" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
</form>
<br>
<!-- 为被禁用的输入框设置 disabled -->
<div class="form-group">
<input type="text" class="form-control" placeholder="userpwd" disabled>
</div>
<!-- 为只读输入框设置 readonly 属性 -->
<div class="form-group">
<input type="text" class="form-control" placeholder="email" readonly>
</div>
<!-- 校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success -->
<!-- 添加额外的图标<div>.has-feedback 类并添加<span class="图标名称+form-control-feedback"></span> -->
<div class="form-group has-success has-feedback">
<label for="11" class="control-label">input with success</label>
<input type="text" class="form-control" id="11">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label for="22" class="control-label">input with warning</label>
<input type="text" class="form-control" id="22">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label for="22" class="control-label">input with error</label>
<input type="text" class="form-control" id="22">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="checkbox has-success">
<label for="">
<input type="checkbox">check with success
</label>
</div>
<div class="has-error">
<div class="radio">
<label for="">
<input type="radio">radio with error
</label>
</div>
</div>
<!-- 控件尺寸通过 .input-lg、xs、sm、 类高度尺寸 -->
<!-- 水平排列的表单组的尺寸通过添加 .form-group-lg 或 .form-group-sm 类 -->
<div class="form-horizontal" role="form">
<div class="form-group input-lg">
<label for="111" class="col-sm-3 control-label">inupt lgsmxsmd</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="111">
</div>
</div>
<div class="form-group form-control-lg">
<label for="111" class="col-sm-3 control-label">inupt lgsmxsmd</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="111">
</div>
</div>
<div class="form-group input form-control-sm">
<label for="1" class="col-sm-3 control-label">passwd</label>
<div class="col-sm-9">
<input type="passwd" id="1" class="form-control">
<span class="help-block">辅助文本辅助文本辅助文本辅助文本辅助文本</span><!-- 辅助文本.help-block -->
</div>
</div>
</div>
<!-- 调整列（column）尺寸 -->
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder="col-xs-2">
</div>
</div>
<div class="row">
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="col-xs-3">
</div>
</div>
<div class="row">
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="col-xs-4">
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://www.mamicode.com/js/bootstrap.min.js"></script>
</body>
</html>
bootstarp表单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。